本文參考原文-http://bjbsair.com/2020-03-22/tech-info/2077/html
JavaScript 是目前最流行的編程語言之一,正如大多數人所說:「若是你想學一門編程語言,請學JavaScript。」前端
FreeCodeCamp的創始人 Quincy Larson 在最近的一次採訪中被問到哪一種語言開發人員應該首先學習。他回答:「 JavaScript。」:node
「軟件正在吞噬世界,JavaScript正在吞噬軟件。JavaScript每一年都在變得愈來愈占主導地位,並且沒人知道最終會取代它的是什麼。" 若是您沒有充分的理由學習一種新語言(例如您的工做要求您維護非JavaScript代碼庫),那麼個人建議是着重於提升JavaScript的水平。」git
聽我說這麼多,你是否是很激動呢。這裏有127端經常使用的JS代碼片斷,方便你學習和使用。正則表達式
若是數組全部元素知足函數條件,則返回true。調用時,若是省略第二個參數,則默認傳遞布爾值。編程
const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); // true all([1, 2, 3]); // true複製代碼
判斷數組中的元素是否都相等api
const allEqual = arr => arr.every(val => val === arr[0]); allEqual([1, 2, 3, 4, 5, 6]); // false allEqual([1, 1, 1, 1]); // true複製代碼
此代碼示例檢查兩個數字是否近似相等,差別值能夠經過傳參的形式進行設置數組
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon; approximatelyEqual(Math.PI / 2.0, 1.5708); // true複製代碼
此段代碼將沒有逗號或雙引號的元素轉換成帶有逗號分隔符的字符串即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"'複製代碼
此段代碼將數組元素轉換成<li>標記,並將此元素添加至給定的ID元素標記內。app
const arrayToHtmlList = (arr, listID) => (el => ( (el = document.querySelector('#' + listID)), (el.innerHTML += arr.map(item => `<li>${item}</li>`).join('')) ))(); arrayToHtmlList(['item 1', 'item 2'], 'myListID');複製代碼
此段代碼執行一個函數,將剩餘的參數傳回函數當參數,返回相應的結果,並能捕獲異常。
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 = []複製代碼
此段代碼返回兩個或多個數的平均數。
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length; average(...[1, 2, 3]); // 2 average(1, 2, 3); // 2複製代碼
一個 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複製代碼
此函數包含兩個參數,類型都爲數組,依據第二個參數的真假條件,將一個參數的數組進行分組,條件爲真的放入第一個數組,其它的放入第二個數組。這裏運用了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'] ]複製代碼
此段代碼將數組按照指定的函數邏輯進行分組,知足函數條件的邏輯爲真,放入第一個數組中,其它不知足的放入第二個數組 。這裏運用了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'] ]複製代碼
用於檢測頁面是否滾動到頁面底部。
const bottomVisible = () => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight); bottomVisible(); // true複製代碼
此代碼返回字符串的字節長度。這裏用到了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複製代碼
將字符串的首字母轉成大寫,這裏主要運用到了ES6的展開語法在數組中的運用。
const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join(''); capitalize('fooBar'); // 'FooBar' capitalize('fooBar', true); // 'FooBar'複製代碼
將一個句子中每一個單詞首字母轉換成大寫字母,這裏中要運用了正則表達式進行替換。
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase()); capitalizeEveryWord('hello world!'); // 'Hello World!'複製代碼
此段代碼將非數值的值轉換成數組對象。
const castArray = val => (Array.isArray(val) ? val : [val]); castArray('foo'); // ['foo'] castArray([1]); // [1]複製代碼
將數組中移除值爲 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 ]複製代碼
統計數組中某個值出現的次數
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0); countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3複製代碼
此代碼段使用 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複製代碼
返回當前訪問的 URL 地址。
const currentURL = () => window.location.href; currentURL(); // 'https://medium.com/@fatosmorina'複製代碼
返回當前是今年的第幾天
const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // 272複製代碼
將字符串的首字母轉換成小寫字母
const decapitalize = ([first, ...rest]) => first.toLowerCase() + rest.join('') decapitalize('FooBar'); // 'fooBar'
經過遞歸的形式,將多維數組展平成一維數組。
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v))); deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]複製代碼
去重對象的屬性,若是對象中含有重複的屬性,之前面的爲準。
const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj); defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }複製代碼
延遲函數的調用,即異步調用函數。
const defer = (fn, ...args) => setTimeout(fn, 1, ...args); defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'複製代碼
此段代碼將標準的度數,轉換成弧度。
const degreesToRads = deg => (deg * Math.PI) / 180.0; degreesToRads(90.0); // ~1.5708複製代碼
此段代碼查找兩個給定數組的差別,查找出前者數組在後者數組中不存在元素。
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); }; difference([1, 2, 3], [1, 2, 4]); // [3]複製代碼
經過給定的函數來處理須要對比差別的數組,查找出前者數組在後者數組中不存在元素。
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 } ]複製代碼
此段代碼按照給定函數邏輯篩選須要對比差別的數組,查找出前者數組在後者數組中不存在元素。
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]複製代碼
將輸入的數字拆分紅單個數字組成的數組。
const digitize = n => [...`${n}`].map(i => parseInt(i)); digitize(431); // [4, 3, 1]複製代碼
計算兩點之間的距離
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); distance(1, 1, 2, 3); // 2.23606797749979複製代碼
此段代碼將給定的數組從左邊開始刪除 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); // []複製代碼
此段代碼將給定的數組從右邊開始刪除 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); // []複製代碼
此段代碼將給定的數組按照給定的函數條件從右開始刪除,直到當前元素知足函數條件爲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]複製代碼
按照給的的函數條件篩選數組,不知足函數條件的將從數組中移除。
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]複製代碼
接收兩個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複製代碼
移除數組中重複的元素
const filterNonUnique = arr => [ …new Set(arr)]; filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]複製代碼
按照給定的函數條件,查找第一個知足條件對象的鍵值。
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'複製代碼
按照給定的函數條件篩選數組,將最後一個知足條件的元素進行刪除。
const findLast = (arr, fn) => arr.filter(fn).pop(); findLast([1, 2, 3, 4], n => n % 2 === 1); // 3複製代碼
按照指定數組的深度,將嵌套數組進行展平。
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]複製代碼
按照給定的函數條件,從數組的右邊往左依次進行執行。
const forEachRight = (arr, callback) => arr .slice(0) .reverse() .forEach(callback); forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'複製代碼
此段代碼按照給定的函數條件,支持三個參數做爲輸入(值、鍵、對象自己),進行迭代對象。
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複製代碼
此段代碼輸出函數的名稱。
const functionName = fn => (console.debug(fn.name), fn); functionName(Math.max); // max (logged in debug channel of console)
此段代碼從Date對象裏獲取當前時間。
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8); getColonTimeFromDate(new Date()); // "08:38:00"複製代碼
此段代碼返回兩個日期之間相差多少天
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2複製代碼
此代碼返回DOM元素節點對應的屬性值。
const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]; getStyle(document.querySelector('p'), 'font-size'); // '16px'複製代碼
此段代碼的主要功能就是返回數據的類型。
const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase(); getType(new Set([1, 2, 3])); // 'set'複製代碼
此段代碼返回DOM元素是否包含指定的Class樣式。
const hasClass = (el, className) => el.classList.contains(className); hasClass(document.querySelector('p.special'), 'special'); // true複製代碼
此段代碼輸出數組的第一個元素。
const head = arr => arr[0]; head([1, 2, 3]); // 1複製代碼
此段代碼隱藏指定的DOM元素。
const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); hide(document.querySelectorAll('img')); // Hides all <img> elements on the page複製代碼
此段代碼的功能就是將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複製代碼
此代碼能夠返回數組中某個值對應的全部索引值,若是不包含該值,則返回一個空數組。
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); // []複製代碼
此段代碼返回數組中除最後一個元素的全部元素
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]複製代碼
此段代碼的功能主要是在給定的DOM節點後插入新的節點內容
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString); insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>複製代碼
此段代碼的功能主要是在給定的DOM節點前插入新的節點內容
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString); insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>複製代碼
此段代碼返回兩個數組元素之間的交集。
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]複製代碼
按照給定的函數處理須要對比的數組元素,而後根據處理後的數組,找出交集,最後從第一個數組中將對應的元素輸出。
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]複製代碼
按照給定的函數對比兩個數組的差別,而後找出交集,最後從第一個數組中將對應的元素輸出。
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]複製代碼
此段代碼用於判斷數據是否爲指定的數據類型,若是是則返回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複製代碼
接收兩個日期類型的參數,判斷前者的日期是否晚於後者的日期。
const isAfterDate = (dateA, dateB) => dateA > dateB; isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true複製代碼
用於檢測兩個單詞是否類似。
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複製代碼
此段代碼用於檢測對象是否爲類數組對象,是否可迭代。
const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function'; isArrayLike(document.querySelectorAll('.className')); // true isArrayLike('abc'); // true isArrayLike(null); // false複製代碼
接收兩個日期類型的參數,判斷前者的日期是否早於後者的日期。
const isBeforeDate = (dateA, dateB) => dateA < dateB; isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true複製代碼
此段代碼用於檢查參數是否爲布爾類型。
const isBoolean = val => typeof val === 'boolean'; isBoolean(null); // false isBoolean(false); // true
用於判斷程序運行環境是否在瀏覽器,這有助於避免在node環境運行前端模塊時出錯。
const isBrowser = () => ![typeof window, typeof document].includes('undefined'); isBrowser(); // true (browser) isBrowser(); // false (Node)複製代碼
用於判斷當前頁面是否處於活動狀態(顯示狀態)。
const isBrowserTabFocused = () => !document.hidden; isBrowserTabFocused(); // true複製代碼
用於判斷當前字符串是否都爲小寫。
const isLowerCase = str => str === str.toLowerCase(); isLowerCase('abc'); // true isLowerCase('a3@$'); // true isLowerCase('Ab4'); // false複製代碼
用於判斷當前變量的值是否爲 null 或 undefined 類型。
const isNil = val => val === undefined || val === null; isNil(null); // true isNil(undefined); // true複製代碼
用於判斷當前變量的值是否爲 null 類型。
const isNull = val => val === null; isNull(null); // true複製代碼
用於檢查當前的值是否爲數字類型。
function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } isNumber('1'); // false isNumber(1); // true複製代碼
用於判斷參數的值是不是對象,這裏運用了Object 構造函數建立一個對象包裝器,若是是對象類型,將會原值返回。
const isObject = obj => obj === Object(obj); isObject([1, 2, 3, 4]); // true isObject([]); // true isObject(['Hello!']); // true isObject({ a: 1 }); // true isObject({}); // true isObject(true); // false複製代碼
用於檢查參數的值是否爲null以及類型是否爲對象。
const isObjectLike = val => val !== null && typeof val === 'object'; isObjectLike({}); // true isObjectLike([1, 2, 3]); // true isObjectLike(x => x); // false isObjectLike(null); // false複製代碼
此代碼段檢查參數的值是不是由Object構造函數建立的對象。
const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object; isPlainObject({ a: 1 }); // true isPlainObject(new Map()); // false複製代碼
用於檢查當前的對象是否相似Promise函數。
const isPromiseLike = obj => obj !== null && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function'; isPromiseLike({ then: function() { return ''; } }); // true isPromiseLike(null); // false isPromiseLike({}); // false複製代碼
用於判斷給定的兩個日期是不是同一天。
const isSameDate = (dateA, dateB) => dateA.toISOString() === dateB.toISOString(); isSameDate(new Date(2010, 10, 20), new Date(2010, 10, 20)); // true複製代碼
用於檢查當前的值是否爲字符串類型。
const isString = val => typeof val === 'string'; isString('10'); // true複製代碼
用於判斷參數的值是不是 Symbol 類型。
const isSymbol = val => typeof val === 'symbol'; isSymbol(Symbol('x')); // true複製代碼
用於判斷參數的類型是不是 Undefined 類型。
const isUndefined = val => val === undefined; isUndefined(undefined); // true複製代碼
用於判斷當前字符串的字母是否都爲大寫。
const isUpperCase = str => str === str.toUpperCase(); isUpperCase('ABC'); // true isLowerCase('A3@$'); // true isLowerCase('aB4'); // false複製代碼
用於判斷給定的字符串是不是 JSON 字符串。
const isValidJSON = str => { try { JSON.parse(str); return true; } catch (e) { return false; } }; isValidJSON('{"name":"Adam","age":20}'); // true isValidJSON('{"name":"Adam",age:"20"}'); // false isValidJSON(null); // true複製代碼
此函數功能返回數組的最後一個元素。
const last = arr => arr[arr.length - 1]; last([1, 2, 3]); // 3複製代碼
此函數功能用於比較兩個對象,以肯定第一個對象是否包含與第二個對象相同的屬性與值。
onst matches = (obj, source) => Object.keys(source).every(key => obj.hasOwnProperty(key) && obj[key] === source[key]); matches({ age: 25, hair: 'long', beard: true }, { hair: 'long', beard: true }); // true matches({ hair: 'long', beard: true }, { age: 25, hair: 'long', beard: true }); // false複製代碼
此代碼段查找日期數組中最大的日期進行輸出。
const maxDate = (...dates) => new Date(Math.max.apply(null, ...dates)); const array = [ new Date(2017, 4, 13), new Date(2018, 2, 12), new Date(2016, 0, 10), new Date(2016, 0, 9) ]; maxDate(array); // 2018-03-11T22:00:00.000Z複製代碼
此段代碼輸出數組中前 n 位最大的數。
const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n); maxN([1, 2, 3]); // [3] maxN([1, 2, 3], 2); // [3,2]複製代碼
此代碼段查找日期數組中最先的日期進行輸出。
const minDate = (...dates) => new Date(Math.min.apply(null, ...dates)); const array = [ new Date(2017, 4, 13), new Date(2018, 2, 12), new Date(2016, 0, 10), new Date(2016, 0, 9) ]; minDate(array); // 2016-01-08T22:00:00.000Z
今天的內容就和你們分享到這裏,感謝你的閱讀,若是你喜歡個人分享,麻煩給個關注、點贊加轉發哦,你的支持,就是我分享的動力,後續會持續分享剩餘的代碼片斷,歡迎持續關注。未完