摘要：地址秒，從入門到放棄之七博客地址秒，從入門到放棄之七水平有限，歡迎批評(píng)指正剔除掉數(shù)組中所有存在于所指定的元素們的項(xiàng)。使用，和來(lái)創(chuàng)建由兩個(gè)數(shù)組元素拼接而成的所有可能對(duì)并將它們存在一個(gè)數(shù)組中的數(shù)組。

GitHub地址：JavaScript30秒， 從入門到放棄之Array（七）
博客地址：JavaScript30秒， 從入門到放棄之Array（七）
水平有限，歡迎批評(píng)指正

Filters out the elements of an array, that have one of the specified values.
Use Array.filter() to create an array excluding(using !Array.includes()) all given values.
const without = (arr, ...args) => arr.filter(v => !args.includes(v));

剔除掉數(shù)組中所有存在于所指定的元素們的項(xiàng)。

使用Array.filter()創(chuàng)建一個(gè)將所有提供的值排除在外(使用!Array.includes())的數(shù)組。

?  code cat without.js
const without = (arr, ...args) => arr.filter(v => !args.includes(v));

console.log(without([2, 1, 2, 3], 1, 2));
?  code node without.js
[ 3 ]

filter和includes結(jié)合，把數(shù)組arr中所有存在于指定的元素值…args中的項(xiàng)排除在外，很清爽干凈。

Creates a new array out of the two supplied by creating each possible pair from the arrays.
Use Array.reduce(), Array.map() and Array.concat() to produce every possible pair from the elements of the two arrays and save them in an array.
const xProd = (a, b) => a.reduce((acc, x) => acc.concat(b.map(y => [x, y])), []);

創(chuàng)建一個(gè)新數(shù)組，數(shù)組元素由兩個(gè)數(shù)組的元素交叉組合而成。

使用Array.reduce()，Array.map()和Array.concat()來(lái)創(chuàng)建由兩個(gè)數(shù)組元素拼接而成的所有可能對(duì)并將它們存在一個(gè)數(shù)組中的數(shù)組。

?  code cat xProd.js
const xProd = (a, b) => a.reduce((acc, val) => acc.concat(b.map(v => [val, v])), []);

console.log(xProd([1, 2], ["a", "b"]));

?  code node xProd.js
[ [ 1, "a" ], [ 1, "b" ], [ 2, "a" ], [ 2, "b" ] ]

reduce初始值acc是一個(gè)空數(shù)組[]，隨著遍歷的進(jìn)行acc會(huì)concat生成的元素組合對(duì)的數(shù)組。組合對(duì)就是由b.map(v => [val, v]生成的。也就是reduce遍歷一次時(shí)，數(shù)組a的一個(gè)元素分別和數(shù)組b的所有元素分別組成一對(duì)。

Creates an array of elements, grouped based on the position in the original arrays.
Use Math.max.apply() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from()with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found.
const zip = (...arrays) => {
  const maxLength = Math.max(...arrays.map(x => x.length));
  return Array.from({ length: maxLength }).map((_, i) => {
    return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
  });
};

創(chuàng)建一個(gè)數(shù)組，數(shù)組元素由指定的多個(gè)數(shù)組根據(jù)位置對(duì)應(yīng)分組而成的數(shù)組構(gòu)成。例如，多個(gè)數(shù)組的第一個(gè)元素組成一個(gè)新數(shù)組，第二個(gè)元素組成一個(gè)新數(shù)組，依次類推。最終把所有分類號(hào)的數(shù)組存到一個(gè)數(shù)組中。

先使用Math.max.apply()來(lái)計(jì)算出最終成組的長(zhǎng)度，然后使用該長(zhǎng)度結(jié)合Array.from()和map去遍歷創(chuàng)建該數(shù)組的所有分組子數(shù)組。如果其中任意一個(gè)數(shù)組在對(duì)應(yīng)位置上元素不存在（如長(zhǎng)度為2的數(shù)組試圖獲取第3個(gè)元素）則undefined將被使用。

?  code cat zip.js
const zip = (...arrays) => {
  const maxLength = Math.max(...arrays.map(x => x.length));

  return Array.from({
    length: maxLength
  }).map((_, i) => Array.from({
      length: arrays.length
    }, (_, k) => arrays[k][i]));
};

console.log(zip(["a", "b"], [1, 2], [true, false]));
console.log(zip(["a"], [1, 2], [true, false]));

?  code node zip.js
[ [ "a", 1, true ], [ "b", 2, false ] ]
[ [ "a", 1, true ], [ undefined, 2, false ] ]

const maxLength = Math.max(...arrays.map(x => x.length));

這是最終分成maxLength組，比如一個(gè)數(shù)組含有100個(gè)元素，另一個(gè)數(shù)組含有1個(gè)元素，最終要分成100組，所以需要用Math.max()去獲取所有數(shù)組中長(zhǎng)度最長(zhǎng)的那個(gè)。

return Array.from({
    length: maxLength
  }).map((_, i) => Array.from({
    length: arrays.length
  }).map((_, k) => arrays[k][i])
);

使用Array.from結(jié)合length生成長(zhǎng)度為maxLength的數(shù)組這沒(méi)啥說(shuō)的了，重點(diǎn)是map后的方法，map的每一個(gè)數(shù)組里包含多少個(gè)元素才可以呢？稍微想一下就知道，應(yīng)該是arrays的個(gè)數(shù)，因?yàn)槊恳粋€(gè)數(shù)組都要拿一個(gè)出來(lái)組裝。所以這里又用了一個(gè)Array.from配上length: arrays.length來(lái)定一個(gè)數(shù)組里包含的元素?cái)?shù)量。那么這些元素由什么組成呢？這里還是要配合一個(gè)(_, k) => arrays[k][i])方法去取arrays的元素。獲取的是對(duì)應(yīng)每一個(gè)數(shù)組的第i個(gè)元素。

Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.
Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using Array.reduce().
const zipObject = (props, values) =>
  props.reduce((obj, prop, index) => ((obj[prop] = values[index]), obj), {});

