【无标题】

let => const

// bad
let result = false;
if (userInfo.age > 30) {
  result = true;
}
//
// good
const result = userInfo.age > 30;

有条件地向对象添加属性

// 展开运算符来有条件地向对象中添加属性
const condition = true;
const person = {
  id: 1,
  name: "dby",
  ...(condition && { age: 12 }),
};

使用短路避免报错

解构赋值虽然好用，但是要注意解构的对象不能为 undefined 、null ，否则会报错，故要给被解构的对象一个默认值：

const {a,b,c,d,e} = obj || {};

检查属性是否存在对象中

Object.hasOwn(person, "salary"); // true

遍历对象

用 Object.keys 或者 Object.entries 转 数组进行遍历，而且遍历的是自身属性，不会遍历到原型上。

Object.keys(obj).forEach(key => {
  // ...
})

Object.entries(obj).forEach(([key, val]) => {
  // ...
})

以上，使用 find 方法找到符合条件的项就不会继续遍历

Object.keys(obj).find(key => key === "name");

使用 includes 简化 if 判断

原始：

if (a === 1 || a === 2 || a === 3 || a === 4) {
    // ...
}

优化：

if ([1, 2, 3, 4].includes(a)) {
    // ...
}

空值合并运算符 ??

当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

var a = null;
var b = undefined;

var aa = a ?? 'xxx'
console.log(aa) // 'xxx'

var bb = b ?? 'yyy'
console.log(bb) // 'yyy'

初看和 || 很相像，请看当左值为 0 或 ‘’ 时的区别

var a = 0;
var b = '';

console.log(a ?? 'xxx') // 0
console.log(a || 'xxx') // xxx

console.log(b ?? 'yyy') // ''
console.log(b || 'yyy') // yyy

?? 只在左侧的操作数为 null 或者 undefined 时，返回右值，谨记。

利用解构，可为多个变量同时赋值

//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

使用&&运算符简化if语句

//Longhand
if (isLoggedin) {
    goToHomepage();
 }

//Shorthand
isLoggedin && goToHomepage();

移除对象属性

let obj = {x: 45, y: 72, z: 68, p: 98};

// Longhand
delete obj.x;
delete obj.p;
console.log(obj); // {y: 72, z: 68}

// Shorthand
let {x, p, ...newObj} = obj;
console.log(newObj); // {y: 72, z: 68}