「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」。

解构赋值是对赋值运算符的一种扩展，针对数组或者对象进行模式匹配，然后对一些变量赋值。书写很简单，代码很明了。使用很方便，我们一起看看吧~

数组的解构赋值

在以前我们声明变量的时候是这样声明的

let a = 1;
let b = 2;
let c = 3;

有了ES6之后，就可以这样声明

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

根据对应的位置，对变量赋值。 对于Set结构，也可以使用数据结构赋值

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

默认值

还可以设置默认值

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

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

对象的解构赋值

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

对象的解构和数组的区别就是，数组是按顺序结构，而对象是按变量名，位置不一定要对应。

默认值

对象的解构也可以用默认值

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

剩余运算符

let {a, b, ...obj} = {a: 1, b: 2, c: 3, d: 4}; 
// a = 1 // b = 2 // obj = {c: 3, d: 4}

字符串的解构赋值

字符串也可以解构赋值，此时字符串被转换成了一个类似数组的对象。

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

解构赋值的优点

交换变量

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

函数返回多个值

正常函数只能返回一个值，如果需要返回多个值，可以把结果放在对象或者数组中返回，使用解构赋值取出这些值就会变得很简单了。

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

提取数据

let obj = {
  id: 1,
  status: "OK",
  data: [1, 2]
};
let { id, status, data: number } = obj;
console.log(id, status, number);
// 1, "OK", [1, 2]

函数传参默认值

let req = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true
} = {}) {
  // ... do someing
};

输入模块的指定方法

常用于公共js的按需引入，语句清晰明了

const { addZero, dateFormatter } = require("common");

以上就是关于解构赋值的一些基本用法了，有了解构赋值可以大大提高我们的开发效率。