JavaScript30秒， 從入門到放棄
有意思
最近很火的 github 上的庫 30-seconds-of-code ，特別有意思，代碼也很優雅。
- 能學es6
- 自己翻譯，能學英語
- 代碼很美，很優雅，美即正義
- 函數式表達，享受
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
計算數組的***公約數。
使用 Array.reduce() 和 gcd 公式(使用遞歸)來計算一個數組的***公約數。
- ➜ 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 即歐幾里德算法，具體不表，自查。這里用到了數組的reduce方法，相當簡潔，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
計算一個數組的最小公倍數。
使用 Array.reduce() 和 lcm 公式(使用遞歸)來計算一個數組的***公約數。
- ➜ 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 算法，關鍵點是兩個數的***公約數和最小公倍數的乘積正好就是這兩個數的乘積。
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
返回數組中***的值。
使用 Math.max() 和 ES6 的擴展運算符 … 返回數組中***的值。
- ➜ code cat arrayMax.js
- const arrayMax = arr => Math.max(...arr);
- console.log(arrayMax([10, 1, 5]));
- ➜ code node arrayMax.js
- 10
實際上就是 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
返回數組中最小的值。
使用 Math.min() 和 ES6 的擴展運算符 … 返回數組中最小的值。
- ➜ code cat arrayMin.js
- const arrayMin = arr => Math.min(...arr);
- console.log(arrayMin([10, 1, 5]));
- ➜ code node arrayMin.js
- 1
實際上就是 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 將一個數組切分成含有 size 個數的更小數組塊的數組。
使用 Array.from() 生產新的符合定義的數組。使用 Array.slice() 來截取指定 size 個元素組成新的數組塊。如果原數組長度不能被 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) 這個方法呢，***個參數是一個類數組或者可迭代的對象，第二個參數是一個應用在每一個數組元素上的方法，第三個參數就是改變 this 的指向了。通俗說就是指定誰是你的爸爸。
這里用了一個 { length: Math.ceil(arr.length / size) } 迭代對象， length 指定了迭代次數，即按照 size 分塊后的數組長度，正好就是原數組長度除以 size 向上取整的值。向上取整就是為了滿足不能完全整除的情況。比如5個元素按照2個一組進行分塊，分了兩組兩個元素的，剩***一個元素成了獨立組，總長為3。
(v, i) ，由于迭代的時候數組在每一個位置上都是以 undefined 初始化的，所以 v 一直都是 undefined 。
arr.slice(i * size, i * size + size) 迭代過程中每次截取 size 個數的元素組成新數組。這里的 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,
移除掉數組里 falsey 的元素。(這個 falsey 不太好翻譯，不是錯誤的意思，而是該值布爾運算值為 false 的意思，我個人常用 !! 進行判斷)。
使用 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
統計一個元素在一個數組中出現的次數。
使用 Array.reduce() 在遍歷過程中如果指定元素在數組中出現，則增加它的次數值，默認次數為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
三元運算符 (v === value ? a + 1 : a + 0) 遍歷過程中判斷遍歷數組值 v 是否嚴格等于指定值 value ，是，次數 a+1 ;否， a+0 。
***的一個逗號后面的0，是這個初始值，即 a=0 ，這個懂 reduce 方法都知道，特別指出是，因為這個函數一定會有返回值，如果指定元素沒有在數組中出現一次，返回值是 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]
深度攤平一個數組。
使用遞歸方法。結合 Array.concat() 、空數組 [] 和 ES6 的擴展運算符 … 來攤平一個數組，如果攤平的元素還是一個數組，就再遞歸運用該方法。
- ➜ 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 ]
三元運算符 (Array.isArray(v) ? deepFlatten(v) : v) 判斷 v 是否是一個數組，是，返回遞歸運用 deepFlatten(v) 后的值;否，直接返回 v 。
[].concat(...arr.map(fn)) 用空數組把 map 運算產生的數組進行 … 擴展運算值拼接成結果數組返回。
該方法是深度攤平方法，在很多時候還有特定的攤平一層的需求， underscore 就有。實現的方法就是再加一個標志參數進行處理即可。具體不講了。
應該會寫一個系列，今天先寫到這，明天繼續。