提供一個(gè)有效的屬性標(biāo)識(shí)符的數(shù)組和一個(gè)含值數(shù)組，返回一個(gè)把屬性和值拼合的對(duì)象。即有效的屬性標(biāo)識(shí)符數(shù)組的第一項(xiàng)為鍵，含值數(shù)組的第一項(xiàng)為值，依次類推。

由于一個(gè)對(duì)象值可以為undefined而鍵不能為undefined，所以只有有效的屬性標(biāo)識(shí)符數(shù)組能用來(lái)決定了對(duì)象的組成結(jié)構(gòu)。因而使用Array.reduce()對(duì)該數(shù)組進(jìn)行相關(guān)操作。

?  code cat zipObject.js
const zipObject = (props, values) => props.reduce((acc, val, i) => ((acc[val] = values[i]), acc), {});

console.log(zipObject(["a", "b", "c"], [1, 2]));
console.log(zipObject(["a", "b"], [1, 2, 3]));

?  code node zipObject.js
{ a: 1, b: 2, c: undefined }
{ a: 1, b: 2 }

(obj[prop] = values[index]), obj)

JavaScript的逗號(hào)運(yùn)算符是指按照順序執(zhí)行表達(dá)式，最終返回最后一個(gè)表達(dá)式的運(yùn)行結(jié)果。對(duì)于這個(gè)例子來(lái)說(shuō)，就是先創(chuàng)造一個(gè)鍵值對(duì)，最后返回該對(duì)象。換一般的寫法就是如下：

obj[prop] = values[index];
return obj;

這點(diǎn)弄通了就好理解了。

實(shí)際上就是以props數(shù)組為基準(zhǔn)，對(duì)其運(yùn)用reduce方法去遍歷數(shù)組，初始值obj是一個(gè)空對(duì)象{}，遍歷過(guò)程以props數(shù)組的值prop為鍵，props數(shù)組當(dāng)前索引index為索引去取values數(shù)組的項(xiàng)為值組裝成對(duì)象并返回。

由于對(duì)象的鍵不能為undefined，因此，如果數(shù)組props的長(zhǎng)度比數(shù)組values小，那么values多出來(lái)的那些項(xiàng)就不管了。如果相反，那么該對(duì)象相應(yīng)鍵的值為undefined。

Creates an array of elements, grouped based on the position in the original arrays and using function as the last value to specify how grouped values should be combined.
Check if the last argument provided in a function. Use Math.max() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found. The function is invoked with the elements of each group (...group).
const zipWith = (...arrays) => {
 const length = arrays.length;
 let fn = length > 1 ? arrays[length - 1] : undefined;
 fn = typeof fn == "function" ? (arrays.pop(), fn) : undefined;
 const maxLength = Math.max(...arrays.map(x => x.length));
 const result = Array.from({ length: maxLength }).map((_, i) => {
   return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
 });
 return fn ? result.map(arr => fn(...arr)) : result;
};

