2. 变量的解构赋值

2020-05-19  本文已影响0人  五度曲橙

PS: ES6 解构赋值是一种批量赋值的方式(数组赋值),使用的是模式匹配的方式,等号两边的模式相同,左边就会被赋予对应的值。

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

a // 1

b // 2

c // 3

嵌套机构赋值

let [foo, [[bar], baz] = [1,[[2], 3]]

foo // 1

bar // 2

baz // 3

let [head, ...tail] = [1,2,3,4,5]

head // 1

tail // [2,3,4]

let [x,y,...z] = ['a]

x // "a"

y // undefined

z // []

根据上面的例子可以得出结论,如果结构不成功,得到的值就是 undefined

1.解构的默认值

let [foo = true] = []

foo // true

let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'

let [x,y = 'b'] = ['a', undefined] // x = 'a', y = 'b'

备注: 注意 ES6  内部使用严格运算符 (===) ,判断一个位置是否有值,当一个数组成员严格等于 undefined, 默认值才会有效,如果右边是 null 的话,默认值就不就不会生效,因为 null 不严格等于 undefined.

let [x = 1] = [undefined]

x // 1

let [x = 1] = [null]

x // null

2. 函数解构和对象的结构赋值

2.1 函数解构

function f(){

    console.log('aaa)

}

let [x = f()] = [1]

注意:如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用的时候,才会求值。上面的代码中,因为 x 能取到值,所以函数 f g根本不会执行。上面的代码等价于下面的的代码:

let = x;

if ([1][0] == undefined) {

    x = f()

} else {

    x = [1][0]

}

默认值可以引用其它解构赋值的其它变量,但该变量必须已经声明。

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

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

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

let [x = y, y = 1] = [] // ReferenceError: y is not defined

注意:上面最后一个表达式之所有会报错,是因为 x 用 y 做默认值时,y 还没有声明

2.2 对象结构赋值

解构不仅可以用于数组,还可以用于对象。

let {foo, bar} = {foo: 'aaa', bar: 'bbb'}

foo // aaa

bar // bbb

注意:数组和对象解构有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置的决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。如果解构失败,变量的值等于 undefined.

let {foo} = {bar: 'baz'}

foo // undefined

将现有的对象赋值某个变量 console、Math

// 例子1:

let {log, sin, cos} = Math;

// 例子2:

const {log} = console;

log('hello') // hello

备注: 上面代码将 Math 对象的对数、正弦、余弦三个方法,赋值到对应的变量上,使用起来会方便很多。例二将 console.log 赋值到 log 变量。

属性名和变量名不一致,使用方法:

let {foo: baz} = {foo: 'aaa', bar: 'bbb'};

baz // aaa

let obj = {first: 'hello', last: 'world'}

let {first:f  , last: 1}  = obj

f // 'hello'

l // world'

这实际说明,对象的解构赋值是下面的形式的简写:

let {foo: foo, bar:bar} = {foo: 'aaa', bar: 'bbb'}

根据上面的实例,得到下面的结论,对象的解构赋值的内部机制,是先找到同名属性,然后在赋给对应的变量。真正的赋值是后者,而不是前者。

对象的嵌套结构

let obj = {

p:[

        'Hello',

        {y: 'world'}

]

let {p: [x, {y}]} = obj

x // "Hello"

y // "world"

另一个例子:三次解构

const node = { loc: { start: { line: 1, column: 5 } } };

let { loc, loc: { start }, loc: { start: { line }} } = node;

line  // 1

loc  // Object {start: Object}

start // Object {line: 1, column: 5}

对象的默认值:

var {x = 3} = {}

x // 3

var {x, y = 5} = {x: 1}

x // 1

y // 5

默认值生效的条件是,对象的属性值严格等于undefined。

var {x = 3} = {x: undefined}

x // 3

var {x = 3} = {x: null}

x // null

解构的用途:

(1)交换变量的值

let x = 1;

let y = 2;

[x,y] = [y,x]

上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。

(2) 从函数返回多个值

function example()

{

    return [1, 2, 3];

}

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

// 返回一个对象

function example() {

    return { foo: 1, bar: 2 };

}

let { foo, bar } = example();

(3)函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值

function f([x, y, z]) { ... }

f([1, 2, 3]);

// 参数是一组无次序的值

function f({x, y, z}) { ... }

f({z: 3, y: 2, x: 1});

(4)提取 JSON 数据

let jsonData = { id: 42, status: "OK", data: [867, 5309] };

let { id, status, data: number } = jsonData;

console.log(id, status, number); // 42, "OK", [867, 5309]

(5)函数参数的默认值

jQuery.ajax = function (url, {

async = true,

beforeSend = function () {},

cache = true,

complete = function () {},

crossDomain = false, global = true, // ... more config } = {}) { // ... do stuff };

指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

(6)遍历 Map 结构

任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。

const map = new Map();

map.set('first', 'hello');

map.set('second', 'world');

for (let [key, value] of map) {

    console.log(key + " is " + value);

}

// first is hello

// second is world

如果只想获取键名,或者只想获取键值,可以写成下面这样。

// 获取键名

for (let [key] of map) {

// ...

}

// 获取键值

for (let [,value] of map) {

// ...

}

(7)输入模块的指定方法

加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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

总结:解构赋值是把数组和对象中的值,赋值给变量

变量的解构是实际工作做很常用,之前没有深入了解,学习后才明白这种数据结构。学习了,学习网址

上一篇下一篇

猜你喜欢

热点阅读