127个经常使用的JS代码片断,每段代码花30秒就能看懂(上)

JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“若是你想学一门编程语言,请学JavaScript。”正则表达式

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

“软件正在吞噬世界,JavaScript正在吞噬软件。JavaScript每一年都在变得愈来愈占主导地位,并且没人知道最终会取代它的是什么。" 若是您没有充分的理由学习一种新语言(例如您的工做要求您维护非JavaScript代码库),那么个人建议是着重于提升JavaScript的水平。”

听我说这么多,你是否是很激动呢。这里有127个经常使用的JS代码片断,方便你学习和使用。api

一、all

若是数组全部元素知足函数条件,则返回true。调用时,若是省略第二个参数,则默认传递布尔值。数组

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

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

二、allEqual

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

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

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

三、approximatelyEqual

此代码示例检查两个数字是否近似相等,差别值能够经过传参的形式进行设置网站

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

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

四、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"'

五、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');

六、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 = []

七、average

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

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

八、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

九、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'] ]

十、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'] ]

十一、bottomVisible

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

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

bottomVisible(); // true

十二、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

1三、capitalize

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

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

capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'FooBar'

1四、capitalizeEveryWord

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

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

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

1五、castArray

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

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

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

1六、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 ]

1七、countOccurrences

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

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

1八、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

1九、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

2一、decapitalize

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

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

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

小节

今天的内容就和你们分享到这里,感谢你的阅读,若是你喜欢个人分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享剩余的代码片断,欢迎持续关注。

本文原做者:Fatos Morina

来源网站:medium

注 :非直译

往期

阿里、腾讯、头条、美团、多家企业再次延长上班时间

驾轻就熟的Vue高级技巧

相关文章
相关标签/搜索