創(chuàng)建一個(gè)數(shù)組，數(shù)組元素由指定的多個(gè)數(shù)組根據(jù)位置對(duì)應(yīng)分組而成的數(shù)組構(gòu)成，然后分組后的數(shù)組元素應(yīng)用指定方法進(jìn)行結(jié)合。

?  code cat zipWith.js
const zipWith = (...arrays) => {
  const length = arrays.length;
  let fn = length > 1 ? arrays[length - 1] : undefined;
  fn = typeof fn === "function" ? (arrays.pop(), fn) : undefined;
  const maxLength = Math.max(...arrays.map(x => x.length));
  const result = Array.from({length: maxLength}).map((_, i) => {return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);});
  return fn ? result.map(arr => fn(...arr)) : result;
};

console.log(zipWith([1, 2], [10, 20], [100, 200], (a, b, c) => a + b + c));
console.log(zipWith(
  [1, 2, 3],
  [10, 20],
  [100, 200],
  (a, b, c) => (a != null ? a : "a") + (b != null ? b : "b") + (c != null ? c : "c")
));

?  code node zipWith.js
[ 111, 222 ]
[ 111, 222, "3bc" ]

const length = arrays.length;
let fn = length > 1 ? arrays[length - 1] : undefined;
fn = typeof fn === "function" ? (arrays.pop(), fn) : undefined;

首先這里把參數(shù)長(zhǎng)度arrays.length存到length里，然后根據(jù)參數(shù)長(zhǎng)度length判斷參數(shù)里是否指定了某個(gè)方法。如果length小于等于1，則沒(méi)有傳入指定方法，因而fn = undefined；否則，認(rèn)為參數(shù)的最后一個(gè)arrays[length - 1]傳入了方法。

接下來(lái)還得判斷fn是不是一個(gè)function，如果是，arrays.pop()把方法剔除，只留數(shù)組，然后返回fn賦值給fn；否則把undefined賦值給fn。

其實(shí)我覺(jué)得這里和前面的寫重復(fù)了，我覺(jué)得fn = typeof fn === "function" ? (arrays.pop(), fn) : undefined改成下面更好：

if (typeof fn === "function") {
  arrays.pop();
}

這樣就避免了fn的重復(fù)賦值了。因?yàn)?b>fn = typeof fn === "function" ? (arrays.pop(), fn) : undefined這一行的作用就是為了把方法pop出去而已，沒(méi)必要再重新賦值。

const maxLength = Math.max(...arrays.map(x => x.length));

這一行計(jì)算出最終返回?cái)?shù)組的長(zhǎng)度，這點(diǎn)易證，不展開(kāi)。

const result = Array.from({ length: maxLength }).map((_, i) => {
  return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
});

這里其實(shí)和前面的zip方法是一樣的，到現(xiàn)在為止返回的result是和zip的結(jié)果是一樣的。

return fn ? result.map(arr => fn(...arr)) : result;

然后判斷fn是不是非undefined，如果是不用處理直接返回result，否則對(duì)result數(shù)組所有元素調(diào)用fn方法并返回結(jié)果。需要注意的是參數(shù)…arr是需要展開(kāi)的，參數(shù)不是單個(gè)的數(shù)組元素，而是數(shù)組的所有元素。

Returns true if all elements in a collection are truthy, false otherwise.
Use Array.every(Boolean) to test if all elements in the collection are truthy.
const all = arr => arr.every(Boolean);

如果數(shù)組所有元素為真，返回true，否則返回false。

使用 Array.every(Boolean) 來(lái)檢測(cè)數(shù)組所有元素是否都為真。

?  code cat all.js
const all = arr => arr.every(Boolean);

console.log(all([1, 2, 3]));

?  code node all.js
true

這其實(shí)就是Array.every()函數(shù)能做的事情。參數(shù)為Boolean就是判斷是不是數(shù)組所有元素布爾為都為真。

Returns true if the provided predicate function returns true for all elements in a collection, false otherwise.
Use Array.every() to test if all elements in the collection return true based on fn.
const allBy = (arr, fn) => arr.every(fn);

如果數(shù)組所有元素應(yīng)用了指定的斷言方法都為真，那么返回true，否則返回false。

使用Array.every()結(jié)合fn來(lái)檢測(cè)數(shù)組所有元素調(diào)用fn后布爾值是否都為真。

