JS遍历方法性能比较

考虑游览器版本，内核优化，数据会有偏差；各个循环适用条件场景，优缺点，性能消耗

创建一个10w条数据的数组，遍历该数组，取出所有value，比较性能

const arr = [];
const values = [];
const length = 1000000;
for (let i = 0; i < length; i++) {
    arr.push({
        id: i + 1,
        value: `text${i+1}`
    });
}

for循环 js中最原始的遍历方法

// 使用let定义i为块级作用域，break，continue，return；
console.time('for');
for (let i = 0; i < arr.length; i++) {
    values.push(arr[i].value);
}
console.timeEnd('for');

==38.739ms==

// for循环优化版本，length用变量定义，不需要每次查找数组长度
console.time('forBest');
for (var i = 0, len = arr.length; i < len; i++) {
    values.push(arr[i].value);
}
console.timeEnd('forBest');

==28.186ms==

while

// while循环,一般用不不确定循环次数，对比for循环，for中局部变量在循环结束后会被释放回收；while需要在循环之前定义好变量；性能接近；
console.time('while');
var i = 0;
while (i < arr.length) {
    values.push(arr[i].value);
    i++;
}
console.timeEnd('while');

==29.187ms==

map

// map循环 ，返回新数组，不改变原数组值
console.time('map');
let a = arr.map(item => {
    return item.value;
});
console.timeEnd('map');

==48.471ms==

forEach

// forEach循环，不改变原数组 ，不能使用break语句中断循环，也不能使用return语句返回到外层函数,可以try catch
console.time('forEach');
arr.forEach((item, key) => {
    values.push(item.value);
});
console.timeEnd('forEach');

==54.872ms==

++综合以上数据第一梯队:while,for优化,for;第二梯队： map，forEach++

filter

// 不改变原数组，返回的是符合项组成新数组，不会跳出循环
console.time('filter');
arr.filter((item, key) => {
    return item.id > 0;
});
console.timeEnd('filter');

==91.107ms==

reduce

// 求和，求最大值，转换数组
// array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue);
// currentIndex 有初始值从0开始，没有从1开始
console.time('reduce');
const a = arr.reduce((preValue, current) => {
    preValue.push(current.value);
    return preValue;
}, []);
console.timeEnd('reduce');

==74.425ms==

for of

// 遍历具有iteratoer接口属性的数据，比如Array，map，set，不能用于object，可以用break、continue和return 配合使用，获取到的是值

some

// 对数组中每一项遍历，只要有一项返回true，则返回true, 返回值为布尔值
console.time('some');
arr.some((item, key) => {
    return item.id > 1;
});
console.timeEnd('some');

every

// 对数组中每一项遍历，每一项返回true,则返回true, 返回值为布尔值
console.time('every');
arr.every((item, key) => {
    return item.id > 1;
});
console.timeEnd('every');

数组查询方法 find indexOf includes

find() 方法返回数组中满足提供的测试函数的第一个元素的值；
indexOf()方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1；
includes() 方法用来判断当前数组是否包含某指定的值，返回值boolean

对象遍历

for in

// 遍历的是索引（键名），既可遍历对象，也可遍历数组。遍历数组时也会遍历可枚举的其他方法,所以不推荐 for..in遍历数组， 遍历数组，break、continue和return；
可以用obj.hasOwnPropery()判断是实例属性

values,keys, entries, Reflect.ownKeys()

// keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
// Object.keys返回所有不可枚举属性的key，Reflect.ownKeys返回所有属性，包括symbol属性