摘要：循環(huán)一個(gè)數(shù)組，使用每次去刪除該數(shù)組的第一個(gè)元素直到指定方法運(yùn)算結(jié)果為，返回的是剩余元素組成的數(shù)組。直到循環(huán)退出，返回此時(shí)的。對(duì)應(yīng)就是，包含下界，不包含上屆。秒，從入門到放棄之二微信公眾號(hào)秒，從入門到放棄之二

Returns the difference between two arrays.
Create a Set from b, then use Array.filter() on a to only keep values not contained in b.
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };
// difference([1,2,3], [1,2,4]) -> [3]

返回兩個(gè)數(shù)組的不同。

創(chuàng)建一個(gè)b數(shù)組的集合，然后使用Array.filter()對(duì)a數(shù)組進(jìn)行過濾，過濾出不存在于數(shù)組b的元素。

?  code cat difference.js
const difference = (a, b) => {
    const s = new Set(b);
    return a.filter(x => !s.has(x));
}

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

關(guān)鍵點(diǎn)是主客體，這里主體應(yīng)該是第一個(gè)數(shù)組，也就是a，客體是數(shù)組b，返回的是不在主體a里的數(shù)組元素。類似于集合的a - b，不同點(diǎn)是a、b數(shù)組都可以有重復(fù)的元素存在，而集合不允許重復(fù)元素存在。

這邏輯是很清晰的，先把b數(shù)組轉(zhuǎn)成集合存到s中，然后去filter數(shù)組a，只要把不存在于s集合中的元素返回即可。記住filter返回的是一個(gè)數(shù)組。

Filters out all values from an array for which the comparator function does not return true.
Use Array.filter() and Array.find() to find the appropriate values.
const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b)))
// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)) -> [1, 1.2]

從一個(gè)數(shù)組中篩選出所有不滿足指定比較方法運(yùn)算結(jié)果為true的元素值的數(shù)組。

使用Array.filter()和Array.find()來找出適當(dāng)?shù)闹怠?/p>

?  code cat differenceWith.js
const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b)));

console.log(differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)));
?  code node differenceWith.js
[ 1, 1.2 ]

和difference類似，主客體還是第一個(gè)數(shù)組arr。

我們可以先把意思進(jìn)行拆分。

comp運(yùn)行結(jié)果為true

數(shù)組val.find()去尋找comp(a, b)(a是arr元素，b是val元素)運(yùn)行結(jié)果為true的值

arr不要上面第2點(diǎn)中運(yùn)行結(jié)果為true的值

通俗點(diǎn)就是說去遍歷數(shù)組arr的所有元素，然后在數(shù)組val里尋找comp運(yùn)算結(jié)果不為true的值。因?yàn)?b>val.find()方法如果找到就返回該值，否則返回undefined，此時(shí)!val.find()就是true，arr.filter()正是需要這樣運(yùn)算結(jié)果的值。

Returns all the distinct values of an array.
Use ES6 Set and the ...rest operator to discard all duplicated values.
const distinctValuesOfArray = arr => [...new Set(arr)];
// distinctValuesOfArray([1,2,2,3,4,4,5]) -> [1,2,3,4,5]

返回?cái)?shù)組去重結(jié)果。

使用ES6的集合Set和ES6的擴(kuò)展運(yùn)算符…把重復(fù)的元素排除掉。

?  code cat distinctValuesOfArray.js
const distinctValuesOfArray = arr => [...new Set(arr)];

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

實(shí)際上ES6的集合Set干的事，沒啥可說。

Removes elements in an array until the passed function returns true. Returns the remaining elements in the array.
Loop through the array, using Array.slice() to drop the first element of the array until the returned value from the function is true. Returns the remaining elements.
const dropElements = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};
// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]

剔除掉數(shù)組元素直到指定方法運(yùn)算結(jié)果第一次為true為止。

循環(huán)一個(gè)數(shù)組，使用Array.slice每次去刪除該數(shù)組的第一個(gè)元素直到指定方法運(yùn)算結(jié)果為true，返回的是剩余元素組成的數(shù)組。

?  code cat dropElements.js
const dropElements = (arr, func) => {
    while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
    return arr;
};

console.log(dropElements([1, 2, 3, 4], n => n >= 3));
?  code node dropElements.js
[ 3, 4 ]

