数组常见的遍历循环方法、数组的循环遍历的效率对比

news/2024/5/18 1:02:40

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 6var 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、其他参考

https://juejin.im/post/5a3a59...


https://dhexx.cn/news/show-1420130.html

相关文章

Activiti框架学习笔记总结

本篇主要是Activiti工作流框架的学习记录&#xff0c;以及对于该框架的基本使用和一些浅显的理解&#xff1a; 1、工作流框架基本概念2、在eclipse中使用工作流框架3、创建工作框架4、使用框架提供API&#xff0c;操作框架实现业务逻辑 1、工作流框架基本概念&#xff08;摘自…

将python文件编译成可执行文件

以下方法Windows和Linux均适用! 将python文件编译成exe文件需要第三方库:pyinstaller ,执行命令:pip3 install pyinstaller 即可安装。 #指定国内源安装 pip3 install pyinstaller -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com ​​​​​​​ 进…

厕所标语

厕所泛指由人类建造专供人类&#xff08;或其他特指生物&#xff0c;如家畜&#xff09;进行生理排泄和放置&#xff08;处理&#xff09;排泄物的地方。 人类使用的厕所大多有男厕女厕之分&#xff0c;不过随着科技的发展&#xff0c;男女共用的厕所&#xff0c;也问世了。厕所…

JarvisOJ Basic 握手包

得到的是一个.cap文件&#xff0c;我看着好像可以用wireshark打开&#xff0c;就试了一下 报错了&#xff0c;pcapfix上&#xff0c;得到了一个新的.cap文件&#xff0c;用wireshark打开&#xff0c;发现分析不出来 查了一下&#xff0c;有破解握手包的专业软件&#xff0c;kal…

Android 进阶7:进程通信之 AIDL 的使用

2019独角兽企业重金招聘Python工程师标准>>> 读完本文你将了解&#xff1a; AIDL 是什么 AIDL 支持的数据类型 AIDL 如何编写 AIDL 实例 创建 AIDL 编写服务端代码 编写客户端代码 运行结果 总结 代码地址 Thanks 记得 2015 年实习面试&#xff0c;笔试题里就有这道…

Windows安装PyCrypto库包

PyCrypto是使用Python编写的加密工具包&#xff0c;很多脚本中经常会用到。所以我们有必要安装它。但是&#xff0c;在Windows下使用pip install pycrypto进行安装的时候&#xff0c;经常会报错。 为了解决这个问题&#xff0c;我们可以到这个网站&#xff1a;http://www.voids…

云概念以及云渗透

目录 云概念 公有云、私有云、混合云 云服务模式 云常见术语 国内外常见云平台介绍 阿里云 亚马逊云(AWS) 微软云(AZure) Access Key身份验证 连接工具 云渗透方法思路 云概念 随着技术的发展&#xff0c;云服务器逐渐的取代了普通的机房&#xff0c;越来越…

Java 正则表达式 量词 --- 三种匹配模式【贪婪型、勉强型、占有型】

在Sun的API中对在对 “最大匹配Greedy”“最小匹配Reluctant”“完全匹配Possessive” 的描述&#xff0c;不能让我明白他们有什么区别&#xff0c;现在将我对这三种匹配模式的理解写出来&#xff0c;供大家参考。1、Greediness&#xff08; 贪婪型 &#xff09;&#xff1a; …

渗透测试之信息收集

目录 信息收集 域名信息的收集 公司敏感信息网上搜集 网站指纹识别 整站分析 服务器类型(Linux/Windows) 网站容器(Apache/Nginx/Tomcat/IIS) 脚本类型(php/jsp/asp/aspx) 数据库类型(Mysql/Oracle/Accees/Mqlserver) 主机扫描(Nessus) 端口扫描(nmap) 网站敏感目录…

Nuxt.js 的一个常见错误警告

在 Nuxt.js 的使用过程中会遇到这样一种错误&#xff1a; [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, …