辉太郎看前端(es6解构赋值)

前言：

1. 解构赋值的概念？

2. 解构赋值的语法？

3. 解构赋值的应用场景？

概念：

解构赋值语法是javaScript一种表达式，可以将数组或对象中的属性或值取出，赋值给其他变量，element-ui，vant-ui的按需引入，axios获取返回数据，提取自己想要的值。

语法：

//数组结构
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

//对象解构
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// ...rest 解构数组
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

// ...rest 解构对象（最新）
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

//解析一个从函数返回
function f() {
  return [1, 2];
}

var a, b; 
[a, b] = f(); 
console.log(a); // 1
console.log(b); // 2

注 数组赋值需要一一对应，对象的赋值需要变量名一致，可以乱序。

应用场景

1. 交换变量值

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

2. 忽略不敢兴趣的返回值

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

3. 将剩余数组赋值给一个变量

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