超实用的 JavaScript Utility 实用函数代码片段

Escape regular expression (转义正则表达式)

使用 replace() 来转义特殊字符。

JavaScript 代码:

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

Get native type of value (获取原生类型的值)

返回值小写的构造函数名称，如果值为 undefined 或 null ，则返回 “undefined” 或 “null”。

JavaScript 代码:

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

Hexcode to RGB (Hex转RGB)

使用Array.slice() , Array.map() 和 match() 将十六进制颜色代码(前缀为#)转换为RGB值的字符串。

JavaScript 代码:

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

Is array(是否为数组)

使用 Array.isArray() 来检查一个值是否为一个数组。

JavaScript 代码:

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

Is boolean(是否为布尔值)

使用 typeof 来检查一个值是否为一个布尔值。

JavaScript 代码:

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

Is function(是否为函数)

使用 typeof 来检查一个值是否为一个函数。

扫描二维码关注公众号，回复： 2290896 查看本文章

JavaScript 代码:

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

Is number(是否为数字)

使用 typeof 来检查一个值是否为一个数字。

JavaScript 代码:

1. const isNumber = val => typeof val === 'number';
2. // isNumber('1') -> false
3. // isNumber(1) -> true

Is string(是否为字符串)

使用 typeof 来检查一个值是否为一个字符串。

JavaScript 代码:

1. const isString = val => typeof val === 'string';
2. // isString(10) -> false
3. // isString('10') -> true

Is symbol(是否为symbol)

使用 typeof 来检查一个值是否为一个 symbol 。

JavaScript 代码:

1. const isSymbol = val => typeof val === 'symbol';
2. // isSymbol('x') -> false
3. // isSymbol(Symbol('x')) -> true

Measure time taken by function (计算函数执行所花费的时间)

使用 console.time() 和 console.timeEnd() 来测量开始和结束时间之间的差，以确定回调执行的时间。

JavaScript 代码:

1. const timeTaken = callback => {
2. console.time('timeTaken');
3. const r = callback();
4. console.timeEnd('timeTaken');
5. return r;
6. };
7. // timeTaken(() => Math.pow(2, 10)) -> 1024
8. // (logged): timeTaken: 0.02099609375ms

Number to array of digits (将数字转化为整数数组)

将数字转换为字符串，使用 split() 来转换构建一个数组。 使用 Array.map() 和 parseInt() 将每个值转换为整数。

JavaScript 代码:

1. const digitize = n => (''+n).split('').map(i => parseInt(i));
2. // digitize(2334) -> [2, 3, 3, 4]

Ordinal suffix of number (数字序号的后缀)

使用模运算符(%)来查找各位和十位的值。查找哪些序号模式数字匹配。如果数字在十位模式中找到，请使用十位的序数。

JavaScript 代码:

1. const toOrdinalSuffix = num => {
2. const int = parseInt(num), digits = [(int % 10), (int % 100)],
3. ordinals = ['st', 'nd', 'rd', 'th'], oPattern = [1, 2, 3, 4],
4. tPattern = [11, 12, 13, 14, 15, 16, 17, 18, 19];
5. return oPattern.includes(digits[0]) && !tPattern.includes(digits[1]) ? int + ordinals[digits[0] - 1] : int + ordinals[3];
6. };
7. // toOrdinalSuffix("123") -> "123rd"

Random integer in range (在指定的范围内生成一个随机整数)

使用 Math.random() 生成一个随机数并将其映射到所需的范围，使用 Math.floor() 使其成为一个整数。

JavaScript 代码:

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

Random number in range (在指定的范围内生成一个随机数)

使用 Math.random() 生成一个随机值，使用乘法将其映射到所需的范围。

JavaScript 代码:

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

RGB to hexadecimal(RGB转hex)

使用按位左移运算符(<<)和 toString(16) 将给定的RGB参数转换为十六进制字符串，然后使用 padStart(6,'0') 得到一个6位的十六进制值。

JavaScript 代码:

1. const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
2. // rgbToHex(255, 165, 1) -> 'ffa501'

Swap values of two variables (交换两个变量的值)

使用数组解构来交换两个变量之间的值。

JavaScript 代码:

1. [varA, varB] = [varB, varA];
2. // [x, y] = [y, x]

URL parameters(网址参数)

通过适当的正则表达式，使用 match() 来获得所有的键值对， Array.reduce() 来映射和组合成一个单一的对象。将 location.search 作为参数传递给当前 url。

JavaScript 代码:

1. const getUrlParameters = url =>
2. url.match(/([^?=&]+)(=([^&]*))/g).reduce(
3. (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
4. );
5. // getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}

UUID generator (UUID生成器)

使用 crypto API 生成符一个 UUID，符合RFC4122 版本 4 。

JavaScript 代码:

1. const uuid = _ =>
2. ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
3. (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
4. );
5. // uuid() -> '7982fcfe-5721-4632-bede-6000885be57d'

Validate email(邮箱验证)

使用正则表达式来检查电子邮件是否有效。如果电子邮件有效，则返回 true ，否则返回false 。

JavaScript 代码:

1. const validateEmail = str =>
2. /^(([^<>()\[\]\\.,;:\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);
3. // validateEmail([email protected]) -> true

Validate number (数字验证)

使用 !isNaN 和 parseFloat() 来检查参数是否是一个数字。使用 isFinite() 来检查数字是否是有限数。使用 Number() 来检查强制转换是否成立。

JavaScript 代码:

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

Value or default (值或者默认值)

返回 value ，如果传递的值是 falsy ，则返回默认值。

JavaScript 代码:

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