ES6语法学习(二) 变量的解构赋值

数组的解构赋值

• 完全解构，等式左右两边可以完全解构赋值

let [foo, [[bar], baz]] = [1, [[2], 3]];

• 不完全解构，也可以成功

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

• 默认值需要注意必须是undefined,才会取默认值,null 不是undefined

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

对象的解构赋值

• 对象是按key关键字来解构赋值的，与数组不同，

let { foo: baz } = { foo: "aaa", bar: "bbb" };

• 需要注意的一点就是：对已经声明的变量解构赋值,
  第一种写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

// 错误的写法
let x;
{x} = {x: 1};

// 正确的写法
let x;
({x} = {x: 1});

• 字符串也可以解构赋值，例如，abc 有属性length，

let {length : len} = 'hello';
len // 5

• 用途
  
  1. 交换变量的值
  2. 函数返回多个值，取值的时候非常方便
  3. 提取json字符串中的数据
     
//交换值
let x=10;
let y=20;
[x,y]=[y,x]
console.log(x,y)
//返回数组
function example(){
return [1,3,5]
}
[a,b,c]=example()
console.log(a,b,c)
//返回对象
function objExample(){
return {birth:'2012',addres:'beijing'}
}
let {birth,addres} = objExample()
console.log(birth,addres)
//解构json数据
let jsonData={
id:12,
status:'ok',
data:[birth,birth]
}
let {id,status,data}=jsonData
console.log(id,status,data)