JavaScript之underscore_动力节点Java学院整理

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']
赞 (0)

相关推荐

  • 微信小程序使用第三方库Underscore.js步骤详解

    微信小程序使用第三方库Underscore.js步骤详解

    前言 Underscore.js是一个很精干的库,压缩后只有4KB.Underscore 提供了100多个函数,包括常用的:map.filter.invoke - 当然还有更多专业的辅助函数,如:函数绑定.JavaScript 模板功能.创建快速索引.强类型相等测试等等.弥补了标准库的不足,大大方便了JavaScript的编程. 微信小程序无法直接使用require( 'underscore.js' )进行调用. 微信小程序模块化机制 微信小程序运行环境支持CommoJS模块化,通过module

  • underscore之Collections_动力节点Java学院整理

    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 mi

  • Underscore之Array_动力节点Java学院整理

    underscore为Array提供了许多工具类方法,可以更方便快捷地操作Array. first / last 顾名思义,这两个函数分别取第一个和最后一个元素: 'use strict'; var arr = [2, 4, 6, 8]; _.first(arr); // 2 _.last(arr); // 8 flatten flatten()接收一个Array,无论这个Array里面嵌套了多少个Array,flatten()最后都把它们变成一个一维数组: 'use strict'; _.fl

  • Underscore源码分析

    Underscore源码分析

    几年前就有人说javascript是最被低估一种编程语言,自从nodejs出来后,全端(All Stack/Full Stack)概念日渐兴起,现在恐怕没人再敢低估它了.javascrip是一种类C的语言,有C语言基础就能大体理解javascript的代码,但是作为一种脚本语言,javascript的灵活性是C所远远不及的,这也会造成学习上的一些困难. 一.集合  1.首先是几个迭代的方法. _.each = _.forEach = function(obj, iteratee, context

  • Underscore.js 的模板功能介绍与应用

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能. 无论你写一段小的js代码,还是写一个大型的HTML5应用,underscore都能帮上忙.目前,underscore已经被广泛使用,例如,backbone.js唯一强依赖的库就是underscore.js. 今天主要讨论Underscore 的前端模板功能.它的模板功能和前一篇介绍的javascript前端模板是一样的.对数据的处理

  • 深入解析Backbone.js框架的依赖库Underscore.js的作用

    backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素.处理元素的基本操作. 注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架. Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象就变为Underscore对象,也可以通过Underscore对象的Value()方法获取原生js对象中的数据.(jquery通过$()方法得到Jquery对象) Undersc

  • Underscore.js 1.3.3 中文注释翻译说明

    // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is freely distributable under the MIT license. // Portions of Underscore are inspired or borrowed from Prototype, // Oliver Steele's Functional, and John Resig'

  • underscore之function_动力节点Java学院整理

    因为underscore本来就是为了充分发挥JavaScript的函数式编程特性,所以也提供了大量JavaScript本身没有的高阶函数. bind bind()有什么用?我们先看一个常见的错误用法: 'use strict'; console.log('Hello, world!'); // 输出'Hello, world!' var log = console.log; log('Hello, world!'); // Uncaught TypeError: Illegal invocati

  • underscore之Chaining_动力节点Java学院整理

    还记得jQuery支持链式调用吗? $('a').attr('target', '_blank') .append(' <i class="uk-icon-external-link"></i>') .click(function () {}); 如果我们有一组操作,用underscore提供的函数,写出来像这样: _.filter(_.map([1, 4, 9, 16, 25], Math.sqrt), x => x % 2 === 1); // [1,

  • JavaScript之underscore_动力节点Java学院整理

    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()方法

  • JavaScript之DOM_动力节点Java学院整理

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容: 遍历:遍历该DOM节点下的子节点,以便进行进一步操作: 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点: 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点. 在操作一个DO

  • JavaScript之json_动力节点Java学院整理

    JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.XML本身不算复杂,但是,加上DTD.XSD.XPath.XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范. 终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深

  • JavaScript简介_动力节点Java学院整理

    JavaScript简介_动力节点Java学院整理

    JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言.使用它的目的是与HTML超文本标记语言实现在一个Web页面中连接多个对象,与Web客户交互作用.javascript的出现使得网页和用户之间实现了一种实时性的,动态性的,交互性的关系,使网页包含更多活跃的元素和更加精彩的内容. 同时javascript短小精悍,在客户机上执行,大大提高了网页的浏览速度和交互能力. 再者,我们看一下javascript的特点: 1,JavaScript是

  • JavaScript标准对象_动力节点Java学院整理

    在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // 'number' typeof NaN; // 'number' typeof 'str'; // 'string' typeof true; // 'boolean' typeof undefined; // 'undefined' typeof Math.abs; // 'function' ty

  • JavaScript闭包_动力节点Java学院整理

    函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个对Array的求和.通常情况下,求和的函数是这样定义的: function sum(arr) { return arr.reduce(function (x, y) { return x + y; }); } sum([1, 2, 3, 4, 5]); // 15 但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数! function lazy

  • JavaScript创建对象_动力节点Java学院整理

    JavaScript创建对象_动力节点Java学院整理

    JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象. 当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined. 例如,创建一个Array对象: var arr = [1, 2, 3]; 其原型链是: arr ----> Array.prototype ----> Object.proto

  • JavaScript之Date_动力节点Java学院整理

    在JavaScript中,Date对象用来表示日期和时间. 要获取系统当前时间,用: var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST) now.getFullYear(); // 2015, 年份 now.getMonth(); // 5, 月份,注意月份范围是0~11,5表示六月 now.getDate(); // 24, 表示24号 now.getDay(); // 3, 表示星期三 now.getHo

  • JavaScript之iterable_动力节点Java学院整理

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterable类型的集合可以通过新的for ... of循环来遍历. for ... of循环是ES6引入的新的语法,请测试你的浏览器是否支持: 'use strict'; var a = [1, 2, 3]; for (var x of a) { } alert('你的浏览器支持for ... of'); 用

  • JavaScript之RegExp_动力节点Java学院整理

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦,而且代码难以复用. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它"匹配"了,否则,该字符串就是不合法的. 所以我们判断一个字符串是否是合法的Email的方法是: 1.创建一个匹配Email的正则表达

随机推荐