underscore总结(一)

最新推荐文章于 2020-08-04 11:37:39 发布

转载最新推荐文章于 2020-08-04 11:37:39 发布 · 324 阅读

试用期技术整理专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何利用Underscore库扩展JavaScript的函数式编程能力，通过实例展示了如何对Array和Object进行map和filter操作，使代码更加简洁易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面我们已经讲过了，JavaScript是函数式编程语言，支持高阶函数和闭包。函数式编程非常强大，可以写出非常简洁的代码。例如Array的map()和filter()方法：

'use strict';
var a1 = [1, 4, 9, 16];
var a2 = a1.map(Math.sqrt); // [1, 2, 3, 4]
var a3 = a2.filter((x) => { return x % 2 === 0; }); // [2, 4]

现在问题来了，Array有map()和filter()方法，可是Object没有这些方法。此外，低版本的浏览器例如IE6～8也没有这些方法，怎么办？

方法一，自己把这些方法添加到Array.prototype中，然后给Object.prototype也加上mapObject()等类似的方法。

方法二，直接找一个成熟可靠的第三方开源库，使用统一的函数来实现map()、filter()这些操作。

我们采用方法二，选择的第三方库就是underscore。

正如jQuery统一了不同浏览器之间的DOM操作的差异，让我们可以简单地对DOM进行操作，underscore则提供了一套完善的函数式编程的接口，让我们更方便地在JavaScript中实现函数式编程。

jQuery在加载时，会把自身绑定到唯一的全局变量$上，underscore与其类似，会把自身绑定到唯一的全局变量_上，这也是为啥它的名字叫underscore的原因。

用underscore实现map()操作如下：

'use strict';
_.map([1, 2, 3], (x) => x * x); // [1, 4, 9]
咋一看比直接用Array.map()要麻烦一点，可是underscore的map()还可以作用于Object：

'use strict';
_.map({ a: 1, b: 2, c: 3 }, (v, k) => k + '=' + v); // ['a=1', 'b=2', 'c=3']

underscore为集合类对象提供了一致的接口。集合类是指Array和Object，暂不支持Map和Set。

map/filter
和Array的map()与filter()类似，但是underscore的map()和filter()可以作用于Object。当作用于Object时，传入的函数为function (value, key)，第一个参数接收value，第二个参数接收key：

'use strict';

var obj = {
    name: 'bob',
    school: 'No.1 middle school',
    address: 'xueyuan road'
};


var upper = _.map(obj, function (value, key) {
    return ???;
});

为啥对Object作map()操作的返回结果是Array？应该是Object才合理啊！把.map换成.mapObject再试试