js中数组循环遍历

js中数组循环方法

今天在这里和大家探讨一下js中常见的五种数组循环遍历
首先创建一个数组实例

let info = [];
    for (let i = 0; i < 10; i++) {
      info.push({ id:i+1,value: Math.random() * 100 });
    }
    console.table(info);

info 中有10个对象,每个对象中有一个id和一个value字段是0~100的数字
在这里插入图片描述

1.for-i

利用数组角标进行遍历,最常见的循环,也是遍历数组性能最高的循环

for (let i = 0; i < info.length; i++) {
      console.log(info[i]);
    }

利用下角标拿到数组对象

还可以做一些简单优化,比如储存数组长度,不需要每次循环都去获取数组的属性,这对庞大的数组会有明显效率的提升

let len = info.length
for (let i = 0; i < len; i++) {
      console.log(info[i]);
    }

结果是一样的
在这里插入图片描述

2.for-in

for (let key in info) {
          console.log(info[key]);
      }

在for-in 遍历数组中 拿到的对象是数组的下角标,需要使用[]获取数组元素
在这里插入图片描述

for (let key in info) {
          console.log(info[key]);
      }

3.for-of(需要ES6支持)

这种方式是es6里面用到的,性能要好于forin,但仍然比不上普通for-i循环

 for (let item of info) {
        console.log(item);
    }

4.for-each

数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱

info.forEach(function(item){  
        console.log(item);
      });

5.map

js对象中自带的map方法, 这种方式也是用的比较广泛的,虽然用起来比较优雅,但实际效率还比不上foreach

info.map(item => {
        console.log(item);
      })

6.各种数组性能测试

这里创建一个长度1000W的数组用于测试结果和代码如下
在这里插入图片描述

 let info = [];
    function add() {
        let start = new Date().getTime(); //起始时间
        for (let i = 0; i < 10000000; i++) {
            info.push({ value: Math.random() * 100 });
        }
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    function testfori() {
        let start = new Date().getTime(); //起始时间
        for (let i = 0; i < info.length; i++) {
            info[i].fori = "fori"
        }
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    function testforisurper() {
        let start = new Date().getTime(); //起始时间
        let len = info.length
        for (let i = 0; i < len; i++) {
            info[i].fori = "fori"
        }
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    function testforof() {
        let start = new Date().getTime(); //起始时间
        for (let item of info) {
            item.forof = "forof"
        }
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    function testforin(){
        let start = new Date().getTime(); //起始时间
        for (let key in info) {
            info[key].forin = "forin"
        }
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    function testmap(){
        let start = new Date().getTime(); //起始时间
        info.map(item => {
            item.testmap="testmap"
        })
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    function testeach(){
        let start = new Date().getTime(); //起始时间
        info.forEach(function(item){  
            item.forea="each"
        });
        let end = new Date().getTime(); //结束时间
        return end - start + "ms";//返回函数执行需要时间
    }
    console.log("创建数组"+add());
    console.log("fori-------------"+testfori());
    console.log("testforisurper---"+testforisurper());
    console.log("forof------------"+testforof());
    console.log("forin------------"+testforin());
    console.log("foreach----------"+testeach());
    console.log("map--------------"+testmap());
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页