二、ES6中的解构赋值

解构赋值

ECMAScript 6允许按照一定模式从数组或对象中提取值，对变量进行赋值。这种赋值方式被称为解构赋值。

ECMAScript 6的“解构赋值”本质上属于“模式匹配”。赋值运算符两边的模式相同，左边的变量会被赋予对应位置的值。

变量的解构赋值

从指定的数组或对象中提取值，为指定变量进行赋值。

var/let [变量名1,变量名2,变量名3] = 数组或对象

变量的索引值对应值的索引值。

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

console.log(a, b, c); // 1 2 3

赋值失败

let [a] = [];

console.log(a); // undefined

以上代码相当于定义了一个变量a，但未初始化（赋值）

let [n, m] = [1];
console.log(n, m); // 1 undefined

以上代码表示由于变量只有一个，而定义变量有两个，因此m不会得到值。

不完全解构赋值

即定义变量的数量小于值的数量。

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

默认值

只有当解耦失败时才会使用默认值。例如：

let [a = 1] = [];
console.log(a); // 1
let [b = 1] = [100];
console.log(b); // 100

但有两种特殊情况需要注意。

如果含有默认值，而恰好被赋值为undefiend

// 底层将为变量赋值的值与undefined进行比较
let [x, y = 100] = [100, undefined];
console.log(x, y); // 100 100

变量如果有默认值则不会被赋值为undefined

如果含有默认值，而恰好被赋值为null

// 只与undefined比较
let [v, w = 100] = [100, null];
console.log(v, w); // 100 null

变量如果有默认值则会被赋值为null

对象的解构赋值

// 变量名与属性名要一一对应
let { x, y } = {
  x: 10,
  y: 20,
};

console.log(x, y); // 10 20

变量名与属性名一一对应
左右两边的类型要相同

结构又要保持一致

let {
  m: { age, name },
  n,
} = {
  m: {
    age: 12,
    name: "123",
  },
  n: 10,
};
console.log(n, age, name); // 10 12 123
console.log(m); // 报错  m is not defined

对象解构赋值的情况与变量的解构赋值大致相同。也存在解耦失败，不完全解耦，默认值等情况。

字符串、数字值、和布尔值的解构赋值

字符串的解构赋值

let [a, b, c, d, e, f, g, h] = "xiaokang";
console.log(a, b, c, d, e, f, g, h); //x i a o k a n g

let [v, m, n] = "大前端";
console.log(v, m, n); // 大 前 端

变量的数量与字符串中字符的数量对应。

数字值的解构赋值

let { toString: m } = 100;

布尔值的解构赋值

let { toString: m } = true;

函数的参数解构赋值

// 数组解耦
function fn1([n, m]) {
  console.log(n, m);
}
fn1([10, 20]); //10 20

// 对象解耦
function fn2({ n, m }) {
  console.log(n, m);
}
fn2({
  n: 10,
  m: 20,
}); //10 20

函数定义时相当于在函数作用域中定义了一个局部变量（没有赋值）
实参，相当于在函数作用域中为定义的变量的变量进行赋值

解构赋值的用途

交换变量的值。

// 1. 交换变量的值
let x = 1;
let y = 2;

console.log(x, y); // 1 2
[x, y] = [y, x];
console.log(x, y); // 2 1

返回多个值

function fn() {
  return { a: 1, b: 2, c: 3 };
}
let { a, b, c } = fn();
console.log(a, b, c); //1 2 3

函数参数的定义

function f([a, b, c = 3]) {
  console.log(a, b, c);
}
f([1, 2]); //1 2 3

提取json格式的数据

let jsonData = {
  name: "xiaokang",
  age: 20,
};
let { name, age } = jsonData;
console.log(name, age); // xiaokang 20