ES6--解构赋值

解构大致可以分为数组解构，对象解构，字符串解构，函数解构。

解构最基本的作用右边可以同时多个变量赋值，左边可以提供默认值。

一、数组解构

数组解构的特点：赋值严格按照顺序赋值，左右结构一一对应。

1、基本用法

可以同时给多个变量赋值，若右边不存在则undefined。

let [a,b,c] = [1,2,3]
// 等价
let a = 1; let b = 2; let c = 3; 

2、选择性赋值

按照顺序赋值，可以选取我们自己想要的数据进行赋值。

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

3、数组赋值

数组赋值需要借助“...”

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

4、默认值

为变量提供默认值是解构提供方便

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

二、对象解构

对象解构的特点：赋值按照键值赋值。

1、基本用法

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

需要注意的一点，如果声明的变量也是key-value方式，其实赋值的一方是value，而不是key。其实前一种默认了key与value同名，如若不同需采用下面的方法。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

2、对象赋值

与数组解构类似，借助“...”

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

3、默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

三、字符串解构

字符串的解构按照类数组对象进行解构

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

四、解构进阶--嵌套解构

1、数组嵌套数组

数组嵌套数组：严格按照顺序进行解构，左右俩边结构一一对应。

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

2、对象嵌套对象

对象嵌套对象：

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc: { start: { line }} } = node;
line // 1

在这里左侧的loc，start是为寻找line的模式，不会赋值。要想为loc，start赋值需要按照一下方式。我们可以理解一个单元（用逗号隔开的部分）只为赋值最里层的变量，而且只会赋值一层（例如loc的赋值）。

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

3、对象，数组混合嵌套

数组也是对象，与上例相通。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

五、解构使用

1、函数参数解构

对象解构，数组解构都适用于函数参数

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

函数参数设置默认值

function add([x, y] = [1,1]){
  return x + y;
}

add(); // 2

2、交换变量值

let x = 1;
let y = 2;

[x, y] = [y, x];

3、模块引入

import { getData } from '@/url'

4、提取JSON数据

在我们的开发中，我们经常以JSON格式作为数据格式首选。 当我们接收数据时可以使用解构对JSON数据进行拆解。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

六、圆括号

对于圆括号的使用，我们常见的错误在变量声明之后又放在解构中

let foo;
{foo} ={foo:'Hello'};
console.log(foo);

编译会报错，我们应改成

let foo;
({foo} ={foo:'Hello'});
console.log(foo); //控制台输出 Hello