国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

30s js代碼片段 翻譯

sevi_stuo / 468人閱讀

摘要:可否被整除使用模運算符來檢查余數是否等于。數值增加序號后綴使用模運算符來查找單位數和十位數的值。

這是對 github 上30s代碼片段的翻譯整理,由于作者的文檔是通過腳本生成的,也就懶得去提pull了,整理了放到博客上供大家學習參考,后續會持續跟進翻譯。
Array Array concatenation (合并參數)

使用 Array.concat() 來連接參數中的任何數組或值。

const arrayConcat = (arr, ...args) => arr.concat(...args);
// arrayConcat([1], 2, [3], [[4]]) -> [1,2,3,[4]]
Array difference (取數組不同項)

b 創建 Set,然后使用 Array.filter() 過濾,只保留 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 (取數組相同項)

b 創建 Set,然后使用 Array.filter() 過濾,只保留 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 (合并數組去重)

ab 的所有值創建一個 Set 并轉換成一個數組。

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 (通過數組取平均值)

使用 Array.reduce() 將每個值添加到一個累加器,用值 0 初始化,除以數組的長度。

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
// average([1,2,3]) -> 2
Chunk array (數組切塊)

使用 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]
Compact (壓縮)

使用 Array.filter() 去過濾掉假值(false, null, 0, "", undefinedNaN)。

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 (計算數組中指定值出現的次數)

使用 Array.reduce() 去迭代數組,當值相同時,遞增計數器。

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
// countOccurrences([1,1,2,1,2,3], 1) -> 3
Deep flatten array (深度展開數組)

使用遞歸。
使用 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]
Drop elements in array (刪除數組中的元素)

循環訪問數組,使用 Array.shift() 刪除數組的第一個元素,直到函數的返回值為 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 (填充數組)

使用 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]
Filter out non-unique values in an array (過濾掉數組中重復的值)

使用 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]
Flatten array up to depth (展開指定深度的數組)

使用遞歸去遞減深度。
使用 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]
Flatten array (拼合數組)

使用 Array.reduce() 來獲取內部所有元素并用 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 (獲取數組中的最大值)

使用 Math.max() 配合 ... 擴展運算符去獲取數組中的最大值。

const arrayMax = arr => Math.max(...arr);
// arrayMax([10, 1, 5]) -> 10
Get min value from array (獲取數組中的最小值)

使用 Math.max() 配合 ... 擴展運算符去獲取數組中的最小值。

const arrayMin = arr => Math.min(...arr);
// arrayMin([10, 1, 5]) -> 1
Group by (條件分組)

使用 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"]}
Head of list (獲取數組的首個元素)

使用 arr[0] 返回傳遞數組的第一個元素。

const head = arr => arr[0];
// head([1,2,3]) -> 1
Initial of list

使用 arr,slice(0, -1) 去返回去除最后一個元素的數組。

const initial = arr => arr.slice(0, -1);
// initial([1,2,3]) -> [1,2]
Initialize array with range (使用指定范圍來定義數組)

使用 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]
Initialize array with values (使用指定值來定義數組)

使用 Array(n) 創建一個所需長度的數組,使用 fill(v) 去填充所需要的值。
亦可以省略 value,默認值為 0

const initializeArray = (n, value = 0) => Array(n).fill(value);
// initializeArray(5, 2) -> [2,2,2,2,2]
Last of list (獲取數組的結尾)

使用 arr.slice(-1)[0] 獲得給定數組的最后一個元素。

const last = arr => arr.slice(-1)[0];
// last([1,2,3]) -> 3
Median of array of numbers (獲取數組的中間值)

找到數組的中間,使用 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
Nth element of array (獲取數組的第 N 個元素)

使用 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"
Pick (挑選)

使用 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
Shuffle array (隨機數組)

使用 Array.sort() 在比較器中使用 Math.random() 重新排序元素。

const shuffle = arr => arr.sort(() => Math.random() - 0.5);
// shuffle([1,2,3]) -> [2,3,1]
Similarity between arrays (獲取數組的交集)

使用 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 (數組的總和)

使用 Array.reduce() 去迭代值并計算累計器,初始值為 0

const sum = arr => arr.reduce((acc, val) => acc + val, 0);
// sum([1,2,3,4]) -> 10
Tail of list (列表的尾巴)

如果數組的長度大于1,則返回 arr.slice(1),否則返回整個數組。

