ES6-函数解构

Question

函数的解构没太懂这个里面红箭头那些地方，1.为什么会是undefined呢？不是 let {x,y}={x:0,y:1}的时候，x可以输出等于0，y=1吗，虽然x,y是模式，赋值是赋给x,y变量，那这里为什么不是[0,0]呢？2.还有阮老师说默认值只有当等于undefined的时候才起作用，那let {x:1,y:2}={};x会等于1，y会等于2，是不是因为右边没有设定x,y属性，所以在右边找不到x,y所以两个都undefined，x才等于1，y等于2？是这么理解的吗

Answer 1

看 move({x: 3})，这里的 {x: 3} 对象的 y 为 undefined，

所以结果是 [3, undefined]

注意第二种 move 和 第一个 move 的区别，

第一个 move 中：

function move({x = 0, y = 0} = {}) {

  return [x, y];

}

// 等价于

function move(a) {

  if (a === undefined) {

    a = {}

  }

  let x = a.x

  if (x === undefined) {

    x = 0

  }

  let y = a.y

  if (y === undefined) {

    y = 0

  }

  return [x, y]

}

而第二个 move 相当于：

function move(a = {x: 0, y: 0}) {

  return [a.x, a.y];

}

// 等价于

function move(a) {

  if (a === undefined) {

    a = {x: 0, y: 0}

  }

  // 此处没有为 a.x 和 a.y 设置默认值的过程

  return [a.x, a.y];

}

也就是当 a 为 undefined 时，a 取默认值 {x: 0, y: 0}.

Answer 2

你可以从结构时的等号来看：

function move({x, y} = { x: 0, y: 0}) {...}

这里等号左边的部分会被看作一个整体来赋默认值，在题中第二个 move 里就是他的唯一一个输入值。
如果有输入，则对这个输入值进行结构，如果没有输入，则使用默认值。

可以注意到的是前面的 move 里有三个等号，后面 move 只有一个等号

Answer 3

楼上已经回答你了，这是赋默认值一种方式，建议通读ES6 文档

Answer 4

我今天刚好看到这块，第一个函数包含了函数参数默认值和对象解构默认值，而第二个函数仅仅是函数参数默认值。