精心收集的 95 個超實用的 JavaScript 程式碼片段（ ES6+ 編寫）

Array 陣列

Array concatenation (陣列拼接)

使用 Array.concat() ，通過在 args 中附加任何陣列和/或值來拼接一個數組。

JavaScript 程式碼:

const ArrayConcat = (arr, ...args) => [].concat(arr, ...args);
// ArrayConcat([1], [1, 2, 3, [4]]) -> [1, 2, 3, [4]]

⬆ back to top

Array difference (陣列比較)

根據陣列 b 建立一個 Set 物件，然後在陣列 a 上使用 Array.filter() 方法，過濾出陣列 b 中不包含的值。

JavaScript 程式碼:

const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };
// difference([1,2,3], [1,2]) -> [3]

⬆ back to top

Array includes (陣列包含)

使用 slice() 來抵消陣列/字串，並且使用 indexOf() 來檢查是否包含該值。如果省略最後一個引數 fromIndex ，則會檢查整個陣列/字串。

JavaScript 程式碼:

const includes = (collection, val, fromIndex=0) => collection.slice(fromIndex).indexOf(val) != -1;
// includes("30-seconds-of-code", "code") -> true
// includes([1, 2, 3, 4], [1, 2], 1) -> false

⬆ back to top

Array intersection (陣列交集)

根據陣列 b 建立一個 Set 物件，然後在陣列 a 上使用 Array.filter() 方法，只保留陣列 b 中也包含的值。

JavaScript 程式碼:

const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x)); };
// intersection([1,2,3], [4,3,2]) -> [2,3]

⬆ back to top

Array remove (移除陣列中的元素)

使用 Array.filter() 和 Array.reduce() 來查詢返回真值的陣列元素，使用 Array.splice() 來移除元素。 func 有三個引數(value, index, array)。

JavaScript 程式碼:

const remove = (arr, func) =>
Array.isArray(arr) ? arr.filter(func).reduce((acc, val) => {
arr.splice(arr.indexOf(val), 1); return acc.concat(val);
}, [])
: [];
//remove([1, 2, 3, 4], n => n % 2 == 0) -> [2, 4]

⬆ back to top

Array sample (陣列取樣隨，機獲取陣列中的1個元素)

使用 Math.random() 生成一個隨機數，乘以 length，並使用 Math.floor() 捨去小數獲得到最接近的整數。這個方法也適用於字串。

JavaScript 程式碼:

const sample = arr => arr[Math.floor(Math.random() * arr.length)];
// sample([3, 7, 9, 11]) -> 9

⬆ back to top

Array union (數組合集)

用陣列 a 和 b 的所有值建立一個 Set 物件，並轉換成一個數組。

JavaScript 程式碼:

const union = (a, b) => Array.from(new Set([...a, ...b]));
// union([1,2,3], [4,3,2]) -> [1,2,3,4]

⬆ back to top

Array without (從陣列中排除給定值)

使用 Array.filter() 建立一個排除所有給定值的陣列。

JavaScript 程式碼:

const without = (arr, ...args) => arr.filter(v => args.indexOf(v) === -1);
// without([2, 1, 2, 3], 1, 2) -> [3]
// without([2, 1, 2, 3, 4, 5, 5, 5, 3, 2, 7, 7], 3, 1, 5, 2) -> [ 4, 7, 7 ]

⬆ back to top

Array zip (建立一個分組元素陣列)

使用 Math.max.apply() 獲取引數中最長的陣列。建立一個長度為返回值的陣列，並使用 Array.from()和 map-function 來建立一個分組元素陣列。如果引數陣列的長度不同，則在未找到值的情況下使用 undefined 。

JavaScript 程式碼:

const zip = (...arrays) => {
const maxLength = Math.max.apply(null, arrays.map(a => a.length));
return Array.from({length: maxLength}).map((_, i) => {
return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);
})
}
//zip(['a', 'b'], [1, 2], [true, false]); -> [['a', 1, true], ['b', 2, false]]
//zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]

⬆ back to top

Average of array of numbers (求數字陣列的平均數)

使用 Array.reduce() 將陣列中的每個值新增到一個累加器，使用 0 初始化，除以陣列的 length (長度)。

