• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

JS数组遍历的十二种方式

开发技术 开发技术 4周前 (09-01) 18次浏览
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

喜欢 (0)