Array

Array difference

difference(a,b): 集合做查: a\b, 从 a 里去掉 b 里的内容.

Create a Set from b, then use Array.filter() on a to only keep values not contained in 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

intersection(a,b): 集合相交, 从 a 里选择 b 里的内容.

Create a Set from b, then use Array.filter() on a to only keep values contained in 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]

Similarity between arrays

似乎和上面没有区别.

Use filter() to remove values that are not part of values, determined using includes().

const similarity = (arr, values) => arr.filter(v => values.includes(v));
// similarity([1,2,3], [1,2,4]) -> [1,2]

Array includes

includes(collection, val, fromIndex=0): 看 val 是否在 collection 中, 从 fromIndex 开始.

Use slice() to offset the array/string and indexOf() to check if the value is included. Omit the last argument, fromIndex, to check the whole array/string.

const includes = (collection, val, fromIndex=0) => collection.slice(fromIndex).indexOf(val) != -1;
// includes("30-seconds-of-code", "code") -> true
// includes([1, 2, 3, 4], [1, 2], 1) -> false

Array union

union(a,b): 取交集

Create a Set with all values of a and b and convert to an array.

const union = (a, b) => Array.from(new Set([...a, ...b]));
// union([1,2,3], [4,3,2]) -> [1,2,3,4]

Array without

without: exclusive

Use Array.filter() to create an array excluding all given values.

const without = (arr, ...args) => arr.filter(v => args.indexOf(v) === -1);
// without[2, 1, 2, 3], 1, 2) -> [3]
// without([2, 1, 2, 3, 4, 5, 5, 5, 3, 2, 7, 7], 3, 1, 5, 2) -> [ 4, 7, 7 ]

Array remove

这是干啥...

Use Array.filter() to find array elements that return truthy values and Array.reduce() to remove elements using Array.splice(). The func is invoked with three arguments (value, index, array).

const remove = (arr, func) =>
  Array.isArray(arr) ? arr.filter(func).reduce((acc, val) => {
    arr.splice(arr.indexOf(val), 1); return acc.concat(val);
    }, [])
  : [];
//remove([1, 2, 3, 4], n => n % 2 == 0) -> [2, 4]

Array sample

sample(arr): 随机选择一个元素

Math.random() => [0, 1) Math.random() * arr.length => [0, len) Floor 一下确实是概率均等的.

Use Math.random() to generate a random number, multiply it with length and round it of to the nearest whole number using Math.floor(). This method also works with strings.

const sample = arr => arr[Math.floor(Math.random() * arr.length)];
// sample([3, 7, 9, 11]) -> 9

Array zip

zip(...arrays): 这个太牛逼

Array.from() - JavaScript | MDN

// Array.from(arrayLike, mapFn, thisArg)
Array.from({length: 5}) -> [undefined, undefined, undefined, undefined, undefined]

Use Math.max.apply() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found.

const zip = (...arrays) => {
  const maxLength = Math.max.apply(null, arrays.map(a => a.length));
  return Array.from({length: maxLength}).map((_, i) => {
   return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);
  })
}
//zip(['a', 'b'], [1, 2], [true, false]); -> [['a', 1, true], ['b', 2, false]]
//zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]

Average of array of numbers

average(arr): 求平均值, reduce 来求和, 然后 divide by length

Use Array.reduce() to add each value to an accumulator, initialized with a value of 0, divide by the length of the array.

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
// average([1,2,3]) -> 2

Chunk array

chunk(arr,size): 很巧妙

Use Array.from() to create a new array, that fits the number of chunks that will be produced. Use Array.slice() to map each element of the new array to a chunk the length of size. If the original array can't be split evenly, the final chunk will contain the remaining elements.

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

compact(arr): 居然过滤掉 falsy 元素竟是这么简单...

Use Array.filter() to filter out falsey values (false, null, 0, "", undefined, and 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

很无聊的功能... 就是用 reduce 做一个 for 循环的事.

Use Array.reduce() to increment a counter each time you encounter the specific value inside the array.

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

deepFlatten(arr): 递归, 直到操作的对象为 arr 为止.

Use recursion. Use Array.concat() with an empty array ([]) and the spread operator (...) to flatten an array. Recursively flatten each element that is an array.

const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]

