Underscore.JS 环境设置

Underscore.JS 是一款JavaScript库，提供了一系列函数，用于简化编写JavaScript代码过程。本文将介绍如何在项目中使用Underscore.JS，并为您提供一些使用Underscore.JS的技巧。

安装

基础安装

你可以使用以下命令来下载 Underscore：

npm install underscore

或者，你也可以在html文件中使用CDN：

<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.12.1/underscore-min.js"></script>

Typescript支持

Underscore.JS本身是没有TypeScript类型定义文件的，但是我们可以使用 DefinitelyTyped 的 @types/underscore:

npm install --save-dev @types/underscore

或者，你也可以通过 script 标签直接在 HTML 页面上添加类型定义文件：

<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.12.1/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@types/underscore"></script>

设置 Underscore 别名

为了在项目中更好地使用 underscore ，通常会给其设置一个别名，这里我们使用 _ 作为 Underscore 的别名。有两种方式可以设置 Underscore 的别名：

使用 import

import * as _ from "underscore";

// 或者
import { map, reduce } from "underscore";

全局导入

<script>
    window._ = require('underscore');
</script>

使用

一旦你成功地安装了 Underscore.js 并设置好它的别名，那么你就可以使用它的所有函数了。

使用 Underscore 进行数组操作

Underscore.js 还提供了大量的函数，用于操作数组，如 .map(), .filter(), .reduce(), .indexBy() 以及 .sortBy()。

const arr = [1, 2, 3, 4];

// 过滤：返回偶数
const filteredArr = _.filter(arr, item => item % 2 === 0);

// 映射：返回原数组每个元素的平方
const mappedArr = _.map(arr, item => item * item);

// 求和：求出原数组的和
const reducedArr = _.reduce(arr, (acc, val) => acc + val, 0);

// 根据某个字段，转换为Map
const arrObj = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }];
const indexedArr = _.indexBy(arrObj, 'id');

// 根据某个字段排序
const sortedArr = _.sortBy(arrObj, item => item.id);

链式操作

Underscore.js 还支持链式操作，你可以使用 .chain()将一个数组或对象封装为一个 Underscore 对象，通过链式调用来方便地对数据进行操作。

const arr = [1, 2, 3, 4];

const chainedResult = _(arr)
    .map(item => item * 2)
    .reject(item => item % 3 === 0)
    .value();

模板引擎

underscore 还提供了一个简单但很实用的模板引擎。你可以使用以上文的方式导入最小版本的 Underscore，然后调用 _.template() 方法创建一个模板函数。

const template = _.template("<h1><%= data %></h1>");
const rendered = template({ data: "Hello World" });

该例子会把 data 参数插入到模板中的 <h1> 标签中，并返回生成后的 HTML 字符串。

总结

通过本文，你学习了如何安装 Underscore.js 并设置开发环境，以及如何在项目中使用 Underscore.js 的一些高效技巧。Underscore.js 可以大幅度改善代码的可读性和编写效率，是常规JavaScript开发中的必备库之一。