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.org/。

可以看到有一個下載選項，它提供了最新的 underscore-min.js 檔案 UMD (生產)。右鍵單擊連結並選擇“另存為”。請注意，該檔案有壓縮和未壓縮的版本。

步驟 2

現在，在script標籤內包含underscore-min.js並開始使用 Underscore.JS。為此，您可以使用以下程式碼 -

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

這裡給出一個工作示例及其輸出，以便更好地理解 -

示例

<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 提供了多種迭代集合的方法，如下所示 -

序號	方法及語法
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()

列印頁面