這里用while進(jìn)行循環(huán)，循環(huán)條件是數(shù)組的長(zhǎng)度大于0并且數(shù)組的第一個(gè)元素按照指定方法運(yùn)行結(jié)果為false，如果滿足條件，使用arr.slice(1)將arr第一個(gè)元素刪除掉。直到while循環(huán)退出，返回此時(shí)的arr。

這里的邊界條件是數(shù)組長(zhǎng)度為0，這時(shí)候就不進(jìn)入while循環(huán)，直接返回空數(shù)組。

Returns a new array with n elements removed from the right.
Use Array.slice() to slice the remove the specified number of elements from the right.
const dropRight = (arr, n = 1) => arr.slice(0, -n);
//dropRight([1,2,3]) -> [1,2]
//dropRight([1,2,3], 2) -> [1]
//dropRight([1,2,3], 42) -> []

返回?cái)?shù)組從右邊開始剔除掉n個(gè)元素后的數(shù)組。

使用Array.slice()切掉從右邊開始計(jì)算的指定數(shù)目的元素。

?  code cat dropRight.js
const dropRight = (arr, n = 1) => arr.slice(0, -n);

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

n的默認(rèn)值是1，所以不傳第二個(gè)參數(shù)的時(shí)候會(huì)刪掉數(shù)組的最后一個(gè)元素。

-n不好理解嗎？變換一下就好了arr.slice(0, -n)跟arr.slice(0, arr.length + (-n))是一樣的。

slice(m, n)對(duì)應(yīng)就是[m, n)，包含下界，不包含上屆。

Returns every nth element in an array.
Use Array.filter() to create a new array that contains every nth element of a given array.
const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1);
// everyNth([1,2,3,4,5,6], 2) -> [ 2, 4, 6 ]

返回一個(gè)新的數(shù)組，數(shù)組包含每nth的元素，即nth倍數(shù)的元素。

使用Array.filter()創(chuàng)建一個(gè)包含nth倍數(shù)元素的新數(shù)組。

?  code cat everyNth.js
const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1);

console.log(everyNth([1, 2, 3, 4, 5, 6], 2));
?  code node everyNth.js
[ 2, 4, 6 ]

判斷是否nth倍數(shù)只需要知道該元素的索引加1后能不能被nth整除即可。

如果是我的話我會(huì)這么寫(e, i) => (i + 1) % nth === 0，可能這樣比較符合我的思維習(xí)慣。

Filters out the non-unique values in an array.
Use Array.filter() for an array containing only the unique values.
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]

過濾掉不唯一元素后返回的數(shù)組。

使用Array.filter()去篩選滿足數(shù)組元素唯一性的元素。

?  code cat filterNonUnique.js
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

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

方法用得很巧，一個(gè)數(shù)如果出現(xiàn)在一個(gè)數(shù)組超過一次，那么該數(shù)在數(shù)組中的左索引indexOf(從左邊數(shù)第一次出現(xiàn)該數(shù)的索引)和右索引lastIndexOf（從右邊數(shù)第一次出現(xiàn)該數(shù)的索引）一定不相等。

反過來說左索引等于右索引，該數(shù)在數(shù)組中只出現(xiàn)一次，滿足唯一性。

這里和distinctValuesOfArray的區(qū)別是，distinctValuesOfArray刪掉了重復(fù)的元素，只留一個(gè)；filterNonUnique刪掉了所有重復(fù)元素，一個(gè)不留。

Flattens an array.
Use a new array and concatenate it with the spread input array causing a shallow denesting of any contained arrays.
const flatten = arr => [ ].concat( ...arr );
// flatten([1,[2],3,4]) -> [1,2,3,4]

攤平一個(gè)數(shù)組。

Array.concat()、空數(shù)組[]和ES6的擴(kuò)展運(yùn)算符…來攤平一個(gè)數(shù)組。這里是淺度攤平，即只攤平一層。

?  code cat flatten.js
const flatten = arr => [].concat(...arr);

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

主要是用[]和ES6的擴(kuò)展運(yùn)算符…對(duì)arr運(yùn)算結(jié)果concat連接起來。

與deepFlatten的區(qū)別就是flatten只攤平一層，deepFlatten深度攤平。

個(gè)人翻譯水平有限，歡迎大家在issues上批評(píng)指正。JavaScript30秒， 從入門到放棄之Array（二）
微信公眾號(hào)：JavaScript30秒， 從入門到放棄之Array（二）