const tail = arr => arr.length > 1 ? arr.slice(1) : arr;
// tail([1,2,3]) -> [2,3]
// tail([1]) -> [1]
Take (抽取)

使用 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) -> []
Unique values of array (數組去重)

使用ES6 Set...rest 運算符去除所有重復的值。

const unique = arr => [...new Set(arr)];
// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]
Browser Bottom visible (底部可見即滾動至底部)

使用 scrollYscrollHeightclientHeight 來確定頁面的底部是否可見。

const bottomVisible = _ =>
  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
// bottomVisible() -> true
Current URL (當前鏈接地址)

使用 window.location.href 來獲取當前鏈接地址。

const currentUrl = _ => window.location.href;
// currentUrl() -> "https://google.com"
Element is visible in viewport (元素在視窗中可見)

使用 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)
Get scroll position (獲取滾動位置)

如果存在,使用 pageXOffsetpageYOffset,否則使用 scrollLeftscrollTop
你可以省略 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}
Redirect to URL (URL 重定向)

使用 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")
Scroll to top (滾動至頂部)

使用 document.documentElement.scrollTopdocument.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 Get days difference between dates (獲取兩個日期間的差距)

計算兩個 Date 對象之間的差距(以天為單位)。

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9
Function Chain asynchronous functions (鏈式異步函數)

循環遍歷包含異步事件的函數數組,當每個異步事件完成時調用 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 (函數柯里化)

使用遞歸。
如果提供的參數(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
Pipe (管道)

使用 Array.reduce() 讓值在函數間流通。

const pipe = (...funcs) => arg => funcs.reduce((acc, func) => func(acc), arg);
// pipe(btoa, x => x.toUpperCase())("Test") -> "VGVZDA=="
Promisify (promise轉化)

使用 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
Run promises in series (隊列運行promise)

使用 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
Sleep (睡眠)

通過返回一個 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.");
}
*/
Math Collatz algorithm (考拉茲算法)

如果 n 是偶數,返回 n/2,否則返回 3n+1

const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1);
// collatz(8) --> 4
// collatz(5) --> 16
Distance between two points (兩點間的距離)

使用 Matg.hypot() 來計算兩點間的歐式距離。

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
// distance(1,1, 2,3) -> 2.23606797749979
Divisible by number (可否被整除)

使用模運算符()來檢查余數是否等于 0

const isDivisible = (dividend, divisor) => dividend % divisor === 0;
// isDivisible(6,3) -> true
Even or odd number (偶數或奇數)

使用模運算符(%)來計算一個數為偶數還是奇數。
返回 true 為偶數,返回 false 則為奇數。

const isEven = num => num % 2 === 0;
// isEven(3) -> false
Factorial (階乘)

使用遞歸。
如果 n 小于或等于 1,返回 1
其它情況,則返回 nn-1 的階乘的積。

const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);
// factorial(6) -> 720
Fibonacci array generator (斐波納契數組生成器)

創建一個指定長度的空數組,初始化前兩個值(01)。
使用 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]
Greatest common divisor (GCD) (最大公約數)(譯者注:使用輾轉相乘法)

使用遞歸。
基本情況是如果 y 等于 0,則返回 x
其它情況下,返回 yx/y 的最大公約數。

const gcd = (x, y) => !y ? x : gcd(y, x % y);
// gcd (8, 36) -> 4
Hamming distance (漢明距離)

使用 異或 運算符(^)去查找兩個數值間的位差,使用 toString(2) 轉換為二進制值,使用 match(/1/g) 計算并返回字符串中 1 的數量。

const hammingDistance = (num1, num2) =>
  ((num1 ^ num2).toString(2).match(/1/g) || "").length;
// hammingDistance(2,3) -> 1
Percentile (百分位數)

使用百分比公式計算給定數組中有多少個數小于或等于給定值。

使用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
Powerset (冪集)

使用 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]]
Round number to n digits (取小數點后 n 位)

使用 Math.round() 和字符串模板將數字四舍五入到指定的位數。
省略第二個參數,decimals 將四舍五入到一個整數。

const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
// round(1.005, 2) -> 1.01
Standard deviation (標準差)

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)
Media (媒體) Speech synthesis (experimental) 語音合成(試驗功能)

使用 SpeechSynthesisUtterance.voiceindow.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
Object (對象) Object from key-value pairs (鍵值對創建對象)

使用 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 to key-value pairs (對象生成鍵值對)

