JS实用小技巧

JavaScript 有很多很酷的特性，但大多数初学者和中级开发人员都不知道。 今天，我挑选了 10 个我在日常 JavaScript 项目中使用的技巧。

1、有条件地向对象添加属性
我们可以使用扩展运算符 … 来有条件地向 JavaScript 对象快速添加属性。

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

如果每个操作数的计算结果都为真， && 运算符将返回最后计算的表达式。 因此返回一个对象 { age: 16 }，然后，将其扩展为 person 对象的一部分。
如果condition为 false，则 JavaScript 将执行以下操作：

const person = {
  id: 1,
  name: 'John Doe',
  ...(false), // evaluates to false
};
// spreading false has no effect on the object
console.log(person); // { id: 1, name: 'John Doe' }

2、检查一个属性是否存在于一个对象中
你知道我们可以使用 in 关键字来检查 JavaScript 对象中是否存在属性吗？

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // returns true
console.log('age' in person); // returns false

3、对象中的动态属性名称
使用动态键设置对象属性很简单。 只需使用 [‘key_name’] 符号添加属性：

const dynamic = 'flavour';
var item = {
  name: 'Biscuit',
  [dynamic]: 'Chocolate'
}
console.log(item); // { name: 'Biscuit', flavour: 'Chocolate' }

同样的技巧也可用于使用动态键引用对象属性：

const keyName = 'name';
console.log(item[keyName]); // returns 'Biscuit'