时间:2021-07-01 10:21:17 帮助过:12人阅读
JS的数组遍历是项目中必须用到的,为了写出优雅的代码,将方法用在对的地方,在这里将几种方法做个对比,这里用es6的方式展示出来,需要搭建转换es5环境,这不是这篇的重点,下一篇可以写这个。
使用频率最高,前端都会用,表示自己一开始只会用for循环。。。
let arr = ['123', '456', '789'];for (let i = 0; i < arr.length; i ++) { console.log(arr[i]); }
最常用,但是有优化空间:
for (let i = 0, len = arr.length; i < len; i ++) { console.log(arr[i]); }
使用临时变量,将length值存起来,避免重复获取数组长度。
es6新增的循环方式,比es5的for循环更简单且高效,它还提供三个新方法:
key()是对键名的遍历;
value()是对键值的遍历;
entries()是对键值对的遍历;
let arr = ['科大讯飞', '政法BG', '前端开发']; for (let item of arr) { console.log(item); } //输出数组索引 for (let item of arr.keys()) { console.log(item); } // 输出内容和索引 for (let [item, val] of arr.entries()) { console.log(item + ':' + val); }
数组的foreach方法使用频率较高,但性能比for循环还弱。它有个优点,可以自动省略为空的数组元素,相当于自动筛空。
let arr = ['科大讯飞', , '政法BG', , '前端开发']; arr.forEach((val,index)=>console.log(index,val));
有循环的功能,主要用于过滤数组,接收一个方法,它会返回符合函数的元素集合。
let arr = [{ label: '科大讯飞', value: 1 }, { label: '政法BG', value: 2 }, { label: '前端开发', value: 3 }]; const arr1 = arr.filter(list => list.value === 1); console.log(arr1);
和filter功能相同,不同的是,它返回boolean值,用于检查数组中是否存在某对象。
if (arr.some(list => list.value === 1)) { console.log('执行了!') }
所以它常用在if里。
替换的作用,它会返回一个由原数组中每个元素调用回调函数后返回值的集合。
let arr = [1, 2, 3, 4]; onst arr1 = arr.map(list => list * 2); console.log(arr1);
以上就是常用的数组遍历的方法,以后可以按照实际情况使用一种方法,不要所有地方用的都是for循环。
相关推荐:
以上就是关于JS数组遍历方法的总结的详细内容,更多请关注Gxl网其它相关文章!