使用 Object.keys()Array.map() 去遍歷對象的鍵并生成一個包含鍵值對的數組。

const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
// objectToPairs({a: 1, b: 2}) -> [["a",1],["b",2]])
Shallow clone object (淺拷貝對象)

使用 ...spread 擴展運算符將目標對象的屬性添加到拷貝對象中。

const shallowClone = obj => ({ ...obj });
/*
const a = { x: true, y: 1 };
const b = shallowClone(a);
a === b -> false
*/
String (字符串) Anagrams of string (with duplicates) (字符串異位(和重復))

使用遞歸。
遍歷給定字符串中的每個字母,用其余字母創建所有部分字母。
使用 Array.map() 將字母與每個部分字母組合,然后使用 Array.reduce() 將所有字母組合到一個數組中。
當給定字符串數量等與 21 時做簡單處理。=

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 (所有單詞的第一個字母大寫)

使用 replace() 去查找單詞的第一個字母并使用 toUpperCase() 改為大寫。

const capitalizeEveryWord = str => str.replace(/[a-z]/g, char => char.toUpperCase());
// capitalizeEveryWord("hello world!") -> "Hello World!"
Capitalize first letter (單詞的第一個字母大寫)

使用 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"
Check for palindrome (檢查回文)

使用 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
Reverse a string (反轉一個字符串)

使用數組解構和 Array.reverse() 來反轉字符串中字符的順序。
使用 join("") 組合字符獲得一個字符串。

const reverseString = str => [...str].reverse().join("");
// reverseString("foobar") -> "raboof"
Sort characters in string (alphabetical) 字符串排序(按字母順序排列)

使用 split("") 切割字符串,使用 Array.sort 通過 localeCompare() 去排序,再使用 join("") 組合。

const sortCharactersInString = str =>
  str.split("").sort((a, b) => a.localeCompare(b)).join("");
// sortCharactersInString("cabbage") -> "aabbceg"
Truncate a String (字符串截斷)

確定字符串的長度是否大于 num
將字符串截斷為所需的長度,在末尾或原始字符串后附加 ...

const truncate = (str, num) =>
  str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + "..." : str;
// truncate("boomerang", 7) -> "boom..."
Utility (效率工具) Escape regular expression (轉義正則表達式)

使用 replace() 去轉義特殊字符。

const escapeRegExp = str => str.replace(/[.*+?^${}()|[]]/g, "$&");
// escapeRegExp("(test)") -> (test)
Get native type of value (獲取值的原始類型)

返回值的構造函數名稱的小寫字符,值為 undefinednull 時則返回 undefinednull

const getType = v =>
  v === undefined ? "undefined" : v === null ? "null" : v.constructor.name.toLowerCase();
// getType(new Set([1,2,3])) -> "set"
Is array (是否是數組)

使用 Array.isArray() 去檢查值是否為數組。

const isArray = val => !!val && Array.isArray(val);
// isArray(null) -> false
// isArray([1]) -> true
Is boolean (是否為布爾值)

使用 typeof 去檢查值是否為原始布爾值類型。

const isBoolean = val => typeof val === "boolean";
// isBoolean(null) -> false
// isBoolean(false) -> true
Is function (是否為函數)

使用 typeof 去檢查值是否為函數原始類型。

const isFunction = val => val && typeof val === "function";
// isFunction("x") -> false
// isFunction(x => x) -> true
Is number (是否為數值)

使用 typeof 去檢查值是否為數值原始類型。

const isNumber = val => typeof val === "number";
// isNumber("1") -> false
// isNumber(1) -> true
Is string (是否為字符串)

使用 typeof 去檢查值是否為字符串原始類型。

const isString = val => typeof val === "string";
// isString(10) -> false
// isString("10") -> true
Is symbol (是否為 symbol 類型)

使用 typeof 去檢查值是否為 symbol 原始類型。

const isSymbol = val => typeof val === "symbol";
// isSymbol("x") -> false
// isSymbol(Symbol("x")) -> true
Measure time taken by function (測量函數的耗時)

使用 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
Number to array of digits (數值轉換為數組)

將數值轉換為字符串,使用 split() 分割為數組。
再使用 Array.map()parseInt() 將每個值轉換為整數。

const digitize = n => (""+n).split("").map(i => parseInt(i));
// digitize(2334) -> [2, 3, 3, 4]
Ordinal suffix of number (數值增加序號后綴)

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"
Random integer in range (指定范圍內的隨機整數)