JavaScript 程式碼:

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
// average([1,2,3]) -> 2

⬆ back to top

Chunk array (陣列分塊)

使用 Array.from() 建立一個新的陣列，它的長度與將要生成的 chunk(塊) 數量相匹配。使用 Array.slice() 將新陣列的每個元素對映到長度為 size 的 chunk 中。如果原始陣列不能均勻分割，最後的 chunk 將包含剩餘的元素。

JavaScript 程式碼:

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]]

⬆ back to top

Compact (過濾掉陣列中所有假值元素)

使用 Array.filter() 過濾掉陣列中所有假值元素(false, null, 0, "", undefined, and NaN)。

JavaScript 程式碼:

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

⬆ back to top

Count occurrences of a value in array (計數陣列中某個值的出現次數)

每次遇到陣列中的指定值時，使用 Array.reduce() 來遞增計數器。

JavaScript 程式碼:

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
// countOccurrences([1,1,2,1,2,3], 1) -> 3

⬆ back to top

Deep flatten array (深度平鋪陣列)

使用遞迴。通過空陣列([]) 使用 Array.concat() ，結合展開運算子( ... ) 來平鋪陣列。遞迴平鋪每個陣列元素。

JavaScript 程式碼:

const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]

⬆ back to top

Drop elements in array (刪除陣列中的元素)

迴圈陣列，使用 Array.shift() 刪除陣列的第一個元素，直到函式的返回值為 true 。返回其餘的元素。

JavaScript 程式碼:

const dropElements = (arr, func) => {
while (arr.length > 0 && !func(arr[0])) arr.shift();
return arr;
};
// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]

⬆ back to top

Fill array (填充陣列)

使用 Array.map() 將指定值對映到 start(包含)和 end (排除)之間。省略 start 將從第一個元素開始，省略 end 將在最後一個元素完成。

JavaScript 程式碼:

const fillArray = (arr, value, start = 0, end = arr.length) =>
arr.map((v, i) => i >= start && i < end ? value : v);
// fillArray([1,2,3,4],'8',1,3) -> [1,'8','8',4]

⬆ back to top

Filter out non-unique values in an array (過濾出陣列中的非唯一值)

使用 Array.filter() 濾除掉非唯一值，使陣列僅包含唯一值。

JavaScript 程式碼:

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]

⬆ back to top

Flatten array up to depth (根據指定的 depth 平鋪陣列)

每次遞迴，使 depth 減 1 。使用 Array.reduce() 和 Array.concat() 來合併元素或陣列。預設情況下， depth 等於 1 時停遞迴。省略第二個引數 depth ，只能平鋪1層的深度 (單層平鋪)。

JavaScript 程式碼:

const flattenDepth = (arr, depth = 1) =>
depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), [])
: arr.reduce((a, v) => a.concat(v), []);
// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]

⬆ back to top

Flatten array (平鋪陣列)

使用 Array.reduce() 獲取陣列中的所有元素，並使用 concat() 將其平鋪。

JavaScript 程式碼:

const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
// flatten([1,[2],3,4]) -> [1,2,3,4]

⬆ back to top

Get max value from array (獲取陣列中的最大值)

結合使用 Math.max() 與展開運算子( ... )，獲取陣列中的最大值。

JavaScript 程式碼:

const arrayMax = arr => Math.max(...arr);
// arrayMax([10, 1, 5]) -> 10

⬆ back to top

Get min value from array (獲取陣列中的最小值)

結合使用 Math.max() 與展開運算子( ... )，獲取陣列中的最小值。

JavaScript 程式碼:

const arrayMin = arr => Math.min(...arr);
// arrayMin([10, 1, 5]) -> 1

⬆ back to top

Group by (陣列分組)

使用 Array.map() 將陣列的值對映到函式或屬性名稱。使用 Array.reduce() 來建立一個物件，其中的 key 是從對映結果中產生。

JavaScript 程式碼:

const groupBy = (arr, func) =>
arr.map(typeof func === 'function' ? func : val => val[func])
.reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {});
// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]}
// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}

⬆ back to top

Head of list (獲取陣列的第一個元素)

