摘要：而這個(gè)秒就能理解的代碼片段，摒棄了許多不必要的代碼，只實(shí)現(xiàn)了最核心的部分，不像和那樣，考慮參數(shù)邊界值問題，例如，參數(shù)的類型是否符合預(yù)期等。使用根據(jù)斷言函數(shù)對(duì)數(shù)組進(jìn)行過濾，返回條件為真值的對(duì)象。

之前翻譯過一篇文章，《我喜歡的5個(gè)編程技巧》，里面的一個(gè)技巧是借鑒一個(gè)網(wǎng)站的代碼片段，好奇的小手點(diǎn)下鏈接后，發(fā)現(xiàn)是一個(gè)有 47000 多star的倉庫，30-seconds-of-code。

倉庫的名字就讓我很驚訝，30秒就能理解一段代碼，有點(diǎn)不可思議?？戳嗣總€(gè)方法實(shí)現(xiàn)的代碼都不長，很簡短，最復(fù)雜的也不過是4、5行代碼，的確沒有標(biāo)題黨的嫌疑，滿滿的干活。

處理的類型還很豐富，有Array、Browser、Date、Function、Math、Node、Object、String、Type、Utility。要了解更多，戳這里。

這就是一個(gè)工具函數(shù)庫呀。

此時(shí)讓我想到了 lodash.js 和 underscore.js，用過這兩個(gè)函數(shù)式編程的庫，對(duì)提供的方法肯定不陌生。它們主要是以函數(shù)作為主要載體的編程方式，用函數(shù)去拆解、抽象的表達(dá)式，每個(gè)函數(shù)封裝特定的功能，作用域局限在函數(shù)內(nèi)部，形成閉包，不對(duì)外界產(chǎn)生副作用。

相信也有很多人閱讀過它們的源碼，每個(gè)函數(shù)很簡短，考慮到兼容性，基本都用原生的方式實(shí)現(xiàn)，不會(huì)調(diào)用一些規(guī)范中最新推出的方法。如果能夠精讀它們，對(duì)自己的編程能力會(huì)有更高的提升，能夠掌握很多的技巧。有時(shí)你可能只是想快速的了解一個(gè)方法大致的實(shí)現(xiàn)原理，但要去看源碼的話，還是會(huì)有一些門檻。

而這個(gè)30秒就能理解的代碼片段，摒棄了許多不必要的代碼，只實(shí)現(xiàn)了最核心的部分，不像 lodash.js 和 underscore.js 那樣，考慮參數(shù)邊界值問題，例如，參數(shù)的類型是否符合預(yù)期等。默認(rèn)情況下，都是按照傳遞符合預(yù)期的參數(shù)處理。

如果要把這個(gè)庫用在自己的項(xiàng)目中，沒有對(duì)參數(shù)的判斷是非常糟糕的一件事。但不想引 lodash.js 或 underscore.js 這樣大的庫文件，想自己實(shí)現(xiàn)一個(gè)簡潔的方法快速使用，那么這個(gè)庫會(huì)對(duì)你實(shí)現(xiàn)自己的方法具有指導(dǎo)意義。不考慮兼容問題的話，你可以直接拷貝這個(gè)庫的代碼片段，加上對(duì)參數(shù)邊界的處理就直接能用。

再有一點(diǎn)，這個(gè)庫之所以簡短，能夠讓你在30秒就理解，主要是能用規(guī)范提供的最新方法就用，不再很費(fèi)勁的自己實(shí)現(xiàn)一套，全都調(diào)用了原生提供的方法，包括 ES6 的方法。每個(gè)方法都是獨(dú)立的，可獨(dú)立測試，獨(dú)立運(yùn)行，和其他的方法互不牽扯，極大的降低了閱讀時(shí)找各種方法會(huì)被打斷思路的煩惱。

