关于ecmascript:解构

  • 数组解构

依据数组下标提取


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");

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理