对象的结构赋值
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
let {foo,bar} = {foo: 'aaa',bar: 'bbb'}
foo //bar
bar //bbb
实际上,对象的解构赋值是下边形式的简写:
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
对象的解构用来指定默认值:
var {x=3} = {}
x //3
var {x,y=5} = {x:1}
x //1
y //5
函数的默认参数
设置默认参数,可以直接写在参数定义后边
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
与解构赋值结合使用:
最直接的例子:
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
为了解决上边最后一个问题,我们可以这么做:
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5
再看一个例子
function fetch(url, { body = '', method = 'GET', headers = {} }) {
console.log(method);
}
fetch('http://example.com', {})
// "GET"
fetch('http://example.com')
// 报错
改进,双重默认值
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
console.log(method);
}
fetch('http://example.com')
// "GET"