這是對 github 上 30s代碼片斷的翻譯整理,因爲做者的文檔是經過腳本生成的,也就懶得去提pull了,整理了放到博客上供你們學習參考,後續會持續跟進翻譯。
使用 Array.concat()
來鏈接參數中的任何數組或值。html
const arrayConcat = (arr, ...args) => arr.concat(...args); // arrayConcat([1], 2, [3], [[4]]) -> [1,2,3,[4]]
以 b
建立 Set
,而後使用 Array.filter()
過濾,只保留 b
中不包含的值。node
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); }; // difference([1,2,3], [1,2]) -> [3]
以 b
建立 Set
,而後使用 Array.filter()
過濾,只保留 b
中包含的值。git
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]
用 a
和 b
的全部值建立一個 Set
並轉換成一個數組。github
const union = (a, b) => Array.from(new Set([...a, ...b])); // union([1,2,3], [4,3,2]) -> [1,2,3,4]
使用 Array.reduce()
將每一個值添加到一個累加器,用值 0
初始化,除以數組的長度。正則表達式
const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; // average([1,2,3]) -> 2
使用 Array.from()
建立一個知足塊的數量的新的數組。
使用 Array.slice()
將新數組的每一個元素映射到 size
長度的塊。
若是原始數組不能均勻分割,最後的塊將包含剩餘的元素。算法
const chunk = (arr, size) => Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size)); // chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],5]
使用 Array.filter()
去過濾掉假值(false
, null
, 0
, ""
, undefined
和 NaN
)。express
const compact = (arr) => arr.filter(v => v); // compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]
使用 Array.reduce()
去迭代數組,當值相同時,遞增計數器。api
const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0); // countOccurrences([1,1,2,1,2,3], 1) -> 3
使用遞歸。
使用 Array.reduce()
獲取全部不是數組的值,並將數組展開。數組
const deepFlatten = arr => arr.reduce((a, v) => a.concat(Array.isArray(v) ? deepFlatten(v) : v), []); // deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]
循環訪問數組,使用 Array.shift()
刪除數組的第一個元素,直到函數的返回值爲 true
,返回其他的元素。promise
const dropElements = (arr, func) => { while (arr.length > 0 && !func(arr[0])) arr.shift(); return arr; }; // dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]
使用 Array.map()
將 start
(包含)和 end
(不包含)之間的值映射爲 value
。
省略 start
將從第一個元素開始/省略 end
將在數組最後結束。
const fillArray = (arr, value, start = 0, end = arr.length) => arr.map((v, i) => i >= start && i < end ? value : v); // fillArray([1,2,3,4],'8',1,3) -> [1,'8','8',4]
使用 Array.filter()
保證數組僅包含惟一值。
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); // filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]
使用遞歸去遞減深度。
使用 Array.reduce()
和 Array.concat()
來合併元素或數組。
基本狀況下,當深度爲 1
時中止遞歸。
省略第二個參數,展開深度爲 1
。
const flattenDepth = (arr, depth = 1) => depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), []) : arr.reduce((a, v) => a.concat(v), []); // flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]
使用 Array.reduce()
來獲取內部全部元素並用 concat()
合併它們。
const flatten = arr => arr.reduce((a, v) => a.concat(v), []); // flatten([1,[2],3,4]) -> [1,2,3,4]
使用 Math.max()
配合 ...
擴展運算符去獲取數組中的最大值。
const arrayMax = arr => Math.max(...arr); // arrayMax([10, 1, 5]) -> 10
使用 Math.max()
配合 ...
擴展運算符去獲取數組中的最小值。
const arrayMin = arr => Math.min(...arr); // arrayMin([10, 1, 5]) -> 1
使用 Array.map()
將數組的值映射到函數或屬性名稱。
使用 Array.reduce()
建立一個對象,其中的鍵是從映射的結果中產生的。
const groupBy = (arr, func) => arr.map(typeof func === 'function' ? func : val => val[func]) .reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {}); // groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]} // groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}
使用 arr[0]
返回傳遞數組的第一個元素。
const head = arr => arr[0]; // head([1,2,3]) -> 1
使用 arr,slice(0, -1)
去返回去除最後一個元素的數組。
const initial = arr => arr.slice(0, -1); // initial([1,2,3]) -> [1,2]
使用 Array(end-start)
建立一個所需長度的數組,使用 Array.map()
來填充範圍中的所需值。
你能夠省略start
,默認值爲 0
。
const initializeArrayRange = (end, start = 0) => Array.apply(null, Array(end - start)).map((v, i) => i + start); // initializeArrayRange(5) -> [0,1,2,3,4]
使用 Array(n)
建立一個所需長度的數組,使用 fill(v)
去填充所須要的值。
亦能夠省略 value
,默認值爲 0
。
const initializeArray = (n, value = 0) => Array(n).fill(value); // initializeArray(5, 2) -> [2,2,2,2,2]
使用 arr.slice(-1)[0]
得到給定數組的最後一個元素。
const last = arr => arr.slice(-1)[0]; // last([1,2,3]) -> 3
找到數組的中間,使用 Array.sort()
對值進行排序。
若是長度是奇數,則返回中點處的數字,不然返回兩個中間數字的平均值。
const median = arr => { const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b); return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2; }; // median([5,6,50,1,-5]) -> 5 // median([0,10,-2,7]) -> 3.5
使用 Array.slice()
獲得一個包含第一個元素的數組。
若是索引超出範圍,則返回 []
。(譯者注:超過索引返回 undefind
)
省略第二個參數 n
來獲取數組的第一個元素。
const nth = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0]; // nth(['a','b','c'],1) -> 'b' // nth(['a','b','b']-2) -> 'a'
使用 Array.reduce()
去過濾/挑選存在於 obj 中的 key 值,並轉換回相應的鍵值對的對象。
const pick = (obj, arr) => arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {}); // pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 } // pick(object, ['a', 'c'])['a'] -> 1
使用 Array.sort()
在比較器中使用 Math.random()
從新排序元素。
const shuffle = arr => arr.sort(() => Math.random() - 0.5); // shuffle([1,2,3]) -> [2,3,1]
使用 filter()
移除不是 values
的一部分的值,使用 includes()
肯定。
const similarity = (arr, values) => arr.filter(v => values.includes(v)); // similarity([1,2,3], [1,2,4]) -> [1,2]
使用 Array.reduce()
去迭代值並計算累計器,初始值爲 0
。
const sum = arr => arr.reduce((acc, val) => acc + val, 0); // sum([1,2,3,4]) -> 10
若是數組的長度大於1,則返回 arr.slice(1)
,不然返回整個數組。
const tail = arr => arr.length > 1 ? arr.slice(1) : arr; // tail([1,2,3]) -> [2,3] // tail([1]) -> [1]
使用 Array.slice()
從頭開始建立 n
個元素的數組。
const take = (arr, n = 1) => arr.slice(0, n); // take([1, 2, 3], 5) -> [1, 2, 3] // take([1, 2, 3], 0) -> []
使用ES6 Set
和 ...rest
運算符去除全部重複的值。
const unique = arr => [...new Set(arr)]; // unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]
使用 scrollY
,scrollHeight
和 clientHeight
來肯定頁面的底部是否可見。
const bottomVisible = _ => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight); // bottomVisible() -> true
使用 window.location.href
來獲取當前連接地址。
const currentUrl = _ => window.location.href; // currentUrl() -> 'https://google.com'
使用 Element.getBoundingClientRect()
和 window.inner(Width|Height)
值來肯定給定的元素在視口中是否可見。
第二個參數用來指定元素是否要求徹底可見,指定 true
即部分可見,默認爲所有可見。
const elementIsVisibleInViewport = (el, partiallyVisible = false) => { const { top, left, bottom, right } = el.getBoundingClientRect(); return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; }; // e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10} // elementIsVisibleInViewport(el) -> false (not fully visible) // elementIsVisibleInViewport(el, true) -> true (partially visible)
若是存在,使用 pageXOffset
和 pageYOffset
,不然使用 scrollLeft
和 scrollTop
。
你能夠省略 el
,默認使用 window
。
const getScrollPos = (el = window) => ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop}); // getScrollPos() -> {x: 0, y: 200}
使用 window.location.href
或者 window.location.replace()
去重定向到 url
。
第二個參數用來控制模擬連接點擊(true
- 默認)仍是 HTTP 重定向(false
)。
const redirect = (url, asLink = true) => asLink ? window.location.href = url : window.location.replace(url); // redirect('https://google.com')
使用 document.documentElement.scrollTop
或 document.body.scrollTop
獲取到頂端的距離。
從頂部滾動一小部分距離。 使用 window.requestAnimationFrame()
實現滾動動畫。
const scrollToTop = _ => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; // scrollToTop()
計算兩個 Date
對象之間的差距(以天爲單位)。
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9
循環遍歷包含異步事件的函數數組,當每一個異步事件完成時調用 next
。
const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); }; /* chainAsync([ next => { console.log('0 seconds'); setTimeout(next, 1000); }, next => { console.log('1 second'); setTimeout(next, 1000); }, next => { console.log('2 seconds'); } ]) */
使用遞歸。
若是提供的參數(args
)的數量足夠,則調用傳遞的函數 fn
,不然返回一個柯里化函數 fn
,等待傳入剩下的參數。
若是你想要一個接受參數數量可變的函數(一個可變參數函數,例如Math.min()
),你能夠選擇將參數個數傳遞給第二個參數 arity
。
const curry = (fn, arity = fn.length, ...args) => arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args); // curry(Math.pow)(2)(10) -> 1024 // curry(Math.min, 3)(10)(50)(2) -> 2
使用 Array.reduce()
讓值在函數間流通。
const pipe = (...funcs) => arg => funcs.reduce((acc, func) => func(acc), arg); // pipe(btoa, x => x.toUpperCase())("Test") -> "VGVZDA=="
使用 currying 返回一個函數,返回一個調用原始函數的 Promise
。
使用 ...rest
運算符傳入全部參數。
In Node 8+, you can use util.promisify
Node 8 版本以上,你可使用 util.promisify
const promisify = func => (...args) => new Promise((resolve, reject) => func(...args, (err, result) => err ? reject(err) : resolve(result)) ); // const delay = promisify((d, cb) => setTimeout(cb, d)) // delay(2000).then(() => console.log('Hi!')) -> Promise resolves after 2s
使用 Array.reduce()
經過建立一個 promise 鏈來運行一系列 promise,每一個 promise 在解析時返回下一個 promise。
const series = ps => ps.reduce((p, next) => p.then(next), Promise.resolve()); // const delay = (d) => new Promise(r => setTimeout(r, d)) // series([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete
經過返回一個 Promise
延遲執行 async
函數,把它放到睡眠狀態。
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); /* async function sleepyWork() { console.log('I\'m going to sleep for 1 second.'); await sleep(1000); console.log('I woke up after 1 second.'); } */
若是 n
是偶數,返回 n/2
,不然返回 3n+1
。
const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1); // collatz(8) --> 4 // collatz(5) --> 16
使用 Matg.hypot()
來計算兩點間的歐式距離。
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); // distance(1,1, 2,3) -> 2.23606797749979
使用模運算符(%
)來檢查餘數是否等於 0
。
const isDivisible = (dividend, divisor) => dividend % divisor === 0; // isDivisible(6,3) -> true
使用模運算符(%
)來計算一個數爲偶數仍是奇數。
返回 true
爲偶數,返回 false
則爲奇數。
const isEven = num => num % 2 === 0; // isEven(3) -> false
使用遞歸。
若是 n
小於或等於 1
,返回 1
。
其它狀況,則返回 n
和 n-1
的階乘的積。
const factorial = n => n <= 1 ? 1 : n * factorial(n - 1); // factorial(6) -> 720
建立一個指定長度的空數組,初始化前兩個值(0
和1
)。
使用 Array.reduce()
將最後兩個值的總和添加到數組中(前兩個除外)。
const fibonacci = n => Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []); // fibonacci(5) -> [0,1,1,2,3]
使用遞歸。
基本狀況是若是 y
等於 0
,則返回 x
。
其它狀況下,返回 y
與 x/y
的最大公約數。
const gcd = (x, y) => !y ? x : gcd(y, x % y); // gcd (8, 36) -> 4
使用 異或 運算符(^
)去查找兩個數值間的位差,使用 toString(2)
轉換爲二進制值,使用 match(/1/g)
計算並返回字符串中 1
的數量。
const hammingDistance = (num1, num2) => ((num1 ^ num2).toString(2).match(/1/g) || '').length; // hammingDistance(2,3) -> 1
使用百分比公式計算給定數組中有多少個數小於或等於給定值。
使用Array.reduce()計算值的下面有多少個數是相同的值, 並應用百分比公式。
const percentile = (arr, val) => 100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length; // percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55
使用 Array.reduce()
與 Array.map()
結合來迭代元素並將其組合成一個包含全部組合的數組。
const powerset = arr => arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]); // powerset([1,2]) -> [[], [1], [2], [2,1]]
使用 Math.round()
和字符串模板將數字四捨五入到指定的位數。
省略第二個參數,decimals
將四捨五入到一個整數。
const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`); // round(1.005, 2) -> 1.01
Use Array.reduce()
to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then
determine the standard deviation.
You can omit the second argument to get the sample standard deviation or set it to true
to get the population standard deviation.
使用 Array.reduce()
來計算平均值,方差以及方差之和,而後肯定標準誤差。
您能夠省略第二個參數來獲取樣本標準差或將其設置爲 true
以得到整體標準差。
const standardDeviation = (arr, usePopulation = false) => { const mean = arr.reduce((acc, val) => acc + val, 0) / arr.length; return Math.sqrt( arr.reduce((acc, val) => acc.concat(Math.pow(val - mean, 2)), []) .reduce((acc, val) => acc + val, 0) / (arr.length - (usePopulation ? 0 : 1)) ); }; // standardDeviation([10,2,38,23,38,23,21]) -> 13.284434142114991 (sample) // standardDeviation([10,2,38,23,38,23,21], true) -> 12.29899614287479 (population)
使用 SpeechSynthesisUtterance.voice
和 indow.speechSynthesis.getVoices()
將消息轉換爲語音。
使用 window.speechSynthesis.speak()
來播放消息。
瞭解更多關於 SpeechSynthesisUtterance interface of the Web Speech API.
const speak = message => { const msg = new SpeechSynthesisUtterance(message); msg.voice = window.speechSynthesis.getVoices()[0]; window.speechSynthesis.speak(msg); }; // speak('Hello, World') -> plays the message
使用 Array.reduce()
建立和組合鍵值對。
const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {}); // objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}
使用 Object.keys()
和 Array.map()
去遍歷對象的鍵並生成一個包含鍵值對的數組。
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]); // objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
使用 ...spread
擴展運算符將目標對象的屬性添加到拷貝對象中。
const shallowClone = obj => ({ ...obj }); /* const a = { x: true, y: 1 }; const b = shallowClone(a); a === b -> false */
使用遞歸。
遍歷給定字符串中的每一個字母,用其他字母建立全部部分字母。
使用 Array.map()
將字母與每一個部分字母組合,而後使用 Array.reduce()
將全部字母組合到一個數組中。
當給定字符串數量等與 2
或 1
時作簡單處理。=
const anagrams = str => { if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str]; return str.split('').reduce((acc, letter, i) => acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []); }; // anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']
使用 replace()
去查找單詞的第一個字母並使用 toUpperCase()
改成大寫。
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase()); // capitalizeEveryWord('hello world!') -> 'Hello World!'
使用 slice(0,1)
和 toUpperCase()
將首字母大寫,使用 slice(1)
獲得字符串的其他部分。
忽略 lowerRest
參數以保持字符串的其他部分不變,或者將其設置爲 true
以轉換爲小寫字母。
const capitalize = (str, lowerRest = false) => str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1)); // capitalize('myName', true) -> 'Myname'
使用 toLowerCase()
轉換字符串並用 replace()
刪除其中的非字母數字字符。
而後,使用 split('')
分散爲單個字符,再使用 reverse()
和 join('')
倒序合併後與原字符進行比較。
const palindrome = str => { const s = str.toLowerCase().replace(/[\W_]/g,''); return s === s.split('').reverse().join(''); } // palindrome('taco cat') -> true
使用數組解構和 Array.reverse()
來反轉字符串中字符的順序。
使用 join('')
組合字符得到一個字符串。
const reverseString = str => [...str].reverse().join(''); // reverseString('foobar') -> 'raboof'
使用 split('')
切割字符串,使用 Array.sort
經過 localeCompare()
去排序,再使用 join('')
組合。
const sortCharactersInString = str => str.split('').sort((a, b) => a.localeCompare(b)).join(''); // sortCharactersInString('cabbage') -> 'aabbceg'
肯定字符串的長度是否大於 num
。
將字符串截斷爲所需的長度,在末尾或原始字符串後附加 ...
。
const truncate = (str, num) => str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str; // truncate('boomerang', 7) -> 'boom...'
使用 replace()
去轉義特殊字符。
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // escapeRegExp('(test)') -> \\(test\\)
返回值的構造函數名稱的小寫字符,值爲 undefined
或 null
時則返回 undefined
或 null
。
const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase(); // getType(new Set([1,2,3])) -> "set"
使用 Array.isArray()
去檢查值是否爲數組。
const isArray = val => !!val && Array.isArray(val); // isArray(null) -> false // isArray([1]) -> true
使用 typeof
去檢查值是否爲原始布爾值類型。
const isBoolean = val => typeof val === 'boolean'; // isBoolean(null) -> false // isBoolean(false) -> true
使用 typeof
去檢查值是否爲函數原始類型。
const isFunction = val => val && typeof val === 'function'; // isFunction('x') -> false // isFunction(x => x) -> true
使用 typeof
去檢查值是否爲數值原始類型。
const isNumber = val => typeof val === 'number'; // isNumber('1') -> false // isNumber(1) -> true
使用 typeof
去檢查值是否爲字符串原始類型。
const isString = val => typeof val === 'string'; // isString(10) -> false // isString('10') -> true
使用 typeof
去檢查值是否爲 symbol 原始類型。
const isSymbol = val => typeof val === 'symbol'; // isSymbol('x') -> false // isSymbol(Symbol('x')) -> true
使用 console.time()
和 console.timeEnd()
來測量開始和結束時間之間的差別,以肯定回調執行的時間。
const timeTaken = callback => { console.time('timeTaken'); const r = callback(); console.timeEnd('timeTaken'); return r; }; // timeTaken(() => Math.pow(2, 10)) -> 1024 // (logged): timeTaken: 0.02099609375ms
將數值轉換爲字符串,使用 split()
分割爲數組。
再使用 Array.map()
和 parseInt()
將每一個值轉換爲整數。
const digitize = n => (''+n).split('').map(i => parseInt(i)); // digitize(2334) -> [2, 3, 3, 4]
Use the modulo operator (%
) to find values of single and tens digits.
Find which ordinal pattern digits match.
If digit is found in teens pattern, use teens ordinal.
使用模運算符(%
)來查找單位數和十位數的值。
查找數字匹配哪些序號模式。
若是數字在十幾的模式中找到,請使用的十幾的序數。
const toOrdinalSuffix = num => { const int = parseInt(num), digits = [(int % 10), (int % 100)], ordinals = ['st', 'nd', 'rd', 'th'], oPattern = [1, 2, 3, 4], tPattern = [11, 12, 13, 14, 15, 16, 17, 18, 19]; return oPattern.includes(digits[0]) && !tPattern.includes(digits[1]) ? int + ordinals[digits[0] - 1] : int + ordinals[3]; }; // toOrdinalSuffix("123") -> "123rd"
使用 Math.random()
去生成一個在指定範圍內的隨機數,使用 Math.floor()
將其轉換爲整數。
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; // randomIntegerInRange(0, 5) -> 2
使用 Math.random()
去生成一個在指定範圍內的隨機數。
const randomInRange = (min, max) => Math.random() * (max - min) + min; // randomInRange(2,10) -> 6.0211363285087005
使用按位左移運算符(<<
)和 toString(16)
將 RGB 參數轉換爲十六進制,而後使用 padStart(6, '0')
去獲取6位數的十六進制。
const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0'); // rgbToHex(255, 165, 1) -> 'ffa501'
使用數組解構來交換兩個變量之間的值。
[varA, varB] = [varB, varA]; // [x, y] = [y, x]
使用 match()
和一個合適的正則去獲取全部鍵值對,使用 Array.reduce()
合併到一個對象中。
容許將 location.search
做爲參數傳遞。
const getUrlParameters = url => url.match(/([^?=&]+)(=([^&]*))/g).reduce( (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {} ); // getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}
使用 crypto
API 生成符合 RFC4122 版本4的UUID。
const uuid = _ => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); // uuid() -> '7982fcfe-5721-4632-bede-6000885be57d'
Use a regular experssion to check if the email is valid.
Returns true
if email is valid, false
if not.
使用正則表達式去檢驗郵箱格式。
返回 true
表示郵箱格式正確,false
則不正確。
const validateEmail = str => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str); // validateEmail(mymail@gmail.com) -> true
使用 !isNaN
和 parseFloat()
來檢查參數是不是一個數字(或容許轉換爲數值)。
使用 isFinite()
來檢查數字是不是有限的。
使用 Number() 來檢查數值轉換是否成立。
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n; // validateNumber('10') -> true
默認返回 value
若是 value
爲假,則返回默認值。
const valueOrDefault = (value, d) => value || d; // valueOrDefault(NaN, 30) -> 30