js解构赋值

JS 获取对象的属性和访问数组内容是都是很常用的操作，从 ECMAScript 6 开始，允许按照一定模式从数组和对象中提取值对变量进行赋值，这被称为解构（Destructuring）。

基本用法

数组、对象

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

let {name, age} = {name: 'Alice', age: 20};

默认值

let [a, b, c = 0] = [1, , 3];
let {name, age = 0} = {name: 'Alice'};

剩余参数

let [a, b, ...rest] = [1, 2, 3, 4, 5];
let {name, ...rest} = {name: 'Alice', age: 20, gender: 'female'};

嵌套

let {name, address: {city, country}} = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'Beijing',
    country: 'China'
  }
};

采用短路语法防止报错

解构时加入短路语法兜底，防止解构对象如果为 undefined 、null 时，会报错。

const user = null;
const {name, age, sex} = user || {};
// 空值合并操作符 const {name, age, sex} = user ?? {};

按条件向数组添加数据

const isEnvProduction = false;
const baseUrl = [
    '/login',
    '/register'
]
const devUrl = [
    '/test',
    '/demo'
]
const whiteList = [...baseUrl, ...(isEnvProduction? [] : devUrl)];