引言: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教学文章:
1. 【ES6】let与const 详解
2. 【ES6】变量的解构赋值
3. 【ES6】字符串的拓展
4. 【ES6】正则表达式的拓展
5. 【ES6】数值的拓展
6. 【ES6】数组的拓展
7. 【ES6】函数的拓展
8. 【ES6】对象的拓展
9. 【ES6】JS第7种数据类型:Symbol
10. 【ES6】Proxy对象
11. 【ES6】JS的Set和Map数据结构
12. 【ES6】Generator函数详解
13. 【ES6】Promise对象详解
14. 【ES6】异步操作和async函数
15. 【ES6】JS类的用法class
16. 【ES6】Module模块详解
17. 【ES6】ES6编程规范 编程风格
参考文献
阮一峰 《ES6标准入门(第2版)》