js高阶函数

72 阅读6分钟

高阶函数

JavaScript中的高阶函数是指能够接收一个函数作为参数,并返回一个函数的函数。高阶函数是函数式编程中的核心思想,它可以极大地提高代码的可复用性和灵活性。以下是JavaScript中常见的高阶函数,以及对它们的详细解释和示例:

  1. map()

map()方法对数组中的每个元素应用一个传入的函数,并返回一个新数组。它不会对原数组进行更改。

示例:

const numbers = [1, 2, 3];
const squares = numbers.map((number) => number * number);
console.log(squares); // Output: [1, 4, 9]
  1. filter()

filter()方法对数组中的每个元素应用一个传入的函数,并返回一个新数组,新数组中只包含符合条件的元素。

示例:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
  1. reduce()

reduce()方法对数组中的每个元素应用一个传入的函数,并将它们归约为一个单独的值。

示例:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // Output: 15
  1. sort()

sort()方法对数组中的元素进行排序并返回一个排序后的新数组。可以通过传入一个比较函数来改变排序规则。

示例:

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
  1. forEach()

forEach()方法对数组中的每个元素应用一个传入的函数。不返回新数组。

示例:

const numbers = [1, 2, 3];
numbers.forEach(function(number) {
  console.log(number);
});
// Output: 1
//         2
//         3
  1. every()

every()方法对数组中的每个元素应用一个传入的函数,如果数组中所有元素都符合条件,则返回true,否则返回false

示例:

const numbers = [2, 4, 6];
const allEven = numbers.every(function(number) {
  return number % 2 === 0;
});
console.log(allEven); // Output: true
  1. some()

some()方法对数组中的每个元素应用一个传入的函数,如果数组中至少有一个元素符合条件,则返回true,否则返回false

示例:

const numbers = [2, 4, 6, 7];
const hasOddNumber = numbers.some(function(number) {
  return number % 2 === 1;
});
console.log(hasOddNumber); // Output: true
  1. find()

find()方法返回数组中第一个符合条件的元素,如果不存在,则返回undefined

示例:

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(function(number) {
  return number % 2 === 0;
});
console.log(evenNumber); // Output: 2
  1. findIndex()

findIndex()方法返回数组中第一个符合条件的元素的索引,如果不存在,则返回-1

示例:

const numbers = [1, 2, 3, 4, 5];
const evenNumberIndex = numbers.findIndex(function(number) {
  return number % 2 === 0;
});
console.log(evenNumberIndex); // Output: 1
  1. flatMap()

flatMap()方法在执行map()方法后,将结果数组展平并返回一个新数组。

示例:

const numbers = [1, 2, 3];
const squaresAndCubes = numbers.flatMap(function(number) {
  return [number * number, number * number * number]
});
console.log(squaresAndCubes); // Output: [1, 1, 4, 8, 9, 27]
  1. reduceRight()

reduceRight()reduce()方法非常相似,只不过是从右向左归约,而不是从左向右。

示例:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduceRight(function(accumulator, currentValue) {
  return accumulator + currentValue;
});
console.log(sum); // Output: 15

以上是JavaScript中的常见高阶函数,它们可以大大提高代码的可读性和易维护性。

map 再创

  1. map()map()方法对数组中的每个元素应用指定的函数,并返回一个新数组,原数组不会改变。

    示例:

    const numbers = [1, 2, 3];
    const squares = numbers.map((number) => number * number);
    console.log(squares); // Output: [1, 4, 9]
    

    在上面的示例中,map()方法将每个元素平方,并返回新的数组squares

filter 筛选

  1. filter()filter()方法对数组中的每个元素应用指定的筛选函数,并返回一个符合条件的新数组。

    示例:

    const numbers = [1, 2, 3, 4, 5];
    const evenNumbers = numbers.filter((number) => number % 2 === 0);
    console.log(evenNumbers); // Output: [2, 4]
    

    在上面的示例中,filter()方法筛选出数组中的偶数元素,并返回新的数组evenNumbers

refuce

  1. reduce()reduce()方法对数组中的每个元素应用指定的归约函数,将其整合为一个单值结果。

    示例:

    const numbers = [1, 2, 3, 4, 5];
    const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
    console.log(sum); // Output: 15
    

    在上面的示例中,reduce()方法将数组中的元素求和并返回总和。

sort

  1. sort()sort()方法对数组元素进行排序,并返回排序后的新数组。也可以传入一个比较函数进行自定义排序。

    示例:

    const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
    numbers.sort((a, b) => a - b);
    console.log(numbers); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
    

    在上面的示例中,sort()方法将数组中的元素按升序排序。

forEach

  1. forEach()forEach()方法对数组中的每个元素应用指定的函数。不返回新的数组。

    示例:

    const numbers = [1, 2, 3];
    numbers.forEach((number) => {
      console.log(number);
    });
    // Output: 1
    //         2
    //         3
    

    在上面的示例中,forEach()方法对数组中的每个元素进行打印。

every

  1. every()every()方法对数组中的每个元素应用指定的函数,如果所有元素都返回真,则返回真,否则返回假。

    示例:

    const numbers = [2, 4, 6];
    const allEven = numbers.every((number) => number % 2 === 0);
    console.log(allEven); // Output: true
    

    在上面的示例中,every()方法检查数组中的元素是否都是偶数。

some

  1. some()some()方法对数组中的每个元素应用指定的函数,只要有一个元素返回真,则返回真,否则返回假。

    示例:

    const numbers = [2, 4, 6, 7];
    const hasOddNumber = numbers.some((number) => number % 2 === 1);
    console.log(hasOddNumber); // Output: true
    

    在上面的示例中,some()方法检查数组中是否存在奇数元素。

find

  1. find()find()方法返回数组中第一个符合条件的元素。如果没有符合条件的元素,则返回undefined

    示例:

    const numbers = [1, 2, 3, 4, 5];
    const evenNumber = numbers.find((number) => number % 2 === 0);
    console.log(evenNumber); // Output: 2
    

    在上面的示例中,find()方法找到数组中第一个偶数元素。

findIndex

  1. findIndex()findIndex()方法返回数组中第一个符合条件的元素的索引。如果没有符合条件的元素,则返回-1。

    示例:

    const numbers = [1, 2, 3, 4, 5];
    const evenNumberIndex = numbers.findIndex((number) => number % 2 === 0);
    console.log(evenNumberIndex); // Output: 1
    

    在上面的示例中,findIndex()方法找到数组中第一个偶数元素的索引。

flatMap

  1. flatMap()flatMap()方法与map()方法类似,但是对数组中每个元素应用的函数可以返回一个数组,最终将所有结果整合到一个新数组中。

    示例:

    const numbers = [1, 2, 3];
    const squaresAndCubes = numbers.flatMap((number) => [number * number, number * number * number]);
    console.log(squaresAndCubes); // Output: [1, 1, 4, 8, 9, 27]
    

    在上面的示例中,flatMap()方法返回一个包含每个数的平方和立方的新数组。

reduceRight

  1. reduceRight()reduceRight()方法与reduce()方法类似,但是它从数组的右侧开始归约。

    示例:

    const numbers = [1, 2, 3, 4, 5];
    const sum = numbers.reduceRight((accumulator, currentValue) => accumulator + currentValue);
    console.log(sum); // Output: 15
    

    在上面的示例中,reduceRight()方法从右侧开始计算数组中的元素之和。