正文

JS数组遍历的十二种方式

IP云V管理员/2022-08-12/5 阅读

08/12

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

遍历有如下几种方式

数组方法

map
forEach
filter
find
findIndex
every
some
reduce
reduceRight

其他方法

for
for in
for of

数组方法

map

核心

创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
不改变原数组
返回值是一个新的数组

let testArr = ['子项0','子项1','子项2'];
let resultArr = testArr.map((item, index) => {
return `处理·${item}`
});
console.log(resultArr);
// 结果： ["处理·子项0", "处理·子项1", "处理·子项2"]

缺陷

可以使用return，但是不能使用break和continue

forEach

核心

对数组的每个元素执行一次提供的函数。
总是返回undefined。
不改变原数组

let testArr = ['子项0','子项1','子项2'];
testArr.forEach((item, index)=>{
return `forEach处理${item}`
});

缺陷

可以使用return，但是不能使用break和continue

filter

核心

对数组的每一项都进行过滤，返回符合条件的item组成的数组
不会改变原数组

let filterArr = ['子项0','子项1','子项2'];
let filterResult = filterArr.filter((item, index) => {
return item === '子项0';
});
console.log(filterArr); // ["子项0", "子项1", "子项2"]
console.log(filterResult); ["子项0"]

缺陷

可以使用return，但是不能使用break和continue

find

核心

遍历数组，找到第一个符合条件的项，并返回该项。否则返回undefined
不会改变数组

let findArr = ['子项0','子项1','子项2']
let findResult = findArr.find((item, index) => {
return item === '子项0';
});
console.log(findResult);
// 结果为: 子项0

缺陷

可以使用return，但是不能使用break和continue

findIndex

核心

遍历数组找到第一个符合条件的项，并返回该项的索引值。否则返回-1。
不会改变数组对象。

let findIndexArr = ['子项0','子项1','子项2'];
let findIndexResult = findIndexArr.findIndex((item, index)=>{
return item === '子项0';
});
console.log(findIndexResult);
// 结果为： true

缺陷

可以使用return，但是不能使用break和continue

every

核心

对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。简单说就是看数组的每个元素是否符合要求，都符合则返回true，否则返回false

let everyArr = [2,3,4];
let everyResult = everyArr.every((item, index)=>{
return item > 0
});
console.log(everyResult);
// 结果为: true

缺陷

可以使用return，但是不能使用break和continue

some

是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

let someArr = [2,3,4];
let someResult = someArr.some((item, index)=>{
return item > 3
});
console.log(someResult);
// 结果为: true

缺陷

可以使用return，但是不能使用break和continue

reduce

接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
第二个参数作为第一次调用的a的值

// reducer
let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{
return a + b;
});
console.log(reduceResult);
// 结果: 10

缺陷

可以使用return，但是不能使用break和continue

reduceRight

和reduce一样是累加器，不过是从右往左计算
第二个参数作为第一次调用的a的值

let reduceRightArr = [0,1,2,3,4]
let reduceRightResult = reduceRightArr.reduceRight((a, b)=>{
return a + b;
});
console.log(reduceRightResult);
// 结果: 10

缺陷

可以使用return，但是不能使用break和continue

其他方法

for循环

核心

使用临时变量，并且遍历的是key.

let testArr = ['子项0','子项1','子项2'];
for(var i = 0; a < testArr.length; i++){
console.log(testArr[i]);
}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = ['子项0','子项1','子项2'];
// break
for(var i = 0; i < testArr.length; i++) {
if(i === 1) {
break;
}
console.log(testArr[i]);
}
// 结果为：子项0// continue
for(var i = 0; i < testArr.length; i++) {
if(i === 1) {
continue;
}
console.log(testArr[i]);
}
// 结果为: 子项0 子项目2//return
for(var i = 0; i < testArr.length; i++) {
if(i === 1) {
return;
}
console.log(testArr[i]);
}
// 结果为什么也没有

for in循环

核心

遍历的是key

let testArr = ['子项0','子项1','子项2'];
for(let i in testArr){
console.log(testArr[i])
}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = ['子项0','子项1','子项2'];
// break
for(let i in testArr){
if(i === 1) {
break;
}
console.log(testArr[i]);
}
// 结果为：子项0// continue
for(let i in testArr){
if(i === 1) {
continue;
}
console.log(testArr[i]);
}
// 结果为: 子项0 子项目2//return
for(let i in testArr){
if(i === 1) {
return;
}
console.log(testArr[i]);
}
// 结果为什么也没有

for of循环

核心

遍历的是value

let testArr = ['子项0','子项1','子项2'];
for(let i of testArr) {
console.log(i);
}

缺陷

可以正常使用使用break和continue, 但是不能正常使用return

let testArr = ['子项0','子项1','子项2'];
// break
for(let value of testArr){
if(value === '子项1'){
break;
}
console.log(value);
}
// 结果为：子项0// continue
for(let value of testArr){
if(value === '子项1'){
continue;
}
console.log(value);
}
// 结果为: 子项0 子项目2//return
for(let value of testArr){
if(value === '子项1'){
return;
}
console.log(value);
}
// 结果为什么也没有

注意️

数组方法都不可以用break和continue，for循环之类的不可以用return但是可以正常使用break和continue

相关阅读

目录[+]