【譯】使用reduce製做的10個JavaScript實用函數

原文連接：yazeedb.com/posts/learn…
原做者：Yazeed Bzadough

在上一篇文章中，我向你提出了使用reduce去建立一些衆所周知的函數。本文將向你展現如何實現其中的一些，另外還有一些其它的函數。

總的來講，咱們將研究10個實用的函數。它們在您的項目上很是方便，並且最重要的是，它們是用reduce來實現的！我從RamdaJS庫中得到了不少靈感，看看吧!

1. some

參數

1. predicate - 返回 true 或 false 的函數
2. array - 要測試的列表

描述

若是任一項的 predicate 返回 true， some 返回 true，不然返回 false。

實現

const some = (predicate, array) => array.reduce((acc, value) => acc || predicate(value), false);
複製代碼

用例

const equals3 = (x) => x === 3;

some(equals3, [3]); // true
some(equals3, [3, 3, 3]); // true
some(equals3, [1, 2, 3]); // true
some(equals3, [2]); // false
複製代碼

2. all

參數

1. predicate - 返回 true 或 false 的函數
2. array - 要測試的列表

描述

若是每一項的 predicate 都返回 true， all 返回 true，不然返回 false。

實現

const all = (predicate, array) => array.reduce((acc, value) => acc && predicate(value), true);
複製代碼

用例

const equals3 = (x) => x === 3;

all(equals3, [3]); // true
all(equals3, [3, 3, 3]); // true
all(equals3, [1, 2, 3]); // false
all(equals3, [3, 2, 3]); // false
複製代碼

3. none

參數

1. predicate - 返回 true 或 false 的函數
2. array - 要測試的列表

描述

若是每一項的 predicate 都返回 false， none 返回 true，不然返回 false。

實現

const none = (predicate, array) => array.reduce((acc, value) => acc && !predicate(value), true);
複製代碼

用例

const isEven = (x) => x % 2 === 0;

none(isEven, [1, 3, 5]); // true
none(isEven, [1, 3, 4]); // false
none(equals3, [1, 2, 4]); // true
none(equals3, [1, 2, 3]); // false
複製代碼

4. map

參數

1. transformFunction - 在每一個元素上運行的函數
2. array - 要轉換的列表

描述

返回一個新數組，每一項都通過了 transformFunction 的轉換

實現

const map = (transformFunction, array) =>
  array.reduce((newArray, item) => {
    newArray.push(transformFunction(item));

    return newArray;
  }, []);
複製代碼

用例

const double = (x) => x * 2;
const reverseString = (string) =>
  string
    .split('')
    .reverse()
    .join('');

map(double, [100, 200, 300]);
// [200, 400, 600]

map(reverseString, ['Hello World', 'I love map']);
// ['dlroW olleH', 'pam evol I']
複製代碼

5. filter

參數

1. predicate - 返回 true 或 false 的函數
2. array - 要過濾的列表

描述

返回一個新數組。若是 predicate 返回 true，則將該元素添加至新數組中，不然該元素將被排除在新數組以外。

實現

const filter = (predicate, array) =>
  array.reduce((newArray, item) => {
    if (predicate(item) === true) {
      newArray.push(item);
    }

    return newArray;
  }, []);
複製代碼

用例

const isEven = (x) => x % 2 === 0;

filter(isEven, [1, 2, 3]);
// [2]

filter(equals3, [1, 2, 3, 4, 3]);
// [3, 3]
複製代碼

6. reject

參數

1. predicate - 返回 true 或 false 的函數
2. array - 要過濾的列表

描述

就像 filter，但行爲相反。

若是 predicate 返回 false，則將該元素添加至新數組中，不然該元素將被排除在新數組以外。

實現

const reject = (predicate, array) =>
  array.reduce((newArray, item) => {
    if (predicate(item) === false) {
      newArray.push(item);
    }

    return newArray;
  }, []);
複製代碼

用例

const isEven = (x) => x % 2 === 0;

reject(isEven, [1, 2, 3]);
// [1, 3]

reject(equals3, [1, 2, 3, 4, 3]);
// [1, 2, 4]
複製代碼

7. find

參數

1. predicate - 返回 true 或 false 的函數
2. array - 要查找的列表

描述

返回第一個與 predicate 匹配到的元素，若是沒有匹配的則返回 undefined

實現

const find = (predicate, array) =>
  array.reduce((result, item) => {
    if (result !== undefined) {
      return result;
    }

    if (predicate(item) === true) {
      return item;
    }

    return undefined;
  }, undefined);
複製代碼

用例

const isEven = (x) => x % 2 === 0;

find(isEven, []); // undefined
find(isEven, [1, 2, 3]); // 2
find(isEven, [1, 3, 5]); // undefined
find(equals3, [1, 2, 3, 4, 3]); // 3
find(equals3, [1, 2, 4]); // undefined
複製代碼

8. partition

參數

1. predicate - 返回 true 或 false 的函數
2. array - 列表

描述

基於 predicate 把一個數組「劃分」或者分割成兩部分，若是 predicate 返回 `true``，該元素進入列表1，不然進入列表2

實現

const partition = (predicate, array) =>
  array.reduce(
    (result, item) => {
      const [list1, list2] = result;

      if (predicate(item) === true) {
        list1.push(item);
      } else {
        list2.push(item);
      }

      return result;
    },
    [[], []]
  );
複製代碼

用例

const isEven = (x) => x % 2 === 0;

partition(isEven, [1, 2, 3]);
// [[2], [1, 3]]

partition(isEven, [1, 3, 5]);
// [[], [1, 3, 5]]

partition(equals3, [1, 2, 3, 4, 3]);
// [[3, 3], [1, 2, 4]]

partition(equals3, [1, 2, 4]);
// [[], [1, 2, 4]]
// [1, 2, 4]
複製代碼

9. pluck

參數

1. key - 從對象中選取的鍵名
2. array - 列表

描述

從數組中的每一個項目中抽取給定 key 的值。返回這些值組成新數組。

實現

const pluck = (key, array) =>
  array.reduce((values, current) => {
    values.push(current[key]);

    return values;
  }, []);
複製代碼

用例

pluck('name', [{ name: 'Batman' }, { name: 'Robin' }, { name: 'Joker' }]);
// ['Batman', 'Robin', 'Joker']

pluck(0, [[1, 2, 3], [4, 5, 6], [7, 8, 9]]);
// [1, 4, 7]
複製代碼

10. scan

參數

1. reducer - 標準的 rducer 函數，它接收兩個參數 - 數組的累加器和當前值。
2. initialValue - 累加器的初始值
3. array - 列表

描述

它的工做原理和 reduce 類似，不一樣的是 reduce 只返回最後結果，而 scan 返回由每次累加器結果組成的數組。

實現

const scan = (reducer, initialValue, array) => {
  const reducedValues = [];

  array.reduce((acc, current) => {
    const newAcc = reducer(acc, current);

    reducedValues.push(newAcc);

    return newAcc;
  }, initialValue);

  return reducedValues;
};
複製代碼

用例

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

scan(add, 0, [1, 2, 3, 4, 5, 6]);
// [1, 3, 6, 10, 15, 21] - Every number added from 1-6

scan(multiply, 1, [1, 2, 3, 4, 5, 6]);
// [1, 2, 6, 24, 120, 720] - Every number multiplied from 1-6
複製代碼

---

傳送門

【譯】10分鐘學會reduce