map、reduce处理数据结构及常见案例

随着三大前端框架和小程序的流行，MVVM大行其道，而其中的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用，因此处理数据结构就变得非常重要了。

前端发展的历史

在上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称HTML，并在1993年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。

最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服务器上的html文件。浏览器请求某个URL时，Web服务器把对应的html文件扔给浏览器，就可以显示html文件的内容了。如果要针对不同的用户显示不同的页面，显然不可能给成千上万的用户准备好成千上万的不同的html文件，所以，服务器就需要针对不同的用户，动态生成不同的html文件。一个最直接的想法就是利用C、C++这些编程语言，直接向浏览器输出拼接后的字符串。这种技术被称为CGI：Common Gateway Interface。

很显然，复杂的HTML是不可能通过拼字符串得到的。于是，人们又发现，其实拼字符串的时候，大多数字符串都是HTML片段，是不变的，变化的只有少数和用户相关的数据，所以，又出现了新的创建 动态HTML的方式：ASP、JSP和PHP——分别由微软、SUN和开源社区开发。

但是，一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是重新向服务器获取一份新的HTML内容。如果浏览器想要自己修改HTML页面的内容，就需要等到1995年年底， JavaScript 被引入到浏览器。

有了JavaScript后，浏览器就可以运行JavaScript，然后，对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现。用JavaScript在浏览器中操作HTML，经历了若干发展阶段：

• 第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API：
• 第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：
• 第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，仅仅用jQuery是远远不够的。MVVM 模型应运而生 :)。

MVVM诞生

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

前端目前的MVVM框架就是我们所熟悉的三个了，ng,react,vue。另外小程序也是借用了vue的思想，MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用，因此处理数据结构就变得非常重要了:)。

高阶函数和ES6

ES6 有很多新特性，解构、展开运算符、箭头函数、模板字符串、模块等等，这些让我们处理数据结构非常舒服。而高阶函数中的map,reduce,filter也是我们常用的。

• some方法对数组中每一项运行给定函数，如果该函数对任意一项返回true，则返回true
  
• every方法对数组中每一项运行给定函数，如果该函数对所有项返回true，则返回true

let arr=[1,2,3,4,5,4,3,2,1]; let res=arr.some((item,index,array)=>{ return item>3; }); let res1=arr.every((item,index,array)=>{ return item>3; }); console.log(res);//true console.log(res1);//false 

• find用于找出第一个符合条件的数组成员.
  

 [1, 5, 10, 15].find((item, index, arr)=> { return item > 9; }) // 10 

• filter方法对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组
  

 let arr=[1,2,3,4,5,4,3,2,1]; let res=arr.filter((item,index,array)=>{ return item>3; }); console.log(res);// [4, 5, 4] 

• map方法返回一个数组，这个数组是在原始数组的对应项上运行传入函数的结果
  

有返回值 let arr=[1,2,3,4,5,4,3,2,1]; let res=arr.map((item,index,array)=>{ return item*2; }); console.log(res);// [2, 4, 6, 8, 10, 8, 6, 4, 2] 无返回值，当数组里面的个体是对象的时候，可以不返回，即当作for循环使用 let arr = [{ data: 1 }, { data: 2 }]; arr.map((item, index, array) => { item.data = item.data * 2; }); console.log(arr);// [{ data: 2 }, { data: 4 }] 例子2： let kvArray = [{ key: 1, value: 10 },{ key: 2, value: 20 },{ key: 3, value: 30 }]; let reformattedArray = kvArray.map(function (obj) { let rObj = {}; rObj[obj.key] = obj.value; return rObj; }); console.log(reformattedArray)//[{1: 10}, {2: 20}, {3: 30}] //优化写法，如果箭头函数直接返回一个对象，必须在对象外面加上括号 let reformattedArray=kvArray.map(val => ({ [val.key]: val.value }))

