数组常见的遍历循环方法、数组的循环遍历的效率对比
栏目: JavaScript · 发布时间: 5年前
内容简介:1-1、for / while最普通的循环 效率最高 兼容ie6tips:for循环更适用于循环的开始和结束已知,循环次数固定的场合;while循环更适合于条件不确定的场合
1 遍历数组的方法
1-1、for / while
最普通的循环 效率最高 兼容ie6
tips:for循环更适用于循环的开始和结束已知,循环次数固定的场合;while循环更适合于条件不确定的场合
1-2、for in
兼容ie6,效率最差(效率可看最下面的对比) for in 会把继承链的对象属性都会遍历一遍,所以会更花时间.
var arr = ['red', 'green', 'blue']; var obj = { name:'张三', age:20 } <!-- 循环对象 --> for(k in obj){ console.log(k); //name , age console.log(obj[k]); // 张三 , 20 } <!-- 循环数组 --> for(k in arr){ console.log(k); // 0 , 1 ,2 console.log(arr[k]); // red, green ,blue }
1-3、for of es6语法
ie不兼容 【for-of 语句只遍历可迭代对象的数据。】原生具备 Iterator 接口的数据结构如下。ArrayMapSetStringTypedArray函数的 arguments 对象NodeList 对象更多迭代器 阅读: http://es6.ruanyifeng.com/#do...
var arr = ['red', 'green', 'blue']; for(var v of arr) { console.log(v); // red green blue }
区别:for of 和 for in的区别for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.
2、数组自带的循环方法:
every 、 filter、forEach、map、reduce、some 都是兼容ie9
map,filter 是返回新的数组 (形象区分几个循环方法的区别参考: https://www.zhihu.com/questio... )
2-1、Array.prototype.every()
方法说明:测试数组的所有元素是否都通过了指定函数的测试。 遇到有不满足的会提前终止整个循环
场景:检测每一项的selected字段都是被选中为true
案例:
var arr = [ {id:1,name:"zhangsan1",selected:false}, {id:2,name:"zhangsan2",selected:false}, {id:3,name:"zhangsan3",selected:true}, ]; var reslut = arr.every(function(el,index,arr){ console.log(el); return el.selected==true; }); console.log(reslut); //false
2-2、Array.prototype.filter()
方法说明: 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。true表示保留该元素(通过测试),false则不保留
场景:在一个数组中筛选数字大于10的元素,组成一个新数组
案例:
var arr = [ 10,20,30 ]; var arr1 = arr.filter(function(el,index,arr){ return el > 10; }); console.log(arr1); // 20 30
2-3、Array.prototype.forEach()
方法说明:方法对数组的每个元素执行一次提供的函数 没有办法中止或者跳出 forEach 循环,除了抛出一个异常。 如果您正在测试一个数组里的元素是否符合某条件,且需要返回一个布尔值,那么可使用 Array.every 或 Array.some。如果可用,新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。
场景: 普通遍历
案例:
var arr = [ {id:1,name:"zhangsan1",selected:false}, {id:2,name:"zhangsan2",selected:false}, {id:3,name:"zhangsan3",selected:true}, ]; arr.forEach(function(el,index,arr){ console.log(el) });
2-4、Array.prototype.map()
方法说明:方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
场景:异步得到数据后,需要新建一个数据根据id标识记录是否被选中的selected属性
案例:
var arr = [ {id:1,name:"zhangsan1"}, ]; var arr1 = arr.map(function(el,index,arr){ var newObj = {}; newObj.id = el.id; newObj.selected = false; return newObj; }); console.log(arr); // [{id:1,name:"zhangsan1"}] console.log(arr1); // [{id:1,selected:false}]
案例2: es6写法
var numbers = [1, 5, 10, 15]; var doubles = numbers.map( x => x ** 2); //[2,10,20,30]
案例3:重格式化数组 //不改变原数组
var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]; var reformattedArray = kvArray.map(function(obj) { var rObj = {}; rObj[obj.key] = obj.value; return rObj; }); // reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],
2-5、Array.prototype.reduce()
方法说明:方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
场景:累加 、 合并多个数组
案例:
var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value; }, 0); // total is 6 var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }, []); // flattened is [0, 1, 2, 3, 4, 5]
2-6、Array.prototype.some()
方法说明:方法测试数组中的某些元素是否通过由提供的函数实现的测试。
场景:检查数组中是否含有某个东西 (和every 是对立的)
案例:
const isBiggerThan10 = (element, index, array) => { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true
案例2: 是否包含id为1 对象
var arr = [ {id:1,name:"zhangsan1"}, {id:2,name:"zhangsan2"}, ]; var flag = arr.some(function(element, index, array){ console.log(element.id) return element.id == 1; }); console.log(flag)
3、 循环/遍历效率对比
for ~= do while < forEach ~= map ~= every < $.each < $(e).each < for in
参考: http://www.jb51.net/article/1...
for > for-of > forEach > filter > map > for-in
参考: https://dailc.github.io/2016/...
4、原生实现every 、 filter、forEach、map、reduce、some 等方法
http://www.jb51.net/article/6...
5、其他参考
以上所述就是小编给大家介绍的《数组常见的遍历循环方法、数组的循环遍历的效率对比》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Js遍历数组总结
- 遍历数组排序,负数在左,正数在右
- JS数组方法总览及遍历方法耗时统计
- 【译】无法使用Map遍历Array创建的数组的原因
- Go 语言函数式编程系列教程(九) —— 数据类型篇:数组切片的创建和遍历
- 数据结构 2 字符串 数组、二叉树以及二叉树的遍历
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。