當(dāng)然，如果你想閱讀 lodash.js 或 underscore.js 的源碼，先閱讀這個(gè)庫會(huì)很有幫助，它排除了許多不必要的干擾讓你很清晰很明確的get到核心的實(shí)現(xiàn)方式。

之前也有人翻譯過，但都很早，大約2年前了，作者最新最近更新的方法都沒有。而且倉庫中不止提供 javascript 的方法，還有 css react 的簡短代碼，還有其他語言的。基于自己學(xué)習(xí)的目的，同時(shí)也讓更多人掌握這些方法的實(shí)現(xiàn)方式，決定翻譯成中文。

倉庫地址：https://github.com/WYseven/30-seconds-of-code。感興趣的，可以給個(gè) star 哦！

目前已完成數(shù)組方法的翻譯，點(diǎn)擊查看 https://wyseven.github.io/30-seconds-of-code/。其他方法也在持續(xù)的更新中。。。

我不建議你悶著頭一口氣讀完，然后頭昏眼花的不知道自己看了什么。而是建議你在閑暇之余，工作空隙，斷斷續(xù)續(xù)，一天看幾個(gè)就夠了，權(quán)當(dāng)做工作累了休憩時(shí)當(dāng)做消遣來看。

因?yàn)槠脑?，以下隨機(jī)選擇了10個(gè)方法，你看簡單不簡單。

chunk
deepFlatten
flatten
initialize2DArray
union
mapObject
pull
reducedFilter
xProd

將數(shù)組分塊成指定大小的較小數(shù)組。

使用 array.from() 創(chuàng)建一個(gè)新的數(shù)組，該數(shù)組的長度就是將要生成的塊（chunk）的個(gè)數(shù)。
使用 array.prototype.slice() 將新數(shù)組的每個(gè)元素映射為一個(gè)長度為 size 的塊（chunk）。
如果原始數(shù)組不能被平均分割，那么最后的塊（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]]

深度平鋪一個(gè)數(shù)組。

使用遞歸。
使用 array. prototype.concat() 和空數(shù)組( [] )，結(jié)合 spread 操作符("...")將數(shù)組平鋪。
遞歸平鋪數(shù)組中的每個(gè)元素。

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ù)組展平到指定的深度。

使用遞歸，為每個(gè)深度級(jí)別 depth 遞減 1。 使用 Array.prototype.reduce() 和 Array.prototype.concat() 來合并元素或數(shù)組。 基本情況下，depth 等于 1 停止遞歸。 省略第二個(gè)參數(shù)，depth 只能平鋪到 1 層(單層平鋪) 的深度。

const flatten = (arr, depth = 1) =>
    arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

初始化一個(gè)給定行數(shù)和列數(shù)，以及值的二維數(shù)組。

使用 array.prototype.map() 生成 h 行，其中每一行都是長度為 w 的新數(shù)組。如果沒有提供值 val，則默認(rèn)為 null。

const initialize2DArray = (w, h, val = null) =>
    Array.from({ length: h }).map(() => Array.from({ length: w }).fill(val));

initialize2DArray(2, 2, 0); // [[0,0], [0,0]]

返回兩個(gè)數(shù)組的并集，相同的元素只出現(xiàn)一次。

基于 a 和 b 創(chuàng)建一個(gè) Set 對(duì)象，返回轉(zhuǎn)換后的數(shù)組。

const union = (a, b) => Array.from(new Set([...a, ...b]));

union([1, 2, 3], [4, 3, 2]); // [1,2,3,4]

使用一個(gè)函數(shù)將數(shù)組的值映射到對(duì)象，在鍵值對(duì)中，原始值作為鍵，映射值作為值。

使用一個(gè)匿名的內(nèi)部函數(shù)作用域來聲明一個(gè) undefined 的內(nèi)存空間，使用閉包來存儲(chǔ)返回值。 使用一個(gè)新的 Array 來存儲(chǔ)帶有函數(shù)映射的數(shù)組和一個(gè)逗號(hào)運(yùn)算符來返回第二個(gè)步驟，而不需要從一個(gè)上下文移動(dòng)到另一個(gè)上下文（由于閉包和操作順序）。

