JS 常用遍历数组的方法

aiyow
156 阅读5分钟

方法一：Array.forEach()

forEach()方法对数组的每个元素执行一次给定的函数。

语法：

forEach((element, index, array) => { /* … */ })

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 内联回调函数
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
  • callbackFn：为数组中的每个元素执行的函数。函数调用时带有以下参数：
    • element：数组中正在处理的当前元素。
    • index [可选]：数组中正在处理的当前元素的索引。
    • array [可选]：forEach()方法正在操作的数组。
  • thisArg [可选]：当执行回调函数callbackFn时，用作this的值。

注：forEach()除了抛出异常外，无法中止或者跳出循环。在回调函数中，即使使用了return返回一个值，但它返回的还是undefined。

示例：

var arr = [1, 2, 3, 4, 5];
var newArr = [];

var res = arr.forEach((element, index) => {
    newArr.push(element * 2);
    if(index == 1){
        return index;
    }
});

console.log(res); // undefined
console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(newArr); // [ 2, 4, 6, 8, 10 ]

方法二：Array.some()

some()方法测试数组中是不是至少有一个元素通过了提供的函数测试。数组中至少有一个元素通过测试就返回true；所有元素都没通过或者数组为空则返回false。

语法：

// 箭头函数
some((element, index, array) => { /* … */ })

// 回调函数
some(callbackFn)
some(callbackFn, thisArg)

// 内联回调函数
some(function(element, index, array){ /* … */ })
some(function(element, index, array) { /* … */ }, thisArg)
  • callbackFn：用来测试每个元素的函数，带有以下参数：
    • element：数组中正在处理的当前元素。
    • index [可选]：数组中正在处理的当前元素的索引。
    • array [可选]：方法正在操作的数组。
  • thisArg [可选]：当执行回调函数callbackFn时，用作this的值。

注：some()调用时不会改变数组。some()遍历的范围在第一次调用callbackFn时就确定了，调用后添加到数组中的值不会被callbackFn访问到。

示例：

/* 检测在数组中是否有元素大于10 */
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

/* 判断数组元素中是否存在某个值 */
['apple', 'banana', 'mango', 'guava'].some(x => x === 'apple'); // true
['apple', 'banana', 'mango', 'guava'].some(x => x === 'banana'); // false

方法三：Array.every()

every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试，返回一个boolean值。若是空数组，则任何情况下都返回true。

语法：

// 箭头函数
every((element, index, array) => { /* … */ })

// 回调函数
every(callbackFn)
every(callbackFn, thisArg)

// 内联回调函数
every(function(element, index, array){ /* … */ })
every(function(element, index, array) { /* … */ }, thisArg)
  • callbackFn：用来测试每个元素的函数，带有以下参数：
    • element：数组中正在处理的当前元素。
    • index [可选]：数组中正在处理的当前元素的索引。
    • array [可选]：方法正在操作的数组。
  • thisArg [可选]：当执行回调函数callbackFn时，用作this的值。

注：every()调用时不会改变数组。every()遍历的范围在第一次调用callbackFn时就确定了，调用后添加到数组中的值不会被callbackFn访问到。

示例：

/* 检测在数组中是否所有元素大于10 */
[12, 5, 8, 130, 44].every(ele => ele >= 10);   // false
[12, 54, 18, 130, 44].every(ele => ele >= 10); // true

方法四：Array.filter()

filter()方法返回一个新数组，包含所欲通过所提供函数测试的所有元素。

语法：

// 箭头函数
filter((element, index, array) => { /* … */ })

// 回调函数
filter(callbackFn)
filter(callbackFn, thisArg)

// 内联回调函数
filter(function(element, index, array){ /* … */ })
filter(function(element, index, array) { /* … */ }, thisArg)
  • callbackFn：用来测试数组中每个元素的函数。返回true表示该元素通过测试，保留该元素，false则不保留，带有以下参数：
    • element：数组中正在处理的当前元素。
    • index [可选]：数组中正在处理的当前元素的索引。
    • array [可选]：正在操作的数组。
  • thisArg [可选]：当执行回调函数callbackFn时，用作this的值。

示例：

/* 去掉小于10的值 */
[12, 5, 8, 130, 44].every(ele => ele >= 10);   // [12, 130, 44]

方法五：Array.reduce()

reduce()方法返回一个新数组，包含所欲通过所提供函数测试的所有元素。

语法：

// 箭头函数
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// 回调函数
reduce(callbackFn)
reduce(callbackFn, initialValue)

// 内联回调函数
reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue)
  • callbackFn：一个"reducer"函数，包含四个参数
    • previousValue：上一次调用callbackFn时的返回值。在第一次调用时，若指定了初始值initialValue，则值为initialValue，否则为数组索引为0的元素。
    • currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值initialValue，则其值为数组索引为0的元素，否则为索引为1的元素。
    • currentIndex [可选]：数组中正在处理的元素的索引。若指定了initialValue，则起始索引号为0，否则为1。
    • array [可选]：用于遍历的数组
  • initialValue [可选]：作为第一次调用callbackFn时参数previousValue的值，若指定了初始值，则currentValue则将使用数组第一个元素；否则previousValue将使用数组第一个元素，而currentValue将使用数组第二个元素。

注：数组为空且初始值未提供时会抛出异常

示例：

/* 数组求和 */  
var sum = [0, 1, 2, 3].reduce(function (a, b) {
  return a + b;
}, 0); 
// 6

/* 将二维数组转化为一维*/ 
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  (a, b) => a.concat(b),
  []
);
// [0, 1, 2, 3, 4, 5]

方法五：Array.map()

map()方法创建一个新数组，这个数组由原数组中每个元素都调用一次提供的函数后的返回值组成。

语法：

// 箭头函数
map((element, index, array) => { /* … */ })

// 回调函数
map(callbackFn)
map(callbackFn, thisArg)

// 内联回调函数
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)
  • callbackFn：生成新数组元素的函数，带有以下参数：
    • element：数组中正在处理的当前元素。
    • index [可选]：数组中正在处理的当前元素的索引。
    • array [可选]：方法正在操作的数组。
  • thisArg [可选]：当执行回调函数callbackFn时，用作this的值。

注：当不打算使用返回的新数组时或者回调函数中没有返回值，则不适合使用map()

示例：

/* 求原数组中对应数字的平方 */
var numbers = [1, 4, 9];
var roots = numbers.map((num) => num*num); 

// number:[1, 4, 9]
// roots:[1, 16, 81]
avatar
文章
阅读
粉丝