• reduce()和reduceRight()，这两个方法都会迭代数组中的所有项，然后构建一个最终返回的值
  • reduce()方法从数组的第一项开始，逐个遍历到最后，reduceRight()从数组的最后一项开始，向前遍历到第一项
  • 这两个方法的函数都接受四个参数：前一个值、当前值、项的索引和数组对象
    ```js
    let arr=[1,2,3,4,5];
    let res=arr.reduce((prev,cur,index,array)=>{
    return prev+cur;
    });
    let res1=arr.reduceRight((prev,cur,index,array)=>{
    return prev+cur;
    });
    console.log("reduce:"+res);//15
    console.log("reduceRight:"+res1);//15

例子2：统计出现次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames)//{ 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

例子3：对象中提取部分属性
const pick = (obj, arr) =>
arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {});

let obj={a:1,b:2,c:3,d:4,e:5} let obj2 = pick(obj, ['a', 'd', 'e'])//{a: 1, d: 4, e: 5}

+ 解构，展开运算符

let data = { a: 1, b: 2, c: 3 } let { a, ...other } = data console.log(a)//1 console.log({ d: 4, ...other })//{d: 4, b: 2, c: 3} //react redux中常见 beginSubmitting(state) { return { ...state, isSubmitting: true }; }, //小程序中常见 let { inputValue, ...other } = that.data; inputValue = 123; that.setData({inputValue},()=>{ that.something(other) })

```

小程序案例

• 最近做小程序，发现一个很常见的需求：
  • 一个滚动的tab页，展示list内容,下拉加载更多
  • 一个详情页，不传id就新建，可以编辑。传了id就是展示

• 类似这种

• 拿到需求脑袋里的数据结构大概是这样
  

• 代码
  list页面

<component-navigations backShow="{{true}}" title="DemoList"></component-navigations> <view class="pages"> <scroll-view scroll-x="true" class="tabHd"> <view wx:for="{{arr}}" wx:key="{{index}}" data-current="{{index}}" class="tabHd_item {{currentTab==index?'active':''}}" bindtap="swichNav"> {{item.type}} </view> </scroll-view> <swiper class="tabBd" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for="{{arr}}" wx:key="{{index1}}" wx:for-index="index1" wx:for-item="item1" class="tabBd_item"> <scroll-view scroll-y bindscrolltolower="lower" class="tabBdItem_content"> <view bindtap="goDetail" data-id="{{item2.Id}}" wx:for="{{item1.child}}" wx:key="{{index2}}" wx:for-index="index2" wx:for-item="item2" class="tabBdItem_card"> <image class="tabBdItem_card__pic" src="{{item2.UploadPictures}}" mode='aspectFill'/> <view class="tabBdItem_card__txt"> <text class="tabBdItem_card__title">{{item2.Title}}</text> <text class="tabBdItem_card__date">{{item2.CreatedTime}}</text> </view> </view> <view wx:if="{{!item1.PageMore}}" class="tabBdItem_card__nomore">没有更多了</view> </scroll-view> </swiper-item> </swiper> <view class="add" bindtap="add"><text>+</text></view> </view>

