深入学习JavaScript 高阶函数_基础知识

来源:脚本之家  责任编辑:小易  

找几本经典的javasscript书籍来看,把jquery的代码拿来好好分析一番,学学高手的设计思想以及js的使用技巧,而且框架里面用到了几乎所有的js函数,从中你也可以深刻的体会到这些函数的标准用法www.zgxue.com防采集请勿采集本网。

高阶函数

高阶函数英文叫 Higher-order function,它的定义很简单,就是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数

Javascript 权威指南 第五版 去买吧 基本上看完了不用看别的了 下面是推荐你看的 精通javascript jquery之父写的 javascript dom高级编程 操作dom的权威手册

也就是说高阶函数是对其他函数进行操作的函数,可以将它们作为参数传递,或者是返回它们。 简单来说,高阶函数是一个接收函数作为参数传递或者将函数作为返回值输出的函数。

深入啊?如果你把犀牛书和蝴蝶书啃完之后还是觉得不够深入的话 推荐你看看 Javascript语言精粹与编程实践 以及 javascript模式 javascript设计模式 要么你就去看webkit的源码 js语言的内容就那么

函数作为参数传递

我把我常用的javascript分为这几个方向。第一、dom树操作:也就是操作表单节点,比如:动态添加一行,动态显隐某个文本框等。第二、与后台交互的ajax,比如:动态加载一个省市区下拉列表。第三、基本数据的

JavaScript 语言中内置了一些高阶函数,比如 Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce,它们接受一个函数作为参数,并应用这个函数到列表的每一个元素。我们来看看使用它们与不使用高阶函数的方案对比。

学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了,老老实实看两遍,看完了就会对JS有一个大概的了解,整本书都围绕着一个网页效果例子展开,跟着老老实实敲一篇,敲完之后,会发现这个效果

Array.prototype.map

推荐你去一个网站 上面非常多的脚本语言,还有很多资源 www.51js.com

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果,原始数组不会改变。传递给 map 的回调函数(callback)接受三个参数,分别是 currentValue、index(可选)、array(可选),除了 callback 之外还可以接受 this 值(可选),用于执行 callback 函数时使用的this 值。

来个简单的例子方便理解,现在有一个数组 [1, 2, 3, 4],我们想要生成一个新数组,其每个元素皆是之前数组的两倍,那么我们有下面两种使用高阶和不使用高阶函数的方式来实现。

不使用高阶函数

// 木易杨const arr1 = [1, 2, 3, 4];const arr2 = [];for (let i = 0; i < arr1.length; i++) {arr2.push( arr1[i] * 2);}console.log( arr2 );// [2, 4, 6, 8]console.log( arr1 );// [1, 2, 3, 4]

使用高阶函数

// 木易杨const arr1 = [1, 2, 3, 4];const arr2 = arr1.map(item => item * 2);console.log( arr2 );// [2, 4, 6, 8]console.log( arr1 );// [1, 2, 3, 4]

Array.prototype.filter

filter() 方法创建一个新数组, 其包含通过提供函数实现的测试的所有元素,原始数组不会改变。接收的参数和 map 是一样的,其返回值是一个新数组、由通过测试的所有元素组成,如果没有任何数组元素通过测试,则返回空数组。

来个例子介绍下,现在有一个数组 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4],我们想要生成一个新数组,这个数组要求没有重复的内容,即为去重。

不使用高阶函数

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];const arr2 = [];for (let i = 0; i < arr1.length; i++) {if (arr1.indexOf( arr1[i] ) === i) {arr2.push( arr1[i] );}}console.log( arr2 );// [1, 2, 3, 5, 4]console.log( arr1 );// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

使用高阶函数

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];const arr2 = arr1.filter( (element, index, self) => {return self.indexOf( element ) === index;});console.log( arr2 );// [1, 2, 3, 5, 4]console.log( arr1 );// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

Array.prototype.reduce

reduce() 方法对数组中的每个元素执行一个提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。传递给 reduce 的回调函数(callback)接受四个参数,分别是累加器 accumulator、currentValue、currentIndex(可选)、array(可选),除了 callback 之外还可以接受初始值 initialValue 值(可选)。 如果没有提供 initialValue,那么第一次调用 callback 函数时,accumulator 使用原数组中的第一个元素,currentValue 即是数组中的第二个元素。 在没有初始值的空数组上调用 reduce 将报错。 如果提供了 initialValue,那么将作为第一次调用 callback 函数时的第一个参数的值,即 accumulator,currentValue 使用原数组中的第一个元素。

来个简单的例子介绍下,现在有一个数组 [0, 1, 2, 3, 4],需要计算数组元素的和,需求比较简单,来看下代码实现。

不使用高阶函数

const arr = [0, 1, 2, 3, 4];let sum = 0;for (let i = 0; i < arr.length; i++) {sum += arr[i];}console.log( sum );

// 10

console.log( arr );

// [0, 1, 2, 3, 4]

使用高阶函数

无 initialValue 值

const arr = [0, 1, 2, 3, 4];let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {return accumulator + currentValue;});console.log( sum );// 10console.log( arr );// [0, 1, 2, 3, 4]

上面是没有 initialValue 的情况,代码的执行过程如下,callback 总共调用四次。

callback accumulator currentValue currentIndex array return value
first call 0 1 1 [0, 1, 2, 3, 4] 1
second call 1 2 2 [0, 1, 2, 3, 4] 3
third call 3 3 3 [0, 1, 2, 3, 4] 6
fourth call 6 4 4 [0, 1, 2, 3, 4] 10

有 initialValue 值

