几个让 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);
}