几个让 JS 代码更优雅的代码技巧

从数组中删除重复项目

const arr = [1, 1, 2, 3, 3, 3, 6, 6];
const uniqueArr = [...new Set(arr)]; // [1, 2, 3, 6]

分析一下这一过程：
1）new Set(arr) 从数字列表中创建一个集合。创建集合会自动删除所有重复值。
2）展开运算符 ... 将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(arr)]

较短的 If-else 的空合并

使用空值合并远算符 ?? ，如果您从未听过这个名词，请戳这里

let result;

// Longer form
if (result) {
  console.log(result);
} else {
  console.log('Nothing');
}

// Shorthand
console.log(result ?? 'Nothing');

防止崩溃的可选链

如果访问未定义的属性，则会产生错误。在未定义属性时使用可选链操作符，undefined将返回而不是错误。这可以防止你的代码崩溃。如果您从未听过这个名词，请戳这里

const student = {
  name: 'Jae',
  age: 22,
  address: {
    state: 'China'
  }
};

// Longer form
console.log(student && student.address && student.address.sex); // 不存在，返回undefined

// Shorthand
console.log(student?.address?.sex); // 不存在，返回undefined

将任何值转换为布尔值

!!true  // true
!!2     // true
!![]    // true
!!'Jae' // true

!!false // false
!!0     // false
!!""    // false

使用 && 进行短路评估

不必用if语句检查某事是否为真，可以使用&&运算符：

let isReady = true;
function doSomething() {
  console.log('yes');
}

// Longer form
if (isReady) {
  doSomething();
}

// Shorthand
isReady && doSomething();

从数组中查找特定元素

使用 find() ：

const fruits = [
  { type: 'Apple', color: 'red' },
  { type: 'Banana', color: 'yellow' }
]

// longer form
let yellowFruit;
for (let i = 0; i < fruits.length; ++i) {
  if (fruits[i].color === "Yellow") {
    yellowFruit = fruits[i];
  }
}

// shorthand
yellowFruits = fruits.find(res => res.color === 'yellow');

将对象的值收集到数组中

使用 Object.values()

const obj = {
  name: 'Jae',
  country: 'China',
  age: 22
};

// Longer form
let data = [];
for(let key in obj) {
  data.push(obj[key]);
}

// Shorthand
const data = Object.values(obj);

压缩多个条件

避免使用长 || 检查多个条件链，可以使用 includes() 方法：

const num = 1;

// Longer form
if (num === 1 || num === 2 || num === 3) {
  console.log('yes');
}

// Shorthand
if ([1, 2, 3].includes(num)) {
  console.log('yes');
}