JavaScript 是目前最流行的编程语言之一，正如大多数人所说：“如果你想学一门编程语言，请学JavaScript。”FreeCodeCamp的创始人 Quincy Larson 在最近的一次采访中被问到哪种语言开发人员应该首先学习。他回答：“ JavaScript。”：“软件正在吞噬世界，JavaScript正在吞噬软件。JavaScript每年都在变得越来越占主导地位，而且没人知道最终会取代它的是什么。" 如果你没有充分的理由学习一种新语言（例如你的工作要求你维护非JavaScript代码库），那么我的建议是着重于提高JavaScript的水平。”听我说这么多，你是不是很激动呢。这里有11个常用的JS代码片段，方便你学习和使用。

1、all

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

const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // trueall([1, 2, 3]); // true

2、allEqual

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

const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // falseallEqual([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]); // 2average(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); // 5averageBy([{ 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

总结
今天的内容就和大家分享到这里，感谢你的阅读，如果你喜欢我今天的分享的话，对你也有所帮助的话，欢迎前往六星社区了解更多相关技术内容咨询！

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。