JS数组遍历的十二种方式

遍历有如下几种方式

数组方法

• 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