数组是 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,需要的同学可以去查看:
第一次写文章,不足之处望大家指出,感谢!