Underscore.JS - 快速指南
Underscore.JS - 概述
Underscore.JS 是一个流行的基于 javascript 的库,它提供了 100 多个函数来促进 Web 开发。它提供了诸如 map、filter、invoke 以及函数绑定、javascript 模板、深度相等性检查、创建索引等辅助函数。Underscore.JS 可以直接在浏览器中使用,也可以与 Node.js 一起使用。
使用 JavaScript 处理对象可能非常具有挑战性,特别是如果您需要对它们进行大量操作时。 Underscore 具有许多功能,可简化您处理对象的工作。
Underscore.JS 是一个开源项目,您可以轻松地为库做出贡献并以插件的形式添加功能,并将其在 GitHub 和 Node.js 中提供。
功能
让我们详细了解 Underscore − 提供的所有重要功能
集合
Underscore.JS 为集合提供了各种函数,例如 each、map、reduce,用于对集合的每个项目应用操作。它提供了 groupBy、countBy、max、min 等方法来处理集合并简化许多任务。
数组
Underscore.JS 为数组提供了各种函数,如迭代和处理数组,如 first、initial、lastIndexOf、intersection、difference 等。
函数
Underscore.JS 提供 bind、delay、before、after 等函数。
对象
Underscore.JS 提供操作对象、映射对象和比较对象的函数。例如,keys、values、extends、extendsOwn、isEqual、isEmpty 等。
实用程序
Underscore.JS 提供各种实用程序方法,如 noConflict、random、iteratee、escape 等。
链接
Underscore.JS 还提供链接方法,如 chain、value。
在后续章节中,我们将介绍 Underscore.JS 的重要功能
Underscore.JS - 环境设置
在本章中,您将详细了解如何在本地计算机上设置 Underscore.JS 的工作环境。在开始使用 Underscore.JS 之前,您需要具有对该库的访问权限。您可以通过以下任何一种方法访问其文件 −
方法 1:在浏览器中使用 Underscore.JS 文件
在此方法中,我们将需要从其官方网站获取 Underscore.JS 文件,并将直接在浏览器中使用它。
步骤 1
首先,请访问 Underscore.JS 的官方网站 https://underscorejs.org/。
请注意,有一个可用的下载选项,可为您提供最新的 underscore-min.js 文件 UMD (Production)。右键单击链接并选择另存为。请注意,该文件在压缩和未压缩两种情况下均可用。
步骤 2
现在,在 script 标签内包含 underscore-min.js,并开始使用 Underscore.JS。为此,您可以使用下面给出的代码 −
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
为了更好地理解,这里给出了一个工作示例及其输出 −
Example
<html> <head> <title>Underscore.JS - Working Example</title> <script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script> <style> div { border: solid 1px #ccc; padding:10px; font-family: "Segoe UI",Arial,sans-serif; width: 50%; } </style> </head> <body> <div style = "font-size:25px" id = "list"> </div> <script type = "text/JavaScript"> var numbers = [1, 2, 3, 4]; var listOfNumbers = ''; _.each(numbers, function(x) { listOfNumbers += x + ' ' }); document.getElementById("list").innerHTML = listOfNumbers; </script> </body> </html>
输出
方法 2:使用 Node.js
如果您选择此方法,请确保您的系统上安装了 Node.js 和 npm。您可以使用以下命令安装 Underscore.JS −
npm install underscore
成功安装 Underscore.JS 后,您可以观察到以下输出 −
+ underscore@1.10.2 added 1 package from 1 contributor and audited 1 package in 6.331s found 0 vulnerabilities
现在,要测试 Underscore.JS 是否能与 Node.js 很好地配合使用,请创建文件 tester.js 并将以下代码添加到其中 −
var _ = require('underscore'); var numbers = [1, 2, 3, 4]; var listOfNumbers = ''; _.each(numbers, function(x) { listOfNumbers += x + ' ' }); console.log(listOfNumbers);
将上述程序保存在 tester.js 中。以下命令用于编译和执行此程序。
命令
\>node tester.js
输出
1 2 3 4
Underscore.JS - 迭代集合
Underscore.JS 有许多易于使用的方法,有助于迭代集合。本章将详细讨论这些方法。
Underscore.JS 提供了各种方法来迭代集合,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | each
_.each(list, iteratee, [context]) |
2 | map
_.map(list, iteratee, [context]) |
3 | reduce
_.reduce(list, iteratee, [memo], [context]) |
4 | reduceRight
_.reduceRight(list, iteratee, [memo], [context]) |
5 | find
_.find(list, predicate, [context]) |
6 | filter
_.filter(list, predicate, [context]) |
7 | where
_.where(list, properties) |
8 | findWhere
_.findWhere(list, properties) |
9 | reject
_.reject(list, predicate, [context]) |
10 | every
_.every(list, [predicate], [context]) |
11 | some
_.some(list, [predicate], [context]) |
Underscore.JS - 处理集合
Underscore.JS 有许多易于使用的方法,有助于处理集合。本章将详细讨论这些方法。
Underscore.JS 提供了各种方法来处理集合,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | contains
_.contains(list, value, [fromIndex]) |
2 | invoke
_.invoke(list, methodName, *arguments) |
3 | pluck
_.pluck(list, propertyName) |
4 | max
_.max(list, [iteratee], [context]) |
5 | min
_.min(list, [iteratee], [context]) |
6 | sortBy
_.sortBy(list, iteratee, [context]) |
7 | groupBy
_.groupBy(list, iteratee, [context]) |
8 | indexBy
_.indexBy(list, iteratee, [context]) |
9 | countBy
_.countBy(list, iteratee, [context]) |
10 | shuffle
_.shuffle(list) |
11 | sample
_.sample(list, [n]) |
12 | toArray
_.toArray(list) |
13 | size
_.size(list) |
14 | partition
_.partition(list, predicate) |
15 | compact
_.compact(list) |
Underscore.JS - 迭代数组
Underscore.JS 有许多易于使用的方法,有助于迭代数组。本章将详细讨论这些方法。
Underscore.JS 提供了各种迭代数组的方法,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | first
_.first(array, [n]) |
2 | initial
_.initial(array, [n]) |
3 | last
_.last(array, [n]) |
4 | rest
_.rest(array, [index]) |
5 | indexOf
_.indexOf(array, value, [isSorted]) |
6 | lastIndexOf
_.lastIndexOf(array, value, [fromIndex]) |
7 | sortedIndex
_.sortedIndex(array, value, [iteratee], [context]) |
8 | findIndex
_.findIndex(array, predicate, [context]) |
9 | findLastIndex
_.findLastIndex(array, predicate, [context]) |
Underscore.JS - 处理数组
Underscore.JS 有许多易于使用的方法,有助于处理数组。本章将详细讨论这些方法。
Underscore.JS 提供了各种方法来处理数组,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | flatten
_.flatten(array, [shallow]) |
2 | without
_.without(array, *values) |
3 | union
_.union(*arrays) |
4 | intersection
_.intersection(*arrays) |
5 | difference
_.difference(array, *others) |
6 | uniq
_.uniq(array, [isSorted], [iteratee]) |
7 | zip
_.zip(*arrays) |
8 | unzip
_.unzip(array) |
9 | object
_.object(list, [values]) |
10 | chunk
_.chunk(array, length) |
11 | range
_.range([start], stop, [step]) |
Underscore.JS - 函数
Underscore.JS 有许多易于使用的方法,有助于处理函数。本章将详细讨论这些方法。
Underscore.JS 提供了各种方法来处理函数,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | bind
_.bind(function, object, *arguments) |
2 | partial
_.partial(function, *arguments) |
3 | memoize
_.memoize(function, [hashFunction]) |
4 | delay
_.delay(function, wait, *arguments) |
5 | once
_.once(function) |
6 | before
_.before(count, function) |
7 | wrap
_.wrap(function, wrapper) |
8 | negate
_.negate(predicate) |
9 | compose
_.compose(*functions) |
Underscore.JS - 映射对象
Underscore.JS 有许多易于使用的方法,有助于映射对象。本章将详细讨论这些方法。
Underscore.JS 提供了各种方法来处理对象映射,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | keys
_.keys(object) |
2 | allKeys
_.allKeys(object) |
3 | values
_.values(object) |
4 | mapObject
_.mapObject(object, iteratee, [context]) |
5 | pairs
_.pairs(object) |
6 | invert
_.invert(object) |
7 | create
_.create(prototype, props) |
8 | functions
_.functions(object) |
9 | findKey
_.findKey(object, predicate, [context]) |
Underscore.JS - 更新对象
Underscore.JS 有许多易于使用的方法,可帮助更新对象。本章将详细讨论这些方法。
Underscore.JS 提供各种方法来处理对象更新,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | extend
_.extend(destination, *sources) |
2 | pick
_.pick(object, *keys) |
3 | omit
_.omit(object, *keys) |
4 | defaults
_.defaults(object, *defaults) |
5 | clone
_.clone(object) |
6 | tap
_.tap(object, interceptor) |
7 | has
_.has(object, key) |
8 | property
_.property(path) |
9 | propertyOf
_.propertyOf(object) |
Underscore.JS - 比较对象
Underscore.JS 有许多易于使用的方法,有助于比较对象。本章将详细讨论这些方法。
Underscore.JS 提供了各种方法来处理对象比较,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | matcher
_.matcher(attrs) |
2 | isEqual
_.isEqual(object, other) |
3 | isMatch
_.isMatch(object, properties) |
4 | isEmpty
_.isEmpty(object) |
5 | isArray
_.isArray(object) |
6 | isObject
_.isObject(value) |
7 | isArguments
_.isArguments(object) |
8 | isFunction
_.isFunction(object) |
9 | isString
_.isString(object) |
10 | isNumber
_.isNumber(object) |
11 | isFinite
_.isFinite(object) |
12 | isBoolean
_.isBoolean(object) |
13 | isDate
_.isDate(object) |
14 | isRegExp
_.isRegExp(object) |
15 | isError
_.isError(object) |
16 | isSymbol
_.isSymbol(object) |
17 | isMap
_.isMap(object) |
18 | isWeakMap
_.isWeakMap(object) |
19 | isSet
_.isSet(object) |
20 | isWeakSet
_.isWeakSet(object) |
21 | isNaN
_.isNaN(object) |
22 | isNull
_.isNull(object) |
23 | isUndefined
_.isUndefined(value) |
Underscore.JS - 实用程序
Underscore.JS 有许多易于使用的实用方法。本章将详细讨论它们。
Underscore.JS 提供各种实用方法,如下所示 −
Sr.No. | 方法和语法 |
---|---|
1 | identity
_.identity(value) |
2 | constant
_.constant(value) |
3 | noop
_.noop() |
4 | times
_.times(n, iteratee, [context]) |
5 | random
_.random(min, max) |
6 | mixin
_.mixin(object) |
7 | iteratee
_.iteratee(value, [context]) |
8 | uniqueId
_.uniqueId([prefix]) |
9 | escape
_.escape(string) |
10 | unescape
_.unescape(string) |
11 | result
_.result(object, property, [defaultValue]) |
12 | now
_.now() |
13 | template
_.template(templateString, [settings]) |
Underscore.JS - 链式调用
Underscore.JS 具有创建方法链并检索其有效结果的方法。本章将详细讨论这些方法。
Underscore.JS 提供各种实用方法,如下所示 −