Javascript教程六——高级函数+箭头函数

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript教程六——高级函数+箭头函数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3768字，纯文字阅读大概需要6分钟。

内容图文

高级函数

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

function add(x, y, f) {
	 return f(x) + f(y);
}

编写高阶函数，就是让函数的参数能够接收别的函数。

map/reduce

map()方法定义在JavaScript的Array中，用于对数组中每个元素执行相应的操作。

var arr = [1,2,3,4,5];
function pow(x) {
	return x * x;
};
var arr1 = arr.map(pow);

reduce()方法则有一种迭代的效果。

var arr = [1,2,3,4,5];
function add(x, y) {
	return x + y;
};
arr.reduce(add);
// reduce 执行效果是 1+2+3+4+5 = 15

因此可以利用reduce进行求和/积，同时也可以将存在数组里面的数字转换成一个整数：

var arr = [1,2,3,4,5];
var num = arr.reduce(function toNumber(x,y){
	return x * 10 + y;
});
// num 12345

filter

用于把Array的某些元素过滤掉，然后返回剩下的元素。

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
	return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

用filter()这个高阶函数，关键在于正确实现一个“筛选”函数。
利用filter，可以巧妙地去除Array的重复元素。

var r = arr.filter(function (element, index, self) {
	return self.indexOf(element) === index;
});

sort

对Array进行排序，但Array的排序会默认把所有元素转换成 string之后再排序，字母会使用首字母的ASCII码进行比较。

['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

[10, 20, 1, 2].sort();   // [1, 10, 2, 20]；// 转换字符串后1在2的前面

不过sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

var arr = [1,10,2,20];
arr.sort ( function (x, y) {
	if (x > y){
		return 1;
	}else if (x < y){
		return -1;
	}
	return 0;
});
arr;  // [1,2,10,20]

sort()方法会直接对Array进行修改，它返回的结果仍是当前Array。

闭包

高阶函数不仅可以接受函数作为参数，也可以将函数作为返回值进行返回。

以求和作为实例，当需要求数组的和时：

var arr = [1,10,2,20];
functio sum (arr){
	return arr.reduce(function (x, y){
		return x + y;
	});
}; // 33

但如果现在不知道arr数据的具体信息，只是希望构建一个可以求和的函数，以便之后使用。

function lazy_sum(arr) {
	var sum = function () {
    	return arr.reduce(function (x, y) {
        	return x + y;
    	});
	}
	return sum;
}

当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数。

我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”。

当我们使用返回的函数时，函数调用的外部函数的参数与局部变量也会被使用。

返回的函数并没有立刻执行，而是直到调用了才执行。

箭头函数

在ES6中提出了箭头函数，用于替代function这些复杂的文字，例如：

var a = function(a,b){
	return a+b;
}
替换:  当然，主体还是要放在 {...} 中，只不过参数放在（）里面，然后直接一个 =>来替换 function。
var a = (a,b) = > {
	return a+b;
}

this

这里我们需要了解一下，在js里面，有一个全局环境，这个全局环境只有一个，就是window。

然后这里讲一下匿名函数，匿名函数就是没有名字：

var a = function() {
	...
}

普通函数的函数内部环境就是当前函数的环境，当我们使用this时，this会自动绑定成函数所属的对象。

var a = {
	name = 'ruby',
	getName(){
		return this.name;
	}
}
a.getName();  // ruby

但是匿名函数有个问题，就是函数环境自动转换成全局环境，说白了，就是在匿名函数里面使用this，this会绑定到window上。

name = 'leo';
var b = {
	name = 'ruby',
	getName(){
		return function(){
			return this.name;
		}
	}
}
b.getName();  // leo

一般这个时候，最简单的方法就是找个变量来承接当前环境的this：

name = 'leo';
var b = {
	name = 'ruby',
	getName(){
		var that = this; // 这个this就指向b了
		return function(){
			return that.name;
		}
	}
}
b.getName();  // ruby

但是我既想使用匿名函数方便，又不想浪费内存存储变量，那么此时ES6就提出来箭头函数来解决匿名函数环境选择的问题。

箭头函数看上去是一种匿名函数的简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，也就是说，this不会去直接找全局变量，而是找当前函数所属的对象，问题解决了

内容总结

以上是互联网集市为您收集整理的Javascript教程六——高级函数+箭头函数全部内容，希望文章能够帮你解决Javascript教程六——高级函数+箭头函数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端