JS中Array对象的高阶函数 forEach map filter sort reduce reduceRight

我会带着你远行 2022-02-28 04:14 177阅读 0赞

### 文章目录 ###

*   *  高阶函数
     *  \`Array\`对象的几种高阶函数。
     *  code
     *  forEach map filter 区别 && 场景
     *  reduce 与 reduceRight

## 高阶函数 ##

高阶函数(Higher-order function)，就是`接受其他函数作为参数之一的函数`。

实例：

function add(x, y, f) {
        return f(x) + f(y);
    }
    
    // 调用：
    add(-2, -3, Math.abs);

## `Array`对象的几种高阶函数。 ##

*  `sort()` 对数组元素进行排序(原地算法 In-place Algorithm)，并返回当前数组(已排序)。默认排序是`先将数组元素全部转换为字符串，然后根据字符串Unicode码点`。  
    `arr.sort(?compareFn)`, 其中高阶函数`compareFn`的函数声明为：`compareFn(a, b)`。
 *  `filter()` 将所有在过滤函数中返回`true`的元素放进一个新的数组中并返回。  
    `arr.filter(callbackFn, ?thisArg)`, 其中`callbackFn(element, ?index, ?array)`。
 *  `forEach()` 对数组中的每个元素做一些操作。无返回值。
 *  `map()` 返回一个由回调函数的返回值组成的新数组。  
    `arr.map(callbackFn, ?thisArg)`, 其中`callbackFn(currentValue, ?index, ?array)`。
 *  `reduce()` 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的反追至。  
    `arr.reduce(callbackFn, ?initialValue)`, 其中`callbackFn(accumulator, currentValue, ?currentIndex, ?array)`。
 *  `reduceRight()` 从右边开始，从右向左。  
    `arr.reduceRight(callbackFn, ?initialValue)`, 其中`callbackFn(previousValue, currentValue, ?currentValue, ?array)`。

## code ##

*  `sort(?coompareFn)`

arr = [1, 5, 6, 22, 34];
    arr.sort();
    // [1, 22, 34, 5, 6]，默认排序是根据字符串码点。
    
    arr.sort(function(a, b) {
    	return a - b;
    });
    // [1, 22, 34, 5, 6]

*  `filter(callbackFn, ?thisArg)`

arr = [1,2,3,4,5,6];
    arr.filter(function(element, index, array) {
    	return element % 2 == 0;	// 过滤偶数。
    });
    // (3) [2, 4, 6]
    
    arr = [1, 5, 6, "234", false];
    arr.filter(function(element, index, array) {
      return (typeof element == "number");	// 过滤数值
    });
    // (3) [1, 5, 6]

*  `map(callbackFn, ?thisArg)`

arr = [1, 2, 3, 4, 5];
    arr.map(function(currentValue, index, array) {
    	return Math.pow(currentValue, 2);	// 返回数组元素的2次方。
    });
    // (5) [1, 4, 9, 16, 25]

*  `reduce(callbackFn, ?initialValue)`

arr = [1, 2, 3, 4, 5];
    arr.reduce(function(accumulator, currentValue, currentIndex, array) {
    	return accumulator + currentValue;	// 数组元素求和
    });

// 把数组元素拼接成一个字符串
    arr = [1, 2, 3, false, "test", null, undefined];
    arr.reduce(function(accumulator, currentValue, currentIndex, array) {
    	return accumulator + currentValue;
    }, "");	// initialValue为空字符串""。

*  `reduceRight(callbackFn, ?initialValue)`

// reduceRight()与reduce()不同的是：方向从右向左。
    arr = [1, 2, 3, 4, 5];
    arr.reduce(function(accumulator, currentValue, currentIndex, array) {
    	return accumulator + currentValue;
    }, "");	// "12345"
    arr.reduceRight(function(accumulator, currentValue, currentIndex, array) {
    	return accumulator + currentValue;
    }, "");	// "54321"

## forEach map filter 区别 && 场景 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

## reduce 与 reduceRight ##

对数组求和，数组内元素做字符串拼接……

注意 `arr.reduce(callbackFn, ?initialValue)`中的初始值，为`callbackFn = (accumulator, currValue, currIndex, array) => {...}`方法中，  
累加器`accumulator`的初始值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20220228/1d84de47fda540b5ad682d98834cd135.png