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

你們好，在前兩篇文章裏 127個經常使用的JS代碼片斷，每段代碼花30秒就能看懂（一）和 127個經常使用的JS代碼片斷，每段代碼花30秒就能看懂（二），我分享了前42段代碼，今天我繼續分享第三部分，但願對你的平常工做有所幫助。

4三、getColonTimeFromDate

此段代碼從Date對象裏獲取當前時間。

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // "08:38:00"複製代碼

4四、getDaysDiffBetweenDates

此段代碼返回兩個日期之間相差多少天

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);
  
getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2複製代碼

4五、getStyle

此代碼返回DOM元素節點對應的屬性值。

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

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

4六、getType

此段代碼的主要功能就是返回數據的類型。

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

4七、hasClass

此段代碼返回DOM元素是否包含指定的Class樣式。

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true複製代碼

4八、head

此段代碼輸出數組的第一個元素。

const head = arr => arr[0];

head([1, 2, 3]); // 1複製代碼

4九、hide

此段代碼隱藏指定的DOM元素。

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page複製代碼

50、httpsRedirect

此段代碼的功能就是將http網址重定向https網址。

const httpsRedirect = () => {
  if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
};

httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com複製代碼

5一、indexOfAll

此代碼能夠返回數組中某個值對應的全部索引值，若是不包含該值，則返回一個空數組。

const indexOfAll = (arr, val) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);

indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3]
indexOfAll([1, 2, 3], 4); // []複製代碼

5二、initial

此段代碼返回數組中除最後一個元素的全部元素

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

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

5三、insertAfter

此段代碼的功能主要是在給定的DOM節點後插入新的節點內容

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>複製代碼

5四、insertBefore

此段代碼的功能主要是在給定的DOM節點前插入新的節點內容

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>複製代碼

5五、intersection

此段代碼返回兩個數組元素之間的交集。

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

5六、intersectionBy

按照給定的函數處理須要對比的數組元素，而後根據處理後的數組，找出交集，最後從第一個數組中將對應的元素輸出。

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

intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]複製代碼

5七、intersectionBy

按照給定的函數對比兩個數組的差別，而後找出交集，最後從第一個數組中將對應的元素輸出。

const intersectionWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1);

intersectionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1.5, 3, 0]複製代碼

5八、is

此段代碼用於判斷數據是否爲指定的數據類型，若是是則返回true。

const is = (type, val) => ![, null].includes(val) && val.constructor === type;

is(Array, [1]); // true
is(ArrayBuffer, new ArrayBuffer()); // true
is(Map, new Map()); // true
is(RegExp, /./g); // true
is(Set, new Set()); // true
is(WeakMap, new WeakMap()); // true
is(WeakSet, new WeakSet()); // true
is(String, ''); // true
is(String, new String('')); // true
is(Number, 1); // true
is(Number, new Number(1)); // true
is(Boolean, true); // true
is(Boolean, new Boolean(true)); // true複製代碼

5九、isAfterDate

接收兩個日期類型的參數，判斷前者的日期是否晚於後者的日期。

const isAfterDate = (dateA, dateB) => dateA > dateB;

isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true複製代碼

60、isAnagram

用於檢測兩個單詞是否類似。

const isAnagram = (str1, str2) => {
  const normalize = str =>
    str
      .toLowerCase()
      .replace(/[^a-z0-9]/gi, '')
      .split('')
      .sort()
      .join('');
  return normalize(str1) === normalize(str2);
};

isAnagram('iceman', 'cinema'); // true複製代碼

6一、isArrayLike

此段代碼用於檢測對象是否爲類數組對象,是否可迭代。

const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';

isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false複製代碼

6二、isBeforeDate

接收兩個日期類型的參數，判斷前者的日期是否早於後者的日期。

const isBeforeDate = (dateA, dateB) => dateA < dateB;

isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true複製代碼

6三、isBoolean

此段代碼用於檢查參數是否爲布爾類型。

const isBoolean = val => typeof val === 'boolean';

isBoolean(null); // false
isBoolean(false); // true複製代碼

小節

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

本文原做者：Fatos Morina 

來源網站：medium 

注：並不是直譯

相關閱讀

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

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

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

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