对象字面量的增强

回顾对象字面量

介绍内容前先回顾下什么是对象字面量。

我们创建一个对象时，可以通过实例化构造函数生成。

// 实例化构造函数生成对象
const person = new Object();
person.age = 18;
person.speak = function () {};

而更常用的是通过字面量直接生成对象。

// 对象字面量
const person = {
  age: 18,
  speak: function () {}
};

对象字面量的方式更简洁直观，其实它还可以进一步简化。

属性和方法的简洁表示法

（1）属性的简洁表示法

键名和变量或常量名一样的时候，可以只写一个。

const age = 18;
const person = {
  // age: age
  age
};

console.log(person);

（2）方法的简洁表示法

方法可以省略冒号和 function 关键字。

const person = {
  // speak: function () {}
  speak() {}
};

console.log(person);

方括号语法

方括号语法的用法

const prop = 'age';
const person = {};

// person.prop = 18;  // 得到 {prop: 18}
person[prop] = 18;    // 得到 {age: 18}

// 方括号语法可以写在对象字面量中
const person2 = {
  [prop]: 18
};

方括号中可以放什么

• 模板字符串，${}
• 值或通过计算可以得到值的（表达式）

const prop = 'age';
const func = () => 'age2';
const person = {
  [prop]: 18
  [func()]: 18
  ['sex']: 'male'
  ['na' + 'me']: 'alex'
};
console.log(person);

方括号语法和点语法的区别：

• 点语法是方括号语法的特殊形式
• 当你的属性或方法名是合法标识符时，可以使用点语法，其他情况下要使用方括号语法

函数参数的默认值

函数参数的默认值是什么

调用函数的时候传参了，就用传递的参数；如果没传参，就用默认值。

const multiply = (x, y = 10) => x * y;

let res1 = multiply(2);  // 20 

函数参数默认值的注意事项

不传参数，或者明确的传递 undefined 作为参数，默认值才会生效。

const multiply = (x, y = 10) => x * y;

let res1 = multiply(2);  // 20 
let res2 = multiply(2, undefined);  // 20 

如果默认值是表达式，默认值表达式是惰性求值的。

另外还有个小技巧，函数参数的默认值最好从参数列表的右边开始设置，因为这样可以通过不传参数来实现取默认值。

const multiply = (x = 10, y) => x * y;

// 这种情况要让 x 走默认值，必须显示传 undefined
let res = multiply(undefined, 2);