ES6 函数的扩展
1. 函数参数的默认值
1.1 基本用法
ES6之前,不能直接为函数的参数指定默认值,通常需要先判断一下参数是否被赋值,如果没有,则为其设置默认值。
if (typeof 参数 === 'undefined') {
// 为参数设置默认值语句
}
ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。
function func(param1 = 'defaultValue1', param2 = 默认值) {
......
}
注:只有当参数值严格等于undefined
时,其默认值才会生效。
1.2 与解构赋值默认值结合使用
函数的参数如果是一个对象,在进行解构赋值时,参数中的变量与实参对象的属性名进行匹配,如果两者相同,则进行正常赋值操作,如果参数中的变量未匹配到同名的实参对象属性,则其值为undefined
。
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo() // 报错
上面代码中只使用了对象的解构赋值默认值,没有使用函数参数默认值,如果在调用函数时没有提供默认值,则会报错。
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5
上面代码中,如果在调用函数时没有提供参数,函数foo
的参数默认为一个空对象。
1.3 参数默认值的位置
通常情况下,定义了默认值的参数,应该是函数的尾参数。如果非尾部的参数设置了默认值,实际上这个参数是没法省略的。如果非要使用非尾部参数的默认值,则需要显示传入undefined
来触发默认值。
1.4 函数的length属性
函数指定了默认值以后,函数的length
属性,将返回没有指定默认值的参数个数。准确地说,函数的length
属性会依次计算没有指定默认值的参数个数,遇到第一个指定了默认值的参数时就停止计数,然后返回这个数值。
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
2. rest参数
2.1 rest参数
ES6引入了 rest参数 (形式为 ...变量名
),用于获取函数的多余参数。这样就不需要使用arguments
对象了。
rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中,即 ...数组名
,表示获取该数组中的全部元素。这种用法可以将多个数组的元素拼接到一个数组中。
数组a = [1,2,3] , 数组b = [4,5,6]
数组c = [...a,...b], 则数组c = [1,2,3,4,5,6]
注意点:
- rest参数只能是最后一个参数,如果后面再加其它参数,则会报错。
- 函数的
length
属性,不包括rest参数。
2.2 arguments对象
arguments
对象不是数组,而是一个类似数组的对象,里面存放函数的实参。
将arguments
对象转换成数组的方法:Array.from(arguments)
或者Array.prototype.slice.call(arguments)
。
3. 函数的name属性
函数的name
属性,返回该函数的函数名。
对于一个匿名函数赋值给一个变量,ES 5和 ES6 在这个属性上有不同的返回值,ES5的name
属性会返回空字符串,ES6的name
属性会返回实际的函数名。
如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name
属性都返回这个具名函数原本的名字。
4. 箭头函数
ES6 允许使用“箭头”(=>
)定义函数。
var f = function(params) {
// 函数体
}
// 等同于
var f = (params) => {
// 函数体
}
如果箭头函数不需要参数或者需要多个参数,则使用一个圆括号代表参数部分。
如果箭头函数的代码块部分多于一条语句,就要使用花括号把他们括起来,并且使用return
语句返回。
var f = () => { ... };
var f = (p1, p2) => { ... };
由于大括号被解释为代码块,如果箭头函数直接返回一个对象,必须在对象的外面加上圆括号,否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。
let fn = () => void doesNotReturn();
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
箭头函数可以和rest参数结合使用。
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
注意点:
- 箭头函数没有自己的
this
对象。箭头函数的this
指向定义时所在的作用域,普通函数的this
指向运行时所在的作用域(即全局对象window
)。 - 不可以当作构造函数,也就是说,不可以对箭头函数使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 - 不可以使用
yield
命令,因此箭头函数不能用作 Generator 函数。
参考文档:ECMAScript 6入门-函数的扩展