Drop elements in array

dropElements(arr,func): drop 元素, 直到满足 func 的条件, 用 Array.shift 来去掉头一个元素.

Loop through the array, using Array.shift() to drop the first element of the array until the returned value from the function is true. Returns the remaining elements.

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

fillArray(arr,value,start=0,end=arr.length): 填充, 用 map 就能解决.

因为限定了区间, 只能用 map 来 fill. 不然直接用 array.fill(value) 就行.

Use Array.map() to map values between start (inclusive) and end (exclusive) to value. Omit start to start at the first element and/or end to finish at the last.

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

filterNonUnique(arr): 可以看出 filter 是一个整体操作; 用 indexOf 和 lastIndexOf 就能判定是否是唯一元素;

Use Array.filter() for an array containing only the unique values.

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

flattenDepth(arr,depth=1): 就是用一个 depth 标志位来判定是否走向截止, 截止的时候要复制一份, 而不要直接返回自己 (说实话我没有理解为啥不能).

Use recursion, decrementing depth by 1 for each level of depth. Use Array.reduce() and Array.concat() to merge elements or arrays. Base case, for depth equal to 1 stops recursion. Omit the second element, depth to flatten only to a depth of 1 (single flatten).

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

flatten(arr): 只 flatten 一层, 利用了 arr.concat(ele) 和 arr.concat([ele]) 效果一致这一点.

Use Array.reduce() to get all elements inside the array and concat() to flatten them.

const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
// flatten([1,[2],3,4]) -> [1,2,3,4]

Get max/min value from array

arrayMax(arr): 用 Math.max.apply, 因为可以用 destructing 操作符, 所以直接 Math.max(...arr).

Use Math.max() combined with the spread operator (...) to get the maximum value in the array.

const arrayMax = arr => Math.max(...arr);
// arrayMax([10, 1, 5]) -> 10

Use Math.min() combined with the spread operator (...) to get the minimum value in the array.

const arrayMin = arr => Math.min(...arr);
// arrayMin([10, 1, 5]) -> 1

Group by

groupBy(arr,func): 最主要利用的是 reduce 函数的第三个参数 index, 先用 map 找到 key, 再用 reduce 来把每个 key 生成一个 [] (如果没有的话), 然后 concat 上对应 index 的 ele from array.

Use Array.map() to map the values of an array to a function or property name. Use Array.reduce() to create an object, where the keys are produced from the mapped results.

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

head(arr): arr[0] 直接取.

Use arr[0] to return the first element of the passed array.

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

Tail of list

这么看来 head 和 tail 并不是不重不漏互补的.

Return arr.slice(1) if the array's length is more than 1, otherwise return the whole array.

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

Initial of list

initial(arr): 用 slice 去掉最后一个.

Array.prototype.slice() - JavaScript | MDN

一直没有搞懂这个函数是怎么用的, 原来函数签名这么简单: arr.slice([begin[, end]]), 而且顾名思义, 就是从 array 里面 slice 一片出来. 很赞的是支持负数的 index, 所以这里可以用 slice(0,-1) 去掉最后一个元素.

Use arr.slice(0,-1)to return all but the last element of the array.

const initial = arr => arr.slice(0, -1);
// initial([1,2,3]) -> [1,2]

Initialize array with range

函数不难理解... 可是这个使用方法有点奇怪啊...

Use Array(end-start) to create an array of the desired length, Array.map() to fill with the desired values in a range. You can omit start to use a default value of 0.

const initializeArrayRange = (end, start = 0) =>
  Array.apply(null, Array(end - start)).map((v, i) => i + start);
// initializeArrayRange(5) -> [0,1,2,3,4]
// initializeArrayRange(5,2) -> [2,3,4]

Initialize array with values

initializeArray(n,value=0): 用 Array(n).fill(value).

Use Array(n) to create an array of the desired length, fill(v) to fill it with the desired values. You can omit value to use a default value of 0.

const initializeArray = (n, value = 0) => Array(n).fill(value);
// initializeArray(5, 2) -> [2,2,2,2,2]

