对象的解构赋值＆函数参数的默认值

对象的结构赋值

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（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"