解构赋值
是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
声明并赋值时的解构
var [a,b,...rest]=[10,20,30,40];//10 20 [30,40]
var {a,b,...rest} = {a:100,b:200,c:300};//100 200 {c:300}
赋值时的解构
此处圆括号 ( ... ) 是必须的。
{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为 {a, b} 被认为是一个块而不是对象字面量。
var a,b,rest;
({a,b,...rest} = {a:100,b:200,c:300});
认值和忽略值
var [a,,b=5]=[10,20];//10 5
重命名
var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5
嵌套解构
保持原来的数组/对象解构，只有每个最低一级的层会进入数组
let {
title: newTitleName, // rename
translations: [
{
url
},
],
} = {
title: 'Scratchpad',
translations: [
{
url: '/de/docs/Tools/Scratchpad',
}
]
};
console.log(newTitleName); // "Scratchpad"
console.log(url); // '/de/docs/Tools/Scratchpad'
解构参数
function userId({id}) {
return id;
}
console.log("userId: " + userId(user)); // "userId: 42"
函数参数默认值
function log(x,y='world'){
console.log(x,y);
}
log('hello'); //hello world
带有默认值的参数解构赋值
function m1({x=0,y=0} = {}){//若未给予默认值`{}`,则调用函数时入参不能为空,否则报错
return [x,y];
}
function m2({x,y} = {x:0,y:0}){
return [x,y];
}
m1({x:3});//[3,0]
m2({x:3});//[3,undefined]
m1({});//[0,0]
m2({});//[undefined,undefined]
扩展运算符
对象中的扩展运算符(...)用于取出参数对象/数组中的所有可遍历属性，拷贝到当前对象/数组之中
用于对象
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
且和普通的对象声明时相同，属性同名时后者覆盖前者
let bar = { a: 1, b: 2 };
let baz = { ...bar, ...{ a: 2 }, ['c'+'d']:5 }; // {a: 2, b: 2, cd:5}
用于数组
用于数组解构赋值时，只能放在参数的最后一位，否则会报错。
- 字符串及任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
计算属性名 与 ++
++在前为先加再赋值，++在后为先赋值再加
声明对象时会依照代码顺序依次计算属性名/值。
var i = 0;
var a = {
['foo' + ++i]: i++,
['foo' + ++i]: ++i,
['foo' + i++]: i++
};
console.log(a.foo1); // 1
console.log(a.foo3); // 4
console.log(a.foo4); // 5
