分享12个常用的JS代码片段

转自：微点阅读  https://www.weidianyuedu.com

JavaScript每年都在变得越来越占主导地位，而且没人知道最终会取代它的是什么。" 如果你没有充分的理由学习一种新语言（例如你的工作要求你维护非JavaScript代码库），那么我的建议是着重于提高JavaScript的水平。”听我说这么多，你是不是很激动呢。这里有84个常用的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方法切出一部分。