变量的解构赋值

今天在刷面试题时, 有关面试题, 我已经单独整理了一篇文章, 感兴趣的同学点击前端面试必问问题及答案, 看到一个很陌生的代码写法, 具体例子是这样的:
let user ={
age:“22”
}
var { user: person }={user};
console.log(person.age);

答案是22 然鹅 var { user: person }={user};这是个什么写法？？？后来查阅资料才知道这是es6的解构赋值。关于它的使用有以下几点：

1. 数组的解构赋值[ 基本用法 ]
   按照一定的模式从数组或者对象中取值，对变量进行赋值的过程称为解构。
   以前，为变量赋值只能直接指定值：在这里写入代码示范：

var a=1, b=2, c=3;
console.log(a)   //输出1
console.log(b)   //输出2
console.log(c)   //输出3

而ES 6 允许写成下面这样：

var [a, b,c]=[1,2,3]
console.log(a)   //输出1
console.log(b)   //输出2
console.log(c)   //输出3

上面的代码表示，可以从数组中取值，按照位置的对应关系对变量赋值。
[ 默认值 ]

解构赋值允许使用默认值。

var [ foo = true ] = [];
console.log(foo)  //true

[x, y=23] = ['a']
console.log(x)  //'a'
console.log(y)  //'23

ES6内部使用严格相等运算符（===）判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

var [ x = 1 ] = [undefined]
x         //1

var [x = 1] = [null]
x        //null

上述代码中，一个数组成员是null，因此默认值不生效。因为null不严格等于undefined。

2. 对象的解构赋值

 var {a,b} ={a:1,b:2}
  console.log(a)  //1
  console.log(b)   //2

对象的解构赋值与数组有一个不同，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var {a} ={c:1,b:2}
 console.log(a)    //undifined

上面代码中，变量a没有对应的同名属性，导致取不到值，所以输出undefined。
实际上, 对象的结构赋值相当于以下写法:

var { a: a b: b } = { a:1, b:2 }

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
再来看个例子:

var {a:b} ={a: 'aaa'}
    console.log(b)   //aaa
    console.log(a)   //Uncaught ReferenceError: a is not defined

3.字符串的解构赋值

字符串的解构赋值机制是将字符串转换成一个类似数组的对象:

 const [a,b,c,d,e] = 'hello'
 console.log(a,b,c,d,e)   //h e l l o

类似数组的对象都有length属性，因此还可以对这个属性解构赋值:

let {length: len} = 'hello'
    console.log(len)  //5

4.数值和布尔值的解构赋值

解构赋值的规则是：只要等号右边的值不是对象，就先将其转为对象。
　


5.函数参数的解构赋值

上面代码中，函数add的参数实际上不是一个数组，而是通过解构得到的变量x和y。

函数参数的解构也可以使用默认值。

上面的代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，则x和y等于默认值。

注意：下面的写法会得到不一样的结果。

7.用途

[ 交换变量的值 ]

[x, y] = [y, x]

上面的代码交换了x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
[ 从函数返回多个值 ]

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

// 返回一个对象
　
[ 提取JSON数据 ]

解构赋值对提取JSON对象中的数据尤其有用。