.pages{ padding: 65px 0 0 0; height:100vh; box-sizing:border-box; font-size: 28rpx; color: #222; display:flex; flex-direction: column; background: #F8F9FD; } /* hd */ .tabHd{ border-bottom: 2rpx solid #eee; height: 83rpx; } .tabHd_item{ display: inline-block; width: 50%; text-align: center; line-height: 80rpx; margin-bottom: -2rpx; background: #fff; } .tabHd_item.active{ border-bottom: 3rpx solid #0490DB; } /* bd */ .tabBd{ flex: 1; } .tabBd_item{ overflow: scroll; padding: 20rpx; box-sizing: border-box; } .tabBdItem_content{ height: 100%; } .tabBdItem_card{ font-size: 0; margin-bottom: 20rpx; } .tabBdItem_card__pic{ width: 100%; height: 350rpx; border-top-left-radius:20rpx; border-top-right-radius:20rpx; border:2rpx solid #eee; box-sizing:border-box; border-bottom:none; } .tabBdItem_card__txt{ display: flex; justify-content: space-between; align-items:center; height:98rpx; background:#fff; padding:0 20rpx; border-bottom-left-radius:20rpx; border-bottom-right-radius:20rpx; border:2rpx solid #eee; border-top: none; } .tabBdItem_card__title{ font-size: 30rpx; color: #222222; } .tabBdItem_card__date{ font-size: 24rpx; color:#A5A5A5; } .tabBdItem_card__nomore{ text-align: center; } .add{ position:fixed; bottom:64rpx; right: 64rpx; width: 120rpx; height: 120rpx; text-align: center; background: #0490DB; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 60rpx; }

let that = null; let util = require('../../../utils/util'); Page({ data: { arr: null, currentTab: 0, }, onLoad: function (options) { that = this; that.init(); }, onReady: function () { }, onShow: function () { }, onShareAppMessage: function () { }, // 滚动切换标签样式 switchTab: function (e) { let { arr, currentTab } = that.data; that.setData({ currentTab: e.detail.current }, () => { if (arr[currentTab]["init"]) { that.renderArr() } }); }, // 点击标题切换当前页时改变样式 swichNav: function (e) { var cur = e.target.dataset.current; if (that.data.currentTab == cur) { return false } else { that.setData({ currentTab: cur }) } }, init: function () {//重置 let arr = [ { type: '未处理', PageIndex: 1, PageSize: 10, PageMore: true, Status: 0, init: true, child: [] }, { type: '已处理', PageIndex: 1, PageSize: 10, PageMore: true, Status: 1, init: true, child: [] } ]; that.setData({ arr }, () => { that.renderArr(); }) }, renderArr: function () {//渲染 let { currentTab, arr } = that.data; let { PageMore, PageSize, PageIndex, Status, child } = arr[currentTab]; arr[currentTab]["init"] = false; if (PageMore) { wx.showLoading({ title: '加载中', mask: true }) // util.commonAjax( // 'api/Wecha/GetReadily', // 1, // { // PageSize, PageIndex, Status // } // ) // .then((res) => { // let newArr = res.data; // arr[currentTab]["child"] = child.concat(newArr) // arr[currentTab]["PageMore"] = newArr.length == PageSize ? true : false; // that.setData({ arr }, () => { // wx.hideLoading() // }) // }) // .catch((rej) => { // console.log(rej) // that.setData({ arr }, () => { // wx.hideLoading() // }) // }) setTimeout(() => { let newArr = that.mockFetch({ PageSize, PageIndex, Status }).data; arr[currentTab]["child"] = child.concat(newArr) arr[currentTab]["PageMore"] = newArr.length == PageSize ? true : false; that.setData({ arr }, () => { wx.hideLoading() }) }, 1000); } }, mockFetch: function (datas) {//模拟请求 let { PageSize, PageIndex, Status } = datas; let commonObj = null; let num = null; let List = []; if (Status) { commonObj = { Title: '海外业务反馈', CreatedTime: '2017-01-01', Id: 1, UploadPictures: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533999968716&di=e188f89b8c2a6c89f8b8c376737feb99&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fbb1c3dcb07c096adf6cc4122e6fafaa6f620fa58.png' } } else { commonObj = { Title: '海外业务反馈', CreatedTime: '2017-01-01', Id: 1, UploadPictures: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534594896&di=b0d2b207488522b5f7cc446cb60ac7e3&imgtype=jpg&er=1&src=http%3A%2F%2Fimages5.fanpop.com%2Fimage%2Fphotos%2F26000000%2FSaber-Screencap-saber-arthuria-pendragon-funclub-26095187-1920-1080.jpg' } } if (PageIndex == 3) { num = 4 } else if (PageIndex > 3) { num = 0 } else { num = 10 } for (let i = 0; i < 10; i++) { List.push(commonObj) } List = List.slice(0, num); return { data: List } }, lower: function () {//加载更多 let { arr, currentTab } = that.data; let { PageIndex, PageMore } = arr[currentTab]; if (PageMore) { arr[currentTab]["PageIndex"] = PageIndex + 1; that.setData({ arr }, () => { that.renderArr(); }) } }, add: function () {//新增 wx.navigateTo({ url: '/packageDemosList/pages/new/new' }) }, goDetail: function (e) {//查看详情 let id = e.currentTarget.dataset.id; wx.navigateTo({ url: `/packageDemosList/pages/new/new?id=${id}` }) }, })

new页面

<component-navigations backShow="{{true}}" title="DemoList"></component-navigations> <view class="pages"> <view class="upload"> <image bindtap="getImage" class="upload_img" mode='aspectFill' src="{{imgUrl?imgUrl:defaultImgUrl}}" /> <block wx:if="{{!id}}"> <view wx:if="{{!imgUrl}}" bindtap="upLoad" class="upload_btn"> <i class="fa fa-upload"></i> <text>上传照片</text> <progress wx:if="{{progress}}" percent="{{progress}}" class="upload_progress" stroke-width="12" /> </view> <view wx:else bindtap="delImg" class="upload_btn"> <i class="fa fa-trash-o"></i> <text>删除照片</text> </view> </block> </view> <view class="form"> <view wx:for="{{inputs}}" wx:key="{{index}}" class="form_item"> <view class="formItem_l"> <i class="label_icon fa {{item.icon}}"></i><text class="label_txt">{{item.title}}：</text> </view> <view wx:if="{{item.com==1}}" class="formItem_r"> <input value="{{item.value}}" data-index="{{index}}" bindinput="inputChangeValue" focus="{{item.focus}}" disabled="{{!item.editable}}" type="{{item.type}}" class="formItemR_input" placeholder="请输入{{item.title}}" confirm-type="next" bindconfirm="next"/> </view> <view wx:elif="{{item.com==2}}" class="formItem_r" style="padding-top:6rpx;"> <textarea value="{{item.value}}" data-index="{{index}}" bindinput="inputChangeValue" focus="{{item.focus}}" disabled="{{!item.editable}}" class="formItemR_textarea" auto-height maxlength="-1" placeholder="请输入{{item.title}}" /> </view> </view> <view wx:if="{{!id}}" bindtap="submit" class="form_submit">提交</view> </view> </view>

.pages{ padding: 65px 0 0 0; height:100vh; box-sizing:border-box; font-size: 28rpx; color: #222; background: #fff; } .upload{ position: relative; font-size: 0; } .upload_img{ width: 100%; height:350rpx; } .upload_btn{ font-size: 26rpx; position: absolute; right: 0; bottom: 0; background: rgba(0,0,0,.2); padding: 10rpx 20rpx; color: #fff; } .upload_btn .fa{ margin-right: 6rpx; } .upload_progress{ margin-top: 12rpx; } /* form */ .form{ padding: 20rpx; } .form_item{ border: 2rpx solid #ccc; border-radius: 10rpx; display: flex; align-self: center; padding: 20rpx; margin-bottom: 20rpx; } .formItem_l{ vertical-align: middle; /* padding-top:2rpx; */ } .label_icon{ margin-right: 10rpx; vertical-align: middle; } .label_txt{ vertical-align: middle; } .formItem_r{ flex: 1; } .formItemR_input{ } .formItemR_textarea{ width:auto; min-height:100px; } .form_submit{ background: #0490DB; color: #fff; height: 88rpx; line-height: 88rpx; text-align: center; border-radius: 10rpx; font-size: 30rpx; }

let that = null; let util = require('../../../utils/util'); Page({ /** * 页面的初始数据 */ data: { defaultImgUrl: '../../images/upload.png', imgUrl: null, progress: null, inputs: [//1input,2textarea { com: '1', editable: true, type: 'text', title: '标题', icon: 'fa-folder-o', key: 'UserTitle', value: null, focus: false }, { com: '1', editable: true, type: 'text', title: '机构', icon: 'fa-building-o', key: 'ORGName', value: null, focus: false }, { com: '1', editable: true, type: 'text', title: '部门', icon: 'fa-code-fork', key: 'Department', value: null, focus: false }, { com: '1', editable: true, type: 'text', title: '姓名', icon: 'fa-user-o', key: 'Name', value: null, focus: false }, { com: '1', editable: true, type: 'number', title: '电话', icon: 'fa-phone', key: 'PhoneNumber', value: null, focus: false }, { com: '2', editable: true, type: 'text', title: '描述', icon: 'fa-edit', key: 'Description', value: null, focus: false }, ], id: null,//有表示预览，无表示新增 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { that = this; if (options.id) {//如果有id传入,则为详情,否则为新增 that.setData({ id: options.id }, () => { wx.showLoading({ title: '载入中', mask: true }) util.commonAjax( 'api/wx/Detail', 1, { id: that.data.id } ) .then((res) => { let data = res.data[0]; let { inputs } = that.data; inputs = inputs.map((e, i) => { if (data.hasOwnProperty(e.key)) { e.editable = false; e.value = data[e.key]; } return e; }) that.setData({ inputs, imgUrl: data.UploadPictures }, () => { wx.hideLoading(); }) }) .catch((rej) => { console.log(rej) wx.hideLoading() }) }) } }, onReady: function () { }, onShow: function () { }, onShareAppMessage: function () { }, upLoad: function () {//上传 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { let tempFilePaths = res.tempFilePaths; console.log(res) //等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }) //上传 const uploadTask = wx.uploadFile({ url: '/api/FileUpload/UploadImages', filePath: tempFilePaths[0], name: 'file', formData: { 'name': tempFilePaths[0], 'folder': 'appletCover' }, success: function (res) { let data = JSON.parse(res.data);//后台返回图片保存服务器后的路径 that.setData({ imgUrl: data.msg }, () => { wx.hideToast(); }); }, fail: function (res) { console.log('上传图片失败' + res) wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function (res) { that.setData({ imgUrl: null, progress: null, }) } }) } }) //进度 uploadTask.onProgressUpdate((res) => { // console.log('上传进度', res.progress) // console.log('已经上传的数据长度', res.totalBytesSent) // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend) that.setData({ progress: res.progress }) }) // 取消上传任务 // uploadTask.abort() } }) }, getImage: function () {//查看图片 if (that.data.imgUrl) { wx.previewImage({ urls: [that.data.imgUrl] }) } }, delImg: function () {//删除图片 that.setData({ imgUrl: null, progress: null, }) }, inputChangeValue: function (e) {//输入 let value = e.detail.value; let index = e.currentTarget.dataset.index; let inputs = that.data.inputs; inputs = inputs.map((e, i) => { if (i == index) { e["value"] = value; e["focus"] = true; } else { e["focus"] = false; } return e }) that.setData({ inputs }) }, next: function (e) {//直接聚焦下一项 let index = e.currentTarget.dataset.index; let inputs = that.data.inputs; inputs = inputs.map((e, i) => { e["focus"] = false; return e }) that.setData({ inputs }, () => {//直接一次赋值有问题。。。 inputs = inputs.map((e, i) => { if (i == parseInt(index) + 1) { e["focus"] = true; } return e }) that.setData({ inputs })//所以先全部false,再单独赋值一次true }) }, submit: function () {//提交 let submitObj = {}; let { imgUrl, inputs } = that.data; inputs.map((e, i) => { submitObj[e.key] = e.value }) submitObj["UploadPictures"] = imgUrl; // console.log(submitObj) if (submitObj.UserTitle == "") { wx.showToast({ title: '请输入标题', icon: 'none', duration: 2000 }) } else if (submitObj.ORGName == "") { wx.showToast({ title: '请输入机构', icon: 'none', duration: 2000 }) } else if (submitObj.Department == "") { wx.showToast({ title: '请输入部门', icon: 'none', duration: 2000 }) } else if (submitObj.Name == "") { wx.showToast({ title: '请输入姓名', icon: 'none', duration: 2000 }) } else if (!(/0?(13|14|15|17|18|19)[0-9]{9}/.test(submitObj.PhoneNumber))) { debugger wx.showToast({ title: '请输入正确的手机号', icon: 'none', duration: 2000 }) } else if (submitObj.Description == "") { wx.showToast({ title: '请输入描述', icon: 'none', duration: 2000 }) } else if (!submitObj.UploadPictures) { wx.showToast({ title: '请上传图片', icon: 'none', duration: 2000 }) } else { wx.showLoading({ title: '提交中', mask: true }) util.commonAjax( 'api/WXReadilyShoot/Add', 2, submitObj ) .then((res) => { if (res.data.ResultType == 3) { let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.init();//返回上一页并刷新 wx.hideLoading(); wx.navigateBack({ delta: 1 }) } }) .catch((rej) => { console.log(rej) wx.hideLoading() }) } } })

预览

已放入小程序的Demos里面

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand