資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Underscore.js 的特性
Underscore.js 是一個輕量級的庫，相容所有主流瀏覽器以及 Node.js。在處理大量資料操作的專案中，它非常有用，因為它提供了許多強大的工具來處理 JavaScript 中的陣列和物件。
Underscore.JS 是一個流行的實用程式庫；許多其他 JavaScript 庫和框架，如 Backbone.js、AngularJS 和 React.js，都將其用作依賴項。
在討論其特性之前，您可以訪問 Underscore.js 的官方網站 (http://underscorejs.org/) 並下載庫的壓縮版本（underscore-min.js）。我們將在 <script> 標籤的“src”屬性中設定此版本的路徑。
語法
以下是執行相同操作的語法。
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script> <script type = "text/JavaScript"> //code here </script>
我們將在下面的示例中使用它。
讓我們使用不同的示例來了解underscore.js 的各種特性。
迭代集合
處理集合
陣列
物件
實用程式
鏈式呼叫
迭代集合
Underscore.js 有許多方法，如 map、each、find、filter、reduce、reduceRight、reject、every、some、where 和 findWhere，這些方法有助於迭代集合。
示例
在下面的示例中，我們將瞭解_.where() 方法的使用。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Iterating Collections </h2>
<div id = "output">
</div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
var people = [
{name: "Om", age: 23},
{name: "Shuman", age: 23},
{name: "Vivek", age: 24}
];
output.innerHTML = _.where(people, {age: 23});
</script>
</body>
</html>
使用者可以在上面的程式碼中觀察到，我們建立了一個包含 3 個人的列表，其中包含姓名和年齡。在 _.where() 方法內部，我們傳遞該列表和 age: 23 作為引數來搜尋年齡為 23 的人。我們有兩個年齡為 23 的人。因此，我們在輸出中獲得兩個物件。
處理集合
Underscore.js 提供了諸如 invoke、contains、max、min、pluck、shuffle、sample、toArray、size、partition 和 compact 等方法，這些方法有助於處理集合。
示例
在下面的示例中，我們將瞭解 _.shuffle() 方法。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Processing Collections </h2>
<div id = "output">
</div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
output.innerHTML = _.shuffle([1, 2, 3, 4, 5, 6, 7]);
</script>
</body>
</html>
使用者可以在上面的程式碼中觀察到，我們使用 _.shuffle() 方法對包含 1 到 7 的數字的列表進行了洗牌。
陣列
Underscore.js 提供了諸如 first、initial、last、rest、indexOf、lastIndexOf、sortedIndex、findIndex 和 findLastIndex 等方法，這些方法有助於迭代陣列。它還具有諸如 union、intersection、difference、uniq、flatten、without、zip、unzip、object、range、chunk 等方法，這些方法有助於處理陣列。
示例
在下面的示例中，我們將瞭解 _.without() 方法。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Arrays </h2>
<div id="output">
</div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
output.innerHTML = _.without([1, 2, 3, 4, 5], 2, 5);
</script>
</body>
</html>
在上面的示例中，可以注意到，使用 _.without() 方法，我們從數字列表中排除了 2 和 5。
函式
Underscore.js 提供了諸如 memoize、partial、bind、delay、before、once、negate、compose 和 wrap 等方法，這些方法有助於處理函式。
示例
在下面的示例中，我們將瞭解 _.bind() 方法。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Functions </h2>
<div id="output"> </div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
let obj = {
id: 1,
name: "John"
};
let ref = _.bind(
function print_message(){
output.innerHTML = "Hey " +this.name+ "! How are you?";
}
, obj);
ref();
</script>
</body>
</html>
使用者可以在上面的程式碼中觀察到，使用 _.bind() 方法，我們用傳遞的物件的引用替換了函式中 this 的出現。
物件
Underscore.js 提供了諸如 keys、allKeys、findKey、values、pairs、invert、mapObject、functions、create 等方法，這些方法有助於對映物件。它具有諸如 pick、omit、extends、defaults、tap、has、clone、property、propertyOf 等方法，這些方法有助於更新物件。它還提供了諸如 matcher、isEqual、isEmpty、isArray、isString、isNumber、isRegExp、isMap、isUndefined、isError 等方法，這些方法有助於比較物件。
示例
在下面的示例中，我們將瞭解 _.keys()、_.pick()、_.isString() 和 _.isObject() 方法。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Objects </h2>
<div id="output"> </div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
let obj = {
name: "Peter",
rollNo: 5
};
output.innerHTML = "keys: " + _.keys(obj) + "<br>";
output.innerHTML += "pick: " + _.pick(obj, "name").name + "<br>";
output.innerHTML += "is String: " + _.isString(obj) + "<br>";
output.innerHTML += "is Object: " + _.isObject(obj);
</script>
</body>
</html>
上面給出的示例展示了使用不同方法處理與物件相關的操作。
實用程式
Underscore.js 具有不同的實用程式方法，例如 constant、noop、identity、random、mixin、times、iterate、uniqueId、escape、unescape、template、now 和 result。
示例
在下面的示例中，我們將瞭解 _.random() 方法。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Utilities </h2>
<div id="output"></div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
//Get a random number between 5 and 20
output.innerHTML = _.random(5, 20) + "<br>";
output.innerHTML += _.random(5, 20) + "<br>";
//Get a random number between 0 and 10
output.innerHTML += _.random(10) + "<br>";
</script>
</body>
</html>
在給出的示例中，可以觀察到我們正在獲取一定範圍內的隨機數，該範圍作為引數給出。
鏈式呼叫
Underscore.JS 有 _.chain(object) 和 _.chain(object).value() 等方法。
示例
在下面的示例中，我們將瞭解 _.chain(object).value() 方法。
<html>
<head>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
</head>
<body>
<h2> Chaining </h2>
<div id="output"></div>
<script type = "text/JavaScript">
let output = document.getElementById("output");
output.innerHTML = "maximum value: " + _.chain([1, 4, 2, 8, 3, 6]).max().value();
</script>
</body>
</html>
在上面給出的示例中，value() 方法返回的包裝最大值物件。
我們已經學習瞭如何在程式碼中新增下劃線以及 Underscore.JS 的各種特性。
151 次瀏覽