?  code cat allBy.js
const allBy = (arr, fn) => arr.every(fn);

console.log(allBy([4, 2, 3], x => x > 1));

?  code node allBy.js
true

比all多了一個(gè)fn方法而已，只需要把every的參數(shù)換成fn就行，這沒(méi)啥可說(shuō)的。

Returns true if at least one element in a collection is truthy, false otherwise.
Use Array.some(Boolean) to test if any elements in the collection are truthy.
const any = arr => arr.some(Boolean);

如果一個(gè)數(shù)組中至少有一個(gè)元素布爾值為真，返回true，否則返回false。

使用Array.some(Boolean)來(lái)檢測(cè)數(shù)組中是否有一個(gè)元素布爾值為真。

?  code cat any.js
const any = arr => arr.some(Boolean);

console.log(any([0, 0, 1, 0]));

?  code node any.js
true

這就是Array.some()可以做的事情，沒(méi)啥可說(shuō)。

Returns true if the provided predicate function returns true for at least one element in a collection, false otherwise.
Use Array.some() to test if any elements in the collection return true based on fn.
const anyBy = (arr, fn) => arr.some(fn);

如果對(duì)一個(gè)數(shù)組的元素運(yùn)用指定的斷言方法后至少有一個(gè)結(jié)果布爾值為真，返回true，否則返回false。

使用Array.some()結(jié)合fn檢測(cè)一個(gè)數(shù)組中調(diào)用指定斷言方法后至少有一個(gè)結(jié)果布爾值為真。

?  code cat anyBy.js
const anyBy = (arr, fn) => arr.some(fn);

console.log(anyBy([0, 1, 2, 0], x => x >= 2));

?  code node anyBy.js
true

比any多了一個(gè)fn方法而已，只需要把some的參數(shù)換成fn就行，這沒(méi)啥可說(shuō)的。

Splits values into two groups. If an element in filter is truthy, the corresponding element in the collection belongs to the first group; otherwise, it belongs to the second group.
Use Array.reduce() and Array.push() to add elements to groups, based on filter.
const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);

把一個(gè)數(shù)組分裂成兩組。如果一個(gè)元素在filter中對(duì)應(yīng)值是truthy，那么相應(yīng)位置的被分裂元素歸屬于第一個(gè)組，否則歸屬于第二個(gè)組。

使用Array.reduce()和Array.push()在filter的基礎(chǔ)上把待分裂的元素添加到相應(yīng)的組中。

?  code cat bifurcate.js
const bifurcate = (arr, filter) => arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);

console.log(bifurcate(["beep", "boop", "foo", "bar"], [true, true, false, true]));

?  code node bifurcate.js
[ [ "beep", "boop", "bar" ], [ "foo" ] ]

reduce初始值acc是一個(gè)含有兩個(gè)空數(shù)組的二維數(shù)組[[], []]，遍歷過(guò)程中去判斷對(duì)應(yīng)索引filter的值filter[i] 是否為truthy，若真，則把當(dāng)前索引對(duì)應(yīng)元素val加到acc[0]中；否則加到acc[1]中。遍歷結(jié)束，分組完成。

Splits values into two groups according to a predicate function, which specifies which group an element in the input collection belongs to. If the predicate function returns a truthy value, the collection element belongs to the first group; otherwise, it belongs to the second group.
Use Array.reduce() and Array.push() to add elements to groups, based on the value returned by fn for each element.
const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

根據(jù)提供的斷言方法將一個(gè)數(shù)組分裂成兩組。如果斷言結(jié)果為truthy，該元素將被分配到第一組，否則分配在第二組。

使用Array.reduce()和Array.push()在斷言方法fn的基礎(chǔ)上將待分裂的元素添加到相應(yīng)的組中。

?  code cat bifurcateBy.js
const bifurcateBy = (arr, fn) => arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

console.log(bifurcateBy(["beep", "boop", "foo", "bar"], x => x[0] === "b"));
?  code node bifurcateBy.js
[ [ "beep", "boop", "bar" ], [ "foo" ] ]

跟bifurcate相比不同的地方是：

(acc[fn(val, i) ? 0 : 1].push(val), acc)

這里是對(duì)數(shù)組的元素val調(diào)用指定方法，而bifurcate是對(duì)應(yīng)位置filter[i]的直接結(jié)果。其余都是一樣的。這也很好理解了。