[聚合文章] JavaScript30秒， 从入门到放弃

有意思

最近很火的 github 上的库 30-seconds-of-code ，特别有意思，代码也很优雅。

1. 能学es6
2. 自己翻译，能学英语
3. 代码很美，很优雅，美即正义
4. 函数式表达，享受

arrayGcd

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

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

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

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

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

const compact = arr => arr.filter(Boolean);
// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]

移除掉数组里 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

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

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 就有。实现的方法就是再加一个标志参数进行处理即可。具体不讲了。

应该会写一个系列，今天先写到这，明天继续。

个人翻译水平有限，欢迎大家在issues上批评指正。 JavaScript30秒， 从入门到放弃

博客地址： JavaScript30秒， 从入门到放弃

微信公众号地址： JavaScript30秒， 从入门到放弃