前言
最近看了好几篇总结数组中遍历方法的文章,然而“纸上得来终觉浅”,决定此事自己干。于是小小总结,算是自己练手了。
各种数组遍历方法
数组中常用的遍历方法有四种,分别是:
- for
- for-in
- forEach
- for-of (ES6)
for
使用for循环来遍历一个数组,代码如下:
// for循环
let arr=[2,4,6,10];
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
// for循环
let arr=[2,4,6,10];
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
当数组的长度不回改变时,我们使用一个变量来存储数组的长度arr.length
,以获得更好的效率(因为每次比较的时候都省去计算arr.length
)。改进后的算法如下:
// for循环
let arr=[2,4,6,10];
for(let i=0,len=arr.length;i<len;i++){
console.log(arr[i]);
}
// for循环
let arr=[2,4,6,10];
for(let i=0,len=arr.length;i<len;i++){
console.log(arr[i]);
}
当然如果不考虑输出顺序,为了简化,也可以使用i--
,代码如下:
// for循环
let arr=[2,4,6,10];
for(let i=arr.length;i>=0;i--){
console.log(arr[i]);
}
// for循环
let arr=[2,4,6,10];
for(let i=arr.length;i>=0;i--){
console.log(arr[i]);
}
for-in
通常情况下,我们可以这样使用:
//for-in 循环
let arr=[2,4,6,10];
let index;
for (index in arr){
console.log(arr[index]);
}
//for-in 循环
let arr=[2,4,6,10];
let index;
for (index in arr){
console.log(arr[index]);
}
输出结果
arr[0]=2
arr[1]=4
arr[2]=6
arr[3]=10
arr[0]=2
arr[1]=4
arr[2]=6
arr[3]=10
来,我们再看一个例子:
//for-in 循环
let per={
name:"zhang San",
sex:'male',
age:18
};
for(let key in per){
console.log("per[" + key + "]=" + per[key]);
}
//for-in 循环
let per={
name:"zhang San",
sex:'male',
age:18
};
for(let key in per){
console.log("per[" + key + "]=" + per[key]);
}
输出结果
per[name]=zhang San
per[sex]=male
per[age]=18
per[name]=zhang San
per[sex]=male
per[age]=18
根据上面的两个例子可以看到,for-in
不仅可以遍历数组
还可以遍历对象
。注意:
文章深入了解 JavaScript 中的 for 循环 指出for-in 遍历属性的顺序并不确定,即输出的结果顺序与属性在对象中的顺序无关,也与属性的字母顺序无关,与其他任何顺序也无关。,但是我在实际操作中,发现输出一直是上面的结果,即其按照了定义属性的顺序输出了。
此时,我们回头再次看一个for-in的例子:
Array.prototype.fatherName = "Father";
let arr=[2,4,6,10];
arr.name="hello,world!";
let index;
for (index in arr){
console.log('arr['+index+']='+arr[index]);
}
Array.prototype.fatherName = "Father";
let arr=[2,4,6,10];
arr.name="hello,world!";
let index;
for (index in arr){
console.log('arr['+index+']='+arr[index]);
}
输出结果
arr[0]=2
arr[1]=4
arr[2]=6
arr[3]=10
arr[name]=hello,world!
arr[Father]=Father
arr[0]=2
arr[1]=4
arr[2]=6
arr[3]=10
arr[name]=hello,world!
arr[Father]=Father
我们发现一个问题,使用for-in
在遍历的时候,它不仅遍历了对象上的属性,而且还遍历了对象父类原型上的属性。
所以for-in
并不适合遍历Array中的元素,更适合遍历对象中的属性,这也是创造for-in的初衷。但是对于稀疏数组
,使用它却是极好的。例子如下:
let key;
let arr = [];
arr[0] = "a";
arr[999] = "b";
arr[99999] = "c";
for(key in arr) {
if(arr.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 100000) {
console.log(arr[key]);
}
}
let key;
let arr = [];
arr[0] = "a";
arr[999] = "b";
arr[99999] = "c";
for(key in arr) {
if(arr.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 100000) {
console.log(arr[key]);
}
}
在上面的例子当中,由于for-in
只会遍历存在的实体,因此使用for-in
循环,只需要遍历3次,而使用for
循环则需要遍历100000次。
==for-in的性能==
由于使用它的时候,每次需要遍历对象中存在的实体,以及对应的原型链上的属性。因此其速度相比较其他for循环,要慢一些。所以除非明确要迭代一个
属性数量未知
的对象,否则应该避免使用for-in
。
forEach
forEach()
方法为数组中的每一个有效元素执行一次callback函数。遍历数组让数组中的每一个元素做一件事情。那些已经被删除(使用delete方法等情况)或者未初始化的项将被跳过(但不包含那些值未undefined的项目)。
注意,callback函数将依次被传入3个参数:
- 数组当前项的值
- 数组当前项的索引
- 数组对象本身
看个例子:
let arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr[name] = "Hello world";
arr.forEach((data, index, array) => {
console.log(data, index, array);
});
let arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr[name] = "Hello world";
arr.forEach((data, index, array) => {
console.log(data, index, array);
});
输出结果
a 0 ["a", 3: "b", 10: "c", name: "Hello world"]
b 3 ["a", 3: "b", 10: "c", name: "Hello world"]
c 10 ["a", 3: "b", 10: "c", name: "Hello world"]
a 0 ["a", 3: "b", 10: "c", name: "Hello world"]
b 3 ["a", 3: "b", 10: "c", name: "Hello world"]
c 10 ["a", 3: "b", 10: "c", name: "Hello world"]
值得注意的是:
- 没有输出
name
。why? 因为name是arr的属性,而0,3,10都是arr的索引。 - 这里的 index 是 Number 类型,并且也不会像 for-in 一样遍历原型链上的属性。
==forEach的性能==
在不同浏览器下测试的结果都是 forEach 的速度不如 for。可以看到forEach主要应用在遍历数组,但是它的性能并不如for,因此可以使用for就尽量不要使用forEach。
for-of(ES6中新增)
for-of
是ES6中新增的一个遍历数组或者类数组的方法。它的出现主要是为了解决ES5中3种遍历方式的缺陷:
- forEach 不能break 或者return
- for-in 的缺点更加明显。它不仅遍历了数组中的元素,还遍历了自定义属性,甚至连原型链上的属性都被访问到。
因此使用for-of
的优势在于:
- 这是最简洁、直接遍历数组的方式
- 这个方法避开了for-in循环的缺陷
- 与forEach不同,它可以正确响应break,continue,return 语句。
说了这么多for-of
的优点,那么它有没有缺点呢?
for-of
不支持普通对象遍历,如果想要遍历普通对象,使用for-in
例子:
let arr=[3,7,9];
for (let key of arr){
console.log(key);
}
let arr=[3,7,9];
for (let key of arr){
console.log(key);
}
结果
3
7
9
3
7
9
==性能==
由于
for-of
也是只遍历可迭代对象的数据,相比于for-in
,效率会更高。
Other 循环方法
说明:下面的方法,Map,Reduce,Filter,Every,some方法都是面向数组的。不是普通对象。
map(不改变原数组)
map
方法(映射)给数组中的每个元素执行一次callback函数,执行callback函数的返回值组成一个新数组。未被初始化项、已经被删除项(使用delete等方法)、数组的属性
不会被执行callback函数。
请看如下例子:
let arr=new Array(5);
arr[1]=1;
arr[2]=2;
arr.name="hello,world!";
delete(arr[2]);
let fireArr=arr.map(item=>item*5);
console.log(fireArr);
let arr=new Array(5);
arr[1]=1;
arr[2]=2;
arr.name="hello,world!";
delete(arr[2]);
let fireArr=arr.map(item=>item*5);
console.log(fireArr);
输出结果:
[empty,5,empty,empty,empty]
[empty,5,empty,empty,empty]
reduce
reduce
方法,让数组的前项后项
进行某种计算。累计最终的结果。
例子:
//reduce方法
let arr = [4,7,8,3];
let total= arr.reduce( function (x, y) {
console.log(x);
return x + y;
});
console.log(total);
//reduce方法
let arr = [4,7,8,3];
let total= arr.reduce( function (x, y) {
console.log(x);
return x + y;
});
console.log(total);
输出结果
4
11
19
22
4
11
19
22
filter(不改变原数组)
filter
的意思是滤镜、过滤器,顾名思义就是用来筛选符合某种条件的元素
,将符合条件的元素重新组成一个新的数组。
还是看一个例子:
let arr = [2,3,4,5,6];
arr.name=8;
let morearr = arr.filter(function (number) {
return number > 3
});
console.log(morearr);
let arr = [2,3,4,5,6];
arr.name=8;
let morearr = arr.filter(function (number) {
return number > 3
});
console.log(morearr);
输出结果
4, 5, 6
4, 5, 6
在上面的例子中,将大于索引
大于3
的元素输出。而不会输出属性。
every
every
方法为数组中的每个元素执行一次 callback 函数,当它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素,就立刻返回false。否则,callback为每个元素返回true,every就返回true。
看一面的例子
let arr = [1,2,3,4,5];
let result = arr.every(function (item, index) {
return item > 0
});
console.log(result);
let arr = [1,2,3,4,5];
let result = arr.every(function (item, index) {
return item > 0
});
console.log(result);
返回结果
true
true
some
some
为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。
let arr = [1,2,3,4,5];
let result = arr.some(function (item,index) {
return item > 3
});
console.log(result);
let arr = [1,2,3,4,5];
let result = arr.some(function (item,index) {
return item > 3
});
console.log(result);
iterator
最后,还有一个东西不得不介绍,ES6新增的iterator
,迭代器。
看例子:
const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
iterator
名叫“迭代器”,iter.next()
实际上是探测下一个位置是否有数据的探测器,如果有就返回false;如果下一个位置上没有,就返回true。
效率问题
1、循环效率
for > for-of > forEach > filter > map > for-in
for > for-of > forEach > filter > map > for-in
可以看到 的是for循环的速度是最快的,是最老的循环方法,也是优化得最好的;其次是for-of这个是es6才新增的循环非常好用,最慢是for-in,原因是它遍历了原型链上的属性。
2、some 和 every
他们都是根据判断条件,返回给整个数组Boolean 值的方法,every 的执行速度会比some快很多。
- every是不满足判断条件后,立即返回“假的”false值给整个数组。否则继续执行,返回true。
- some是满足判断条件后,立刻返回“真值”true给整个数组。否则继续执行,返回false。
参考文档:深入了解 JavaScript 中的 for 循环