ES6数组遍历方法整理

人生浅薄
631 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Array.forEach()

forEach 遍历方法本质上等同于 for 循环，它按顺序遍历数组，将数组中的每一项传入回调函数中执行相应操作，不直接改变原数组，可以间接修改原数组，无返回值。该方法不支持 continue（可以用 return 代替），不支持 break；

语法: Array.forEach((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：无
let array = ["yuan", "cheng", "zhuang", "game", "name", "miao"];
​
let variable = array.forEach((item, index, arr) => {
  arr[index] = "lll";
});
console.log(array); // ["lll", "lll", "lll", "lll", "lll", "lll"] 可以间接修改原数组
console.log(variable); // undefined 无返回值

Array.map()

map 方法按顺序调用数组的每一个元素传递给回调函数执行相应操作，不直接改变原数组，返回新数组，新数组中的元素为原数组元素调用函数处理后的 return 值。执行效率低，不及 forEach。

语法: Array.map((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：Array（length 与原数组相同）
let array = ["yuan", "cheng", "zhuang", "game", "name", "miao"];
​
let variable = array.map((item, index, arr) => {
  return item + index;
});
console.log(array); // ["yuan", "cheng", "zhuang", "game", "name", "miao"]
console.log(variable); // ["yuan0", "cheng1", "zhuang2", "game3", "name4", "miao5"]

Array.filter()

filter 方法按顺序遍历数组元素传入过滤函数，不直接修改原数组，返回新数组，新数组中的元素为符合过滤条件的所有元素。

语法： Array.filter((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：Array（length 可以与原数组不同）
let array = ["yuan", "cheng", "zhuang", "game", "name", "miao"];
​
let variable = array.filter((item, index, arr) => {
  return item.length > 4;
});
console.log(array); //  ["yuan", "cheng", "zhuang", "game", "name", "miao"]
console.log(variable); // ["cheng", "zhuang"]

Array.some()

some 方法按顺序遍历数组，检测数组是否存在满足条件的元素，当任一 callback 返回值匹配为 true 时，遍历终止，直接返回 true。当所有 callback 匹配均为 false，则返回 false；不修改原数组

语法： Array.some((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：Boolean
let array = ["yuan", "cheng", "zhuang", "game", "name", "miao"];
​
let variable = array.some((item, index, arr) => {
  return item.length > 4;
});
console.log(array); //  ["yuan", "cheng", "zhuang", "game", "name", "miao"]
console.log(variable); // true

Array.every()

every 方法按顺序遍历数组，检测数组的所有元素是否都符合指定条件，当数组中任一 callback 返回为 false，则终止遍历，直接返回 false。当所有 callback 匹配均为 true，则返回 true；不修改原数组

语法： Array.every((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：Boolean
let array = ["yuan", "cheng", "zhuang", "game", "name", "miao"];
​
let variable = array.every((item, index, arr) => {
  return item.length > 4;
});
console.log(array); //  ["yuan", "cheng", "zhuang", "game", "name", "miao"]
console.log(variable); // false

Array.reduce()

reduce 方法按正向顺序遍历数组，通过向回调函数中传入上次执行的累加值，完成全部数组元素值的累加。不修改原数组，返回累加值。

语法：Array.reduce((count,item,index,arr)=>{},count)

  • count：上次累加值
  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • count：初始累加值；
  • 返回值：Number（数组元素累加后的值）
let array = [11, 22, 33, 44, 55, 66];
​
let variable = array.reduce((count, item, index, arr) => {
  return count + item;
}, 0);
console.log(array); // [11, 22, 33, 44, 55, 66]
console.log(variable); // 231

Array.reduceRight()

reduce 方法按逆向顺序遍历数组，通过向回调函数中传入上次执行的累加值，完成全部数组元素值的累加。不修改原数组，返回累加值。

语法：Array.reduceRight((count,item,index,arr)=>{},count)

  • count：上次累加值
  • item：数组元素；
  • index：数组索引；
  • arr：数组本身
  • count：初始累加值
  • 返回值：Number（数组元素累加后的值）
let array = [11, 22, 33, 44, 55, 66];
​
let variable = array.reduceRight((count, item, index, arr) => {
  return count + item;
}, 0);
console.log(array); // [11, 22, 33, 44, 55, 66]
console.log(variable); // 231

Array.indexOf()

indexOf 方法按正向顺序循环遍历数组，遍历过程中将数组元素值与传入值进行比对，如果比对成功，则终止遍历，返回对比成功元素的索引。如果有多个元素可比对成功，则返回正向第一个比对成功的元素；如果没有对比成功，则返回-1；不修改原数组

语法：Array.indexOf(item)

  • item：数组元素；
  • 返回值：Number（元素索引）
let array = ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"];
​
let variable = array.indexOf("yuan");
console.log(array); // ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"]
console.log(variable); // 0

Array.lastIndexOf()

lastIndexOf 方法按逆向顺序循环遍历数组，遍历过程中将数组元素值与传入值进行比对，如果比对成功，则终止遍历，返回对比成功元素的索引。如果有多个元素可比对成功，则返回逆向第一个比对成功的元素；如果没有对比成功，则返回-1；不修改原数组

语法：Array.lastIndexOf(item)

  • item：数组元素；
  • 返回值：Number（元素索引）
let array = ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"];
​
let variable = array.lastIndexOf("yuan");
console.log(array); // ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"]
console.log(variable); // 4

Array.findIndex()

findIndex 方法按正向顺序遍历数组，将数组元素与进行筛选，查找第一个符合筛选条件的数组元素。当回调函数中筛选条件成立时，终止遍历，返回该符合条件的数组元素的索引。如果没有符合条件的元素，则返回-1；不修改原数组

语法：Array.findIndex((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：Number（符合筛选条件的数组元素的索引）
let array = ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"];
​
let variable = array.findIndex((item, index, arr) => {
  return item == "cheng";
});
console.log(array); // ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"]
console.log(variable); // 1

Array.find()

find 方法按顺序遍历数组，将数组元素与进行筛选，查找第一个符合筛选条件的数组元素。当回调函数中筛选条件成立时，终止遍历，返回该符合条件的数组元素。如果没有符合条件的元素，则返回 undefined；不修改原数组

语法：Array.find((item,index,arr)=>{})

  • item：数组元素；
  • index：数组索引；
  • arr：数组本身；
  • 返回值：Number | String | Object | Boolean | Array | undefined（符合筛选条件的数组元素）
let array = ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"];

let variable = array.find((item, index, arr) => {
  return item == "cheng";
});
console.log(array); // ["yuan", "cheng", "zhuang", "game", "yuan", "name", "miao"]
console.log(variable); // cheng
avatar
文章
阅读
粉丝