我们再来看下有 initialValue 的情况,假设 initialValue 值为 10,我们看下代码。

const arr = [0, 1, 2, 3, 4];let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {return accumulator + currentValue;}, 10);console.log( sum );// 20console.log( arr );// [0, 1, 2, 3, 4]

代码的执行过程如下所示,callback 总共调用五次。

callback accumulator currentValue currentIndex array return value
first call 10 0 0 [0, 1, 2, 3, 4] 10
second call 10 1 1 [0, 1, 2, 3, 4] 11
third call 11 2 2 [0, 1, 2, 3, 4] 13
fourth call 13 3 3 [0, 1, 2, 3, 4] 16
fifth call 16 4 4 [0, 1, 2, 3, 4] 20

函数作为返回值输出

这个很好理解,就是返回一个函数,下面直接看两个例子来加深理解。

isType 函数

我们知道在判断类型的时候可以通过 Object.prototype.toString.call 来获取对应对象返回的字符串,比如:

let isString = obj => Object.prototype.toString.call( obj ) === '[object String]';let isArray = obj => Object.prototype.toString.call( obj ) === '[object Array]';let isNumber = obj => Object.prototype.toString.call( obj ) === '[object Number]';

可以发现上面三行代码有很多重复代码,只需要把具体的类型抽离出来就可以封装成一个判断类型的方法了,代码如下。

let isType = type => obj => {return Object.prototype.toString.call( obj ) === '[object ' + type + ']';}isType('String')('123'); // trueisType('Array')([1, 2, 3]); // trueisType('Number')(123); // true

这里就是一个高阶函数,因为 isType 函数将 obj => { ... } 这一函数作为返回值输出。

add 函数

我们看一个常见的面试题,用 JS 实现一个无限累加的函数 add,示例如下:

add(1); // 1add(1)(2); // 3add(1)(2)(3); // 6add(1)(2)(3)(4); // 10 // 以此类推

我们可以看到结构和上面代码有些类似,都是将函数作为返回值输出,然后接收新的参数并进行计算。

我们知道打印函数时会自动调用 toString()方法,函数 add(a) 返回一个闭包 sum(b),函数 sum() 中累加计算 a = a + b,只需要重写sum.toString()方法返回变量 a 就可以了。

function add(a) {function sum(b) { // 使用闭包a = a + b; // 累加return sum;}sum.toString = function() { // 重写toString()方法return a;}return sum; // 返回一个函数}add(1); // 1add(1)(2); // 3add(1)(2)(3); // 6add(1)(2)(3)(4); // 10

那就研究一下高级教2113程,w3school里的高级教程,短5261小精悍有基础书籍上压4102根没有的东西哦URL:www.w3school.com.cn/js/index_pro.asp这几个就不1653错(左侧目录):ECMAScript 对象面向对象对象应用对象类型对象作用域定义类或对象修改对象ECMAScript 继承继承机制实例继承机制实现,javascript高级程序设计第三版,就是你的菜内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript高阶函数_动力节点java学院整理
  • javascript 是你的高阶函数(高级应用)
  • javascript 高阶函数使用介绍
  • javascript中的高阶函数介绍
  • javascript之典型高阶函数应用介绍二
  • javascript之典型高阶函数应用介绍
  • uglifyjs(js代码优化工具)入门 安装使用
  • javascript对象字面量的理解
  • javascript单引号和双引号的区别和处理
  • 浅析javascript中的typeof运算符
  • javascript浅谈之引用类型
  • javascript基础回顾之(二) js作用域
  • 浅谈js的setinterval事件
  • 对象的类型:本地对象(1)
  • 用javascript脚本实现web页面信息交互
  • javascript数据结构与算法之集合(set)
  • javascript应该怎么深入学习?
  • 如何深入学习js(javascript)用法及语法?
  • 请推荐基本深入学习JavaScript的书
  • 我想深入学习javascript有什么好书
  • 我想更深入的学习JavaScript,麻烦高手给推荐一些书籍或资料
  • 我想深入学习JavaScript,求个好心人推荐一本电子教程,感激不尽
  • javascript入门了,但是不知道该如何深入的学习,有没有哪些那个有好的经验啊
  • 如何正确学习JavaScript
  • javascript知道个皮毛,想深入学习javascript 买什么书,高手推荐一下?
  • 后端开发的程序员需要深入学习javascript么
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript高阶函数_动力节点java学院整理javascript 是你的高阶函数(高级应用)javascript 高阶函数使用介绍javascript中的高阶函数介绍javascript之典型高阶函数应用介绍二javascript之典型高阶函数应用介绍uglifyjs(js代码优化工具)入门 安装使用javascript对象字面量的理解javascript单引号和双引号的区别和处理浅析javascript中的typeof运算符javascript浅谈之引用类型javascript基础回顾之(二) js作用域浅谈js的setinterval事件对象的类型:本地对象(1)用javascript脚本实现web页面信息交互javascript数据结构与算法之集合(set)js split 的用法和定义 js splitjs 小数取整的函数window.location.href的用法(动态js array 数组详解javascript中判断两个字符串是否基于javascript 声明全局变量的三向javascript的数组中添加元素的javascript math ceil()、floor(html复选框和单选框 checkbox和rjavascript window.settimeout()微信和qq时间格式模板实例详解转义字符(\)对javascript中json.parse的javascript中prototype为对象添加属性的误浅谈javascript 标准对象javascript onkeydown事件入门实例(键盘某javascript中的substr()方法使用详解浅谈 javascript 事件处理使用html+css+js制作简单的网页菜单界面有趣的javascript数组定义方法javascript中的getday()方法使用详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved