解构赋值 , 函数默认值 , 扩展运算符 , 计算属性名

解构赋值

是一种 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