使用 arr[0] 返回傳遞陣列的第一個元素。

JavaScript 程式碼:

const head = arr => arr[0];
// head([1,2,3]) -> 1

⬆ back to top

Initial of list (排除陣列中最後一個元素)

使用 arr.slice(0,-1) 返回排除了最後一個元素的陣列。

JavaScript 程式碼:

const initial = arr => arr.slice(0, -1);
// initial([1,2,3]) -> [1,2]

⬆ back to top

Initialize array with range (初始化特定範圍的陣列)

使用 Array(end-start) 建立所需長度的陣列，使用 Array.map() 在一個範圍內填充所需的值。
您可以省略 start ，預設值 0。

JavaScript 程式碼:

const initializeArrayRange = (end, start = 0) =>
Array.apply(null, Array(end - start)).map((v, i) => i + start);
// initializeArrayRange(5) -> [0,1,2,3,4]

⬆ back to top

Initialize array with values (初始化特定範圍和值的陣列)

使用 Array(n) 建立所需長度的陣列，使用 fill(v) 以填充所需的值。您可以忽略 value ，使用預設值 0 。

JavaScript 程式碼:

const initializeArray = (n, value = 0) => Array(n).fill(value);
// initializeArray(5, 2) -> [2,2,2,2,2]

⬆ back to top

Last of list (獲取陣列的最後一個元素)

使用 arr.slice(-1)[0] 來獲取給定陣列的最後一個元素。

JavaScript 程式碼:

const last = arr => arr.slice(-1)[0];
// last([1,2,3]) -> 3

⬆ back to top

Median of array of numbers (獲取數字陣列的中值)

找到數字陣列的中間值，使用 Array.sort() 對值進行排序。如果 length 是奇數，則返回中間值數字，否則返回兩個中間值數值的平均值。

JavaScript 程式碼:

const median = arr => {
const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b);
return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
};
// median([5,6,50,1,-5]) -> 5
// median([0,10,-2,7]) -> 3.5

⬆ back to top

Nth element of array (獲取陣列的第N個元素)

使用 Array.slice() 獲取陣列的第 n 個元素。如果索引超出範圍，則返回 [] 。省略第二個引數 n ，將得到陣列的第一個元素。

JavaScript 程式碼:

const nth = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0];
// nth(['a','b','c'],1) -> 'b'
// nth(['a','b','b']-2) -> 'a'

⬆ back to top

Pick(提取)

使用 Array.reduce() 只過濾/萃取出 arr 引數指定 key (如果 key 存在於 obj 中)的屬性值，。

JavaScript 程式碼:

const pick = (obj, arr) =>
arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {});
// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 }
// pick(object, ['a', 'c'])['a'] -> 1

⬆ back to top

Shuffle array (隨機排列陣列)

使用 Array.sort() 來重新排序元素，比較器中使用 Math.random() 。

JavaScript 程式碼:

const shuffle = arr => arr.sort(() => Math.random() - 0.5);
// shuffle([1,2,3]) -> [2,3,1]

⬆ back to top

Similarity between arrays (獲取陣列交集)

使用 filter() 移除不在 values 中的值，使用 includes() 確定。

JavaScript 程式碼:

const similarity = (arr, values) => arr.filter(v => values.includes(v));
// similarity([1,2,3], [1,2,4]) -> [1,2]

⬆ back to top

Sum of array of numbers (數字陣列求和)

使用 Array.reduce() 將每個值新增到累加器，並使用0值初始化。

JavaScript 程式碼:

const sum = arr => arr.reduce((acc, val) => acc + val, 0);
// sum([1,2,3,4]) -> 10

⬆ back to top

Tail of list (返回剔除第一個元素後的陣列)

如果陣列的 length 大於 1 ，則返回 arr.slice(1)，否則返回整個陣列。

JavaScript 程式碼:

const tail = arr => arr.length > 1 ? arr.slice(1) : arr;
// tail([1,2,3]) -> [2,3]
// tail([1]) -> [1]

⬆ back to top

Take right(從一個給定的陣列中建立一個後N個元素的陣列)

使用 Array.slice() 來建立一個從第 n 個元素開始從末尾的陣列。

