UTILS.JS

项目地址：https://github.com/dragonir/Utils.js （持续更新中...）

项目描述

Util.js 是对常用函数的封装，方便在实际项目中使用，主要内容包含：数组类、浏览器类、日期类、函数类、数学类、媒体类、节点类、对象类、字符串类、类型检测类、正则表达式类等内容。

使用方法

引入 Bable transpiler 以保证支持 ES6

<script type="javascript/text" src="./browser.js"></script>

或引入压缩版

<script type="javascript/text" src="./browser.min.js"></script>

引入工具函数文件 Utils.js

<script type="javascript/text" src="./Utils.js"></script>

使用例子

Example 1: 通过调用 isArray() 方法来判断数值是否为数组

var arr = [];
var obj = {};
console.log(Util.isArray(arr));                   // true
console.log(Util.isArray(obj));                   // false

Example 2: 通过调用 extendHex() 方法将3位色值转换为6位色值

console.log(Util.extendHex("#03f"));              // #0033ff
console.log(Util.extendHex("05a"));               // #0055aa
console.log(Util.extendHex("#03c03c"));           // #03c03c

项目目录

|文件名 | 描述 | |:----------------------------- |:----------------------------------------| | Util.js | 工具函数主文件 | | Util.min.js | 工具函数压缩版 | | RegExp.js | 正则表达式封装 | | RegExp.min.js | 正则表达式封装压缩版 | | browser.js | ES6向后兼容 | | browser.min.js | ES6向后兼容 | | string-utils.js | 字符串工具函数（待整合） | | 00. 常用正则表达式示例-RegExp.html | 正则表达式测试演示 | | 01. 常用工具函数示例-Util-数组类.html | 数组类测试演示| | 02. 常用工具函数示例-Util-浏览器类.html | 浏览器类测试演示 | | 03. 常用工具函数示例-Util-日期类.html | 日期类测试演示| | 04. 常用工具函数示例-Util-函数类.html | 函数类测试演示 | | 05. 常用工具函数示例-Util-数学类.html | 数学类测试演示 | | 06. 常用工具函数示例-Util-媒体类.html | 媒体类测试演示 | | 07. 常用工具函数示例-Util-节点类.html | 设为首页 | | 08. 常用工具函数示例-Util-对象类.html | 对象类测试演示 | | 09. 常用工具函数示例-Util-字符串.html | 字符串测试演示| | 10. 常用工具函数示例-Util-其他实用函数.html | 其他实用函数测试演示 | | 11. 常用工具函数示例-Util-类型检测.html | 类型检测| | README.MD | 项目描述文件 | | logo.png| 项目图标 |

参考资料

感谢原作者分享了大量有用的Javascript片段,我在其基础上将其封装为一个文件方便使用。

源项目：https://github.com/Chalarangelo/30-seconds-of-code

内容目录

以下是项目具体内容以及详细注释，可通过查询找到自己需要的函数。

<a name="table-of-contents" id="table-of-contents"></a>

数组类

• arrayMax
• arrayMin
• chunk
• compact
• countOccurrences
• deepFlatten
• difference
• distinctValuesOfArray
• dropElements
• everyNth
• filterNonUnique
• flatten
• flattenDepth
• groupBy
• head
• initial
• initializeArrayWithRange
• initializeArrayWithValues
• intersection
• last
• mapObject
• nthElement
• pick
• pull
• remove
• sample
• shuffle
• similarity
• symmetricDifference
• tail
• take
• takeRight
• union
• without
• zip

浏览器

• bottomVisible
• currentURL
• elementIsVisibleInViewport
• getScrollPosition
• getURLParameters
• redirect
• scrollToTop

时间

• getDaysDiffBetweenDates
• JSONToDate
• toEnglishDate

函数

• chainAsync
• compose
• curry
• functionName
• pipe
• promisify
• runPromisesInSeries
• sleep

数学

• arrayAverage
• arraySum
• collatz
• digitize
• distance
• factorial
• fibonacci
• gcd
• hammingDistance
• isDivisible
• isEven
• lcm
• median
• palindrome
• percentile
• powerset
• randomIntegerInRange
• randomNumberInRange
• round
• standardDeviation

媒体

• speechSynthesis

节点

• JSONToFile
• readFileLines

对象

• cleanObj
• objectFromPairs
• objectToPairs
• shallowClone
• truthCheckCollection

字符串

• anagrams
• capitalize
• capitalizeEveryWord
• escapeRegExp
• fromCamelCase
• reverseString
• sortCharactersInString
• toCamelCase
• truncateString