const mapObject = (arr, fn) =>
  (a => (
    (a = [arr, arr.map(fn)]), a[0].reduce((acc, val, ind) => ((acc[val] = a[1][ind]), acc), {})
  ))();

const squareIt = arr => mapObject(arr, a => a * a);
squareIt([1, 2, 3]); // { 1: 1, 2: 4, 3: 9 }

將指定數(shù)量的元素移動(dòng)到數(shù)組的末尾。

兩次使用 Array.prototype.slice() 來獲取指定索引之后的元素和指定索引之前的元素。
使用展開操作符(...)將兩個(gè)數(shù)組合成一個(gè)數(shù)組。
如果 offset 為負(fù)數(shù)，元素將從結(jié)束移動(dòng)到開始位置。

const offset = (arr, offset) => [...arr.slice(offset), ...arr.slice(0, offset)];

offset([1, 2, 3, 4, 5], 2); // [3, 4, 5, 1, 2]
offset([1, 2, 3, 4, 5], -2); // [4, 5, 1, 2, 3]

改變?cè)紨?shù)組，過濾掉指定的值。

使用 Array.prototype.filter() 和 array.prototype.include() 過濾指定的值。
使用 Array.prototype.length = 0 通過將數(shù)組的長度重置為0來清空數(shù)組，并使用 array.prototype.push() 把提取的值重新填充數(shù)組。

(對(duì)于不改變?cè)紨?shù)組的代碼片段，請(qǐng)參閱 without)

const pull = (arr, ...args) => {
  let argState = Array.isArray(args[0]) ? args[0] : args;
  let pulled = arr.filter((v, i) => !argState.includes(v));
  arr.length = 0;
  pulled.forEach(v => arr.push(v));
};

let myArray = ["a", "b", "c", "a", "b", "c"];
pull(myArray, "a", "c"); // myArray = [ "b", "b" ]

根據(jù)條件過濾一個(gè)對(duì)象數(shù)組，同時(shí)過濾掉未指定的鍵。

使用 array.prototype.filter() 根據(jù)斷言函數(shù) fn 對(duì)數(shù)組進(jìn)行過濾，返回條件為真值（truthy）的對(duì)象。
在經(jīng)過過濾后的數(shù)組上，使用 array.prototype.map() 和 array.prototype.reduce() 過濾掉在 keys 參數(shù)中未提供的鍵。

const reducedFilter = (data, keys, fn) =>
  data.filter(fn).map(el =>
    keys.reduce((acc, key) => {
      acc[key] = el[key];
      return acc;
    }, {})
  );

const data = [
  {
    id: 1,
    name: "john",
    age: 24
  },
  {
    id: 2,
    name: "mike",
    age: 50
  }
];

reducedFilter(data, ["id", "name"], item => item.age > 24); // [{ id: 2, name: "mike"}]

將兩個(gè)數(shù)組的每個(gè)元素兩兩進(jìn)行組合，組合出所有的可能對(duì)存在數(shù)組中，返回一個(gè)存在所有可能性對(duì)的數(shù)組。

使用 Array.prototype.reduce(), Array.prototype.map() 和 Array.prototype.concat() 從兩個(gè)數(shù)組的元素中生成所有可能的對(duì)，并將它們保存在一個(gè)數(shù)組中。

const xProd = (a, b) => a.reduce((acc, x) => acc.concat(b.map(y => [x, y])), []);

xProd([1, 2], ["a", "b"]); // [[1, "a"], [1, "b"], [2, "a"], [2, "b"]]

看完后，是不是覺得實(shí)現(xiàn)特簡潔特簡單？

看完后，給個(gè) star 哦！倉庫地址：https://github.com/WYseven/30...。

如果對(duì)你有幫助，請(qǐng)關(guān)注【前端技能解鎖】：