JavaScript 程式碼:

const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
// takeRight([1, 2, 3], 2) -> [ 2, 3 ]
// takeRight([1, 2, 3]) -> [3]

⬆ back to top

Take(從一個給定的陣列中建立一個前N個元素的陣列)

使用 Array.slice() 建立一個數組包含第一個元素開始，到 n 個元素結束的陣列。

JavaScript 程式碼:

const take = (arr, n = 1) => arr.slice(0, n);
// take([1, 2, 3], 5) -> [1, 2, 3]
// take([1, 2, 3], 0) -> []

⬆ back to top

Unique values of array (陣列去重)

使用 ES6 的 Set 和 ...rest 操作符剔除重複的值。

JavaScript 程式碼:

const unique = arr => [...new Set(arr)];
// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]

⬆ back to top

Browser 瀏覽器

Bottom visible (頁面的底部是否可見)

使用 scrollY，scrollHeight 和 clientHeight 來確定頁面的底部是否可見。

JavaScript 程式碼:

const bottomVisible = _ =>
document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight;
// bottomVisible() -> true

⬆ back to top

Current URL (獲取當前頁面URL)

使用 window.location.href 獲取當前頁面URL。

JavaScript 程式碼:

const currentUrl = _ => window.location.href;
// currentUrl() -> 'https://google.com'

⬆ back to top

Element is visible in viewport (判斷元素是否在可視視窗可見)

使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 值來確定給定元素是否在可視視窗中可見。省略第二個引數來判斷元素是否完全可見，或者指定 true 來判斷它是否部分可見。

JavaScript 程式碼:

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom < = innerHeight && right <= innerWidth;
};
// 舉個例子，有一個 100x100 可視視窗，和一個 10x10px 元素定位在 {top: -1, left: 0, bottom: 9, right: 10}
// elementIsVisibleInViewport(el) -> false (not fully visible)
// elementIsVisibleInViewport(el, true) -> true (partially visible)

⬆ back to top

Get scroll position (獲取滾動條位置)

如果瀏覽器支援 pageXOffset 和 pageYOffset ，那麼請使用 pageXOffset 和 pageYOffset ，否則請使用 scrollLeft 和 scrollTop 。你可以省略 el 引數，預設值為 window。

JavaScript 程式碼:

const getScrollPos = (el = window) =>
({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
// getScrollPos() -> {x: 0, y: 200}

⬆ back to top

Redirect to URL (重定向到URL)

使用 window.location.href 或 window.location.replace() 重定向到 url 。傳遞第二個引數來模擬連結點選(true – 預設值)或HTTP重定向(false)。

JavaScript 程式碼:

const redirect = (url, asLink = true) =>
asLink ? window.location.href = url : window.location.replace(url);
// redirect('https://google.com')

⬆ back to top

Scroll to top (回到頂部)

使用 document.documentElement.scrollTop 或 document.body.scrollTop 獲取到頂部距離。從頂部滾動一小部分距離。使用window.requestAnimationFrame() 來實現滾動動畫。

JavaScript 程式碼:

const scrollToTop = _ => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
// scrollToTop()

⬆ back to top

Date 日期

Get days difference between dates (獲取兩個日期之間相差的天數)

計算 Date 物件之間的差異(以天為單位)。

JavaScript 程式碼:

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9

⬆ back to top

Function 函式

Chain asynchronous functions (鏈式呼叫非同步函式)

迴圈遍歷包含非同步事件的函式陣列，每次非同步事件完成後呼叫 next 。

JavaScript 程式碼:

const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); };
/*
chainAsync([
next => { console.log('0 seconds'); setTimeout(next, 1000); },
next => { console.log('1 second'); setTimeout(next, 1000); },
next => { console.log('2 seconds'); }
])
*/

⬆ back to top

Curry (函數語言程式設計術語：柯里化)

使用遞迴。如果提供的引數(args)數量足夠，呼叫傳遞函式 fn 。否則返回一個柯里化後的函式 fn ，期望剩下的引數。如果你想柯里化一個接受可變引數數量的函式(可變引數數量的函式，例如 Math.min() )，你可以選擇將引數個數傳遞給第二個引數 arity。

JavaScript 程式碼:

const curry = (fn, arity = fn.length, ...args) =>
arity < = args.length
? fn(...args)
: curry.bind(null, fn, arity, ...args);
// curry(Math.pow)(2)(10) -> 1024
// curry(Math.min, 3)(10)(50)(2) -> 2

⬆ back to top

Pipe (函數語言程式設計術語：管道或導流)

使用 Array.reduce() 來執行從左到右的函式組合。第一個(最左邊的)函式可以接受一個或多個引數；其餘的函式必須是一元函式。

JavaScript 程式碼:

const pipe = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));
/*
const add5 = x => x + 5
const multiply = (x, y) => x * y
const multiplyAndAdd5 = pipe(multiply, add5)
multiplyAndAdd5(5, 2) -> 15
*/

⬆ back to top

Promisify (柯里化一個 Promise 函式)

使用柯里化返回一個函式，這個函式返回一個呼叫原始函式的 Promise 。使用 ...rest 運算子傳入所有引數。

在 Node 8+ 中，你可以使用 util.promisify

JavaScript 程式碼:

const promisify = func =>
(...args) =>
new Promise((resolve, reject) =>
func(...args, (err, result) =>
err ? reject(err) : resolve(result))
);
// const delay = promisify((d, cb) => setTimeout(cb, d))
// delay(2000).then(() => console.log('Hi!')) -> Promise resolves after 2s

⬆ back to top

Run promises in series (執行連續的 promises)

使用 Array.reduce() 通過建立 promise 鏈來執行連續的 promises，其中每個 promise 在 resolved 時返回下一個 promise 。

JavaScript 程式碼:

const series = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
// const delay = (d) => new Promise(r => setTimeout(r, d))
// series([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete

⬆ back to top

Sleep (休眠)

延遲執行 async 函式的一部分，通過把它放到 sleep 狀態，返回一個 Promise 。

JavaScript 程式碼:

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
/*
async function sleepyWork() {
console.log('I\'m going to sleep for 1 second.');
await sleep(1000);
console.log('I woke up after 1 second.');
}
*/

⬆ back to top

Math 數學方法

Collatz algorithm(考拉茲演算法)

如果 n 是偶數，則返回 n/2 。否則返回 3n+1 。

JavaScript 程式碼:

const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1);
// collatz(8) --> 4
// collatz(5) --> 16

愚人碼頭注：考拉茲猜想(英語：Collatz conjecture)，又稱為奇偶歸一猜想、3n＋1猜想、冰雹猜想、角谷猜想、哈塞猜想、烏拉姆猜想或敘拉古猜想，是指對於每一個正整數，如果它是奇數，則對它乘3再加1，如果它是偶數，則對它除以2，如此迴圈，最終都能夠得到1。 – 維基百科。

⬆ back to top

Distance between two points (兩點之間的歐氏距離)

使用 Math.hypot() 計算兩點之間的歐氏距離( Euclidean distance)。

JavaScript 程式碼:

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
// distance(1,1, 2,3) -> 2.23606797749979

愚人碼頭注：歐氏距離( Euclidean distance)是一個通常採用的距離定義，它是在m維空間中兩個點之間的真實距離。

⬆ back to top

Divisible by number (可以被某個數整除)

使用模運算子(%)來檢查餘數是否等於 0 。

JavaScript 程式碼:

const isDivisible = (dividend, divisor) => dividend % divisor === 0;
// isDivisible(6,3) -> true

⬆ back to top

Even or odd number (判斷奇偶數)

使用模運算子(%)來檢查數字是奇數還是偶數。如果數字是偶數，則返回 true ，如果是奇數，則返回 false 。

JavaScript 程式碼:

const isEven = num => num % 2 === 0;
// isEven(3) -> false

⬆ back to top

Factorial (階乘)

使用遞迴。如果 n 小於或等於 1 ，則返回 1 。否則返回 n 和 n - 1 的階乘。

JavaScript 程式碼:

const factorial = n => n < = 1 ? 1 : n * factorial(n - 1);
// factorial(6) -> 720

⬆ back to top

Fibonacci array generator (斐波納契陣列發生器)

建立一個指定長度的空陣列，初始化前兩個值( 0 和 1 )。使用 Array.reduce() 向陣列中新增值，使用最的值是兩個值的和(前兩個除外)。

JavaScript 程式碼:

const fibonacci = n =>
Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
// fibonacci(5) -> [0,1,1,2,3]

⬆ back to top

Greatest common divisor (GCD) (最大公約數)

使用遞迴。當 y 等於 0 的情況下，返回 x 。否則，返回 y 和 x/y 餘數最大公約數。

JavaScript 程式碼:

const gcd = (x, y) => !y ? x : gcd(y, x % y);
// gcd (8, 36) -> 4

⬆ back to top

Hamming distance (漢明距離)

使用XOR運算子( ^ )查詢這兩個數字之間的位差，使用 toString(2) 轉換為二進位制字串。使用 match(/1/g) 計算並返回字串中 1 的數量。

JavaScript 程式碼:

const hammingDistance = (num1, num2) =>
((num1 ^ num2).toString(2).match(/1/g) || '').length;
// hammingDistance(2,3) -> 1

愚人碼頭注：在資訊理論中，兩個等長字串之間的漢明距離(英語：Hamming distance)是兩個字串對應位置的不同字元的個數。換句話說，它就是將一個字串變換成另外一個字串所需要替換的字元個數。- 維基百科

⬆ back to top

Percentile (百分比)

使用 Array.reduce() 來計算有多少數字小於等於該值，並用百分比表示。

JavaScript 程式碼:

const percentile = (arr, val) =>
100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length;
// percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55

⬆ back to top

Powerset (冪集)

使用 Array.reduce() 與 Array.map() 結合來遍歷元素，並將其組合成一個包含所有排列組合的陣列。

JavaScript 程式碼:

const powerset = arr =>
arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
// powerset([1,2]) -> [[], [1], [2], [2,1]]

⬆ back to top

Round number to n digits (精確的幾位小數)

使用 Math.round() 和模板字面量將數字四捨五入為指定的小數位數。省略第二個引數 decimals ，數字將被四捨五入到一個整數。

JavaScript 程式碼:

const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
// round(1.005, 2) -> 1.01

⬆ back to top

Standard deviation (標準偏差)

使用 Array.reduce() 來計算均值，方差已經值的方差之和，方差的值，然後確定標準偏差。您可以省略第二個引數來獲取樣本標準偏差，或將其設定為 true 以獲得總體標準偏差。

JavaScript 程式碼:

const standardDeviation = (arr, usePopulation = false) => {
const mean = arr.reduce((acc, val) => acc + val, 0) / arr.length;
return Math.sqrt(
arr.reduce((acc, val) => acc.concat(Math.pow(val - mean, 2)), [])
.reduce((acc, val) => acc + val, 0) / (arr.length - (usePopulation ? 0 : 1))
);
};
// standardDeviation([10,2,38,23,38,23,21]) -> 13.284434142114991 (sample)
// standardDeviation([10,2,38,23,38,23,21], true) -> 12.29899614287479 (population)

⬆ back to top

Media 媒體

Speech synthesis (語音合成，實驗階段)

使用 SpeechSynthesisUtterance.voice 和 indow.speechSynthesis.getVoices() 將訊息轉換為語音。使用 window.speechSynthesis.speak() 播放訊息。

瞭解有關Web Speech API的SpeechSynthesisUtterance介面的更多資訊。

JavaScript 程式碼:

const speak = message => {
const msg = new SpeechSynthesisUtterance(message);
msg.voice = window.speechSynthesis.getVoices()[0];
window.speechSynthesis.speak(msg);
};
// speak('Hello, World') -> plays the message

⬆ back to top

Node

Write JSON to file (將 JSON 寫到檔案)

使用 fs.writeFile()，模板字面量和 JSON.stringify() 將 json 物件寫入到 .json 檔案中。

JavaScript 程式碼:

const fs = require('fs');
const jsonToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2))
// jsonToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json'

⬆ back to top

Object 物件

Object from key-value pairs (根據鍵值對建立物件)

使用 Array.reduce() 來建立和組合鍵值對。

