JavaScript中数组遍历的全部方式
前言
JavaScript想必大家都不陌生了,其中的字符串和数组大家经常都会用到,今天就让我们来说说这里面的数组对象的遍历吧,因为遍历经常使用的缘故,所以小编带着大家来解锁遍历的所有方法,以便大家能够更深入的了解数组遍历,并在实际项目中灵活运用。
# 一. Entries
这个是 ES6中提供的用于遍历数组的方法,它会返回一个遍历器对象,Entries是对键值对的遍历。
let array = [1, 2, 3, 4, 5];
for ([k, v] of array.entries()) {
console.log('item : k=',k, ', v=',v);
}
输出:
item : k= 0 , v= 1
item : k= 1 , v= 2
item : k= 2 , v= 3
item : k= 3 , v= 4
item : k= 4 , v= 5
# 二. For循环
最常用的数组遍历的方法,但是效率不够高,一般建议使用临时变量来存储数组中的数据进行遍历读取输出,避免重复。如下:
let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
console.log('item=',i);
}
# 三. For...in....
用于对数组或者对象的属性进行循环操作,每执行一次,就会对数组的元素或者对象的属性进行一次操作,如下:
let array = [1, 2, 3, 4, 5];
for (let index in array) {
console.log('item : index=',index, 'data=',array[index]);
}
输出:
item : index= 0 data= 1
item : index= 1 data= 2
item : index= 2 data= 3
item : index= 3 data= 4
item : index= 4 data= 5
# 四. For...of....
可直接遍历数组的元素的值,对于遍历数组来说非常方便,推荐使用这种方法,如下:
let array = [1, 2, 3, 4, 5];
for (let item of array) {
console.log('item : item=',item);
}
# 五. forEach
它可以遍历数组中的每一项,没有返回值,对原数组无影响,而且不止IE浏览器。如下:
array.forEach(function (item, index, array) {
console.log('item : item=',item, ', index=',index);
})
## 六. filter 根据指定条件来遍历数组但不改变原始数组,返回新数组,相当于一个过滤器,如下:
array.filter(function (item, index, array) {
console.log('item : item=',item, ', index=',index);
})
# 七. find
通过寻找数组中的对象返回数组中符合目标函数条件的第一个元素。否则返回undefined ,如下:
let array = [1, 2, 3, 4, 5];
array.find(function (item) {
return item == 1;
})
输出: 0
# 八. findIndex
通过指定条件找出数组对象中满足条件的值的下标,如果没找到返回-1,如下:
let array = [1, 2, 3, 4, 5];
array.findIndex(function (item) {
return item == 1;
})
输出: 0
# 九. keys
和Entries同属于ES6新方法,用于对键的遍历,如下:
let array = [1, 2, 3, 4, 5];
for (let key of array.keys()) {
console.log('item : index=', key, 'data=', array[key]);
}
输出:
item : index= 0 data= 1
item : index= 1 data= 2
item : index= 2 data= 3
item : index= 3 data= 4
item : index= 4 data= 5
# 十. map
克隆原数组并且不修改原数组的值,回调函数中支持Return返回值,如下:
let array = [1, 2, 3, 4, 5];
array.map(function (item, index, array) {
console.log('item : index = ', index, ', data=', item);
})
输出:
item : index= 0 data= 1
item : index= 1 data= 2
item : index= 2 data= 3
item : index= 3 data= 4
item : index= 4 data= 5
# 十一. some
它可以对数组中每一项的值运行指定函数,如果该函数对任意一项返回True,则返回True,和Every相反,如下:
let array = [1, 2, 3, 4, 5];
array.some(function (item, index, array) {
console.log('item : index = ', index, ', data=', item);
})
输出:
item : index= 0 data= 1
item : index= 1 data= 2
item : index= 2 data= 3
item : index= 3 data= 4
item : index= 4 data= 5
# 十二. values
和Entries同属于ES6新方法,用于对值的遍历,如下:
let array = [1, 2, 3, 4, 5];
for (let data of array.values()) {
console.log('item : data=', data);
}
输出:
item : data= 1
item : data= 2
item : data= 3
item : data= 4
item : data= 5