总结

一、常规方法

for的4种写法

while

二、ES6方法

for...of，得到每项元素

for...in，得到的是数组索引

三、数组实例上的遍历方法

forEach()，得到每一项元素

map()

filter()，筛选一个数组

some()，数组某项满足条件

every ()，数组每项都满足条件

总结

不需要保留原数组，不需要中断循环，使用forEach代替常规for
需要保留原数组并使用逻辑处理后的新数组时用map
遍历对象时，使用for..of+Object.keys()，尽量不使用for..in
根据业务场景选择使用filter、some、every等

一、常规方法

for的4种写法

let tmp_array = [1,2,3,4,5,6,7]
// 方法一 数组长度是会动态变化，每次循环会重新计算length长度，可能会出现死循环
for (let i = 0; i < tmp_array.length; i++) {console.log(tmp_array[i])
}
// 方法二 缓存length 值，无需重新计算length
for (let i = 0, len = tmp_array.length; i < len; i++) {console.log(tmp_array[i])
}
// 方法三 倒序
for (let i = tmp_array.length-1; i >= 0; i--){console.log(tmp_array[i])
}
//倒序简洁版本
//两个分号之间的表达式为 true 会一直执行，直到判断为 false (i = 0)
for (let i = tmp_array.length-1; i--;){arr1.push(arr[i])
}
// 方法四
for (let i = 0, tmp; tmp = tmp_array[i]; i++) {console.log(tmp)
}

4种写法在时间和内存消耗是上无大差别，常用方法一、二。

while

时间和内存消耗与常规for无区别，数组遍历较少使用。

二、ES6方法

for...of，得到每项元素

let array = [1,2,3,4,5,6,7];
for(let ele of array) {console.log(ele);
};//字符串也可以使用for...of遍历
let str = "helloabc";
for(let ele of str) {console.log(ele);
}//对象不可以使用
let table = {a : 10,b : true,c : "jadeshu"
};for(let item of table) {console.log(item); //table is not iterable
}

可以遍历任何可迭代对象，如数组、字符串、Map、Set、DOM collection等，
可以使用 break，continue和return 终止循环，
内存占用少。

对象使用for...of

//通过Object.keys遍历
for (let key of Object.keys(table)) {console.log(key + ": " + table[key]);
}

for...in，得到的是数组索引

var array = [1,2,3,4,5,6,7];
for(let index in array) {console.log(index,array[index]);
};//也可以对enumerable对象操作!得到的是每项的索引key
var table = {a : 10,b : true,c : "jadeshu"
};
for(let index in table) {console.log(index, table[index]);
}

一般用于遍历对象，会将本身属性和原型链上的属性（除系统内置属性）全部遍历出来即便是不可枚举属性（enumerable:false), 可以通过 items.hasOwnProperty来遍历本身属性,由于查询到自己的原型链上，所以性能方面比较差，占用内存高。

三、数组实例上的遍历方法

forEach()，得到每一项元素

不会返回新的数组，常用于遍历数组，不能中断循环(使用break或return语句)。

我在工作中需要遍历对象数组并在某条件满足时改变每项值时使用，写法更优雅。

var array = [1,2,3,4,5,6,7];array.forEach(item => {console.log(item);
});

map()

返回一个新数组，不能中断循环

由于有返回值，无需额外调用新数组的push方法，所以在执行浅拷贝任务上，内存占用很低

常用于需要对原数组进行逻辑处理并根据处理逻辑获取一个新数组。

let array = [1,2,3,4,5,6,7]
let copyArr = array.map(function(value){return value+10
})
console.log(copyArr)

filter()，筛选一个数组

返回一个新数组，不改变原数组，不对空数组检测

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {return s && s.trim();
});
r; // ['A', 'B', 'C']

some()，数组某项满足条件

返回true/false，不改变原数组，不对空数组检测

var arr = ['', 'pear', 'orange'];
let tmp = arr.some(function (s) {return s.length > 0;
})
console.log(tmp); // true, 因为有个元素满足s.length>0

every ()，数组每项都满足条件

返回true/false，不改变原数组，不对空数组检测

var arr = ['Apple', 'pear', 'orange'];
let tmp = arr.every(function (s) {return s.length > 0;
})
console.log(tmp); // true, 因为每个元素都满足s.length>0

js数组遍历方法总结与对比相关推荐

js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
js数组遍历方法总结
1.for循环使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. for(j = 0, j < arr.length; j++) {} 2.forEach循 ...
js数组遍历方法及其区别
1.for循环支持break和continue const arr = [1, 2, 3, 4, 5] for (let i = 0; i < arr.length; i++) {if (ar ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
html遍历数组,JS数组遍历的几种方式
JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下: for(j = ...
JS数组去重方法记录
js数组去重方法 1.遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组代码如下(示例): function getArray(ar) {va ...
js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9];for ( v ...
转→js数组遍历千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

js数组遍历方法总结与对比

总结

一、常规方法

for的4种写法

while

二、ES6方法

for...of，得到每项元素

for...in，得到的是数组索引

三、数组实例上的遍历方法

forEach()，得到每一项元素

map()

filter()，筛选一个数组

some()，数组某项满足条件

every ()，数组每项都满足条件

js数组遍历方法总结与对比相关推荐

最新文章

热门文章