博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何优雅的操作数组
阅读量:6954 次
发布时间:2019-06-27

本文共 1947 字,大约阅读时间需要 6 分钟。

数组是 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,需要的同学可以去查看:

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

转载地址:http://nbnil.baihongyu.com/

你可能感兴趣的文章
【SICP练习】51 练习2.19
查看>>
solveCrossprod求 X'X的逆, ( X' == t(X), 即X的行列变换矩阵 )
查看>>
PostgreSQL column cryptographic use pgcrypto extension and optional openssl lib
查看>>
通过支付宝服务中断事件看系统可靠性和YunOS的可靠性
查看>>
oVirt VM (CentOS) template & clone
查看>>
Flutter框架分析(二)-- 初始化
查看>>
mac更新系统后Android studio Git不能用,提示missing xcrun at
查看>>
微信公众号排版
查看>>
Swift基础语法学习-3.类型转换
查看>>
向你安利了一个编辑器,并丢给你一堆插件
查看>>
Flutter 入门之 ListTile 使用指南
查看>>
Android Material Design控件使用(一)——ConstraintLayout 约束布局
查看>>
为什么区块链世界既需要计算机科学家也需要经济学家?
查看>>
Atom 微信小程序文件代码高亮
查看>>
Qtum量子链周报(3月18日-3月24日)
查看>>
couchbase介绍与实践(一)
查看>>
JavaScript正则表达式(2)
查看>>
开源 | Rainbond 3.5 pre-release
查看>>
css中px、em、rem区别与使用
查看>>
两个男同事打架 公司决定要不离职, 要不手牵手一下午, 结果他俩就选择.........
查看>>