关于ecmascript:解构

14次阅读

共计 1558 个字符,预计需要花费 4 分钟才能阅读完成。

  • 数组解构

依据数组下标提取


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");
正文完
 0