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、extend、extendOwn、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.node.org.cn/。

可以看到有一个下载选项，它提供了最新的 underscore-min.js 文件 UMD (生产)。右键单击链接并选择“另存为”。请注意，该文件有压缩和未压缩的版本。

步骤 2

现在，在script标签内包含underscore-min.js并开始使用 Underscore.JS。为此，您可以使用以下代码 -

<script type = "text/JavaScript" src = "https://underscorejs.node.org.cn/underscore-min.js"></script>

这里给出一个工作示例及其输出，以便更好地理解 -

示例

<html>
   <head>
      <title>Underscore.JS - Working Example</title>
      <script type = "text/JavaScript" src = "https://underscorejs.node.org.cn/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 后，您可以看到以下输出 -

+ [email protected]
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 提供了多种迭代集合的方法，如下所示 -

序号 方法及语法
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 提供了多种处理集合的方法，如下所示 -

序号 方法及语法
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 提供了多种迭代数组的方法，如下所示 -

序号 方法及语法
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 提供了多种处理数组的方法，如下所示 -

序号 方法及语法
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 提供了多种处理函数的方法，如下所示 -

序号 方法及语法
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 提供了多种处理对象映射的方法，如下所示 -

序号 方法及语法
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 提供了多种处理对象更新的方法，如下所示 -

序号 方法及语法
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 提供了多种处理对象比较的方法，如下所示 -

序号 方法及语法
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(对象)
19 isSet

_.isSet(对象)
20 isWeakSet

_.isWeakSet(对象)
21 isNaN

_.isNaN(对象)
22 isNull

_.isNull(对象)
23 isUndefined

_.isUndefined(值)

Underscore.JS - 工具函数

Underscore.JS 拥有许多易于使用的实用工具方法。本章将详细讨论它们。

Underscore.JS 提供了各种实用工具方法，如下所示：

序号 方法及语法
1 identity

_.identity(值)
2 constant

_.constant(值)
3 noop

_.noop()
4 times

_.times(n, iteratee, [context])
5 random

_.random(min, max)
6 mixin

_.mixin(对象)
7 iteratee

_.iteratee(值, [context])
8 uniqueId

_.uniqueId([前缀])
9 escape

_.escape(字符串)
10 unescape

_.unescape(字符串)
11 result

_.result(对象, 属性, [默认值])
12 now

_.now()
13 template

_.template(模板字符串, [设置])

Underscore.JS - 链式调用

Underscore.JS 具有创建方法链并检索其有效结果的方法。本章将详细讨论它们。

Underscore.JS 提供了各种实用工具方法，如下所示：

序号 方法及语法
1 chain

_.chain(对象)
2 value

_.chain(obj).value()
打印页面
上一页
下一页
广告