摘要:可否被整除使用模運(yùn)算符來(lái)檢查余數(shù)是否等于。數(shù)值增加序號(hào)后綴使用模運(yùn)算符來(lái)查找單位數(shù)和十位數(shù)的值。
這是對(duì) github 上30s代碼片段的翻譯整理,由于作者的文檔是通過(guò)腳本生成的,也就懶得去提pull了,整理了放到博客上供大家學(xué)習(xí)參考,后續(xù)會(huì)持續(xù)跟進(jìn)翻譯。Array Array concatenation (合并參數(shù))
使用 Array.concat() 來(lái)連接參數(shù)中的任何數(shù)組或值。
const arrayConcat = (arr, ...args) => arr.concat(...args); // arrayConcat([1], 2, [3], [[4]]) -> [1,2,3,[4]]Array difference (取數(shù)組不同項(xiàng))
以 b 創(chuàng)建 Set,然后使用 Array.filter() 過(guò)濾,只保留 b 中不包含的值。
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); }; // difference([1,2,3], [1,2]) -> [3]Array intersection (取數(shù)組相同項(xiàng))
以 b 創(chuàng)建 Set,然后使用 Array.filter() 過(guò)濾,只保留 b 中包含的值。
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]Array union (合并數(shù)組去重)
用 a 和 b 的所有值創(chuàng)建一個(gè) Set 并轉(zhuǎn)換成一個(gè)數(shù)組。
const union = (a, b) => Array.from(new Set([...a, ...b])); // union([1,2,3], [4,3,2]) -> [1,2,3,4]Average of array of numbers (通過(guò)數(shù)組取平均值)
使用 Array.reduce() 將每個(gè)值添加到一個(gè)累加器,用值 0 初始化,除以數(shù)組的長(zhǎng)度。
const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; // average([1,2,3]) -> 2Chunk array (數(shù)組切塊)
使用 Array.from() 創(chuàng)建一個(gè)滿足塊的數(shù)量的新的數(shù)組。
使用 Array.slice() 將新數(shù)組的每個(gè)元素映射到 size 長(zhǎng)度的塊。
如果原始數(shù)組不能均勻分割,最后的塊將包含剩余的元素。
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]Compact (壓縮)
使用 Array.filter() 去過(guò)濾掉假值(false, null, 0, "", undefined 和 NaN)。
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 ]Count occurrences of a value in array (計(jì)算數(shù)組中指定值出現(xiàn)的次數(shù))
使用 Array.reduce() 去迭代數(shù)組,當(dāng)值相同時(shí),遞增計(jì)數(shù)器。
const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0); // countOccurrences([1,1,2,1,2,3], 1) -> 3Deep flatten array (深度展開(kāi)數(shù)組)
使用遞歸。
使用 Array.reduce() 獲取所有不是數(shù)組的值,并將數(shù)組展開(kāi)。
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]Drop elements in array (刪除數(shù)組中的元素)
循環(huán)訪問(wèn)數(shù)組,使用 Array.shift() 刪除數(shù)組的第一個(gè)元素,直到函數(shù)的返回值為 true,返回其余的元素。
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]Fill array (填充數(shù)組)
使用 Array.map() 將 start(包含)和 end(不包含)之間的值映射為 value。
省略 start 將從第一個(gè)元素開(kāi)始/省略 end 將在數(shù)組最后結(jié)束。
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]Filter out non-unique values in an array (過(guò)濾掉數(shù)組中重復(fù)的值)
使用 Array.filter() 保證數(shù)組僅包含唯一值。
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); // filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]Flatten array up to depth (展開(kāi)指定深度的數(shù)組)
使用遞歸去遞減深度。
使用 Array.reduce() 和 Array.concat() 來(lái)合并元素或數(shù)組。
基本情況下,當(dāng)深度為 1 時(shí)停止遞歸。
省略第二個(gè)參數(shù),展開(kāi)深度為 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]Flatten array (拼合數(shù)組)
使用 Array.reduce() 來(lái)獲取內(nèi)部所有元素并用 concat() 合并它們。
const flatten = arr => arr.reduce((a, v) => a.concat(v), []); // flatten([1,[2],3,4]) -> [1,2,3,4]Get max value from array (獲取數(shù)組中的最大值)
使用 Math.max() 配合 ... 擴(kuò)展運(yùn)算符去獲取數(shù)組中的最大值。
const arrayMax = arr => Math.max(...arr); // arrayMax([10, 1, 5]) -> 10Get min value from array (獲取數(shù)組中的最小值)
使用 Math.max() 配合 ... 擴(kuò)展運(yùn)算符去獲取數(shù)組中的最小值。
const arrayMin = arr => Math.min(...arr); // arrayMin([10, 1, 5]) -> 1Group by (條件分組)
使用 Array.map() 將數(shù)組的值映射到函數(shù)或?qū)傩悦Q。
使用 Array.reduce() 創(chuàng)建一個(gè)對(duì)象,其中的鍵是從映射的結(jié)果中產(chǎn)生的。
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"]}Head of list (獲取數(shù)組的首個(gè)元素)
使用 arr[0] 返回傳遞數(shù)組的第一個(gè)元素。
const head = arr => arr[0]; // head([1,2,3]) -> 1Initial of list
使用 arr,slice(0, -1) 去返回去除最后一個(gè)元素的數(shù)組。
const initial = arr => arr.slice(0, -1); // initial([1,2,3]) -> [1,2]Initialize array with range (使用指定范圍來(lái)定義數(shù)組)
使用 Array(end-start) 創(chuàng)建一個(gè)所需長(zhǎng)度的數(shù)組,使用 Array.map() 來(lái)填充范圍中的所需值。
你可以省略start,默認(rèn)值為 0。
const initializeArrayRange = (end, start = 0) => Array.apply(null, Array(end - start)).map((v, i) => i + start); // initializeArrayRange(5) -> [0,1,2,3,4]Initialize array with values (使用指定值來(lái)定義數(shù)組)
使用 Array(n) 創(chuàng)建一個(gè)所需長(zhǎng)度的數(shù)組,使用 fill(v) 去填充所需要的值。
亦可以省略 value,默認(rèn)值為 0。
const initializeArray = (n, value = 0) => Array(n).fill(value); // initializeArray(5, 2) -> [2,2,2,2,2]Last of list (獲取數(shù)組的結(jié)尾)
使用 arr.slice(-1)[0] 獲得給定數(shù)組的最后一個(gè)元素。
const last = arr => arr.slice(-1)[0]; // last([1,2,3]) -> 3Median of array of numbers (獲取數(shù)組的中間值)
找到數(shù)組的中間,使用 Array.sort() 對(duì)值進(jìn)行排序。
如果長(zhǎng)度是奇數(shù),則返回中點(diǎn)處的數(shù)字,否則返回兩個(gè)中間數(shù)字的平均值。
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.5Nth element of array (獲取數(shù)組的第 N 個(gè)元素)
使用 Array.slice() 得到一個(gè)包含第一個(gè)元素的數(shù)組。
如果索引超出范圍,則返回 []。(譯者注:超過(guò)索引返回 undefind)
省略第二個(gè)參數(shù) n 來(lái)獲取數(shù)組的第一個(gè)元素。
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"Pick (挑選)
使用 Array.reduce() 去過(guò)濾/挑選存在于 obj 中的 key 值,并轉(zhuǎn)換回相應(yīng)的鍵值對(duì)的對(duì)象。
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"] -> 1Shuffle array (隨機(jī)數(shù)組)
使用 Array.sort() 在比較器中使用 Math.random() 重新排序元素。
const shuffle = arr => arr.sort(() => Math.random() - 0.5); // shuffle([1,2,3]) -> [2,3,1]Similarity between arrays (獲取數(shù)組的交集)
使用 filter() 移除不是 values 的一部分的值,使用 includes() 確定。
const similarity = (arr, values) => arr.filter(v => values.includes(v)); // similarity([1,2,3], [1,2,4]) -> [1,2]Sum of array of numbers (數(shù)組的總和)
使用 Array.reduce() 去迭代值并計(jì)算累計(jì)器,初始值為 0。
const sum = arr => arr.reduce((acc, val) => acc + val, 0); // sum([1,2,3,4]) -> 10Tail of list (列表的尾巴)
如果數(shù)組的長(zhǎng)度大于1,則返回 arr.slice(1),否則返回整個(gè)數(shù)組。
const tail = arr => arr.length > 1 ? arr.slice(1) : arr; // tail([1,2,3]) -> [2,3] // tail([1]) -> [1]Take (抽取)
使用 Array.slice() 從頭開(kāi)始創(chuàng)建 n 個(gè)元素的數(shù)組。
const take = (arr, n = 1) => arr.slice(0, n); // take([1, 2, 3], 5) -> [1, 2, 3] // take([1, 2, 3], 0) -> []Unique values of array (數(shù)組去重)
使用ES6 Set 和 ...rest 運(yùn)算符去除所有重復(fù)的值。
const unique = arr => [...new Set(arr)]; // unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]Browser Bottom visible (底部可見(jiàn)即滾動(dòng)至底部)
使用 scrollY,scrollHeight 和 clientHeight 來(lái)確定頁(yè)面的底部是否可見(jiàn)。
const bottomVisible = _ => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight); // bottomVisible() -> trueCurrent URL (當(dāng)前鏈接地址)
使用 window.location.href 來(lái)獲取當(dāng)前鏈接地址。
const currentUrl = _ => window.location.href; // currentUrl() -> "https://google.com"Element is visible in viewport (元素在視窗中可見(jiàn))
使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 值來(lái)確定給定的元素在視口中是否可見(jiàn)。
第二個(gè)參數(shù)用來(lái)指定元素是否要求完全可見(jiàn),指定 true 即部分可見(jiàn),默認(rèn)為全部可見(jiàn)。
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)Get scroll position (獲取滾動(dòng)位置)
如果存在,使用 pageXOffset 和 pageYOffset,否則使用 scrollLeft 和 scrollTop。
你可以省略 el,默認(rèn)使用 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}Redirect to URL (URL 重定向)
使用 window.location.href 或者 window.location.replace() 去重定向到 url。
第二個(gè)參數(shù)用來(lái)控制模擬鏈接點(diǎn)擊(true - 默認(rèn))還是 HTTP 重定向(false)。
const redirect = (url, asLink = true) => asLink ? window.location.href = url : window.location.replace(url); // redirect("https://google.com")Scroll to top (滾動(dòng)至頂部)
使用 document.documentElement.scrollTop 或 document.body.scrollTop 獲取到頂端的距離。
從頂部滾動(dòng)一小部分距離。 使用 window.requestAnimationFrame() 實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)。
const scrollToTop = _ => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); } }; // scrollToTop()Date Get days difference between dates (獲取兩個(gè)日期間的差距)
計(jì)算兩個(gè) Date 對(duì)象之間的差距(以天為單位)。
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9Function Chain asynchronous functions (鏈?zhǔn)疆惒胶瘮?shù))
循環(huán)遍歷包含異步事件的函數(shù)數(shù)組,當(dāng)每個(gè)異步事件完成時(shí)調(diào)用 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"); } ]) */Curry (函數(shù)柯里化)
使用遞歸。
如果提供的參數(shù)(args)的數(shù)量足夠,則調(diào)用傳遞的函數(shù) fn,否則返回一個(gè)柯里化函數(shù) fn,等待傳入剩下的參數(shù)。
如果你想要一個(gè)接受參數(shù)數(shù)量可變的函數(shù)(一個(gè)可變參數(shù)函數(shù),例如Math.min()),你可以選擇將參數(shù)個(gè)數(shù)傳遞給第二個(gè)參數(shù) 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) -> 2Pipe (管道)
使用 Array.reduce() 讓值在函數(shù)間流通。
const pipe = (...funcs) => arg => funcs.reduce((acc, func) => func(acc), arg); // pipe(btoa, x => x.toUpperCase())("Test") -> "VGVZDA=="Promisify (promise轉(zhuǎn)化)
使用 currying 返回一個(gè)函數(shù),返回一個(gè)調(diào)用原始函數(shù)的 Promise。
使用 ...rest 運(yùn)算符傳入所有參數(shù)。
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 2sRun promises in series (隊(duì)列運(yùn)行promise)
使用 Array.reduce() 通過(guò)創(chuàng)建一個(gè) promise 鏈來(lái)運(yùn)行一系列 promise,每個(gè) promise 在解析時(shí)返回下一個(gè) 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 completeSleep (睡眠)
通過(guò)返回一個(gè) Promise 延遲執(zhí)行 async 函數(shù),把它放到睡眠狀態(tài)。
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."); } */Math Collatz algorithm (考拉茲算法)
如果 n 是偶數(shù),返回 n/2,否則返回 3n+1。
const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1); // collatz(8) --> 4 // collatz(5) --> 16Distance between two points (兩點(diǎn)間的距離)
使用 Matg.hypot() 來(lái)計(jì)算兩點(diǎn)間的歐式距離。
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); // distance(1,1, 2,3) -> 2.23606797749979Divisible by number (可否被整除)
使用模運(yùn)算符(%)來(lái)檢查余數(shù)是否等于 0。
const isDivisible = (dividend, divisor) => dividend % divisor === 0; // isDivisible(6,3) -> trueEven or odd number (偶數(shù)或奇數(shù))
使用模運(yùn)算符(%)來(lái)計(jì)算一個(gè)數(shù)為偶數(shù)還是奇數(shù)。
返回 true 為偶數(shù),返回 false 則為奇數(shù)。
const isEven = num => num % 2 === 0; // isEven(3) -> falseFactorial (階乘)
使用遞歸。
如果 n 小于或等于 1,返回 1。
其它情況,則返回 n 和 n-1 的階乘的積。
const factorial = n => n <= 1 ? 1 : n * factorial(n - 1); // factorial(6) -> 720Fibonacci array generator (斐波納契數(shù)組生成器)
創(chuàng)建一個(gè)指定長(zhǎng)度的空數(shù)組,初始化前兩個(gè)值(0和1)。
使用 Array.reduce() 將最后兩個(gè)值的總和添加到數(shù)組中(前兩個(gè)除外)。
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]Greatest common divisor (GCD) (最大公約數(shù))(譯者注:使用輾轉(zhuǎn)相乘法)
使用遞歸。
基本情況是如果 y 等于 0,則返回 x。
其它情況下,返回 y 與 x/y 的最大公約數(shù)。
const gcd = (x, y) => !y ? x : gcd(y, x % y); // gcd (8, 36) -> 4Hamming distance (漢明距離)
使用 異或 運(yùn)算符(^)去查找兩個(gè)數(shù)值間的位差,使用 toString(2) 轉(zhuǎn)換為二進(jìn)制值,使用 match(/1/g) 計(jì)算并返回字符串中 1 的數(shù)量。
const hammingDistance = (num1, num2) => ((num1 ^ num2).toString(2).match(/1/g) || "").length; // hammingDistance(2,3) -> 1Percentile (百分位數(shù))
使用百分比公式計(jì)算給定數(shù)組中有多少個(gè)數(shù)小于或等于給定值。
使用Array.reduce()計(jì)算值的下面有多少個(gè)數(shù)是相同的值, 并應(yīng)用百分比公式。
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) -> 55Powerset (冪集)
使用 Array.reduce() 與 Array.map() 結(jié)合來(lái)迭代元素并將其組合成一個(gè)包含所有組合的數(shù)組。
const powerset = arr => arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]); // powerset([1,2]) -> [[], [1], [2], [2,1]]Round number to n digits (取小數(shù)點(diǎn)后 n 位)
使用 Math.round() 和字符串模板將數(shù)字四舍五入到指定的位數(shù)。
省略第二個(gè)參數(shù),decimals 將四舍五入到一個(gè)整數(shù)。
const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`); // round(1.005, 2) -> 1.01Standard deviation (標(biāo)準(zhǔn)差)
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() 來(lái)計(jì)算平均值,方差以及方差之和,然后確定標(biāo)準(zhǔn)偏差。
您可以省略第二個(gè)參數(shù)來(lái)獲取樣本標(biāo)準(zhǔn)差或?qū)⑵湓O(shè)置為 true 以獲得總體標(biāo)準(zhǔn)差。
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)Media (媒體) Speech synthesis (experimental) 語(yǔ)音合成(試驗(yàn)功能)
使用 SpeechSynthesisUtterance.voice 和 indow.speechSynthesis.getVoices() 將消息轉(zhuǎn)換為語(yǔ)音。
使用 window.speechSynthesis.speak() 來(lái)播放消息。
了解更多關(guān)于 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 messageObject (對(duì)象) Object from key-value pairs (鍵值對(duì)創(chuàng)建對(duì)象)
使用 Array.reduce() 創(chuàng)建和組合鍵值對(duì)。
const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {}); // objectFromPairs([["a",1],["b",2]]) -> {a: 1, b: 2}Object to key-value pairs (對(duì)象生成鍵值對(duì))
使用 Object.keys() 和 Array.map() 去遍歷對(duì)象的鍵并生成一個(gè)包含鍵值對(duì)的數(shù)組。
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]); // objectToPairs({a: 1, b: 2}) -> [["a",1],["b",2]])Shallow clone object (淺拷貝對(duì)象)
使用 ...spread 擴(kuò)展運(yùn)算符將目標(biāo)對(duì)象的屬性添加到拷貝對(duì)象中。
const shallowClone = obj => ({ ...obj }); /* const a = { x: true, y: 1 }; const b = shallowClone(a); a === b -> false */String (字符串) Anagrams of string (with duplicates) (字符串異位(和重復(fù)))
使用遞歸。
遍歷給定字符串中的每個(gè)字母,用其余字母創(chuàng)建所有部分字母。
使用 Array.map() 將字母與每個(gè)部分字母組合,然后使用 Array.reduce() 將所有字母組合到一個(gè)數(shù)組中。
當(dāng)給定字符串?dāng)?shù)量等與 2 或 1 時(shí)做簡(jiǎn)單處理。=
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"]Capitalize first letter of every word (所有單詞的第一個(gè)字母大寫(xiě))
使用 replace() 去查找單詞的第一個(gè)字母并使用 toUpperCase() 改為大寫(xiě)。
const capitalizeEveryWord = str => str.replace(/[a-z]/g, char => char.toUpperCase()); // capitalizeEveryWord("hello world!") -> "Hello World!"Capitalize first letter (單詞的第一個(gè)字母大寫(xiě))
使用 slice(0,1) 和 toUpperCase() 將首字母大寫(xiě),使用 slice(1) 得到字符串的其余部分。
忽略 lowerRest 參數(shù)以保持字符串的其余部分不變,或者將其設(shè)置為 true 以轉(zhuǎn)換為小寫(xiě)字母。
const capitalize = (str, lowerRest = false) => str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1)); // capitalize("myName", true) -> "Myname"Check for palindrome (檢查回文)
使用 toLowerCase() 轉(zhuǎn)換字符串并用 replace() 刪除其中的非字母數(shù)字字符。
然后,使用 split("") 分散為單個(gè)字符,再使用 reverse() 和 join("") 倒序合并后與原字符進(jìn)行比較。
const palindrome = str => { const s = str.toLowerCase().replace(/[W_]/g,""); return s === s.split("").reverse().join(""); } // palindrome("taco cat") -> trueReverse a string (反轉(zhuǎn)一個(gè)字符串)
使用數(shù)組解構(gòu)和 Array.reverse() 來(lái)反轉(zhuǎn)字符串中字符的順序。
使用 join("") 組合字符獲得一個(gè)字符串。
const reverseString = str => [...str].reverse().join(""); // reverseString("foobar") -> "raboof"Sort characters in string (alphabetical) 字符串排序(按字母順序排列)
使用 split("") 切割字符串,使用 Array.sort 通過(guò) localeCompare() 去排序,再使用 join("") 組合。
const sortCharactersInString = str => str.split("").sort((a, b) => a.localeCompare(b)).join(""); // sortCharactersInString("cabbage") -> "aabbceg"Truncate a String (字符串截?cái)?
確定字符串的長(zhǎng)度是否大于 num。
將字符串截?cái)酁樗璧拈L(zhǎng)度,在末尾或原始字符串后附加 ...。
const truncate = (str, num) => str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + "..." : str; // truncate("boomerang", 7) -> "boom..."Utility (效率工具) Escape regular expression (轉(zhuǎn)義正則表達(dá)式)
使用 replace() 去轉(zhuǎn)義特殊字符。
const escapeRegExp = str => str.replace(/[.*+?^${}()|[]]/g, "$&"); // escapeRegExp("(test)") -> (test)Get native type of value (獲取值的原始類(lèi)型)
返回值的構(gòu)造函數(shù)名稱的小寫(xiě)字符,值為 undefined 或 null 時(shí)則返回 undefined 或 null。
const getType = v => v === undefined ? "undefined" : v === null ? "null" : v.constructor.name.toLowerCase(); // getType(new Set([1,2,3])) -> "set"Is array (是否是數(shù)組)
使用 Array.isArray() 去檢查值是否為數(shù)組。
const isArray = val => !!val && Array.isArray(val); // isArray(null) -> false // isArray([1]) -> trueIs boolean (是否為布爾值)
使用 typeof 去檢查值是否為原始布爾值類(lèi)型。
const isBoolean = val => typeof val === "boolean"; // isBoolean(null) -> false // isBoolean(false) -> trueIs function (是否為函數(shù))
使用 typeof 去檢查值是否為函數(shù)原始類(lèi)型。
const isFunction = val => val && typeof val === "function"; // isFunction("x") -> false // isFunction(x => x) -> trueIs number (是否為數(shù)值)
使用 typeof 去檢查值是否為數(shù)值原始類(lèi)型。
const isNumber = val => typeof val === "number"; // isNumber("1") -> false // isNumber(1) -> trueIs string (是否為字符串)
使用 typeof 去檢查值是否為字符串原始類(lèi)型。
const isString = val => typeof val === "string"; // isString(10) -> false // isString("10") -> trueIs symbol (是否為 symbol 類(lèi)型)
使用 typeof 去檢查值是否為 symbol 原始類(lèi)型。
const isSymbol = val => typeof val === "symbol"; // isSymbol("x") -> false // isSymbol(Symbol("x")) -> trueMeasure time taken by function (測(cè)量函數(shù)的耗時(shí))
使用 console.time() 和 console.timeEnd() 來(lái)測(cè)量開(kāi)始和結(jié)束時(shí)間之間的差異,以確定回調(diào)執(zhí)行的時(shí)間。
const timeTaken = callback => { console.time("timeTaken"); const r = callback(); console.timeEnd("timeTaken"); return r; }; // timeTaken(() => Math.pow(2, 10)) -> 1024 // (logged): timeTaken: 0.02099609375msNumber to array of digits (數(shù)值轉(zhuǎn)換為數(shù)組)
將數(shù)值轉(zhuǎn)換為字符串,使用 split() 分割為數(shù)組。
再使用 Array.map() 和 parseInt() 將每個(gè)值轉(zhuǎn)換為整數(shù)。
const digitize = n => (""+n).split("").map(i => parseInt(i)); // digitize(2334) -> [2, 3, 3, 4]Ordinal suffix of number (數(shù)值增加序號(hào)后綴)
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.
使用模運(yùn)算符(%)來(lái)查找單位數(shù)和十位數(shù)的值。
查找數(shù)字匹配哪些序號(hào)模式。
如果數(shù)字在十幾的模式中找到,請(qǐng)使用的十幾的序數(shù)。
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"Random integer in range (指定范圍內(nèi)的隨機(jī)整數(shù))
使用 Math.random() 去生成一個(gè)在指定范圍內(nèi)的隨機(jī)數(shù),使用 Math.floor() 將其轉(zhuǎn)換為整數(shù)。
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; // randomIntegerInRange(0, 5) -> 2Random number in range (指定范圍內(nèi)的隨機(jī)數(shù))
使用 Math.random() 去生成一個(gè)在指定范圍內(nèi)的隨機(jī)數(shù)。
const randomInRange = (min, max) => Math.random() * (max - min) + min; // randomInRange(2,10) -> 6.0211363285087005RGB to hexadecimal (RGB轉(zhuǎn)十六進(jìn)制)
使用按位左移運(yùn)算符(<<)和 toString(16) 將 RGB 參數(shù)轉(zhuǎn)換為十六進(jìn)制,然后使用 padStart(6, "0") 去獲取6位數(shù)的十六進(jìn)制。
const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0"); // rgbToHex(255, 165, 1) -> "ffa501"Swap values of two variables (交換兩個(gè)變量的值)
使用數(shù)組解構(gòu)來(lái)交換兩個(gè)變量之間的值。
[varA, varB] = [varB, varA]; // [x, y] = [y, x]URL parameters (URL參數(shù))
使用 match() 和一個(gè)合適的正則去獲取所有鍵值對(duì),使用 Array.reduce() 合并到一個(gè)對(duì)象中。
允許將 location.search 作為參數(shù)傳遞。
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"}UUID generator (UUID生成器)
使用 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"Validate email (校驗(yàn)郵箱)
Use a regular experssion to check if the email is valid.
Returns true if email is valid, false if not.
使用正則表達(dá)式去檢驗(yàn)郵箱格式。
返回 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) -> trueValidate number (校驗(yàn)數(shù)值)
使用 !isNaN 和 parseFloat() 來(lái)檢查參數(shù)是否是一個(gè)數(shù)字(或允許轉(zhuǎn)換為數(shù)值)。
使用 isFinite() 來(lái)檢查數(shù)字是否是有限的。
使用 Number() 來(lái)檢查數(shù)值轉(zhuǎn)換是否成立。
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n; // validateNumber("10") -> trueValue or default (值或默認(rèn)值)
默認(rèn)返回 value 如果 value 為假,則返回默認(rèn)值。
const valueOrDefault = (value, d) => value || d; // valueOrDefault(NaN, 30) -> 30
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92416.html
摘要:由于當(dāng)時(shí)我本身也還不知道這一回事沒(méi)有看懂,所以就花了一些時(shí)間去搞清楚什么是及會(huì)帶來(lái)一些什么問(wèn)題,本文主要是用于介紹我對(duì)的一些理解,如有問(wèn)題,多謝指出。 原文鏈接:https://acrens.github.io/2017/01/22/2017-01-22-TDZ/春節(jié)快到了,假期也快到了,空閑之余刷個(gè)微博,看見(jiàn) @ruanyf 提出了一個(gè)問(wèn)題與 TDZ 有關(guān),但是貌似阮大當(dāng)時(shí)還沒(méi)有意識(shí)...
摘要:翻譯行代碼創(chuàng)造模板引擎一想看博客原文鏈接,請(qǐng)點(diǎn)擊下方一個(gè)非常好用的學(xué)習(xí)正則表達(dá)的網(wǎng)站正則表達(dá)式圖文解說(shuō)網(wǎng)站譯文事情的起因,我想編寫(xiě)一個(gè)邏輯簡(jiǎn)單的模板引擎,它可以很好滿足我現(xiàn)在的需求。,表示全局匹配。 翻譯_20行代碼創(chuàng)造JavaScript模板引擎(一) 想看博客原文鏈接,請(qǐng)點(diǎn)擊下方 JavaScript template engine in just 20 lines 一個(gè)非常好用...
摘要:而這個(gè)秒就能理解的代碼片段,摒棄了許多不必要的代碼,只實(shí)現(xiàn)了最核心的部分,不像和那樣,考慮參數(shù)邊界值問(wèn)題,例如,參數(shù)的類(lèi)型是否符合預(yù)期等。使用根據(jù)斷言函數(shù)對(duì)數(shù)組進(jìn)行過(guò)濾,返回條件為真值的對(duì)象。 之前翻譯過(guò)一篇文章,《我喜歡的5個(gè)編程技巧》,里面的一個(gè)技巧是借鑒一個(gè)網(wǎng)站的代碼片段,好奇的小手點(diǎn)下鏈接后,發(fā)現(xiàn)是一個(gè)有 47000 多star的倉(cāng)庫(kù),30-seconds-of-code。 倉(cāng)...
摘要:如果遇到非常的復(fù)雜的匹配,正則表達(dá)式的優(yōu)勢(shì)就更加明顯了。關(guān)于正則表達(dá)式書(shū)寫(xiě)規(guī)則,可查看,上面說(shuō)的很清楚了,我就不貼出來(lái)了。替換與正則表達(dá)式匹配的子串,并返回替換后的字符串。結(jié)語(yǔ)正則表達(dá)式并不難,懂了其中的套路之后,一切都變得簡(jiǎn)單了。 前言 在正文開(kāi)始前,先說(shuō)說(shuō)正則表達(dá)式是什么,為什么要用正則表達(dá)式?正則表達(dá)式在我個(gè)人看來(lái)就是一個(gè)瀏覽器可以識(shí)別的規(guī)則,有了這個(gè)規(guī)則,瀏覽器就可以幫我們判斷...
摘要:作者珂珂滬江前端開(kāi)發(fā)工程師本文為原創(chuàng)文章,有不當(dāng)之處歡迎指出。只對(duì)未來(lái)發(fā)生的事情做出兩種基本情況的應(yīng)對(duì)成功和失敗。在異步轉(zhuǎn)同步這條道路上,只是一個(gè)出彩的點(diǎn),他還尚有一些缺陷和不足,并不是我們最終的解決方案。 作者:珂珂 (滬江前端開(kāi)發(fā)工程師)本文為原創(chuàng)文章,有不當(dāng)之處歡迎指出。轉(zhuǎn)載請(qǐng)標(biāo)明出處。 一個(gè)新事物的產(chǎn)生必然是有其歷史原因的。為了更好的以同步的方式寫(xiě)異步的代碼,人們?cè)贘S上操碎了...
閱讀 958·2022-06-21 15:13
閱讀 1848·2021-10-20 13:48
閱讀 1029·2021-09-22 15:47
閱讀 1365·2019-08-30 15:55
閱讀 3112·2019-08-30 15:53
閱讀 520·2019-08-29 12:33
閱讀 712·2019-08-28 18:15
閱讀 3458·2019-08-26 13:58