【ES6】函数的拓展

一、函数参数的默认值
二、扩展运算符
三、箭头函数【重点！！！】

查看更多ES6教学文章：
参考文献

引言：ES6添加了函数的默认值的写法、rest参数、拓展运算符、箭头函数等特性，值得关注。

一、函数参数的默认值

在ES6之前，JS函数的参数是不可以指定默认值的，只能采取变通的方法。如代码块1-1。

/***@@    代码块1-1    变通的方法设置函数参数默认值    @@***/
function log(x,y){
	y=y||'默认值';
	console.log(x,y);
}
log('Hello');			//Hello 默认值
log('Hello','China');	//Hello China
log('Hello','');		//Hello 默认值

ES6允许为函数的参数设置默认值，即直接写在参数的后面。如代码块1-2。

/***@@    代码块1-2    ES6直接设置函数参数默认值    @@***/
function log(x,y='默认值'){
	console.log(x,y);
}
log('Hello');			//Hello 默认值
log('Hello','China');	//Hello China
log('Hello','');		//Hello 默认值

当ES6允许为函数的参数设置默认值之后，由于ES6中形形色色的数据结构，导致函数参数的解构也多姿多彩（头大）。比如函数参数的默认值可以与解构赋值默认值结合使用如代码块1-3。

/***@@    代码块1-3    与解构赋值默认值结合使用    @@***/
function foo({x,y=5}){
	console.log(x,y);
}
foo({})			// undefined,5
foo({x:1})		// 1,5
foo({x:1,y:2})	// 1,2
foo()			// TypeError: Cannot read property 'x' of undefined

还需要注意的是，参数默认值的位置应该在函数的参数尾部。因为这样比较容易看出，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是无法省略的。如代码块1-4。

/***@@    代码块1-4    参数默认值的位置应该在最后    @@***/
//错误示例
function fun(x=1,y){
	return [x,y];
}
fun()				// [1,undefined]
fun(2)				// [2,undefined]
fun(,1)				// 报错
fun(undefined,1)	// [1,1]

二、扩展运算符

扩展运算符spread是三个点…，主要用来把数组格式解析掉。也可以把解析完的值作为函数的参数。基本用法见代码块2-1。

/***@@    代码块2-1    ...的基本用法    @@***/
let array=[1,2,3];

console.log(...array); // 1,2,3

function add(x,y,z){
	console.log(x+y+z);
}
add(...array); // 6

还可以用来替代数组的apply方法、合并数组、把字符串转化为数组、把类数组对象转化为真正的数组等等。见代码块2-2。

/***@@    代码块2-1    ...的应用    @@***/
//1.替代数组的apply方法
//ES5写法
function f(x,y,z) {}
var args = [0,1,2];
f.apply(null,args);

//ES6写法
function f(x,y,z) {}
var args = [0,1,2];
f.apply(...args);

//2.合并数组
var arr1=[1,2];
var arr2=[3];
var arr3=[4,5];
//ES5的写法
arr1.concat(arr2,arr3);	//[1,2,3,4,5]
//ES6的写法
[...arr1,...arr2,...arr3];	//[1,2,3,4,5]

//3.把字符串转化为数组
[..."hello"]; //["h","e","l","l","o"]

三、箭头函数【重点！！！】

箭头函数（=>）几乎算是JavaScript的一次编程规范的革新了，崭新的写法，精简的代码。而且，现在很多国内外的开源框架的源码几乎都是采用箭头函数来写的，所以学好箭头函数很重要。这里只介绍一下箭头函数的基本用法，见代码块3-1。

/***@@    代码块3-1    箭头函数的基本用法    @@***/
/******第一种写法 一个参数 返回一个值 ******/
var f= v => v;
//等同于
var f = function(v){
	return v;
}
/******第二种写法 多参数 返回的是语句 ******/
var sum = (num1,num2) => num1+num2;
//等同于
var sum = function(num1,num2){
	return num1+num2;
}
/******第三种写法 一个参数 函数体有多个语句 ******/
let array= [1,2,3];

var add = array => {
	let sum=0;
	for( let val of array)
		sum+=val;
	return sum;
}
//等同于
var add = function(array){
	let sum=0;
	for( let val of array)
		sum+=val;
	return sum;
}
/******第四种写法  简化回调函数******/
[1,2,3].Map(function(x){
	return x*x;
});
//等同于
[1,2,3].Map( x => x*x);

参考文献

阮一峰《ES6标准入门（第2版）》

征途黯然.

发布了57 篇原创文章 · 获赞 43 · 访问量 1万+

私信关注