解构

Posted 2021-09-13 mcgee0731

• 数组解构

根据数组下标提取

const arr = [1,2,3]
const [foo,bar,baz] = arr                 //等值
const [,,baz] = arr                       //选值
const [foo,...rest] = arr                 // 剩余值，...最后一个成员使用，是个新数组
const [foo] = arr                         //不完全解构
const [foo,bar,baz,more,...bao] = arr     //more为undefined,bao=[]
const [foo,bar,baz,more="10",] = arr      //默认值 more取不到取默认值
const [foo] = []                          //foo=undefined

如果右侧不是可遍历的结构（Iterator）会报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

• 数组解构默认值
  当一个数组成员严格等于undefined,默认值会生效

  let [x = 1] = [undefined];         x // 1
  
  let [x = 1] = [null];              x // null

• 对象解构
  数组解构根据下标顺序解构，对象解构根据属性名匹配提取，它没有次序

  const obj = {name:\'mcgee\',age:18}
  const { age,name,baz } = obj
  console.log(name); //\'mcgee\'
  console.log(baz);  //undefined

  对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

  const {log} = console  //log是console的属性
  log("foo")
  
  let {floor,ceil} = Math

  同名成员产生命名冲突

  const name = "jack"
  const {name} = obj
  console.log(name);
  
  const name = "jack"
  const { name:objName } = obj //重命名对象name属性
  console.log(name,objName);

  设置默认值

  const { name:objName="rose" } = obj //给name属性设置默认值
  console.log(objName)

  注意

因为 javascript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题

let x;
{x} = {x: 1}; // SyntaxError: syntax error

let x;
({x} = {x: 1});

表达式虽然毫无意义，但是语法是合法的，可以执行

({} = [true, false]);
({} = \'abc\');
({} = []);

其他解构

字符串

字符串被转换成了一个类似数组的对象

const [a, b, , , e] = \'hello\';
a // "h"
b // "e"
e//  "o"

let {length : len} = \'hello\'; //类数组对象都有length属性
len // 5

number和boolean

如果等号右边是数值和布尔值，则会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

null和undefined

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函数参数解构

解构用途

变量交换

函数返回多个值

函数参数

函数参数默认值

遍历Map结构（Map是键值对数据结构）

输入模块指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");