JS数组遍历的几种方法与执行效率

最新推荐文章于 2024-05-11 11:32:11 发布
最新推荐文章于 2024-05-11 11:32:11 发布
阅读量1.7k 收藏 2
点赞数
文章标签： js 数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34595425/article/details/119604714
版权

1 for
最简单的一种循环遍历方法，也是使用频率最高的一种，可优化
循环过程中支持修改索引（修改 i）

在这里插入代码片// for 最简单的一种循环遍历方法，循环过程中支持修改索引（修改i)
 console.log('1 for循环')
  let arr = [1,2,3,4,5]
  for(var i=0;i<arr.length;i++){
      console.log(arr[i])
      if(i==0){
          i=3
      }
  }

在这里插入图片描述
 优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

 // //  优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显
        let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        // var len = arr1.length
        let start = new Date().getTime()
        console.log('1 for start',start)
        for(var i = 0; i < arr1.length; i++) {
            console.log(`for循环${arr1.length}个数据`)
        }
        let end = new Date().getTime()
        console.log('1 for end', end)
        console.log('耗时', end - start)

在这里插入图片描述
 下面我们把arr1的长度先取出来，在看看执行时间

 // //  优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显
        let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        var len = arr1.length
        let start = new Date().getTime()
        console.log('1 for start',start)
        for(var i = 0; i < len; i++) {
            console.log(`for循环${len}个数据`)
        }
        let end = new Date().getTime()
        console.log('1 for end', end)
        console.log('耗时', end - start)

在这里插入图片描述
明显耗时比上面没提前把长度取出来的少

2 for…in…
这个循环用的人也很多（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名

console.log("====================for   in 的使用")
        let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        var len = arr1.length
        let forInStart = new Date().getTime()
        console.log('1 for in start',forInStart)
        for(let key in arr1){
            console.log(`for in 循环${len}个数据`)
        }
        let forInEnd = new Date().getTime()
        console.log('1 for in end', forInEnd)
        console.log('耗时', forInEnd - forInStart)

在这里插入图片描述
如果是对象取到key值

let obj = {
        a: 11,
        b: 22,
        c: 33
}
for(let key in obj) {
	console.log(key)
}
// a b c

3 for…of…
注意：不能循环对象，因为任何数据结构只要部署 Iterator接口，就可以完成遍历操作，有些数据结构原生具备 Iterator 接口，比如Array、Map、Set、String等，而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的，而对象Object恰恰是没有Symbol.iterator属性的，所以无法被for…of遍历

 // for…of… 注意：不能循环对象，因为任何数据结构只要部署 Iterator接口，就可以完成遍历操作，有些数据结构原生具备 Iterator 接口，比如Array、Map、Set、String等，而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的，而对象Object恰恰是没有Symbol.iterator属性的，所以无法被for..of遍历
        console.log("====================for   of 的使用")
        let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        var len = arr1.length
        let start = new Date().getTime()
        console.log('1 for in start',start)
        for(let key of arr1){
            console.log(`for of 循环${len}个数据`)
        }
        let end = new Date().getTime()
        console.log('1 for in end', end)
        console.log('耗时', end - start)

在这里插入图片描述
4 forEach（也叫作增强for循环）

  1. 数组里的元素个数有几个，该方法里的回调就会执行几次
  2. 第一个参数是数组里的元素，第二个参数为数组里元素的索引，第三个参数则是它自己（利用第三个参数可以进行数组去重）
  3. 数组自带的遍历方法，foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高
  4. 循环的数组元素是基本数据类型，不会改变原数据的数据，循环的数组元素为对象，会改变原数组的对象属性的值
  5. 循环过程中不支持修改索引，回调中使用return不会报错，但是无效
    注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try…catch可以实现跳出循环
console.log("====================forEach的使用")
        let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        var len = arr1.length
        let start = new Date().getTime()
        console.log('1 for in start',start)
        arr1.forEach((item,index,array)=>{
            console.log(`for of 循环${len}个数据`)
        })
        let end = new Date().getTime()
        console.log('1 for in end', end)
        console.log('耗时', end - start)

在这里插入图片描述
使用try…catch…可以跳出循环

 // 使用try...catch...可以跳出循环
        try {
            let arr = [1, 2, 3, 4];
            arr.forEach((item) => {
                // 跳出条件
                if (item === 3) {
                    throw new Error("LoopTerminates");
                }
                console.log(item);
            });
        } catch (e) {
            if (e.message !== "LoopTerminates") throw e;
        };

在这里插入图片描述
5 map
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try…catch可以实现跳出循环

        console.log("====================map的使用")
        let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        var len = arr1.length
        let start = new Date().getTime()
        console.log('1 map start',start)
        arr1.map((item,index,array)=>{
            console.log(`map 循环${len}个数据`)
        })
        let end = new Date().getTime()
        console.log('1 map end', end)
        console.log('耗时', end - start)