使用 Math.random() 去生成一個在指定范圍內的隨機數,使用 Math.floor() 將其轉換為整數。

const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
// randomIntegerInRange(0, 5) -> 2
Random number in range (指定范圍內的隨機數)

使用 Math.random() 去生成一個在指定范圍內的隨機數。

const randomInRange = (min, max) => Math.random() * (max - min) + min;
// randomInRange(2,10) -> 6.0211363285087005
RGB to hexadecimal (RGB轉十六進制)

使用按位左移運算符(<<)和 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"
Swap values of two variables (交換兩個變量的值)

使用數組解構來交換兩個變量之間的值。

[varA, varB] = [varB, varA];
// [x, y] = [y, x]
URL parameters (URL參數)

使用 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"}
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 (校驗郵箱)

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
Validate number (校驗數值)

使用 !isNaNparseFloat() 來檢查參數是否是一個數字(或允許轉換為數值)。
使用 isFinite() 來檢查數字是否是有限的。
使用 Number() 來檢查數值轉換是否成立。

const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
// validateNumber("10") -> true
Value or default (值或默認值)

默認返回 value 如果 value 為假,則返回默認值。

const valueOrDefault = (value, d) => value || d;
// valueOrDefault(NaN, 30) -> 30

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/92416.html

相關文章

  • JS 中 TDZ 的理解

    摘要:由于當時我本身也還不知道這一回事沒有看懂,所以就花了一些時間去搞清楚什么是及會帶來一些什么問題,本文主要是用于介紹我對的一些理解,如有問題,多謝指出。 原文鏈接:https://acrens.github.io/2017/01/22/2017-01-22-TDZ/春節快到了,假期也快到了,空閑之余刷個微博,看見 @ruanyf 提出了一個問題與 TDZ 有關,但是貌似阮大當時還沒有意識...

    stackvoid 評論0 收藏0
  • 翻譯_20行代碼創造JavaScript模板引擎(一)

    摘要:翻譯行代碼創造模板引擎一想看博客原文鏈接,請點擊下方一個非常好用的學習正則表達的網站正則表達式圖文解說網站譯文事情的起因,我想編寫一個邏輯簡單的模板引擎,它可以很好滿足我現在的需求。,表示全局匹配。 翻譯_20行代碼創造JavaScript模板引擎(一) 想看博客原文鏈接,請點擊下方 JavaScript template engine in just 20 lines 一個非常好用...

    hiyang 評論0 收藏0
  • 30秒就能理解的 Javascript 代碼片段 --- Array篇

    摘要:而這個秒就能理解的代碼片段,摒棄了許多不必要的代碼,只實現了最核心的部分,不像和那樣,考慮參數邊界值問題,例如,參數的類型是否符合預期等。使用根據斷言函數對數組進行過濾,返回條件為真值的對象。 之前翻譯過一篇文章,《我喜歡的5個編程技巧》,里面的一個技巧是借鑒一個網站的代碼片段,好奇的小手點下鏈接后,發現是一個有 47000 多star的倉庫,30-seconds-of-code。 倉...

    fox_soyoung 評論0 收藏0
  • JS正則表達式入門,看這篇就夠了

    摘要:如果遇到非常的復雜的匹配,正則表達式的優勢就更加明顯了。關于正則表達式書寫規則,可查看,上面說的很清楚了,我就不貼出來了。替換與正則表達式匹配的子串,并返回替換后的字符串。結語正則表達式并不難,懂了其中的套路之后,一切都變得簡單了。 前言 在正文開始前,先說說正則表達式是什么,為什么要用正則表達式?正則表達式在我個人看來就是一個瀏覽器可以識別的規則,有了這個規則,瀏覽器就可以幫我們判斷...

    wenzi 評論0 收藏0
  • 原創 | JS異步工具之--Promise

    摘要:作者珂珂滬江前端開發工程師本文為原創文章,有不當之處歡迎指出。只對未來發生的事情做出兩種基本情況的應對成功和失敗。在異步轉同步這條道路上,只是一個出彩的點,他還尚有一些缺陷和不足,并不是我們最終的解決方案。 作者:珂珂 (滬江前端開發工程師)本文為原創文章,有不當之處歡迎指出。轉載請標明出處。 一個新事物的產生必然是有其歷史原因的。為了更好的以同步的方式寫異步的代碼,人們在JS上操碎了...

    alanoddsoff 評論0 收藏0

發表評論

0條評論

sevi_stuo

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<