解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:
- 命名参数
- 设置默认参数
- 多个返回值
命名参数
在传统的函数定义如下:
function findUsersByRole (
role,
withContactInfo,
includeInactive
) {...}
我们会这样调用函数传参:
findUsersByRole(
'admin',
true,
true
)
直接看函数调用,我们很有可能会对第二和第三个参数迷惑,不知道它们分别表示什么意思。
使用解构赋值,可以很好解决这个问题。上面的函数可以改为:
findUsersByRole({
role: 'admin',
withContactInfo: true,
includeInactive: true
})
解构赋值使用object类型的方式传递参数,使用命名参数,清晰明了。
函数定义解构赋值参数
function findUsersByRole ({
role,
withContactInfo,
includeInactive
} = {}) {...}
忽略参数
调用解构赋值定义函数的参数,可以忽略某些参数:
findUsersByRole({
role: 'admin',
includeInactive: true
})
={}对解构赋值参数设置默认值,在调用函数时完全可以不传参数
findUsersByRole()
参数无需按指定顺序
与函数普通参数不同,解构赋值参数不需要按声明的顺序赋值
findUsersByRole({
withContactInfo: true,
role: 'admin',
includeInactive: true
})
默认参数
对函数的传统参数赋默认值,类似于:
function findUsersByRole (
role,
withContactInfo = true,
includeInactive
) {...}
在调用函数时,如果需要使用参数的默认值,需要在参数的位置上传undefined
findUsersByRole(
'Admin',
undefined,
true
)
函数findUsersByRole的第二个参数处传undefined,这显得很不优雅。
解构赋值设置默认参数
function findUsersByRole ({
role,
withContactInfo = true,
includeInactive
} = {}) {...}
withContactInfo设置默认值为true,调用函数当withContactInfo不传时,值默认为true,调用如下:
findUsersByRole({
role: 'Admin',
includeInactive : true
})
返回多值
如果在传统返回多个值,我们可以使用对象。
function getUser(id) {
//...
let name = ...;
let age = ...;
return {
id: id,
name:name,
age: age
}
}
在接收对象数据时:
let user = getUser(10);
使用解构赋值可以直接赋值给变量
let {id,name,age} = getUser(10);