JS實用程式碼片段

阿新 • • 發佈：2018-11-21

Array 陣列

Array concatenation (陣列拼接)

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

JavaScript 程式碼:

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

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]

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

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]

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]

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

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]

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 ]

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

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

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

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

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

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 ]

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

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]

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]

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]

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]

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]

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]

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

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

JavaScript 程式碼:

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

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

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

JavaScript 程式碼:

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

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

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

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

JavaScript 程式碼:

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

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

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

JavaScript 程式碼:

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

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]

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]

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

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

JavaScript 程式碼:

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

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

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'

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

Shuffle array (隨機排列陣列)

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

JavaScript 程式碼:

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

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]

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

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]

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]

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

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]

Browser 瀏覽器

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

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

JavaScript 程式碼:

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

Current URL (獲取當前頁面URL)

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

JavaScript 程式碼:

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

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)

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}

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')

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()

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

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'); }
])
*/

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

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
*/

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

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

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.');
}
*/

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。 – 維基百科。

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維空間中兩個點之間的真實距離。

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

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

JavaScript 程式碼:

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

Even or odd number (判斷奇偶數)

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

JavaScript 程式碼:

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

Factorial (階乘)

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

JavaScript 程式碼:

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

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]

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

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)是兩個字串對應位置的不同字元的個數。換句話說，它就是將一個字串變換成另外一個字串所需要替換的字元個數。- 維基百科

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

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

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

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)

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

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'

Object 物件

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

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

JavaScript 程式碼:

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

JS實用程式碼片段

目錄

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 媒體