-
2018-11-30 13:19:27
self.itemLists.map(name => name.name)
更多相关内容 -
es6 map遍历_JS几种数组遍历方式以及性能分析对比
2020-11-22 13:27:46作者:Lichun Dai前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后,...作者:Lichun Dai
来源:https://dailc.github.io/
前言
这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比
起由
在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比
JS数组遍历的几种方式
JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比
第一种:普通for循环
代码如下:
for(j = 0; j < arr.length; j++) { }
简要说明: 最简单的一种,也是使用频率最高的一种,虽然性能不弱,但仍有优化空间
第二种:优化版for循环
代码如下:
for(j = 0,len=arr.length; j < len; j++) { }
简要说明: 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。
这种方法基本上是所有循环遍历方法中性能最高的一种
第三种:弱化版for循环
代码如下:
for(j = 0; arr[j]!=null; j++) { }
简要说明: 这种方法其实严格上也属于for循环,只不过是没有使用length判断,而使用变量本身判断
实际上,这种方法的性能要远远小于普通for循环
第四种:foreach循环
代码如下:
arr.forEach(function(e){ });
简要说明: 数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱
第五种:foreach变种
代码如下:
Array.prototype.forEach.call(arr,function(el){ });
简要说明: 由于foreach是Array型自带的,对于一些非这种类型的,无法直接使用(如NodeList),所以才有了这个变种,使用这个变种可以让类似的数组拥有foreach功能。
实际性能要比普通foreach弱
第六种:forin循环
代码如下:
for(j in arr) { }
简要说明: 这个循环很多人爱用,但实际上,经分析测试,在众多的循环遍历方式中
它的效率是最低的
第七种:map遍历
代码如下:
arr.map(function(n){ });
简要说明: 这种方式也是用的比较广泛的,虽然用起来比较优雅,但实际效率还比不上foreach
第八种:forof遍历(需要ES6支持)
代码如下:
for(let value of arr) { });
简要说明: 这种方式是es6里面用到的,性能要好于forin,但仍然比不上普通for循环
各种遍历方式的性能对比
上述列举了几种方式都有一一做过对比分析,基本上可以得出的结论是:
普通for循环才是最优雅的
(PS:以上所有的代码都只是进行空的循环,没有再循环内部执行代码,仅仅是分析各自循环的时间而已)
性能对比截图
分析结果1
以下截图中的数据是,在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环,得到的分析结果)
可以看出,forin循环最慢。优化后的普通for循环最快
分析结果2
以下截图数据是,在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环,得到的分析结果)
-
ES6数组遍历和对象遍历的方法
2022-04-10 22:13:21数组遍历 (1)数组.reduce遍历(经典案例:求和)(里面函数后面不要忘记加0了) *注意点:areuce((形参1,形参2,形参3)=>{ return 形参1+形参2},0),需要接收返回值。 let arr =[20,30,40,50] //自己...第一部分:数组
一.数组遍历
(1)数组.reduce遍历(经典案例:求和)(里面函数后面不要忘记加0了)
*注意点:reduce((形参1,形参2,形参3)=>{ return 形参1+形参2 },0),需要接收返回值。
let arr =[20,30,40,50] //自己参悟,不注释了 let sum =arr.reduce((sum,value,index)=>{ //sum是上一次回调的value的值,value是每一次遍历数组的值, index数组下标 console.log(sum,value,index) return sum+value },0) // sum为最大值 console.log(sum)
(2)数组.filter遍历(筛选数组)
*注意点:filter((形参1,形参2)=>{ i f ( ){ return true } }),需要接收返回值。
语法特点:
2.1:return ture :满足筛选条件,当前元素放入新数组
2.2:return false:不满足筛选条件,当前元素不放入新数组中
(案例:筛选数组中的偶数)
完整写法
let res = arr.filter((value,index)=>{ //value为每个数组的遍历,index为数组下标 if(value%2==0){ return true } })
(3) 数组.map遍历(修改数组,返回一个新数组)
*注意点:map((形参1,形参2)=>{ return 修改后的数组值 }),需要接收返回值。
(案例:让数组中每个数值*2)
let arr =[20,37,83,29] //第一个value为数组元素,第二个index为数组下标 let res =arr.map(function(value,index){ return value*2 }) console.log(res)
(4)数组.some遍历( 判断数组中是否有满足条件的元素( 逻辑或|| ) )
数组.every遍历(判断数组中是否所有的元素都满足条件(逻辑与&&) )
*注意点:eyery ((形参1,形参2)=>{ return true(继续)}),需要接收返回值。
回调函数内部return的作用
对于every逻辑或 (return true :循环继续 )(找到满足条件的继续找,只要有一个不满足结束)
判断数组中是否全部为正数 let arr =[20,29,394,71,1] let res =arr.every((item,index)=>{ if(item>0){ //只有当数组中的元素item是正数,才会执行if判断retrun才能往回调 return true } }) console.log(res)
对于some 逻辑与(return true:循环结束)(只要找到满足条件的元素即可)
*注意点:some((形参1,形参2)=>{ return true(结束) }),需要接收返回值。
//需求:判断数组中有没有负数 let arr =[-10,283,474,382,273] let res=arr.some((value,index)=>{ if(value<0){ return true } }) console.log(res)
(5)数组.forEach遍历(代替for循环)(无返回值)
let arr =[10,28,37,47,30.38] /* 1.forEach作用与场景:遍历数组 不加return */ arr.forEach((value,index)=>console.log(value,index))
(6)arr.findIndex((value,index)=>{return 比较数据}) 用来查询数组中是否有符合条件的值,有则返回该数组的下标,没有则返回-1
let arr =[10,20,30,40,50] let i = arr.findIndex((value,index)=>{return value>20}) console.log(2)
二 .内置构造函数Set给数组去重(new Set)
(案例:清除数组中重复的数据)
let arr=[10,29,28,30,293,29] //(1)声明Set,把数组类型重复的数据转换为set类型 let set = new Set(arr) //(2)把set转换Array let newArr =[...set] console.log(newArr) //一行代码实现数组去重 let abc = [...new Set(arr)] console.log(abc)
三.展开运算符(...数组)
作用:类似于对象遍历
(案例1)连接数组
let arr1=[10,20,30,40,20] let arr2=[20,39,48,58,27] //连接数组 arr1.push(...arr2) console.log(arr1)
(案例2)连接对象
//连接对象 let obj={ name:'张三' } let obj1={ name1:'1', ...obj } console.log(obj1)
(案例3)求最大值
let arr1=[10,20,30,40,20] let arr2=[20,39,48,58,27] //求最大值 let receive =Math.max(...arr1,...arr2) console.log(receive)//58
四:数组解构
/*把数组元素赋值给变量*/ let arr=[10,20,30] let [n1,n2,n3,n4]=arr console.log(n1,n2,n3,n4) //相当于是把变量的值赋值给数组 let num1 =1 let num2=2 let num3=3 let arr1=[num1,num2,num3]
对象解构
(1)把对象的属性值 赋值给 变量
let { name,age,sex } = obj
(2)把变量的值赋值给对象
let obj ={ name,age,sex }
//1.把对象的属性值 赋值给 变量 let obj ={ name:'张三', age:'23', sex:'男', } let {name,age,sex} = obj console.log(name) //(2)把变量的值赋值给对象 let a = 10 let abc ={ name, age, num:a } console.log(abc)
第二部分:对象遍历
静态方法(Object.values(对象名))
返回值是一个数组,会存储对象的每一个属性值
let arr =Object.values(person) console.log(arr)
Object.keys(对象名)
返回的是一个数组,会存储对象的每一个属性名
let arr =Object.keys(person) console.log(arr)
-
ES6中遍历Set和Map数据结构的方法
2021-09-27 19:46:50文章目录一、Set1.forEach2.keys3.values4.entries二、Map1.forEach2.keys3.values4.entries 一、Set keys方法、values方法、entries方法返回的都是遍历器对象 1.forEach Set 结构的实例与数组一样,也拥有forEach...
一、Set
keys方法、values方法、entries方法返回的都是遍历器对象
1.forEach
Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。
let set=new Set([1,2,3,4,5]); set.forEach((key,value)=>{ console.log(key+':'+value); }) //1:1 //2:2 //3:3 //4:4 //5:5
2.keys
keys返回的对象:[Set Iterator] { 1, 2, 3, 4, 5 }
keys返回的遍历器,或者说迭代器,它提供了一个next方法,调用返回一个包含两个属性的对象,分别是value和done,value表示当前位置的值,done表示是否迭代完。当done的值为false时,继续调用next()就可以访问下一个值。我们可以利用这个方法来遍历Set结构的值。let set=new Set([1,2,3,4,5]); let obj=set.keys(); let item; while(!(item=obj.next()).done){ console.log(item.value); } //1 //2 //3 //4 //5
3.values
由于Set结构没有键名只有键值,或者说键名和键值是同一个值,所以keys方法和values方法的行为完全一致。
let set=new Set([1,2,3,4,5]); let obj=set.values(); let item; while(!(item=obj.next()).done){ console.log(item.value); } //1 //2 //3 //4 //5
4.entries
entries方法返回的遍历器,同时包括键名和键值,所以每次输出一个数组,它的两个成员完全相等。
let set=new Set([1,2,3,4,5]); let obj=set.entries(); let item; while(!(item=obj.next()).done){ console.log(item.value); } //[ 1, 1 ] //[ 2, 2 ] //[ 3, 3 ] //[ 4, 4 ] //[ 5, 5 ]
二、Map
需要特别注意的是,Map 的遍历顺序就是插入顺序。
1.forEach
Map 有一个forEach方法,与数组的forEach方法类似,可以实现遍历。
let map=new Map([ ['name','curry'], ['age',20] ]); map.forEach((value,key)=>{ console.log(key+':'+value); }) //name:curry //age:20
2.keys
遍历Map结构的键名,和Set的不一样了。
let map=new Map([ ['name','curry'], ['age',20] ]); let obj=map.keys(); let item; while(!(item=obj.next()).done){ console.log(item.value); } //name //age
3.values
遍历Map结构的键值。
let map=new Map([ ['name','curry'], ['age',20] ]); let obj=map.values(); let item; while(!(item=obj.next()).done){ console.log(item.value); } //curry //20
4.entries
遍历Map结构的键值对。
let map=new Map([ ['name','curry'], ['age',20] ]); let obj=map.entries(); let item; while(!(item=obj.next()).done){ console.log(item.value); } //[ 'name', 'curry' ] //[ 'age', 20 ]
-
ES6数组遍历之forEach,map和filter
2020-05-06 14:19:50循环数组,通常使用的是for循环,去循环数组的下标,而在ES6中提供了一种新的方式进行遍历数组!在看这个之前我们先对比一下之前的遍历方式 let phone = ['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','... -
es6遍历map
2021-05-21 08:54:04 -
ES6之遍历语法
2020-12-20 15:49:28如何使用遍历的我们暂且以数组为例,javascript提供了多种遍历数组的方法,最开始我们可能习惯使用for循环:for (var index = 0; index < myArray.length; index++){console.log(myArray[index]);}这种写法比较... -
ES6 Set 和 Map 遍历操作
2022-01-09 16:18:35作为 ES2015 的新增特性,Set 和 Map 对象大家应该很熟悉了,例如 Set 在数组去重等场景中经常会用到: function unique(array = []) { return Array.from(new Set(array)); } 但是一般我们都是只在需要这种数据... -
ES6 Map遍历、filter()筛选对象
2019-02-28 13:43:00ES6 Map遍历、filter()筛选对象 目录: -------- 1、map() -------- 2、filter(): ------------- 2.1、filter函数可以看成是一个过滤函数,返回符合条件的元素的数组 -------- 3、filter() 筛选... -
ES6 Map的创建、遍历、使用及注意
2022-04-12 14:30:10手写map -
ES5和ES6数组遍历方法详解
2021-01-12 16:23:20ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法:1、原始的for循环语句2、Array.prototype.forEach数组对象内置方法3、Array.prototype.map数组对象内置方法4、Array.prototype.filter数组对象内置方法5、... -
es6 map()遍历 --笔记
2020-06-14 10:30:40es6 map()遍历 --笔记 map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的... -
ES6 map实现遍历(es6获得数组对象的特定值)
2018-10-07 11:56:541.对于一个数组对象,想要得到其中的特定的键值,这三篇文章可以看看(转载的,希望对大家有帮助) 1)使用: https://blog.csdn.net/weixin_42317515/article/details/80510231#commentBox 2)提高 ... h... -
ES6 map()遍历、filter()筛选的使用
2021-09-14 14:47:44map()遍历 比如:有一个数组对象,arrt=[{id:1,name:'a},{id:2,name:b}] 我需要取到里面的id,组成一个数组 情况1-简单使用: let arrt=[{id:1,name:'a},{id:2,name:b}] let needArry=arrt.map(item=>item.id... -
es6遍历方法——map()
2021-02-23 16:35:53<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <... arr.map(function(value,index,arr) -
ES6常见遍历数组函数的用法
2021-07-07 12:48:04} //结果:1,2,3 }) 注意:foreach适用于只是进行集合或数组遍历,for则在较复杂的循环中效率更高。 二、includes 判断数组是否包含某个元素 1、参数:第一个是查询的元素,第二个是从什么位置开始查询(可以是负数) ... -
使用JS(ES6)遍历数组
2020-07-17 18:01:51Js遍历数组 普通for: for(j = 0,len=arr.length; j < len; j++) { … } foreach循环 // 没有返回值 // 遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE //参数:item数组中的当前项, index当前项的... -
es6数组遍历(map、filter、find、findIndex)
2019-07-04 16:48:20数组遍历 arr.map(callback [, thisArg]) map方法我们用得最最最多了吧,超级好用,当你需要批量改变数组中的值的时候就要想到它了 注:map方法不会改变原始值,它会返回一个新的数组 例: let arr = [1, 2, 3,... -
ES6-遍历数组
2018-03-10 12:22:18那么我们如何遍历数组呢? 我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数组遍历: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } ... -
es6中利用map 来遍历数组
2021-04-07 10:04:51map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组。 var atest = [ {v1: "1", "v2": "aa"}, {v1: "2", "v2": "bb"}, {v1: "3", "v2": "cc"} ]; atest.map(items=>{ console.log... -
ES6 map()遍历、filter()筛选--随记
2018-07-08 14:59:32map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的值。 let arr1 = [1,2,... -
Es6 map 对象的迭代(遍历)与操作 查找成员是否存在has()和删除成员
2021-10-24 18:38:401.Map 进行遍历,以下两个最高级。 for...of let a = new Map(); a.set(0, '发'); a.set(1, '黄飞'); a.set(2, '黄鸿'); a.set(3, '飞鸿'); // 将会输出4个结果。 0 --------------- 发 1 ---------... -
ES6遍历对象属性的5种方法
2021-03-01 17:28:23for…in循环遍历对象自身和继承的可枚举属性(不含Symbol属性) 2.Object.keys(obj) Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)的键名 3.Object.getOwnPropertyNames... -
ES6遍历数组map()方法、filter()、forEach()方法的区别
2019-08-05 10:52:32map()根据当前数组映射出一个新的数组,map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要... -
ES6:数组遍历方法forEach和map的原理解析和实际应用
2019-07-29 13:41:31forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。for forEach for-in for-of 的区别 二、代码 相同点 都是数组的方法 都用来遍历数组 ... -
ES6新增遍历对象的方法
2020-06-04 16:31:44for…of循环遍历数组或ES6新的数据类型(symbol,set,map)等 (3)Object.keys(obj) Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。 (4)Object.... -
Es6:变量的解构赋值-遍历Map结构
2021-04-09 10:08:45所有部署Iterator接口的对象,都可以用for...of循环遍历。 Map结构原生支持Iterator接口,那么配合变量的解构赋值获取键值键名就更加方便。 let map = new Map() map.set('first', 'hello') map.set('second', '...