目的
在平常的前端开发中，一般需要处理数据（数组和对象居多），特别是复杂功能的页面，通常是一到两个对象数组（有时数组里面还有数组）。大多数前端开发的难点就是这里，耗时大。以前我在工作中，遇到的支付方式功能，排课日历，场地预约，公园大屏幕运动排行和弹幕，后台系统的权限模块等等，这些功能难度大费脑耗时间多。其他那些功能很简单的，无脑复制粘贴运行就完成了。如果我可以总结一下，找出一些高效的处理数组和对象的方法，以后工作中就对号入座的使用，这肯定可以提高我的工作效率，到时候我可以多出时间来给测试或者学习新知识或者摸鱼休息。这总比每天瞎用js工具类，碌碌无为的写代码强。
做一件事有很多种方法，最快捷的就那一两个，把它们找出来，事半功倍。正所谓磨刀不误砍柴工。
数组的遍历
一、for...of(通用)
最好用的迭代（循环）语句
说到循环，javascript的循环语句那么多，我该如何选择？其实就是问下自己，自己需要什么？我眼睛一闭，我要可以用在很多地方（对象），写法简单，这样维护性高；我还要支持continue，break，throw，return打断循环或者跳到下一个循环（某一次迭代不执行循环体代码块），我还要index，index等于某个值时做一些逻辑判断。
for...of，它可以用于可迭代对象。Array，Map，Set，String，TypeArray，arguments等等。就是说可用的地方很广，哪里都能用。迭代是啥意思，就是说按顺序访问列表中的每一项，就是小时候老师家访那样，学生的家走一遍。其实在项目中，一般都是遍历对象数组，这样的数据结构前端后台耳熟能祥。
这个东西性能不算好的，是es2015推出来的，写法特别简洁。运行效率中下，比for，forEach差，但是比map好。优点是占用内存最小。其实运行效率和占用内存是次要的，因为在项目中，处理的数据的长度不会很长，一般在10到30之间，影响不大，再说前端在大多数情况下不需要考虑性能（上一家公司技术大哥给我的经验）。写法简洁的话，在二层循环的情况代码的阅读性和维护性就较高。
处理逻辑时，一般需要（特别需要）使用break，continue，return来设计代码逻辑。不是所有的循环语句都支持return ，break。记得有一次我使用forEach语句的时候，循环体里面加了break，发现跳不出去。搞半天原来是不支持。现实又狠狠的打了我这种渣渣一耳光。改为for语句解决了。
index它是不支持的，不是你要什么它就是支持什么。可以通过把数组等转化为Map对象。实现如下：
for(let [index,item] of new Map(targetArray.map((item,i) => [i,item]))){
console.log(index, item)
}
二、reduce，reduceRight（百变）
reduce循环（招式很多）
一开始我以为reduce只能求和，没什么用，查询大神写的博客，我才知道它很厉害。我开始要抄别人的东西了。没办法，技术不行。
数组求和，求乘积(其实求减，求除也是没有问题的啰)
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
//其实对象数组也可以求和，为所欲为啊
var arr = [{num: 1}, {num: 2}];
var sum = arr.reduce((x,y)=>x+y.num,0)
计算一个数组中元素成员的次数（利用了一个reduce的第二参数初始化为空对象，用这个对象来记录数组出现的次数。然后把这个对象给饼状图。不过一般后台会直接给前台这个对象，不需要前台计算。）
let names = ['Alice', 'Bob', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice:
//万一数组的每一项是对象，能不能搞啊 可以的，拓展一下就可以了。看
let names = [{name:'Alice'}, {name: 'Bob'}, {name: 'Alice'}];
let nameNum = names.reduce((pre,cur)=>{
if(cur.name && cur.name in pre){
pre[cur.name]++
}else{
pre[cur.name] = 1
}
return pre
},{})
console.log(nameNum); //{Alice:
数组去重，这个功能经常遇到，当数组出现重复，后台不好处理时，这时需要前端去重(利用了第二个参数初始化为空数组，)
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
//对象数组去重和上面一样，拓展一下
let arr = [{num: 1},{num: 2},{num: 3},{num: 3}]
let temp = {};
let newArr = arr.reduce((pre,cur)=>{
if(!temp[cur.num]){
temp[cur.num] = true;
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
看了一下人家的博客，发现reduce还能快速实现filter的功能。为所欲为啊。实现如下。
const data = [
{name: 'a', age: 37, weight: 72, sex: 'male'},
];
// accu 为 accumulator，curr 为 currentValue
const result = data.reduce((accu, curr) => {
// if 判断，相当于 filter
if (curr.sex === 'female') {
accu.push(curr);
}
return accu;
}, []);
console.log(result);
递归处理tree树形，这种需求在工作中没有遇到过，不知道以后会不会遇到。代码中的callee是个指针，指向当前执行的函数，就是函数它自己，一旦是用于递归处理。如果不这样写的哈，就需要定义个函数变量，在函数内部调用自己。函数定义在reduce的外面，代码的阅读性降低。callee就是提供快捷编码，提高代码的阅读性。
var data = [{
id: 1,
name: "办公管理",
pid: 0,
children: [{
id: 2,
name: "请假申请",
pid: 1,
children: [
{ id: 4, name: "请假记录", pid: 2 },
],
},
{ id: 3, name: "出差申请", pid: 1 },
]
}
];
const arr = data.reduce(function(pre,item){
const callee = arguments.callee //将运行函数赋值给一个变量备用
pre.push(item)
if(item.children && item.children.length > 0) item.children.reduce(callee,pre); //判断当前参数中是否存在children，有则递归处理
return pre;
},[]).map((item) => {
//清空每一项item
item.children = []
return item
})
console.log(arr)
他还有个兄弟，叫reduceRight，只是循序不一样，一个是顺序，一个是倒叙而已。功能几乎一模一样为什么还要搞两个？程序员有时真的是无聊到极点。我会不会去学reduceRight?我不学，机智躲开。
有个大佬写了reduce的高级用法
https://developer.51cto.com/art/202002/610535.htm
三、some，every，filters，map （私人定制）
要想快速实现某些功能，就要使用功能专一的。
some 和 every
他们是两兄弟，需要的参数可以是函数，返回值是true和false。前者有一个条件满足，函数返回值是true，就停止遍历。后者是所有条件满足，函数返回值是true，就停止遍历。
几乎没有用过，不知道使用场景。应该是算是否全勤，一个班的同学是否全部及格。还有全选效果的实现吧。
filter(推荐)
官方的解释是找到所有符合条件的元素然后放到一个数组中 如果没有符合条件的那么返回空数组。物如其名，就是一个过滤器，拿到符合条件的数据项拼成新的数据。
使用场景很多，渲染页面的时候，需要拼接符合条件的数组和给后台数据的时候，给后台符合条件的数据。按某个属性分组。上一家公司的时候，写跑步比赛页面，页面需要显示跑步中，没开始，跑完等状态。此时如果使用filter，就快速得到需要的数组。
map
就是需要对一个数组的每一项做相同的操作处理时。使用map就会很快。map不会改变原来的数组这个定律适用于数组成员是值类型。如果是引用类型，这个不适用。
那么如何快速的选择合适的遍历数组的方法呢？根据开发工作中的需求，首先审查功能专一私人定制的some，every，filters，map，再到reduce。这时候千万不能轻易跳到for...of。在reduce这一层尽情耍大刀。如果实在不行了，就for...of呗。
对象的遍历
在工作中除了处理数据，处理对象也是常见。
一、for...in
这个是一般用法。使用很简单。
二、keys，getOwnPropertyNames，ownKeys (推荐)
他们的使用一模一样，都很简单。 keys遍历自身的可枚举属性。 getOwnPropertyNames遍历自身的所有属性。 ownKeys遍历自身属性（包括Symbol）。
其实不乱的，需要知道属性有可枚举与不可枚举，是否是Symbol。根据实质情况去选择就行了。再说工作中大多数的对象的属性都是可枚举的，用 keys可以解决大多数需求。
为什么要推荐使用 keys等。可以试想一下，把对象转化得到数组之后，不就是可以使用上面数组循环的那些方法处理各种逻辑？什么reduce,filter,map,some，every对吧，特别那个reduce就和周杰伦双截棍那样，怎么耍都可以。又快又简洁。
var obj = {'0': 1, '1': b}
Object.keys(obj).forEach((key) =>{
console.log(key,obj[key])
})
在以前公司的项目中，我发现可以这样写接口，每次添加接口只需要在urlMap对象里面添加键值对：（或者说写在其他js文件，把几个对象合并到urlMap）。
这样处理的好处是，阅读舒服，代码维护性高，减少不必要的代码冲突，节省时间。
const urlMap = {
loginUserInfo: '/api/loginUserInfo', //---方法名/接口路径---
};
const services = {};
Object.keys(urlMap).forEach((methodName) = > {
services[methodName] = function (params, async = true, type = 'GET') {
var data = [];
var promise = $.ajax({
url: urlMap[methodName],
data: params ? params : {},
async: async,
dataType: "json"
});
if (async) {
return promise;
} else {
promise.done(({
code, obj
}) = > {
(code === 0) && (data = obj)
});
return data;
}
};
});
export default services;
说个题外话的，处理对象的时候，有时候需要做对象合并处理。对象合并可以用在哪些地方？就是页面分页组件，echart组件它们需要配置对象，这个对象有很多的键值对。可以抽一些共同的属性处理预设值写在组件内部，其它的就写在组件外部传进来，这时候就需要合并它俩。这种概念叫做配置 config。
简单的写法就是使用 Object.assingObj；这个方法就是把多个源目标复制到目标对象，不管这个目标对象有没有这个属性值。
也可以使用严格一些的方法，就是说，目标对象和源对象公共的属性值，才搞到目标对象上，不是的话不要过来，否则可能会搞坏内部的配置。缺点就是在组件写配置对象时，需要多写(有可能是很多行)属性名，总是比每次写在组件外面强（代码如下）。
function assignObj(vm, firstSource) {
for(let [index,item] of new Map([...arguments].map((item,i) => [i,item]))){
if(index === 0) continue; //躲开vm
let nextSource = [...arguments][index];
if (nextSource && typeof nextSource !== "object") continue;
Object.keys(vm).reduce((pre,cur) => {
if(vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
vm[cur] = nextSource[cur]
},vm)
}
return vm
}
var returnValue = assignObj({name: 'name',age: 6,hairs: 8},{name: 'name',age: 6,clothes: 'lalala1'},{name: '周星驰'})
console.log(returnValue,'returnValue')
有人可能会提问？当对象里面的属性又是对象时，你这个方法不支持啊。难不倒我，我可以用callee来升级的。
function assignObj(vm, firstSource) {
const callee = arguments.callee //将运行函数赋值给一个变量备用
for(let [index,item] of new Map([...arguments].map((item,i) => [i,item]))){
if(index === 0) continue; //躲开vm
let nextSource = [...arguments][index];
if (nextSource && typeof nextSource !== "object") continue;
Object.keys(vm).reduce((pre,cur) => {
if(Object.prototype.toString.call(vm[cur]) !== '[object Object]' && vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
vm[cur] = nextSource[cur]
else if(Object.prototype.toString.call(vm[cur]) === '[object Object]' && vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
callee(vm[cur],nextSource[cur]);
return vm;
},vm)
}
return vm
}
如果不想在vue内部组件中写太多的组件初始化配置值的话，可以采取一种宽松的方式：就是说在目标对象的基础上，把所有源对象的属性复制过来，共同属性的值直接覆盖。其实很简单的，遍历源目标，属性是非对象把值复制过来，属性是对象再次遍历。 把上面代码的那行Object.keys出现的vm改为nextSource就可以了。
再说个题外话吧，就是上个月啊，和一个后台搞图片的功能。图片的待上传列表是那后台返回来的数组。写的时候，需要搞隐射，发现不好搞：一个页面，拿到SPECIAL_FATE_STORE_HEADER字段给后台specialFateStoreHeaderId字段；另外一个地方同理：specialFateStoreHeaderId->STORE_HEADER。为什么这么麻烦？后台小子逻辑差，经验不足，没处理好。一开始我使用switch case。搞了不少行代码，维护性也不好，因为有两套，改其中一个，另外一个也得跟着改。这时候，上面的那些数组遍历和对象遍历的内容就可以用进来了。再一次证明会js真的可以为所欲为，呵呵。代码如下。
let valueMap = {
SPECIAL_FATE_STORE_HEADER: 'specialFateStoreHeaderId'//值1：值2
//...这里省略了15行
}
//获取值的值
function getValueName(type) {
return valueMap[type] ? valueMap[type] : valueMap['SPECIAL_FATE_STORE_HEADER'];
}
//获取键的值
function getKeyName(targetValue){
let targetArr = Object.keys(valueMap).filter((key) => { return valueMap[key] == targetValue });
return targetArr.length === 0 ? 'STORE_HEADER' : targetArr[0].split('FATE_')[1]
}
console.log(getValueName('SPECIAL_FATE_STORE_HEADER'),'valueMap')
console.log(getKeyName('specialFateStoreHeaderId'),'valueMap')
以后再次来需求，我就在valueMap对象里面加。万一再来需求，后台小子还要值3，值4怎么办？难不到我。我修改valueMap的结构。再改下逻辑就行。他还要值5的话，那就叼人或者离职吧。
let valueMap = {
SPECIAL_FATE_STORE_HEADER: 'specialFateStoreHeaderId&&值3&&值4'//值1：值2 && 值3 && 值4
//...这里省略了15行
}
最后，欢迎关注我的公众号。