在这里插入图片描述
map会改变原数组对象里面的属性

      // 二、会改变原数组元素中对象的属性值
        var arr = [{a: 1, b: 2},{a: 11, b: 12}]
        let newARR = arr.map((item)=>{
            item.b = 111
            return item
        })
        console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]
        console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

在这里插入图片描述
如果使用return不会改变原数组里面的属性

 var arr = [{a: 1, b: 2},{a: 11, b: 12}]
        let newARR = arr.map((item)=>{
            return {
                ...item,
                b:111
            }
        })
        console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]
        console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

在这里插入图片描述
使用try…catch…可以跳出循环

try {
            var arr = [1, 2, 3, 4];
            arr.map((item) => {
                //跳出条件
                if (item === 3) {
                    throw new Error("LoopTerminates");
                }
                console.log(item);
                return item
            });
        } catch (e) {
            if (e.message !== "LoopTerminates") throw e;
        };

在这里插入图片描述
6 filter（ES6）
遍历数组，过滤出符合条件的元素并返回一个新数组

console.log("====================filter的使用")
        var arr = [
            { id: 1, name: '买笔', done: true },
            { id: 2, name: '买笔记本', done: true },
            { id: 3, name: '练字', done: false }
        ]
            
        var newArr = arr.filter(function (item, index) {
            return item.done
        })

        console.log(newArr)

在这里插入图片描述

 let arr1 = Array.from(new Array(10000), (x, index)=>{
            return index
        })
        var len = arr1.length
        let start = new Date().getTime()
        console.log('1 map start',start)
        arr1.filter((item,index,array)=>{
            console.log(`map 循环${len}个数据`)
        })
        let end = new Date().getTime()
        console.log('1 map end', end)
        console.log('耗时', end - start)

在这里插入图片描述
7 some（ES6）
遍历数组，只要有一个以上的元素满足条件就返回 true，否则返回 false

console.log("====================some的使用")
        var arr = [
            { id: 1, name: '买笔', done: true },
            { id: 2, name: '买笔记本', done: true },
            { id: 3, name: '练字', done: false }
        ]

        var bool = arr.some(function (item, index) {
            return item.done
        })

        console.log(bool)    // true

在这里插入图片描述
8 every（ES6）
遍历数组，每一个元素都满足条件 则返回 true，否则返回 false

var arr = [
	{ id: 1, name: '买笔', done: true },
	{ id: 2, name: '买笔记本', done: true },
	{ id: 3, name: '练字', done: false }
]

var bool = arr.every(function (item, index) {
	return item.done
})

console.log(bool)    // false

在这里插入图片描述
9 find（ES6）
遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    
var num = arr.find(function (item, index) {
	return item === 3
})

console.log(num)   //  3

在这里插入图片描述
10 findIndex（ES6）
遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    
var num = arr.findIndex(function (item) {
	return item === 3
})

console.log(num)   //  4

在这里插入图片描述
总结，其实按照一万条数据来看，好像效率不是差别很大

