127個超級實用的JavaScript 代碼片段，你千萬要收藏好（上）

英文 | https://betterprogramming.pub/127-helpful-javascript-snippets-you-can-learn-in-30-seconds-or-less-part-1-of-6-bc2bc890dfe5

翻譯 | 楊小二

如果你想學習程式設計的話，那麼，JavaScript 是你可以選擇學習的，并且也是最流行的程式設計語言之一。正如許多人所說：“如果你隻想學習一種程式設計語言，那就去學習 JavaScript。”

FreeCodeCamp 的創始人 Quincy Larson 在最近的一次采訪中被問及開發人員應該首先學習哪種語言。他回答說：“JavaScript。”：

“軟體正在吞噬世界，而 JavaScript 正在吞噬軟體。JavaScript 每年都在變得越來越占主導地位，沒有人知道最終會被什麼取代。

如果你沒有很好的理由去學習一門新語言（比如你的工作需要你維護一個非 JavaScript 代碼庫），我的謙虛建議是專注于在 JavaScript 方面做得更好。”

如果這對你來說，聽起來很有吸引力，我在這裡列出了 127 個有用的代碼片段，你可以立即學習和使用它們。

因為内容比較多，我将内容分解成了上中下三部分來進行分享，今天我們先分享前面45個JavaScript代碼片段，剩下的内容将在後面的兩篇裡進行分享。

1、all

如果謂詞函數對集合中的所有元素傳回 true，則此代碼段傳回 true，否則傳回 false。如果你想使用布爾值作為預設值，你可以省略第二個參數 fn。

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


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

2、 allEqual

此代碼段檢查數組的所有元素是否相等。

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


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

3、approximatelyEqual

此代碼段檢查兩個數字是否彼此近似相等，差異很小。

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


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

4、arrayToCSV

此代碼段将沒有逗号或雙引号的元素轉換為具有逗号分隔值的字元串。

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

5、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');

6、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 = []

7、average

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

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

8、averageBy

此代碼段在最初使用給定函數将每個元素映射到值後傳回數組的平均值。

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

9、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'] ]

10、bifurcateBy

此代碼段根據謂詞函數将值分為兩組。如果謂詞函數傳回一個真值，則該元素将被放置在第一組中。否則，它将被放置在第二組中。

你可以使用 Array.prototype.reduce() 和 Array.prototype.push() 根據 fn 為每個元素傳回的值将元素添加到組中。

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

11、bottomVisible

此代碼段檢查頁面底部是否可見。

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


bottomVisible(); // true

12、byteSize

此代碼段以位元組為機關傳回字元串的長度。

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


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

13、capitalize

此代碼段将字元串的第一個字母大寫。

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


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

14、capitalizeEveryWord

此代碼段将給定字元串中每個單詞的第一個字母大寫。

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


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

15、castArray

此代碼段将非數組值轉換為數組。

const castArray = val => (Array.isArray(val) ? val : [val]);
castArray('foo'); // ['foo']
castArray([1]); // [1]

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

17、countOccurrences

此代碼段計算數組中某個值的出現次數。

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

18、Create Directory

此代碼段用于existsSync()檢查目錄是否存在，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

19、currentURL

此代碼段傳回目前URL。

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


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

20、dayOfYear

此代碼段從Date 對象中擷取一年中的哪一天。

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


dayOfYear(new Date()); // 272

21、decapitalize

此代碼段将字元串的第一個字母轉換為小寫。

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


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

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

23、defaults

此代碼段為對象中未定義的所有屬性配置設定預設值。

const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);


defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

24、defer

此代碼段會延遲函數的執行，直到清除目前調用堆棧。

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);


defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

25、degreesToRads

此代碼片段可用于将值從度數轉換為弧度。

const degreesToRads = deg => (deg * Math.PI) / 180.0;


degreesToRads(90.0); // ~1.5708

26、difference

此代碼段查找兩個數組之間的差異。

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
};


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

27、differenceBy

在将給定函數應用于兩個清單的每個元素之後，此方法傳回兩個數組之間的差異。

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => !s.has(fn(x)));
};


differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]

28、differenceWith

此代碼段删除了比較器函數傳回的值false。

const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);


differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b)); 
// [1, 1.2]

29、digitize

此代碼段擷取一個數字作為輸入并傳回其數字數組。

const digitize = n => [...`${n}`].map(i => parseInt(i));


digitize(431); // [4, 3, 1]

30、distance

此代碼段通過計算距離傳回兩點之間的距離。

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);


distance(1, 1, 2, 3); // 2.23606797749979

31、drop Elements

此代碼段傳回一個從左側删除了 n 個元素的新數組。

const drop = (arr, n = 1) => arr.slice(n);


drop([1, 2, 3]); // [2,3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []

32、dropRight

此代碼段傳回一個從右側删除了 n 個元素的新數組。

const dropRight = (arr, n = 1) => arr.slice(0, -n);


dropRight([1, 2, 3]); // [1,2]
dropRight([1, 2, 3], 2); // [1]
dropRight([1, 2, 3], 42); // []

33、dropRightWhile

此代碼段從數組的右側删除元素，直到傳遞的函數傳回 true。

const dropRightWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);
  return arr;
};


dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]

34、dropWhile

此代碼段從數組中删除元素，直到傳遞的函數傳回true。

const dropWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};


dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]

35、elementContains

此代碼段檢查父元素是否包含子元素。

const elementContains = (parent, child) => parent !== child && parent.contains(child);


elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

36、過濾重複元素

此代碼段删除數組中的重複值。

const filterNonUnique = arr => [ …new Set(arr)];
filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]

37、findKey

此代碼段傳回滿足給定函數的第一個鍵值。

const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));


findKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  o => o['active']
); // 'barney'

38、findLast

此代碼段傳回給定函數傳回真值的最後一個元素。

const findLast = (arr, fn) => arr.filter(fn).pop();


findLast([1, 2, 3, 4], n => n % 2 === 1); // 3

39、flatten

此代碼段使用遞歸将數組展平到指定的深度。

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]

40、forEachRight

此代碼段從數組的最後一個元素開始，為數組的每個元素執行一個函數。

const forEachRight = (arr, callback) =>
  arr
    .slice(0)
    .reverse()
    .forEach(callback);


forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

41、forOwn

此代碼段疊代對象的每個屬性，并分别為每個屬性疊代一個回調。

const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

42、functionName

此代碼段将函數的名稱列印到控制台中。

const functionName = fn => (console.debug(fn.name), fn);
functionName(Math.max); // max (logged in debug channel of console)

43、從日期擷取時間

此代碼段可用于以Date 字元串形式從對象中擷取時間。

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);


getColonTimeFromDate(new Date()); // "08:38:00"

44、擷取日期之間的天數

此代碼段可用于查找兩個日期之間的天數差異。

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);


getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

45、getStyle

此代碼段可用于擷取特定元素的 CSS 規則值。

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];


getStyle(document.querySelector('p'), 'font-size'); // '16px'

總結

這是一個非常長的清單，是以，為了便于閱讀與學習效率，我特意将這個清單一拆為三，今天這篇，是這個清單的上篇部分，其中，分享了45個有用的代碼片段，希望對你有所幫助。

剩下兩篇内容，我們将在中篇與下篇裡與大家一起來學習。

今天内容先到這裡了。感謝你的閱讀，程式設計愉快！