JavaScript系列(二):变量解构赋值

简介

ES6允许按照一定的模式,从数组或者对象中提取值,然后对变量进行赋值,这种就被称为解构

数组解构

以前的写法:

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

ES6允许写成下面这样:

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

本质上这种写法属于“模式匹配”,只要等号两边的模式相同,左边就会和右边对号入座。嵌套写法:

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

let [a, ...b] = [1, 2, 3, 4]; // a = 1, b = [2, 3, 4]

let [a, b, ...c] = ['a']; // a = 'a', b = undefined, c = []

左边和右边都会按照自己的顺序去匹配,如果匹配不成功则会是undefined,数组则会是空的。

注意

如果等号右边不是数组,那么就会报错,如:

let [a] = 1; //error
let [b] = false; //error
...

对于Set结构也是可以使用数组的解构赋值:

let [a, b, c] = new Set(['a', 'b', 'c']); // a = 'a'

当然,只要是右边的数据结构具有Iterator接口,就能采用数组解构赋值。

默认值

解构赋值可以指定其默认值:

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

let [a, b = 1, c = 2] = [0, null, undefined] // a = 0, b = null, c = 2

null严格的来讲是属于对象,只有当值是undefined时,默认值才会生效。

对象解构

解构同时也能用于对象:

let {a, b} = {a: 'a', b: 'b'}; // a = 'a',  b = 'b'

和数组不同的是,数组解构是按照它的顺序一一对号入座,而对象解构是不需要这样的,它是根据属性名来入座,可以没有顺序。

模式匹配:

let {a: name} = {a: 'zeng', b: 'xiao', c: 'chen'}; // name = 'zeng', a = undefined

这种就相当于定义了一个类叫a,类中的一个属性成员叫name一样。a只是一个匹配的模式,真正的变量是name。当然跟数组一样,解构也可以用于嵌套结构的对象:

let obj = {
    p: [
        'hello', {y: 'world'}
    ]
};

let {p: [na, {me}]} = obj; // na = 'hello', me = 'world'

指定默认值跟数组同理。

字符串解构

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

类似于数组的对象都有一个lenght属性,因此还可以对这个属性进行解构:

let {lenght: len} = 'hello'; // len = 5

数值和布尔解构

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。nullundefined不能转换为对象,让它们赋值就是错误的

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

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

let {toString: s} = null; // error

函数参数解构

function add([x, y]) {
   return x + y;
}

add([1, 2]) // 3

用途

变换变量的值

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

从函数返回多个值

// 返回一个数组
function getNumber() {
    return [1, 2, 3];
}

let [a, b, c] = getNumber();

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

let [foo: name, bar: age] = getObj();

提取JSON中的值

// {name: 'zeng', age: 11, sex: '1', data: [10001, 87983]}
let {name, age, sex, data: number} = json;

遍历Map

const map = new Map();
map.set('a', 'hello');
map.set('b', 'world');

for (let [key, value] of map) {
    console.log(key, value);
}

// 或者只想要key,value
for (let [key] of map) {...}

for (let [,value] of map) {...}

输入模块的指定方法

加载模块时,往往需要指定输入哪些方法。解构赋值让输入语句变得更加的清楚一些。

const { SourceMapConsumer, SourceNode } = require("source-map")
Last modification:January 21st, 2018 at 01:18 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment