63段常用的JS代码片段汇总

作者 | Fatos Morina

JavaScript 是目前最流行的编程语言之一，正如大多数人所说：“如果你想学一门编程语言，请学JavaScript。”

FreeCodeCamp的创始人 Quincy Larson 在最近的一次采访中被问到哪种语言开发人员应该首先学习。他回答：“ JavaScript。”：

“软件正在吞噬世界，JavaScript正在吞噬软件。JavaScript每年都在变得越来越占主导地位，而且没人知道最终会取代它的是什么。" 如果您没有充分的理由学习一种新语言（例如您的工作要求您维护非JavaScript代码库），那么我的建议是着重于提高JavaScript的水平。”

听我说这么多，你是不是很激动呢。这里有63段常用的js代码片段，方便你学习和使用。

1、all

如果数组所有元素满足函数条件，则返回true。调用时，如果省略第二个参数，则默认传递布尔值。

const all = (arr, fn = Boolean) => arr.every(fn);


all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

2、allEqual

判断数组中的元素是否都相等。

const allEqual = arr => arr.every(val => val === arr[0]);


allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

3、approximatelyEqual

此代码示例检查两个数字是否近似相等，差异值可以通过传参的形式进行设置

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;


approximatelyEqual(Math.PI / 2.0, 1.5708); // true

4、arrayToCSV

此段代码将没有逗号或双引号的元素转换成带有逗号分隔符的字符串即CSV格式识别的形式。

const arrayToCSV = (arr, delimiter = ',') =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
  
arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'

5、arrayTohtmlList

此段代码将数组元素转换成<li>标记，并将此元素添加至给定的ID元素标记内。

const arrayTohtmlList = (arr, listID) =>
  (el => (
    (el = document.querySelector('#' + listID)),
    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
  ))();
  
arrayToHtmlList(['item 1', 'item 2'], 'myListID');

6、attempt

此段代码执行一个函数，将剩余的参数传回函数当参数，返回相应的结果，并能捕获异常。

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};
var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

7、average

此段代码返回两个或多个数的平均数。

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

8、averageBy

一个 map()函数和 reduce()函数结合的例子，此函数先通过 map() 函数将对象转换成数组，然后在调用reduce()函数进行累加，然后根据数组长度返回平均值。

const averageBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
  arr.length;
  
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

9、bifurcate

此函数包含两个参数，类型都为数组，依据第二个参数的真假条件，将一个参数的数组进行分组，条件为真的放入第一个数组，其它的放入第二个数组。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式。

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

10、bifurcateBy

此段代码将数组按照指定的函数逻辑进行分组，满足函数条件的逻辑为真，放入第一个数组中，其它不满足的放入第二个数组 。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式，基于函数过滤逻辑，通过 Array.prototype.push() 函数将其添加到数组中。

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
  
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

11、bottomVisible

用于检测页面是否滚动到页面底部。​

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


bottomVisible(); // true

12、byteSize

此代码返回字符串的字节长度。这里用到了Blob对象，Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。

const byteSize = str => new Blob([str]).size;
byteSize(''); // 4
byteSize('Hello World'); // 11

13、capitalize

将字符串的首字母转成大写,这里主要运用到了ES6的展开语法在数组中的运用。

const capitalize = ([first, ...rest]) =>
  first.toUpperCase() + rest.join('');
  
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'FooBar'

14、capitalizeEveryWord

将一个句子中每个单词首字母转换成大写字母，这里中要运用了正则表达式进行替换。

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());


capitalizeEveryWord('hello world!'); // 'Hello World!'

15、castArray

此段代码将非数值的值转换成数组对象。

const castArray = val => (Array.isArray(val) ? val : [val]);


castArray('foo'); // ['foo']
castArray([1]); // [1]

16、compact

将数组中移除值为 false 的内容。​

const compact = arr => arr.filter(Boolean);


compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); 
// [ 1, 2, 3, 'a', 's', 34 ]

17、countOccurrences

统计数组中某个值出现的次数

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

18、Create Directory

此代码段使用 existSync() 检查目录是否存在，然后使用 mkdirSync() 创建目录（如果不存在）。

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test'); 
// creates the directory 'test', if it doesn't exist

19、currentURL

返回当前访问的 URL 地址。

const currentURL = () => window.location.href;


currentURL(); // 'https://medium.com/@fatosmorina'

20、dayOfYear

返回当前是今年的第几天

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);


dayOfYear(new Date()); // 272

21、decapitalize

将字符串的首字母转换成小写字母​

const decapitalize = ([first, ...rest]) =>
  first.toLowerCase() + rest.join('')


decapitalize('FooBar'); // 'fooBar'

22、deepFlatten

通过递归的形式，将多维数组展平成一维数组。​

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));


deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

23、default

去重对象的属性，如果对象中含有重复的属性，以前面的为准。

const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);


defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

24、defer

延迟函数的调用，即异步调用函数。

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);


defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

25、degreesToRads

此段代码将标准的度数，转换成弧度。

const degreesToRads = deg => (deg * Math.PI) / 180.0;


degreesToRads(90.0); // ~1.5708

26、difference

此段代码查找两个给定数组的差异，查找出前者数组在后者数组中不存在元素。

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
};


difference([1, 2, 3], [1, 2, 4]); // [3]

27、differenceBy

通过给定的函数来处理需要对比差异的数组，查找出前者数组在后者数组中不存在元素。

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => !s.has(fn(x)));
};


differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]

28、differenceWith

此段代码按照给定函数逻辑筛选需要对比差异的数组，查找出前者数组在后者数组中不存在元素。

const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);


differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b)); 
// [1, 1.2]

29、digitize

将输入的数字拆分成单个数字组成的数组。

const digitize = n => [...`${n}`].map(i => parseInt(i));


digitize(431); // [4, 3, 1]

30、distance

计算两点之间的距离

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);


distance(1, 1, 2, 3); // 2.23606797749979

31、drop

此段代码将给定的数组从左边开始删除 n 个元素

const drop = (arr, n = 1) => arr.slice(n);


drop([1, 2, 3]); // [2,3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []

32、dropRight

此段代码将给定的数组从右边开始删除 n 个元素

const dropRight = (arr, n = 1) => arr.slice(0, -n);


dropRight([1, 2, 3]); // [1,2]
dropRight([1, 2, 3], 2); // [1]
dropRight([1, 2, 3], 42); // []

33、dropRightWhile

此段代码将给定的数组按照给定的函数条件从右开始删除，直到当前元素满足函数条件为True时，停止删除，并返回数组剩余元素。

const dropRightWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);
  return arr;
};


dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]

34、dropWhile

按照给的的函数条件筛选数组，不满足函数条件的将从数组中移除。

const dropWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};


dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]

35、elementContains

接收两个DOM元素对象参数，判断后者是否是前者的子元素。​

const elementContains = (parent, child) => parent !== child && parent.contains(child);


elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

36、filterNonUnique

移除数组中重复的元素

const filterNonUnique = arr => [ …new Set(arr)];
filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]

37、findKey

按照给定的函数条件，查找第一个满足条件对象的键值。

const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));


findKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  o => o['active']
); // 'barney'

38、findLast

按照给定的函数条件筛选数组，将最后一个满足条件的元素进行删除。

const findLast = (arr, fn) => arr.filter(fn).pop();


findLast([1, 2, 3, 4], n => n % 2 === 1); // 3

39、flatten

按照指定数组的深度，将嵌套数组进行展平。

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);


flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

40、forEachRight

按照给定的函数条件，从数组的右边往左依次进行执行。​

const forEachRight = (arr, callback) =>
  arr
    .slice(0)
    .reverse()
    .forEach(callback);
    
forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

