极客笔记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>
用户可以在上面的代码中观察到我们已经创建了一个包含姓名和年龄的人员列表。在_.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 的各种特性。