63段常用的JS代碼片段匯總
作者 | Fatos Morina
來源 | https://medium.com/
“軟件正在吞噬世界，JavaScript正在吞噬軟件。JavaScript每年都在變得越來越占主導(dǎo)地位，而且沒人知道最終會(huì)取代它的是什么。" 如果您沒有充分的理由學(xué)習(xí)一種新語言（例如您的工作要求您維護(hù)非JavaScript代碼庫），那么我的建議是著重于提高JavaScript的水平。”
聽我說這么多，你是不是很激動(dòng)呢。這里有63段常用的js代碼片段，方便你學(xué)習(xí)和使用。
1、all
如果數(shù)組所有元素滿足函數(shù)條件，則返回true。調(diào)用時(shí)，如果省略第二個(gè)參數(shù)，則默認(rèn)傳遞布爾值。
const all = (arr, fn = Boolean) => arr.every(fn);all([4, 2, 3], x => x > 1); // trueall([1, 2, 3]); // true
2、allEqual
判斷數(shù)組中的元素是否都相等。
const allEqual = arr => arr.every(val => val === arr[0]);allEqual([1, 2, 3, 4, 5, 6]); // falseallEqual([1, 1, 1, 1]); // true
3、approximatelyEqual
此代碼示例檢查兩個(gè)數(shù)字是否近似相等，差異值可以通過傳參的形式進(jìn)行設(shè)置
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;approximatelyEqual(Math.PI / 2.0, 1.5708); // true
4、arrayToCSV
此段代碼將沒有逗號(hào)或雙引號(hào)的元素轉(zhuǎn)換成帶有逗號(hào)分隔符的字符串即CSV格式識(shí)別的形式。
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
此段代碼將數(shù)組元素轉(zhuǎn)換成<li>標(biāo)記，并將此元素添加至給定的ID元素標(biāo)記內(nèi)。
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
此段代碼執(zhí)行一個(gè)函數(shù)，將剩余的參數(shù)傳回函數(shù)當(dāng)參數(shù)，返回相應(yīng)的結(jié)果，并能捕獲異常。
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
此段代碼返回兩個(gè)或多個(gè)數(shù)的平均數(shù)。
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;average(...[1, 2, 3]); // 2average(1, 2, 3); // 2
8、averageBy
一個(gè) map()函數(shù)和 reduce()函數(shù)結(jié)合的例子，此函數(shù)先通過 map() 函數(shù)將對(duì)象轉(zhuǎn)換成數(shù)組，然后在調(diào)用reduce()函數(shù)進(jìn)行累加，然后根據(jù)數(shù)組長(zhǎng)度返回平均值。
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); // 5averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5
9、bifurcate
此函數(shù)包含兩個(gè)參數(shù)，類型都為數(shù)組，依據(jù)第二個(gè)參數(shù)的真假條件，將一個(gè)參數(shù)的數(shù)組進(jìn)行分組，條件為真的放入第一個(gè)數(shù)組，其它的放入第二個(gè)數(shù)組。這里運(yùn)用了Array.prototype.reduce() 和 Array.prototype.push() 相結(jié)合的形式。
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
此段代碼將數(shù)組按照指定的函數(shù)邏輯進(jìn)行分組，滿足函數(shù)條件的邏輯為真，放入第一個(gè)數(shù)組中，其它不滿足的放入第二個(gè)數(shù)組 。這里運(yùn)用了Array.prototype.reduce() 和 Array.prototype.push() 相結(jié)合的形式，基于函數(shù)過濾邏輯，通過 Array.prototype.push() 函數(shù)將其添加到數(shù)組中。
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
用于檢測(cè)頁面是否滾動(dòng)到頁面底部。
const bottomVisible = () =>document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight || document.documentElement.clientHeight);bottomVisible(); // true
12、byteSize
此代碼返回字符串的字節(jié)長(zhǎng)度。這里用到了Blob對(duì)象，Blob（Binary Large Object）對(duì)象代表了一段二進(jìn)制數(shù)據(jù)，提供了一系列操作接口。其他操作二進(jìn)制數(shù)據(jù)的API（比如File對(duì)象），都是建立在Blob對(duì)象基礎(chǔ)上的，繼承了它的屬性和方法。生成Blob對(duì)象有兩種方法：一種是使用Blob構(gòu)造函數(shù)，另一種是對(duì)現(xiàn)有的Blob對(duì)象使用slice方法切出一部分。
const byteSize = str => new Blob([str]).size;byteSize(''); // 4byteSize('Hello World'); // 11
13、capitalize
將字符串的首字母轉(zhuǎn)成大寫,這里主要運(yùn)用到了ES6的展開語法在數(shù)組中的運(yùn)用。
const capitalize = ([first, ...rest]) =>first.toUpperCase() + rest.join('');capitalize('fooBar'); // 'FooBar'capitalize('fooBar', true); // 'FooBar'
14、capitalizeEveryWord
將一個(gè)句子中每個(gè)單詞首字母轉(zhuǎn)換成大寫字母，這里中要運(yùn)用了正則表達(dá)式進(jìn)行替換。
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());capitalizeEveryWord('hello world!'); // 'Hello World!'
15、castArray
此段代碼將非數(shù)值的值轉(zhuǎn)換成數(shù)組對(duì)象。
const castArray = val => (Array.isArray(val) ? val : [val]);castArray('foo'); // ['foo']castArray([1]); // [1]
16、compact
將數(shù)組中移除值為 false 的內(nèi)容。
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
統(tǒng)計(jì)數(shù)組中某個(gè)值出現(xiàn)的次數(shù)
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
此代碼段使用 existSync() 檢查目錄是否存在，然后使用 mkdirSync() 創(chuàng)建目錄（如果不存在）。
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
返回當(dāng)前訪問的 URL 地址。
const currentURL = () => window.location.href;currentURL(); // 'https://medium.com/@fatosmorina'
20、dayOfYear
返回當(dāng)前是今年的第幾天
const dayOfYear = date =>Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);dayOfYear(new Date()); // 272
21、decapitalize
將字符串的首字母轉(zhuǎn)換成小寫字母
const decapitalize = ([first, ...rest]) =>first.toLowerCase() + rest.join('')decapitalize('FooBar'); // 'fooBar'
22、deepFlatten
通過遞歸的形式，將多維數(shù)組展平成一維數(shù)組。
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、default
去重對(duì)象的屬性，如果對(duì)象中含有重復(fù)的屬性，以前面的為準(zhǔn)。
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
延遲函數(shù)的調(diào)用，即異步調(diào)用函數(shù)。
const defer = (fn, ...args) => setTimeout(fn, 1, ...args);defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'
25、degreesToRads
此段代碼將標(biāo)準(zhǔn)的度數(shù)，轉(zhuǎn)換成弧度。
const degreesToRads = deg => (deg * Math.PI) / 180.0;degreesToRads(90.0); // ~1.5708
26、difference
此段代碼查找兩個(gè)給定數(shù)組的差異，查找出前者數(shù)組在后者數(shù)組中不存在元素。
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
通過給定的函數(shù)來處理需要對(duì)比差異的數(shù)組，查找出前者數(shù)組在后者數(shù)組中不存在元素。
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
此段代碼按照給定函數(shù)邏輯篩選需要對(duì)比差異的數(shù)組，查找出前者數(shù)組在后者數(shù)組中不存在元素。
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
將輸入的數(shù)字拆分成單個(gè)數(shù)字組成的數(shù)組。
const digitize = n => [...`${n}`].map(i => parseInt(i));digitize(431); // [4, 3, 1]
30、distance
計(jì)算兩點(diǎn)之間的距離
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);distance(1, 1, 2, 3); // 2.23606797749979
31、drop
此段代碼將給定的數(shù)組從左邊開始刪除 n 個(gè)元素
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
此段代碼將給定的數(shù)組從右邊開始刪除 n 個(gè)元素
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
此段代碼將給定的數(shù)組按照給定的函數(shù)條件從右開始刪除，直到當(dāng)前元素滿足函數(shù)條件為True時(shí)，停止刪除，并返回?cái)?shù)組剩余元素。
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
按照給的的函數(shù)條件篩選數(shù)組，不滿足函數(shù)條件的將從數(shù)組中移除。
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
接收兩個(gè)DOM元素對(duì)象參數(shù)，判斷后者是否是前者的子元素。
const elementContains = (parent, child) => parent !== child && parent.contains(child);elementContains(document.querySelector('head'), document.querySelector('title')); // trueelementContains(document.querySelector('body'), document.querySelector('body')); // false
36、filterNonUnique
移除數(shù)組中重復(fù)的元素
const filterNonUnique = arr => [ …new Set(arr)];filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]
37、findKey
按照給定的函數(shù)條件，查找第一個(gè)滿足條件對(duì)象的鍵值。
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
按照給定的函數(shù)條件篩選數(shù)組，將最后一個(gè)滿足條件的元素進(jìn)行刪除。
const findLast = (arr, fn) => arr.filter(fn).pop();findLast([1, 2, 3, 4], n => n % 2 === 1); // 3
39、flatten
按照指定數(shù)組的深度，將嵌套數(shù)組進(jìn)行展平。
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
按照給定的函數(shù)條件，從數(shù)組的右邊往左依次進(jìn)行執(zhí)行。
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
此段代碼按照給定的函數(shù)條件，支持三個(gè)參數(shù)作為輸入（值、鍵、對(duì)象本身），進(jìn)行迭代對(duì)象。
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
此段代碼輸出函數(shù)的名稱。
const functionName = fn => (console.debug(fn.name), fn);functionName(Math.max); // max (logged in debug channel of console)
43、getColonTimeFromDate
此段代碼從Date對(duì)象里獲取當(dāng)前時(shí)間。
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);getColonTimeFromDate(new Date()); // "08:38:00"
44、getDaysDiffBetweenDates
此段代碼返回兩個(gè)日期之間相差多少天
const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>(dateFinal - dateInitial) / (1000 * 3600 * 24);getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2
45、getStyle
此代碼返回DOM元素節(jié)點(diǎn)對(duì)應(yīng)的屬性值。
const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];getStyle(document.querySelector('p'), 'font-size'); // '16px'
46、getType
此段代碼的主要功能就是返回?cái)?shù)據(jù)的類型。
const getType = v =>v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();getType(new Set([1, 2, 3])); // 'set'
47、hasClass
此段代碼返回DOM元素是否包含指定的Class樣式。
const hasClass = (el, className) => el.classList.contains(className);hasClass(document.querySelector('p.special'), 'special'); // true
48、head
此段代碼輸出數(shù)組的第一個(gè)元素。
const head = arr => arr[0];head([1, 2, 3]); // 1
49、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網(wǎng)址重定向https網(wǎng)址。
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
51、indexOfAll
此代碼可以返回?cái)?shù)組中某個(gè)值對(duì)應(yīng)的所有索引值，如果不包含該值，則返回一個(gè)空數(shù)組。
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); // []
52、initial
此段代碼返回?cái)?shù)組中除最后一個(gè)元素的所有元素
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]
53、insertAfter
此段代碼的功能主要是在給定的DOM節(jié)點(diǎn)后插入新的節(jié)點(diǎn)內(nèi)容
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>
54、insertBefore
此段代碼的功能主要是在給定的DOM節(jié)點(diǎn)前插入新的節(jié)點(diǎn)內(nèi)容
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>
55、intersection
此段代碼返回兩個(gè)數(shù)組元素之間的交集。
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]
56、intersectionBy
按照給定的函數(shù)處理需要對(duì)比的數(shù)組元素，然后根據(jù)處理后的數(shù)組，找出交集，最后從第一個(gè)數(shù)組中將對(duì)應(yīng)的元素輸出。
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]
57、intersectionBy
按照給定的函數(shù)對(duì)比兩個(gè)數(shù)組的差異，然后找出交集，最后從第一個(gè)數(shù)組中將對(duì)應(yīng)的元素輸出。
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]
58、is
此段代碼用于判斷數(shù)據(jù)是否為指定的數(shù)據(jù)類型，如果是則返回true。
const is = (type, val) => ![, null].includes(val) && val.constructor === type;is(Array, [1]); // trueis(ArrayBuffer, new ArrayBuffer()); // trueis(Map, new Map()); // trueis(RegExp, /./g); // trueis(Set, new Set()); // trueis(WeakMap, new WeakMap()); // trueis(WeakSet, new WeakSet()); // trueis(String, ''); // trueis(String, new String('')); // trueis(Number, 1); // trueis(Number, new Number(1)); // trueis(Boolean, true); // trueis(Boolean, new Boolean(true)); // true
59、isAfterDate
接收兩個(gè)日期類型的參數(shù)，判斷前者的日期是否晚于后者的日期。
const isAfterDate = (dateA, dateB) => dateA > dateB;isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true
60、isAnagram
用于檢測(cè)兩個(gè)單詞是否相似。
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
61、isArrayLike
此段代碼用于檢測(cè)對(duì)象是否為類數(shù)組對(duì)象,是否可迭代。
const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';isArrayLike(document.querySelectorAll('.className')); // trueisArrayLike('abc'); // trueisArrayLike(null); // false
62、isBeforeDate
接收兩個(gè)日期類型的參數(shù)，判斷前者的日期是否早于后者的日期。
const isBeforeDate = (dateA, dateB) => dateA < dateB;isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true
63、isBoolean
此段代碼用于檢查參數(shù)是否為布爾類型。
const isBoolean = val => typeof val === 'boolean';isBoolean(null); // falseisBoolean(false); // true
