JavaScript30秒， 從入門到放棄
有意思
最近很火的 github 上的庫 30-seconds-of-code ，特別有意思，代碼也很優(yōu)雅。
- 能學(xué)es6
- 自己翻譯，能學(xué)英語
- 代碼很美，很優(yōu)雅，美即正義
- 函數(shù)式表達(dá)，享受
arrayGcd
Calculates the greatest common denominator (gcd) of an array of numbers.
Use Array.reduce() and the gcd formula (uses recursion) to calculate the greatest common denominator of an array of numbers.
- const arrayGcd = arr =>{
- const gcd = (x, y) => !y ? x : gcd(y, x % y);
- return arr.reduce((a,b) => gcd(a,b));
- }
- // arrayGcd([1,2,3,4,5]) -> 1
- // arrayGcd([4,8,12]) -> 4
計(jì)算數(shù)組的***公約數(shù)。
使用 Array.reduce() 和 gcd 公式(使用遞歸)來計(jì)算一個數(shù)組的***公約數(shù)。
- ➜ code cat arrayGcd.js
- const arrayGcd = arr => {
- const gcd = (x, y) => !y ? x : gcd(y, x % y);
- return arr.reduce((a, b) => gcd(a, b));
- }
- console.log(arrayGcd([1, 2, 3, 4, 5]));
- console.log(arrayGcd([4, 8, 12]));
- ➜ code node arrayGcd.js
- 1
- 4
gcd 即歐幾里德算法，具體不表，自查。這里用到了數(shù)組的reduce方法，相當(dāng)簡潔，reduce不太了解的話，看下 mdn 就明白。
arrayLcm
Calculates the lowest common multiple (lcm) of an array of numbers.
Use Array.reduce() and the lcm formula (uses recursion) to calculate the lowest common multiple of an array of numbers.
- const arrayLcm = arr =>{
- const gcd = (x, y) => !y ? x : gcd(y, x % y);
- const lcm = (x, y) => (x*y)/gcd(x, y)
- return arr.reduce((a,b) => lcm(a,b));
- }
- // arrayLcm([1,2,3,4,5]) -> 60
- // arrayLcm([4,8,12]) -> 24
計(jì)算一個數(shù)組的最小公倍數(shù)。
使用 Array.reduce() 和 lcm 公式(使用遞歸)來計(jì)算一個數(shù)組的***公約數(shù)。
- ➜ code cat arrayLcm.js
- const arrayLcm = arr => {
- const gcd = (x, y) => (!y ? x : gcd(y, x % y));
- const lcm = (x, y) => x * y / gcd(x, y);
- return arr.reduce((a, b) => lcm(a, b));
- };
- console.log(arrayLcm([1, 2, 3, 4, 5]));
- console.log(arrayLcm([4, 8, 12]));
- ➜ code node arrayLcm.js
- 60
- 24
lcm 算法用到了前面的 gcd 算法，關(guān)鍵點(diǎn)是兩個數(shù)的***公約數(shù)和最小公倍數(shù)的乘積正好就是這兩個數(shù)的乘積。
arrayMax
Returns the maximum value in an array.
Use Math.max() combined with the spread operator ( ... ) to get the maximum value in the array.
- const arrayMax = arr => Math.max(...arr);
- // arrayMax([10, 1, 5]) -> 10
返回?cái)?shù)組中***的值。
使用 Math.max() 和 ES6 的擴(kuò)展運(yùn)算符 … 返回?cái)?shù)組中***的值。
- ➜ code cat arrayMax.js
- const arrayMax = arr => Math.max(...arr);
- console.log(arrayMax([10, 1, 5]));
- ➜ code node arrayMax.js
- 10
實(shí)際上就是 Math.max() 干的事，沒啥可說的了。
arrayMin
Returns the minimum value in an array.
Use Math.min() combined with the spread operator ( ... ) to get the minimum value in the array.
- const arrayMin = arr => Math.min(...arr);
- // arrayMin([10, 1, 5]) -> 1
返回?cái)?shù)組中最小的值。
使用 Math.min() 和 ES6 的擴(kuò)展運(yùn)算符 … 返回?cái)?shù)組中最小的值。
- ➜ code cat arrayMin.js
- const arrayMin = arr => Math.min(...arr);
- console.log(arrayMin([10, 1, 5]));
- ➜ code node arrayMin.js
- 1
實(shí)際上就是 Math.min() 干的事，沒啥可說的了。
chunk
Chunks an array into smaller arrays of a specified size.
Use Array.from() to create a new array, that fits the number of chunks that will be produced. Use Array.slice() to map each element of the new array to a chunk the length of size . If the original array can't be split evenly, the final chunk will contain the remaining elements.
- const chunk = (arr, size) =>
- Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));
- // chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]]
按照給定的 size 將一個數(shù)組切分成含有 size 個數(shù)的更小數(shù)組塊的數(shù)組。
使用 Array.from() 生產(chǎn)新的符合定義的數(shù)組。使用 Array.slice() 來截取指定 size 個元素組成新的數(shù)組塊。如果原數(shù)組長度不能被 size 整除，***的剩余的那些元素將歸屬于***一個塊。
- ➜ code cat chunk.js
- const chunk = (arr, size) =>
- Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
- arr.slice(i * size, i * size + size)
- );
- console.log(chunk([1, 2, 3, 4, 5], 2));
- ➜ code node chunk.js
- [ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]
Array.from(arrayLike, mapFn, thisArg) 這個方法呢，***個參數(shù)是一個類數(shù)組或者可迭代的對象，第二個參數(shù)是一個應(yīng)用在每一個數(shù)組元素上的方法，第三個參數(shù)就是改變 this 的指向了。通俗說就是指定誰是你的爸爸。
這里用了一個 { length: Math.ceil(arr.length / size) } 迭代對象， length 指定了迭代次數(shù)，即按照 size 分塊后的數(shù)組長度，正好就是原數(shù)組長度除以 size 向上取整的值。向上取整就是為了滿足不能完全整除的情況。比如5個元素按照2個一組進(jìn)行分塊，分了兩組兩個元素的，剩***一個元素成了獨(dú)立組，總長為3。
(v, i) ，由于迭代的時候數(shù)組在每一個位置上都是以 undefined 初始化的，所以 v 一直都是 undefined 。
arr.slice(i * size, i * size + size) 迭代過程中每次截取 size 個數(shù)的元素組成新數(shù)組。這里的 i 就是隨著迭代變化，比如 length 是3， i 就是0，1，2。
這里的迭代類似 python 里的 range 。
- ➜ code python
- Python 3.6.4 (default, Dec 23 2017, 10:37:40)
- [GCC 4.2.1 Compatible Apple LLVM 9.0.0 (clang-900.0.39.2)] on darwin
- Type "help", "copyright", "credits" or "license" for more information.
- >>> import math
- >>> arr = [1,2,3,4,5]
- >>> size = 2
- >>> for i in range(math.ceil(len(arr) / size)):
- ... print('index: ', i)
- ...
- index: 0
- index: 1
- index: 2
compact
Removes falsey values from an array.
Use Array.filter() to filter out falsey values ( false , null , 0 , "" , undefined , and NaN ).
- const compact = arr => arr.filter(Boolean);
- // compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3,
移除掉數(shù)組里 falsey 的元素。(這個 falsey 不太好翻譯，不是錯誤的意思，而是該值布爾運(yùn)算值為 false 的意思，我個人常用 !! 進(jìn)行判斷)。
使用 Array.filter() 把 false 、 null 、 0 、 "" 、 undefined 和 NaN 這些 falsey 過濾掉。
- ➜ code cat compact.js
- const compact = arr => arr.filter(Boolean);
- console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34]));
- ➜ code node compact.js
- [ 1, 2, 3, 'a', 's', 34 ]
Array.prototype.filter() 干的，沒啥好說。
countOccurrences
Counts the occurrences of a value in an array.
Use Array.reduce() to increment a counter each time you encounter the specific value inside the array.
- const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
- // countOccurrences([1,1,2,1,2,3], 1) -> 3
統(tǒng)計(jì)一個元素在一個數(shù)組中出現(xiàn)的次數(shù)。
使用 Array.reduce() 在遍歷過程中如果指定元素在數(shù)組中出現(xiàn)，則增加它的次數(shù)值，默認(rèn)次數(shù)為0。
- ➜ code cat countOccurrences.js
- const countOccurrences = (arr, value) =>
- arr.reduce((a, v) => (v === value ? a + 1 : a + 0), 0);
- console.log(countOccurrences([1, 1, 2, 1, 2, 3], 1));
- console.log(countOccurrences([1, 1, 2, 1, 2, 3], 5));
- ➜ code node countOccurrences.js
- 3
- 0
三元運(yùn)算符 (v === value ? a + 1 : a + 0) 遍歷過程中判斷遍歷數(shù)組值 v 是否嚴(yán)格等于指定值 value ，是，次數(shù) a+1 ;否， a+0 。
***的一個逗號后面的0，是這個初始值，即 a=0 ，這個懂 reduce 方法都知道，特別指出是，因?yàn)檫@個函數(shù)一定會有返回值，如果指定元素沒有在數(shù)組中出現(xiàn)一次，返回值是 0 ，所以必須得初始化為 0 。
deepFlatten
Deep flattens an array.
Use recursion. Use Array.concat() with an empty array ( [] ) and the spread operator ( ... ) to flatten an array. Recursively flatten each element that is an array.
- const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
- // deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]
深度攤平一個數(shù)組。
使用遞歸方法。結(jié)合 Array.concat() 、空數(shù)組 [] 和 ES6 的擴(kuò)展運(yùn)算符 … 來攤平一個數(shù)組，如果攤平的元素還是一個數(shù)組，就再遞歸運(yùn)用該方法。
- ➜ code cat deepFlatten.js
- const deepFlatten = arr =>
- [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
- console.log(deepFlatten([1, [2], [[3], 4], 5]));
- ➜ code node deepFlatten.js
- [ 1, 2, 3, 4, 5 ]
三元運(yùn)算符 (Array.isArray(v) ? deepFlatten(v) : v) 判斷 v 是否是一個數(shù)組，是，返回遞歸運(yùn)用 deepFlatten(v) 后的值;否，直接返回 v 。
[].concat(...arr.map(fn)) 用空數(shù)組把 map 運(yùn)算產(chǎn)生的數(shù)組進(jìn)行 … 擴(kuò)展運(yùn)算值拼接成結(jié)果數(shù)組返回。
該方法是深度攤平方法，在很多時候還有特定的攤平一層的需求， underscore 就有。實(shí)現(xiàn)的方法就是再加一個標(biāo)志參數(shù)進(jìn)行處理即可。具體不講了。
應(yīng)該會寫一個系列，今天先寫到這，明天繼續(xù)。