工具

• coalesce
• coalesceFactory
• extendHex
• getType
• hexToRGB
• isArray
• isBoolean
• isFunction
• isNumber
• isString
• isSymbol
• RGBToHex
• timeTaken
• toOrdinalSuffix
• UUIDGenerator
• validateEmail
• validateNumber

数组

☝ 返回目录

arrayMax

返回数组中的最大值。

将Math.max()与扩展运算符 (...) 结合使用以获取数组中的最大值。

const arrayMax = arr => Math.max(...arr);
// arrayMax([10, 1, 5]) -> 10

☝ 返回目录

arrayMin

返回数组中的最小值。

将Math.min()与扩展运算符 (...) 结合使用以获取数组中的最小值。

const arrayMin = arr => Math.min(...arr);
// arrayMin([10, 1, 5]) -> 1

☝ 返回目录

chunk

将数组块划分为指定大小的较小数组。

使用Array.from()创建新的数组, 这符合将生成的区块数。使用Array.slice()将新数组的每个元素映射到size长度的区块。如果原始数组不能均匀拆分, 则最终的块将包含剩余的元素。

const chunk = (arr, size) =>
Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));
// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]]

☝ 返回目录

compact

从数组中移除 falsey 值。

使用Array.filter()筛选出 falsey 值 (false、null、0、""、undefined和NaN).

const compact = (arr) => arr.filter(Boolean);
// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]

☝ 返回目录

countOccurrences

计算数组中值的出现次数。

使用Array.reduce()在每次遇到数组中的特定值时递增计数器。

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

☝ 返回目录

deepFlatten

深拼合数组。

使用递归。使用Array.concat()与空数组 ([]) 和跨页运算符 (...) 来拼合数组。递归拼合作为数组的每个元素。

const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]

☝ 返回目录

difference

返回两个数组之间的差异。

从b创建Set, 然后使用Array.filter() on 只保留a b中不包含的值.

const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };
// difference([1,2,3], [1,2,4]) -> [3]

☝ 返回目录

distinctValuesOfArray

返回数组的所有不同值。

使用 ES6 Set和...rest运算符丢弃所有重复的值。

const distinctValuesOfArray = arr => [...new Set(arr)];
// distinctValuesOfArray([1,2,2,3,4,4,5]) -> [1,2,3,4,5]

☝ 返回目录

dropElements

移除数组中的元素, 直到传递的函数返回true。返回数组中的其余元素。 在数组中循环, 使用Array.shift()将数组的第一个元素除去, 直到函数的返回值为true。返回其余元素。

const dropElements = (arr, func) => {
while (arr.length > 0 && !func(arr[0])) arr.shift();
return arr;
};
// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]

☝ 返回目录

everyNth

返回数组中的每个第 n 个元素。

使用Array.filter()创建一个包含给定数组的每个第 n 个元素的新数组。

const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === 0);
// everyNth([1,2,3,4,5,6], 2) -> [ 1, 3, 5 ]

☝ 返回目录

filterNonUnique

筛选出数组中的非唯一值。

对于只包含唯一值的数组, 请使用Array.filter()。

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]

☝ 返回目录

flatten

拼合数组。

使用Array.reduce()获取数组中的所有元素和concat()以拼合它们。

const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
// flatten([1,[2],3,4]) -> [1,2,3,4]

☝ 返回目录

flattenDepth

将数组向上拼合到指定深度。

使用递归, 递减depth, 每层深度为1。使用Array.reduce()和Array.concat()来合并元素或数组。基本情况下, 对于等于1的depth停止递归。省略第二个元素,depth仅拼合到1的深度 (单个拼合)。

const flattenDepth = (arr, depth = 1) =>
depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), [])
: arr.reduce((a, v) => a.concat(v), []);
// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]

☝ 返回目录

groupby

根据给定函数对数组元素进行分组。

使用Array.map()将数组的值映射到函数或属性名。使用Array.reduce()创建一个对象, 其中的键是从映射的结果生成的。

const groupBy = (arr, func) =>
arr.map(typeof func === 'function' ? func : val => val[func])
.reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {});
// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]}
// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}

☝ 返回目录

head

返回列表的头。

使用arr[0]可返回传递的数组的第一个元素。

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

☝ 返回目录

initial

返回除最后一个数组之外的所有元素。

使用 "arr.slice(0,-1)" 返回数组的最后一个元素。

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

☝ 返回目录

initializeArrayWithRange

初始化包含指定范围内的数字的数组。

使用Array(end-start)创建所需长度的数组Array.map()以填充区