JavaScript 程式碼:

const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
// objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}

⬆ back to top

Object to key-value pairs (物件轉化為鍵值對 )

使用 Object.keys() 和 Array.map() 遍歷物件的鍵並生成一個包含鍵值對的陣列。

JavaScript 程式碼:

const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])

⬆ back to top

Shallow clone object (淺克隆物件)

使用 Object.assign() 和一個空物件({})來建立原始物件的淺拷貝。

JavaScript 程式碼:

const shallowClone = obj => Object.assign({}, obj);
/*
const a = { x: true, y: 1 };
const b = shallowClone(a);
a === b -> false
*/

愚人碼頭注：JavaScript 中的物件拷貝方法有很多，這裡有個總結，有興趣可以看一下：http://www.css88.com/archives/8319

⬆ back to top

String 字串

Anagrams of string (with duplicates) (字串的排列組合，帶有重複項)

使用遞迴。對於給定字串中的每個字母，為其餘字母建立所有部分字母。使用 Array.map() 將字母與每個部分字母組合在一起，然後使用 Array.reduce() 將所有字母組合到一個數組中。基本情況是字串 length 等於 2 或 1 。

JavaScript 程式碼:

const anagrams = str => {
if (str.length < = 2) return str.length === 2 ? [str, str[1] + str[0]] : [str];
return str.split('').reduce((acc, letter, i) =>
acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);
};
// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']

⬆ back to top

Capitalize first letter of every word (大寫每個單詞的首字母)

使用 replace() 來匹配每個單詞的第一個字元，並使用 toUpperCase() 來將其大寫。

JavaScript 程式碼:

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
// capitalizeEveryWord('hello world!') -> 'Hello World!'

⬆ back to top

Capitalize first letter (首字母大寫)

使用解構和 toUpperCase() 大寫第一個字母，...rest 第一個字母后獲得字元陣列，然後 Array.join('')再次使它成為一個字串。省略 lowerRest 引數以保持字串的剩餘部分不變，或者將其設定為 true 這會將字串的剩餘部分轉換為小寫。

JavaScript 程式碼:

const capitalize = ([first,...rest], lowerRest = false) =>
first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''));
// capitalize('myName') -> 'MyName'
// capitalize('myName', true) -> 'Myname'

⬆ back to top

Check for palindrome (檢查迴文)

使用 toLowerCase() 轉換字串，並使用 replace() 從中刪除非字母數字字元。然後，在將其轉換為 tolowerCase() 之後，將 split('') 為單獨的字元，reverse() ，join('')並與原始非反轉字串進行比較。

JavaScript 程式碼:

const palindrome = str => {
const s = str.toLowerCase().replace(/[\W_]/g,'');
return s === s.split('').reverse().join('');
}
// palindrome('taco cat') -> true

⬆ back to top

Reverse a string (反轉一個字串)

使用陣列解構和 Array.reverse() 來反轉字串中字元的順序。使用 join('')合併字串。

JavaScript 程式碼:

const reverseString = str => [...str].reverse().join('');
// reverseString('foobar') -> 'raboof'

⬆ back to top

Sort characters in string (alphabetical) (按字母順序排列字串)

使用 split('') 分割字串，通過 localeCompare() 排序字串 Array.sort() ，使用 join('') 進行重組。

JavaScript 程式碼:

const sortCharactersInString = str =>
str.split('').sort((a, b) => a.localeCompare(b)).join('');
// sortCharactersInString('cabbage') -> 'aabbceg'

⬆ back to top

Truncate a String (截斷一個字串)

確定字串的 length 是否大於 num。返回截斷所需長度的字串，用 ... 附加到結尾或原始字串。

JavaScript 程式碼:

const truncate = (str, num) =>
str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;
// truncate('boomerang', 7) -> 'boom...'

⬆ back to top

Utility 實用函式

Escape regular expression (轉義正則表示式)

使用 replace() 來轉義特殊字元。

JavaScript 程式碼:

const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// escapeRegExp('(test)') -> \$test\$

⬆ back to top

Get native type of value (獲取原生型別的值)

返回值小寫的建構函式名稱，如果值為 undefined 或 null ，則返回 “undefined” 或 “null”。

JavaScript 程式碼:

const getType = v =>
v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
// getType(new Set([1,2,3])) -> "set"

⬆ back to top

Hexcode to RGB (Hex轉RGB)

使用Array.slice() , Array.map() 和 match() 將十六進位制顏色程式碼(字首為#)轉換為RGB值的字串。

JavaScript 程式碼:

const hexToRgb = hex => `rgb(${hex.slice(1).match(/.{2}/g).map(x => parseInt(x, 16)).join()})`
// hexToRgb('#27ae60') -> 'rgb(39,174,96)'

⬆ back to top

Is array(是否為陣列)

使用 Array.isArray() 來檢查一個值是否為一個數組。

JavaScript 程式碼:

const isArray = val => !!val && Array.isArray(val);
// isArray(null) -> false
// isArray([1]) -> true

精心收集的 95 個超實用的 JavaScript 程式碼片段（ ES6+ 編寫）

目錄

Array 陣列

Browser 瀏覽器

Date 日期

Function 函式

Math 數學方法

Media 媒體

Node

Object 物件

String 字串

Utility 使用函式

Array 陣列

Array concatenation (陣列拼接)

Array difference (陣列比較)

Array includes (陣列包含)

Array intersection (陣列交集)

Array remove (移除陣列中的元素)

Array sample (陣列取樣隨，機獲取陣列中的1個元素)

Array union (數組合集)

Array without (從陣列中排除給定值)

Array zip (建立一個分組元素陣列)

Average of array of numbers (求數字陣列的平均數)

Chunk array (陣列分塊)

Compact (過濾掉陣列中所有假值元素)

Count occurrences of a value in array (計數陣列中某個值的出現次數)

Deep flatten array (深度平鋪陣列)

Drop elements in array (刪除陣列中的元素)

Fill array (填充陣列)

Filter out non-unique values in an array (過濾出陣列中的非唯一值)

Flatten array up to depth (根據指定的 depth 平鋪陣列)

Flatten array (平鋪陣列)

Get max value from array (獲取陣列中的最大值)

Get min value from array (獲取陣列中的最小值)

Group by (陣列分組)

Head of list (獲取陣列的第一個元素)

Initial of list (排除陣列中最後一個元素)

Initialize array with range (初始化特定範圍的陣列)

Initialize array with values (初始化特定範圍和值的陣列)

Last of list (獲取陣列的最後一個元素)

Median of array of numbers (獲取數字陣列的中值)

Nth element of array (獲取陣列的第N個元素)

Pick(提取)

Shuffle array (隨機排列陣列)

Similarity between arrays (獲取陣列交集)

Sum of array of numbers (數字陣列求和)

Tail of list (返回剔除第一個元素後的陣列)

Take right(從一個給定的陣列中建立一個後N個元素的陣列)

Take(從一個給定的陣列中建立一個前N個元素的陣列)

Unique values of array (陣列去重)

Browser 瀏覽器

Bottom visible (頁面的底部是否可見)

Current URL (獲取當前頁面URL)

Element is visible in viewport (判斷元素是否在可視視窗可見)

Get scroll position (獲取滾動條位置)

Redirect to URL (重定向到URL)

Scroll to top (回到頂部)

Date 日期

Get days difference between dates (獲取兩個日期之間相差的天數)

Function 函式

Chain asynchronous functions (鏈式呼叫非同步函式)

Curry (函數語言程式設計術語：柯里化)

Pipe (函數語言程式設計術語：管道或導流)

Promisify (柯里化一個 Promise 函式)

Run promises in series (執行連續的 promises)

Sleep (休眠)

Math 數學方法

Collatz algorithm(考拉茲演算法)

Distance between two points (兩點之間的歐氏距離)

Divisible by number (可以被某個數整除)

Even or odd number (判斷奇偶數)

Factorial (階乘)

Fibonacci array generator (斐波納契陣列發生器)

Greatest common divisor (GCD) (最大公約數)

Hamming distance (漢明距離)

Percentile (百分比)

Powerset (冪集)

Round number to n digits (精確的幾位小數)

Standard deviation (標準偏差)

Media 媒體