41、forOwn

此段代码按照给定的函数条件，支持三个参数作为输入（值、键、对象本身），进行迭代对象。​

const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

42、functionName

此段代码输出函数的名称。​

const functionName = fn => (console.debug(fn.name), fn);


functionName(Math.max); // max (logged in debug channel of console)

43、getColonTimeFromDate

此段代码从Date对象里获取当前时间。​

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // "08:38:00"

44、getDaysDiffBetweenDates

此段代码返回两个日期之间相差多少天

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);
  
getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

45、getStyle

此代码返回DOM元素节点对应的属性值。

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];


getStyle(document.querySelector('p'), 'font-size'); // '16px'

46、getType

此段代码的主要功能就是返回数据的类型。

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

47、hasClass

此段代码返回DOM元素是否包含指定的Class样式。​

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

48、head

此段代码输出数组的第一个元素。

const head = arr => arr[0];


head([1, 2, 3]); // 1

49、hide

此段代码隐藏指定的DOM元素。

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));


hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

50、httpsRedirect

此段代码的功能就是将http网址重定向https网址。​

const httpsRedirect = () => {
  if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
};


httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com

51、indexOfAll

此代码可以返回数组中某个值对应的所有索引值，如果不包含该值，则返回一个空数组。

const indexOfAll = (arr, val) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);


indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3]
indexOfAll([1, 2, 3], 4); // []

52、initial

此段代码返回数组中除最后一个元素的所有元素

const initial = arr => arr.slice(0, -1);


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

53、insertAfter

此段代码的功能主要是在给定的DOM节点后插入新的节点内容

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);


insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>

54、insertBefore

此段代码的功能主要是在给定的DOM节点前插入新的节点内容​

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);


insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>

55、intersection

此段代码返回两个数组元素之间的交集。

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]

56、intersectionBy

按照给定的函数处理需要对比的数组元素，然后根据处理后的数组，找出交集，最后从第一个数组中将对应的元素输出。

const intersectionBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => s.has(fn(x)));
};


intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]

57、intersectionBy

按照给定的函数对比两个数组的差异，然后找出交集，最后从第一个数组中将对应的元素输出。

const intersectionWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1);


intersectionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1.5, 3, 0]

58、is

此段代码用于判断数据是否为指定的数据类型，如果是则返回true。​

const is = (type, val) => ![, null].includes(val) && val.constructor === type;


is(Array, [1]); // true
is(ArrayBuffer, new ArrayBuffer()); // true
is(Map, new Map()); // true
is(RegExp, /./g); // true
is(Set, new Set()); // true
is(WeakMap, new WeakMap()); // true
is(WeakSet, new WeakSet()); // true
is(String, ''); // true
is(String, new String('')); // true
is(Number, 1); // true
is(Number, new Number(1)); // true
is(Boolean, true); // true
is(Boolean, new Boolean(true)); // true

59、isAfterDate

接收两个日期类型的参数，判断前者的日期是否晚于后者的日期。

const isAfterDate = (dateA, dateB) => dateA > dateB;


isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true

60、isAnagram

用于检测两个单词是否相似。​

const isAnagram = (str1, str2) => {
  const normalize = str =>
    str
      .toLowerCase()
      .replace(/[^a-z0-9]/gi, '')
      .split('')
      .sort()
      .join('');
  return normalize(str1) === normalize(str2);
};


isAnagram('iceman', 'cinema'); // true

61、isArrayLike

此段代码用于检测对象是否为类数组对象,是否可迭代。

const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';


isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false

62、isBeforeDate

接收两个日期类型的参数，判断前者的日期是否早于后者的日期。​

const isBeforeDate = (dateA, dateB) => dateA < dateB;


isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true

63、isBoolean

此段代码用于检查参数是否为布尔类型。​

const isBoolean = val => typeof val === 'boolean';


isBoolean(null); // false
isBoolean(false); // true

本文完〜