javascript数组常用高阶函数

一·数组常用高阶函数

1. Array.prototype.filter()
   

   此方法接收一个回调函数作为参数，回调参数接受三个参数，item(源数组中的每一个元素)、index(数组下标)、arr(源数组)。filter返回一个新数组，此方法用于过滤一个数组中符合规定条件的元素。

   const arr = [1, 34, 52, 63, 100];
   
   const newArr1 = arr.filter((item) => {
     return item % 2 === 0;
   });
   
   console.log(newArr1);
   // [ 34, 52, 100 ]
   

2. Array.prototype.map()
   

   此方法接收一个回调函数作为参数，回调参数接受三个参数，item(源数组中的每一个元素)、index(数组下标)、arr(源数组)。map返回一个新数组，此方法用于将数组中的元素做一些操作后映射到一个新数组中。

   const arr = [1, 34, 52, 63, 100];
   
   const newArr1 = arr.map((item) => {
     return item * 10;
   });
   
   console.log(newArr1);
   // [ 10, 340, 520, 630, 1000 ]
   

3. Array.prototype.reduce()
   

   官网：此方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 ，迭代器将从第二个元素开始执行（索引为 1 而不是 0）

   我自己的话总结：这个函数用于做一个数组的累加求和或者求乘积，如果第二个参数不传，则第一次调用回调函数的时候previous为数组第一个元素，current为第二个元素。如果传则previous为传入的值，current为数组第一个元素。

   const arr = [1, 2, 3, 4];
   
   const result = arr.reduce((previous, current) => {
     return previous + current;
   });
   console.log(result);
   // 10
   
   const result1 = arr.reduce((previous, current) => {
     return previous + current;
   },10);
   
   console.log(result1);
   // 20
   

4. Array.prototype.forEach()
   

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

   const arr = [1, 2, 3, 4, 5];
   
   arr.forEach((item, index, arr) => {
     console.log(item, index, arr);
   });
    /*
   1 0 [ 1, 2, 3, 4, 5 ]
   2 1 [ 1, 2, 3, 4, 5 ]
   3 2 [ 1, 2, 3, 4, 5 ]
   4 3 [ 1, 2, 3, 4, 5 ]
   5 4 [ 1, 2, 3, 4, 5 ]
   */
   

Array.prototype.find()
Array.prototype.findIndex()

`**find()**` 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 [`undefined`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)。

**findIndex()**方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const arr = [
  {
    name: "刘德华",
    age: 23,
  },
  {
    name: "张学友",
    age: 33,
  },
  {
    name: "黎明",
    age: 43,
  },
  {
    name: "郭富城",
    age: 53,
  },
];
const result = arr.find((item) => {
  return item.age === 23;
});
const result1 = arr.findIndex((item) => {
  return item.age === 23;
});
console.log(result); // { name: '刘德华', age: 23 }
console.log(result1); // 0