小爱同学-Allen
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS数组的遍历方法汇总及区别
Sunday97的博客
05-08 473
总的遍历方法： 1、经典遍历方法：for语句、forEach语句、for-in语句、for-of语句 2、其它循环方法：map(映射)方法、filter(过滤)方法、every方法、some方法、reduce方法(reduceRight) 3、不常用的方法：find方法、findIndex方法 4、ES6提供的三个新方法：keys方法、values方法、entries方法 下面是各方法的用法和区别...
JS常用的几种数组遍历方式以及性能分析对比实例详解
10-18
主要介绍了JS常用的几种数组遍历方式以及性能分析对比,结合实例形式详细分析了javascript针对数组遍历的几种常见使用方法及执行效率对比,具有一定参考借鉴价值,需要的朋友可以参考下
JS数组循环的性能和效率分析（for、while、forEach、map、for of）
maogugu0319的博客
05-08 1469
前言 前端开发中经常涉及到数组的相关操作：去重、过...
如何数组的every、some提升编码效率
qq_40021148的博客
08-03 97
对数组中的每个元素都执行一次指定的函数（callback），直到此函数返回 false，every 将返回 false，如果回调函数对每个元素执行后都返回 true ，every 将返回 true。对于判断数组中是否包含某元素, 或者某元素中属性值是否满足某些特定一条件,不要一味的用forEach,map,find,findIndex…对数组中的每个元素都执行一次指定的函数（callback），只要函数返回 一次true，some 将返回 ture.
JS遍历数组的十种方法总结
最新发布
大圣归来圣骑士清欢的博客
05-11 1494
JS遍历数组的十种方法
JS几种数组遍历方式以及性能分析对比
weixin_30814223的博客
11-25 212
前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列，本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后，觉得这种方式挺好的，于是抽取了核心逻辑，封装成了模板，打算拓展成一个系列，本文则是系列中的第二篇，JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历，基本就是for,forin,foreac...
JavaScript 实现数组循环遍历的方法总结(结合 jQuery) 以及 常用循环遍历方法性能比较（ Duff‘s Device）
XH_jing的博客
02-22 971
JavaScript 实现数组循环遍历的方法总结
JavaScript数组去重的几种方法效率测试
01-19
以下是我针对网上三种高效率方法总结与效率测试，如果大家有更好的意见或建议也可以提出，大家共勉学习。 数组去重法1： Array.prototype.unique1 = function(){ console.time(数组去重法1); //记录开始执行的时间...
javascript数组去重3种方法的性能测试与比较
10-27
本文将探讨三种不同的JavaScript数组去重方法，并对它们的性能进行测试和比较。 首先，我们来看第一种方法，这种方法是通过创建一个对象来存储数组元素作为键，利用JavaScript对象的特性，相同的键值不会被覆盖，...
JavaScript几种数组去掉重复值的方法推荐
11-23
本文将详细介绍几种常见的数组去重方法，这些方法适用于同类型的数组，旨在优化思路并考虑执行性能。 1. **删除后面重复的**（ov1 函数）： 这种方法通过两层循环实现，外层循环遍历数组，内层循环从当前元素的下...
JavaScript中循环遍历Array与Map的方法小结
10-22
本文将详细讲解几种不同的遍历方法，帮助初学者更好地理解和掌握JavaScript的基础知识。 1. **For循环**： - `for`循环是最基础的遍历方式，例如eg1和eg5所示，通过索引`i`访问数组元素。eg1是正向遍历，eg5在遍历...
es6数组方法find()、findIndex()与filter()的总结(转载)
逆风优雅的博客
10-25 187
find() 该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。 以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素： const myArr=[1,2,3,4,5,6]; var v=myArr.find(value=>value>4); console.log(v);// 5 没有符合元素，返
JS遍历数据(数组,对象)的几种方式each,forEach,filter,some,from,find,includes等的用法和区别
weixin_44134588的博客
08-17 1801
看到数组就想遍历哈哈, 首先是最传统的for循环进行遍历: let arr = [1, 2, 3] for (let i = 0; i < arr.length; i++) { } 对数据几乎所有的操作都可以使用for循环进行遍历来完成,如去重,拼接,筛选,排序等等 最典型的冒泡排序就是使用for循环进行的,在这里:https://blog.csdn.net/weixin_44134588/article/details/107093344 紧接着是遍历对象,for
提升js的8个方法
小耳朵晨晨
10-19 928
假设您要显示产品列表并对集合进行分类，过滤，搜索，修改或更新。或者您可能希望执行快速计算，例如求和，乘法等。实现这一目标的最佳方法是什么？ 也许你不喜欢箭头功能，你不想花太多时间学习新东西，或者它们与你无关。放心，并不是只有你这样。我将向您展示如何在 ES5（普通函数）和 ES6（箭头功能）中实现。 请注意：箭头函数和函数声明/表达式不是等效的，不能盲目替换。请记住，this关键字在两者之间的工作方式不同。 我们将要关注的方法有： Spread operator（展开操作符） for…of ...
ES6 数组方法：forEach() 、 map() 、filter() 、some() 、every() 、include()的用法
qq_36507046的博客
08-15 4017
ES6 数组方法：forEach() 、 map() 、filter() 、some() 、every() 、include()的用法
深度解读js中数组的findIndex方法
jiaohuizhuang6019的博客
10-18 709
深度解读js中数组的findIndex方法
js循环获取数据的写法_JavaScript中for循环的几种写法与效率总结
weixin_40009099的博客
02-06 489
每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。然而当循环次数比较大时，效率问题必须重视。下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴，下面来一起看看吧。前言对于for循环，相信大家再常用不过了。但是这回说下for循环是因为看代码时我居然没有看明白一个for循环的意思，真是不应该啊。这个for循环是这么写的：...
JS遍历数组的十五种方法
热门推荐
材女的进击
05-25 2万+
这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。
js的for循环的几种写法
08-30
在JavaScript中，for循环有几种常见的写法。第一种是普通的for循环，它由三个部分组成：初始化表达式、循环条件和循环后操作。例如： ```javascript for (var i = 0; i < 10; i++) { // 循环体 } ``` 第二种是for...in循环，它用于遍历对象的可枚举属性。例如： ```javascript for (var key in obj) { if (obj.hasOwnProperty(key)) { // 循环体 } } ``` 这种循环遍历对象的属性，需要使用hasOwnProperty()方法来判断属性是否是对象自身的属性。而且，for...in循环不保证遍历的顺序。 第三种是forEach循环，它是ES5引入的数组方法，用于遍历数组的每个元素并执行回调函数。例如： ```javascript array.forEach(function(element) { // 循环体 }); ``` 需要注意的是，forEach循环只能用于数组，无法用于遍历对象。 这些是JavaScript中常见的for循环的几种写法。根据具体的需求和场景，选择适合的循环方式可以提高代码的效率和可读性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Javascript中for循环语句的几种写法总结对比](https://download.csdn.net/download/weixin_38530536/12981768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [JavaScript中for循环的几种写法与效率总结](https://download.csdn.net/download/weixin_38741030/12981413)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [js中的四种for循环](https://blog.csdn.net/weixin_43563571/article/details/116721965)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值