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

你們好，首先感謝你們對上一篇文章   127個經常使用的JS代碼片斷，每段代碼花30秒就能看懂（一）的關注，在上篇文章裏分享了前21段代碼，今天繼續分享21段代碼，但願對你的平常工做有所幫助。

2二、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]複製代碼

2三、default

去重對象的屬性，若是對象中含有重複的屬性，之前面的爲準。

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

defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }複製代碼

2四、defer

延遲函數的調用，即異步調用函數。

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

defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'複製代碼

2五、degreesToRads

此段代碼將標準的度數，轉換成弧度。

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

degreesToRads(90.0); // ~1.5708複製代碼

2六、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]複製代碼

2七、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 } ]複製代碼

2八、differenceWith

此段代碼按照給定函數邏輯篩選須要對比差別的數組，查找出前者數組在後者數組中不存在元素。

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]複製代碼

2九、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複製代碼

3一、drop

此段代碼將給定的數組從左邊開始刪除 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); // []複製代碼

3二、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); // []複製代碼

3三、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]複製代碼

3四、dropWhile

按照給的的函數條件篩選數組，不知足函數條件的將從數組中移除。

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]複製代碼

3五、elementContains

接收兩個DOM元素對象參數，判斷後者是不是前者的子元素。

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複製代碼

3六、filterNonUnique

移除數組中重複的元素

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

3七、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'複製代碼

3八、findLast

按照給定的函數條件篩選數組，將最後一個知足條件的元素進行刪除。

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

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

3九、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'複製代碼

4一、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複製代碼

4二、functionName

此段代碼輸出函數的名稱。

const functionName = fn => (console.debug(fn.name), fn);

functionName(Math.max); // max (logged in debug channel of console)複製代碼

小節

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

本文原做者：Fatos Morina 

來源網站：medium 

注：並不是直譯

相關閱讀

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

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

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

更多精彩內容，請微信關注「前端達人」公衆號！