2. 变量的解构赋值
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");
总结:解构赋值是把数组和对象中的值,赋值给变量
变量的解构是实际工作做很常用,之前没有深入了解,学习后才明白这种数据结构。学习了,学习网址