Last of list

last(arr): 还是用 slice, 但是记得要取出这个元素. 和 arr[arr.length-1] 似乎没啥区别啊... 用 slice 是因为 slice 支持负数的 index, 但是 array[index] 不支持.

Use arr.slice(-1)[0] to get the last element of the given array.

const last = arr => arr.slice(-1)[0];
// last([1,2,3]) -> 3

Nth element of array

Use Array.slice() to get an array containing the nth element at the first place. If the index is out of bounds, return []. Omit the second argument, n, to get the first element of the array.

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','c'],-2) -> 'b'

Median of array of numbers

median(arr): 排序, 然后找中间.

Find the middle of the array, use Array.sort() to sort the values. Return the number at the midpoint if length is odd, otherwise the average of the two middle numbers.

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

Pick

pick(obj,arr): 用了 key in obj 来判定是否有这个 field. 因为 key in field 不能嵌套, 所以这里的 arr 只能是 'key' 而不是 'key.subKey'.

curr in obj && (acc[curr] = obj[curr]), acc 而不是 curr in obj ? (acc[curr] = obj[curr], acc) : acc, 很巧妙.

Use Array.reduce() to convert the filtered/picked keys back to a object with the corresponding key:value pair if the key exist in the obj.

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 }

Object from key-value pairs

Use Array.reduce() to create and combine key-value pairs.

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

Use Object.keys() and Array.map() to iterate over the object's keys and produce an array with key-value pairs.

const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])

Shuffle array

膜法啊! 思路清奇.

Use Array.sort() to reorder elements, using Math.random() in the comparator.

const shuffle = arr => arr.sort(() => Math.random() - 0.5);
// shuffle([1,2,3]) -> [2,3,1]

Take

Use Array.slice() to create a slice of the array with n elements taken from the beginning.

const take = (arr, n = 1) => arr.slice(0, n);
// take([1, 2, 3], 5) -> [1, 2, 3]
// take([1, 2, 3], 0) -> []

Take right

其实 slice 默认就是到末尾了, 所以第二个参数不必要.

Use Array.slice() to create a slice of the array with n elements taken from the end.

const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
// takeRight([1, 2, 3], 2) -> [ 2, 3 ]
// takeRight([1, 2, 3]) -> [3]

Unique values of array

哈哈, 直接从 list 生成 set, 然后用 rest operator (居然可以用 ...set).

Use ES6 Set and the ...rest operator to discard all duplicated values.

const unique = arr => [...new Set(arr)];
// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5]

Browser

Bottom visible

Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.

const bottomVisible = _ =>
  document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight;
// bottomVisible() -> true

Current URL

Use window.location.href to get current URL.

const currentUrl = _ => window.location.href;
// currentUrl() -> 'https://google.com'

Element is visible in viewport

Use Element.getBoundingClientRect() and the window.inner(Width|Height) values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specify true to determine if it is partially visible.

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

Use pageXOffset and pageYOffset if they are defined, otherwise scrollLeft and scrollTop. You can omit el to use a default value of 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

直接用 window.location.href 相当于跳转了页面, 用 replace 相当于覆盖了当前页, 不能用 back button 回到上一个页面. MDN 的文档: Location.replace() - Web APIs | MDN

The **Location**.replace() method replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace()the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.

Use window.location.href or window.location.replace() to redirect to url. Pass a second argument to simulate a link click (true - default) or an HTTP redirect (false).

const redirect = (url, asLink = true) =>
  asLink ? window.location.href = url : window.location.replace(url);
// redirect('https://google.com')

Scroll to top

Get distance from top using document.documentElement.scrollTop or document.body.scrollTop. Scroll by a fraction of the distance from top. Use window.requestAnimationFrame() to animate the scrolling.

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

Calculate the difference (in days) between to Date objects.

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

Loop through an array of functions containing asynchronous events, calling next when each asynchronous event has completed.

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

Use recursion. If the number of provided arguments (args) is sufficient, call the passed function f. Otherwise return a curried function f that expects the rest of the arguments. If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. Math.min()), you can optionally pass the number of arguments to the second parameter 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.prototype.reduce() - JavaScript | MDN:

arr.reduce(callback[, initialValue])

Use Array.reduce() to perform left-to-right function composition. The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.

const pipe = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));
/*
const add5 = x => x + 5
const multiply = (x, y) => x * y
const multiplyAndAdd5 = pipe(multiply, add5)
multiplyAndAdd5(5, 2) -> 15
*/

Promisify

Use currying to return a function returning a Promise that calls the original function. Use the ...rest operator to pass in all the parameters.

In Node 8+, you can use 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

Run an array of promises in series using Array.reduce() by creating a promise chain, where each promise returns the next promise when resolved.

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

Delay executing part of an async function, by putting it to sleep, returning a Promise.

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

Distance between two points

还特么有这样的函数: Math.hypot() - JavaScript | MDN, 以前都自己 sqrt(x^2+y^2)...

Use Math.hypot() to calculate the Euclidean distance between two points.

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
// distance(1,1, 2,3) -> 2.23606797749979

Divisible by number

Use the modulo operator (%) to check if the remainder is equal to 0.

const isDivisible = (dividend, divisor) => dividend % divisor === 0;
// isDivisible(6,3) -> true

Factorial

这个不是尾递归, 可能会爆栈.

Use recursion. If n is less than or equal to 1, return 1. Otherwise, return the product of n and the factorial of n - 1.

const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);
// factorial(6) -> 720

写了个尾递归的:

const factorial = (n, ret=1) => n <= 1 ? ret : factorial(n - 1, n*ret);
// factorial(6) -> 720

Fibonacci array generator

reduce 的妙用.

Create an empty array of the specific length, initializing the first two values (0 and 1). Use Array.reduce() to add values into the array, using the sum of the last two values, except for the first two.

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)

碾转相除.

Use recursion. Base case is when y equals 0. In this case, return x. Otherwise, return the GCD of y and the remainder of the division x/y.

const gcd = (x, y) => !y ? x : gcd(y, x % y);
// gcd (8, 36) -> 4

Hamming distance

js 也有 XOR... 而且 toString 可以接受 radix. 还用 regex 来匹配 1 并计数.

Use XOR operator (^) to find the bit difference between the two numbers, convert to binary string using toString(2). Count and return the number of 1s in the string, using match(/1/g).

const hammingDistance = (num1, num2) =>
  ((num1 ^ num2).toString(2).match(/1/g) || '').length;
// hammingDistance(2,3) -> 1

Powerset

Use Array.reduce() combined with Array.map() to iterate over elements and combine into an array containing all combinations.

const powerset = arr =>
  arr.reduce((a, v) => a.concat(a.map(r => r.concat(v))), [[]]);
// powerset([1,2]) -> [[], [1], [2], [1,2]]

Round number to n digits

Use Math.round() and template literals to round the number to the specified number of digits. Omit the second argument, decimals to round to an integer.

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.

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)

Use SpeechSynthesisUtterance.voice and indow.speechSynthesis.getVoices() to convert a message to speech. Use window.speechSynthesis.speak() to play the message.

Learn more about the 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

Shallow clone object

Use Object.assign() and an empty object ({}) to create a shallow clone of the original.

const shallowClone = obj => Object.assign({}, obj);
/*
const a = { x: true, y: 1 };
const b = shallowClone(a);
a === b -> false
*/

String

Anagrams of string (with duplicates)

Use recursion. For each letter in the given string, create all the partial anagrams for the rest of its letters. Use Array.map() to combine the letter with each partial anagram, then Array.reduce() to combine all anagrams in one array. Base cases are for string length equal to 2 or 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']

Capitalize first letter of every word

Use replace() to match the first character of each word and toUpperCase() to capitalize it.

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
// capitalizeEveryWord('hello world!') -> 'Hello World!'

Capitalize first letter

Use destructuring and toUpperCase() to capitalize first letter, ...rest to get array of characters after first letter and then Array.join('') to make it a string again. Omit the lowerRest parameter to keep the rest of the string intact, or set it to true to convert to lower case.

const capitalize = ([first,...rest], lowerRest = false) =>
  first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''));
// capitalize('myName') -> 'MyName'
// capitalize('myName', true) -> 'Myname'

Check for palindrome

Convert string toLowerCase() and use replace() to remove non-alphanumeric characters from it. Then, split('') into individual characters, reverse(), join('') and compare to the original, unreversed string, after converting it tolowerCase().

const palindrome = str => {
  const s = str.toLowerCase().replace(/[\W_]/g,'');
  return s === s.split('').reverse().join('');
}
// palindrome('taco cat') -> true

Reverse a string

Use array destructuring and Array.reverse() to reverse the order of the characters in the string. Combine characters to get a string using join('').

const reverseString = str => [...str].reverse().join('');
// reverseString('foobar') -> 'raboof'

Sort characters in string (alphabetical)

Split the string using split(''), Array.sort() utilizing localeCompare(), recombine using join('').

const sortCharactersInString = str =>
  str.split('').sort((a, b) => a.localeCompare(b)).join('');
// sortCharactersInString('cabbage') -> 'aabbceg'

Truncate a String

Determine if the string's length is greater than num. Return the string truncated to the desired length, with ... appended to the end or the original string.

const truncate = (str, num) =>
  str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;
// truncate('boomerang', 7) -> 'boom...'

Utility

Escape regular expression

Use replace() to escape special characters.

const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// escapeRegExp('(test)') -> \\(test\\)

Get native type of value

Returns lower-cased constructor name of value, "undefined" or "null" if value is undefined or null

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

Hexcode to RGB

Use Array.slice(), Array.map() and match() to convert a hexadecimal colorcode (prefixed with #) to a string with the RGB values.

const hexToRgb = hex => `rgb(${hex.slice(1).match(/.{2}/g).map(x => parseInt(x, 16)).join()})`
// hexToRgb('#27ae60') -> 'rgb(39,174,96)'

Is array

!!v 是转化了 v 的类型为 boolean. see What is the !! (not not) operator in JavaScript? - Stack Overflow.

那些 falsy 的, 变为 false, 其他为 true.

Use Array.isArray() to check if a value is classified as an array.

const isArray = val => !!val && Array.isArray(val);
// isArray(null) -> false
// isArray([1]) -> true

Is boolean

Use typeof to check if a value is classified as a boolean primitive.

const isBoolean = val => typeof val === 'boolean';
// isBoolean(null) -> false
// isBoolean(false) -> true

Is function

Use typeof to check if a value is classified as a function primitive.

const isFunction = val => val && typeof val === 'function';
// isFunction('x') -> false
// isFunction(x => x) -> true

Is number/string/symbol

Use typeof to check if a value is classified as a number primitive.

const isNumber = val => typeof val === 'number';
const isString = val => typeof val === 'string';
const isSymbol = val => typeof val === 'symbol';

Measure time taken by function

Use console.time() and console.timeEnd() to measure the difference between the start and end times to determine how long the callback took to execute.

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

Convert the number to a string, use split() to convert build an array. Use Array.map() and parseInt() to transform each value to an integer.

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 number in range

Use Math.random() to generate a random value, map it to the desired range using multiplication.

const randomInRange = (min, max) => Math.random() * (max - min) + min;
// randomInRange(2,10) -> 6.0211363285087005

Random integer in range

Use Math.random() to generate a random number and map it to the desired range, using Math.floor() to make it an integer.

const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
// randomIntegerInRange(0, 5) -> 2

RGB to hexadecimal

Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<<) and toString(16), then padStart(6,'0') to get a 6-digit hexadecimal value.

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

Use array destructuring to swap values between two variables.

[varA, varB] = [varB, varA];
// [x, y] = [y, x]

URL parameters

Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object. Pass location.search as the argument to apply to the current url.

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

Use crypto API to generate a UUID, compliant with RFC4122 version 4.

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 expression to check if the email is valid. Returns true if email is valid, false if not.

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([email protected]) -> true

Validate number

Use !isNaN in combination with parseFloat() to check if the argument is a number. Use isFinite() to check if the number is finite. Use Number() to check if the coercion holds.

const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
// validateNumber('10') -> true

Value or default

Returns value, or default value if passed value is falsy.

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