如何优雅的操作数组

数组是 JavaScript 中极其常见的数据类型，做开发基本天天都要和它打交道，久而久之本人也掌握了一些操作数组的使用心得，分享给大家。

1、every & some 代替 break

众所周知 break 关键字是可以跳出整个 for 循环，但用 forEach 遍历是不能使用它的，只能用 return，而且 return 只能起到 continue 的作用，不能终止整个循环。

下面有请 every 和 some 出场。红宝书上对 every() 方法是这样描述的：对数组每一项运行给定函数，该函数对每一项都返回 true ，则返回 true。

这句话也可以这样理解，只要其中某一项通过给定函数返回 false，则必定整个方法会返回 false，后面的项就没有遍历的必要了。这不就是 break 的效果么？来测试下 every() 方法是不是这样运行的。

let arr1 = [
  {value: 0, flag: true},
  {value: 1, flag: true},
  {value: 2, flag: false},
  {value: 3, flag: true},
  {value: 4, flag: true},
]
let arr2 = []
arr1.every(item => {
  arr2.push(item.value)
  return item.flag
})
console.log(arr2)    //[0, 1, 2]
复制代码

测试结果与预想的一致，some() 方法与之类似，返回 true 实现 break 的效果。

2、解构赋值分解 item

上面的示例，可以使用 ES6 新增的结构赋值分解 item。

arr1.every(({ value, flag }) => {
  arr2.push(value)
  return flag
})复制代码

特别对于多层嵌套的数据，用解构赋值在语义上比 item 清晰很多，也能少敲几个按键。

let arr3 = [
  {id: 'e34as56', data: {name: 'a123', type: 'action'}},
  {id: '434ysr6', data: {name: 'a124', type: 'action'}},
  {id: '624yirh', data: {name: 'a125', type: 'data'}}
]
//函数参数和返回值的双重解构赋值
let arr4 = arr3.map(({ id, data: { name } }) => ({ id, name }))
console.log(arr4)   // [{id: 'e34as56', name: 'a123'}, ...]复制代码

3、reduce 合并一切

reduce 是数组中最强大的操作方法之一，如同英文单词的含义，这个方法就是起到合并的作用。将数组合并成数字、字符串、数组或对象，都可使用这个方法。

现在有个需求，需要将 arr3 数组中 type 为 'action' 的数据转为 id 为键、name 为值的对象。先来看常规做法：

let arr5 = {}
arr3.forEach(({ id, data: { name, type } }) => {
  if (type !== 'action') { return }
  arr5[id] = name
})
console.log(arr5)    // {e34as56: 'a123', 434ysr6: 'a124'}复制代码

使用 reduce 也能达到同样效果，代码更凝练。

let arr6 = arr3.reduce((obj, { id, data: { name, type } }) => {
  return type === 'action' ? Object.assign(obj, {[id]: name}) : obj
}, {})
console.log(arr6)     // {e34as56: 'a123', 434ysr6: 'a124'}复制代码

reduce 方法有两个参数，第一个是回调函数，回调函数又有四个参数：accumulator 累加的值，currentValue 当前的 item，currentIndex（可选）当前的索引，array（可选）调用reduce 方法的数组；reduce 的第二个参数是可选的，为 accumulator 的初始值。

以上就是本人开发中对于操作数组的小心得。代码我都上传到github，需要的同学可以去查看：github.com/inter727/st…

第一次写文章，不足之处望大家指出，感谢！