如何从性能角度选择数组的遍历方式 |
您所在的位置：网站首页 › map遍历及性能 › 如何从性能角度选择数组的遍历方式 |
如何从性能角度选择数组的遍历方式
| 前言
本文讲述了JS常用的几种数组遍历方式以及性能分析对比。 如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新的文章～ JavaScript发展到现在已经提供了许多数组的方法，下面这张图涵盖了数组大部分的方法，这篇文章主要说一说数组的遍历方法，以及各自的性能，方法这么多，如何挑选性能最佳的方法对我们的开发有非常大的帮助。 标准的for循环语句，也是最传统的循环语句 var arr = [1,2,3,4,5] for(var i=0;i{ console.log(item) }) 复制代码实际性能要比普通foreach弱 for...in任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。 一般常用来遍历对象，包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性就不能遍历了. var arr = [1,2,3,4,5] for(var i in arr){ console.log(i,arr[i]) } //这里的i是对象属性，也就是数组的下标 /** 0 1 1 2 2 3 3 4 4 5 **/ 复制代码大部分人都喜欢用这个方法，但它的性能却不怎么好 for...of（不能遍历对象）在可迭代对象（具有 iterator 接口）（Array，Map，Set，String，arguments）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，不能遍历对象 let arr=["前端","南玖","ssss"]; for (let item of arr){ console.log(item) } //前端 南玖 ssss //遍历对象 let person={name:"南玖",age:18,city:"上海"} for (let item of person){ console.log(item) } // 我们发现它是不可以的 我们可以搭配Object.keys使用 for(let item of Object.keys(person)){ console.log(person[item]) } // 南玖 18 上海 复制代码这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环 mapmap: 只能遍历数组，不能中断，返回值是修改后的数组。 let arr=[1,2,3]; const res = arr.map(item=>{ return item+1 }) console.log(res) //[2,3,4] console.log(arr) // [1,2,3] 复制代码 every对数组中的每一运行给定的函数，如果该函数对每一项都返回true,则该函数返回true var arr = [10,30,25,64,18,3,9] var result = arr.every((item,index,arr)=>{ return item>3 }) console.log(result) //false 复制代码 some对数组中的每一运行给定的函数，如果该函数有一项返回true,就返回true，所有项返回false才返回false var arr2 = [10,20,32,45,36,94,75] var result2 = arr2.some((item,index,arr)=>{ return item accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); 复制代码 filter对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组 // filter 返回满足要求的数组项组成的新数组 var arr3 = [3,6,7,12,20,64,35] var result3 = arr3.filter((item,index,arr)=>{ return item > 3 }) console.log(result3) //[6,7,12,20,64,35] 复制代码 性能测试 工具测试使用工具测试性能分析结果如下图所示 我们也可以自己用代码测试： //测试函数 function clecTime(fn,fnName){ const start = new Date().getTime() if(fn) fn() const end = new Date().getTime() console.log(`${fnName}执行耗时:${end-start}ms`) } function forfn(){ let a = [] for(var i=0;i for > for-of > forEach > map > for-in javascript原生遍历方法的建议用法： 用for循环遍历数组 用for...in遍历对象 用for...of遍历类数组对象（ES6） 用Object.keys()获取对象属性名的集合 为何for… in会慢？因为for … in语法是第一个能够迭代对象键的JavaScript语句，循环对象键（{}）与在数组（[]）上进行循环不同，引擎会执行一些额外的工作来跟踪已经迭代的属性。因此不建议使用for...in来遍历数组 推荐阅读这些浏览器面试题，看看你能回答几个？ 这一次带你彻底了解前端本地存储 面试官：说一说前端路由与后端路由的区别 JavaScript之原型与原型链 Javascript深入之作用域与闭包 this指向与call,apply,bind 觉得文章不错，可以点个赞呀^_^ 另外欢迎关注留言交流～ |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |