127個經常使用的JS代碼片斷，每段代碼花30秒就能看懂（上）

JavaScript 是目前最流行的編程語言之一，正如大多數人所說：「若是你想學一門編程語言，請學JavaScript。」

FreeCodeCamp的創始人 Quincy Larson 在最近的一次採訪中被問到哪一種語言開發人員應該首先學習。他回答：「 JavaScript。」

「軟件正在吞噬世界，JavaScript正在吞噬軟件。JavaScript每一年都在變得愈來愈占主導地位，並且沒人知道最終會取代它的是什麼。" 若是您沒有充分的理由學習一種新語言（例如您的工做要求您維護非JavaScript代碼庫），那麼個人建議是着重於提升JavaScript的水平。」

聽我說這麼多，你是否是很激動呢。這裏有127個經常使用的JS代碼片斷，方便你學習和使用。

一、all

若是數組全部元素知足函數條件，則返回true。調用時，若是省略第二個參數，則默認傳遞布爾值。

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

二、allEqual

判斷數組中的元素是否都相等

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

三、approximatelyEqual

此代碼示例檢查兩個數字是否近似相等，差別值能夠經過傳參的形式進行設置

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

四、arrayToCSV

此段代碼將沒有逗號或雙引號的元素轉換成帶有逗號分隔符的字符串即CSV格式識別的形式。

const arrayToCSV = (arr, delimiter = ',') =>
arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');

arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'

五、arrayToHtmlList

此段代碼將數組元素轉換成<li>標記，並將此元素添加至給定的ID元素標記內。

const arrayToHtmlList = (arr, listID) =>
(el => (

(el \= document.querySelector('#' + listID)),  
(el.innerHTML += arr.map(item \=> \`<li>${item}</li>\`).join(''))

))();

arrayToHtmlList(['item 1', 'item 2'], 'myListID');

六、attempt

此段代碼執行一個函數，將剩餘的參數傳回函數當參數，返回相應的結果，並能捕獲異常。

const attempt = (fn, ...args) => {
try {

return fn(...args);

} catch (e) {

return e instanceof Error ? e : new Error(e);

}
};
var elements = attempt(function(selector) {
return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

七、average

此段代碼返回兩個或多個數的平均數。

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

八、averageBy

一個 map()函數和 reduce()函數結合的例子，此函數先經過 map() 函數將對象轉換成數組，而後在調用reduce()函數進行累加，而後根據數組長度返回平均值。

const averageBy = (arr, fn) =>
arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
arr.length;

averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

九、bifurcate

此函數包含兩個參數，類型都爲數組，依據第二個參數的真假條件，將一個參數的數組進行分組，條件爲真的放入第一個數組，其它的放入第二個數組。這裏運用了Array.prototype.reduce() 和 Array.prototype.push() 相結合的形式。

const bifurcate = (arr, filter) =>
arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]);
// [ ['beep', 'boop', 'bar'], ['foo'] ]

十、bifurcateBy

此段代碼將數組按照指定的函數邏輯進行分組，知足函數條件的邏輯爲真，放入第一個數組中，其它不知足的放入第二個數組 。這裏運用了Array.prototype.reduce() 和 Array.prototype.push() 相結合的形式，基於函數過濾邏輯，經過 Array.prototype.push() 函數將其添加到數組中。

const bifurcateBy = (arr, fn) =>
arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b');
// [ ['beep', 'boop', 'bar'], ['foo'] ]

十一、bottomVisible

用於檢測頁面是否滾動到頁面底部。

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

bottomVisible(); // true

十二、byteSize

此代碼返回字符串的字節長度。這裏用到了Blob對象，Blob（Binary Large Object）對象表明了一段二進制數據，提供了一系列操做接口。其餘操做二進制數據的API（好比File對象），都是創建在Blob對象基礎上的，繼承了它的屬性和方法。生成Blob對象有兩種方法：一種是使用Blob構造函數，另外一種是對現有的Blob對象使用slice方法切出一部分。

const byteSize = str => new Blob([str]).size;

byteSize('😀'); // 4
byteSize('Hello World'); // 11

1三、capitalize

將字符串的首字母轉成大寫,這裏主要運用到了ES6的展開語法在數組中的運用。

const capitalize = ([first, ...rest]) =>
first.toUpperCase() + rest.join('');

capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'FooBar'

1四、capitalizeEveryWord

將一個句子中每一個單詞首字母轉換成大寫字母，這裏中要運用了正則表達式進行替換。

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

capitalizeEveryWord('hello world!'); // 'Hello World!'

1五、castArray

此段代碼將非數值的值轉換成數組對象。

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

1六、compact

將數組中移除值爲 false 的內容。

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]);
// [ 1, 2, 3, 'a', 's', 34 ]

1七、countOccurrences

統計數組中某個值出現的次數

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

1八、Create Directory

此代碼段使用 existSync() 檢查目錄是否存在，而後使用 mkdirSync() 建立目錄（若是不存在）。

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test');
// creates the directory 'test', if it doesn't exist

1九、currentURL

返回當前訪問的 URL 地址。

const currentURL = () => window.location.href;

currentURL(); // 'https://medium.com/@fatosmorina'

20、dayOfYear

返回當前是今年的第幾天

const dayOfYear = date =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272

2一、decapitalize

將字符串的首字母轉換成小寫字母

const decapitalize = ([first, ...rest]) =>
first.toLowerCase() + rest.join('')

decapitalize('FooBar'); // 'fooBar'

小節

今天的內容就和你們分享到這裏，感謝你的閱讀，若是你喜歡個人分享，麻煩給個關注、點贊加轉發哦，你的支持，就是我分享的動力，後續會持續分享剩餘的代碼片斷，歡迎持續關注。

本文原做者：Fatos Morina

來源網站：medium

注 ：非直譯

往期

阿里、騰訊、頭條、美團、多家企業再次延長上班時間

駕輕就熟的Vue高級技巧