JS 代码优化片段

1、单行 If-Else 语句

const age = 12;
let ageGroup;


// LONG FORM
if (age > 18) {
  ageGroup = "An adult";
} else {
  ageGroup = "A child";
}


// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";

2、从数组中删除重复项

在 JavaScript 中，Set 是一个集合，它允许你仅存储唯一值。这意味着删除任何重复的值。

因此，要从数组中删除重复项，你可以将其转换为集合，然后再转换回数组

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。

2）、展开运算符...将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]

 

3.空值合并操作符（??）

只有当左侧为null和undefined时，才会返回右侧的数空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

|| 和 ??

var a = obj || {}   相当于

function(obj){
var a;
if(
obj === 0 || 
obj === "" || 
obj === false || 
obj === null || 
obj === undefined
){
a = {}
} else {
a = obj;
}
}

function(obj){ var a = obj ?? {} }  相当于  function(obj){ var a; if( obj === null || obj === undefined ){ a = {} } else { a = obj; } }

4、防止崩溃的可选链

如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。

在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。

const student = {
  name: "Matt",
  age: 27,
  address: {
    state: "New York"
  },
};


// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined


// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined

5、在没有第三个变量的情况下交换两个变量

在 JavaScript 中，你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个：

解构赋值

let x = 1;
let y = 2;


// LONGER FORM
let temp = x;
x = y;
y = temp;


// SHORTHAND
[x, y] = [y, x];

6、！！  将任何值转换为布尔值

！是转成布尔值后取反

!null=true
 
!undefined=true
 
!''=true
 
!100=false
 
!'abc'=false

在 JavaScript 中，你可以使用 !! 在 JS 中将任何内容转换为布尔值。

!!true    // true
!!2       // true
!![]      // true
!!"Test"  // true


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

 

7、 使用 && 进行短路评估

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

var isReady = true;


function doSomething(){
  console.log("Yay!");
}


// LONGER FORM
if(isReady){
  doSomething();
}


// SHORTHAND
isReady && doSomething();

8、检查一个项目是否存在于数组中

你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。这使你的意图非常明确：

 

let numbers = [1, 2, 3];


// LONGER FORM
const hasNumber1 = numbers.indexOf(1) > -1 // -> True


// SHORTHAND/CLEANER APPROACH
const hasNumber1 = numbers.includes(1)     // -> True

9、压缩多个条件

避免使用长|| 检查多个条件链，你可以使用你刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：

const num = 1;


// LONGER FORM
if(num == 1 || num == 2 || num == 3){
  console.log("Yay");
}


// SHORTHAND
if([1,2,3].includes(num)){
  console.log("Yay");
}

 10、Math.floor() 简写

四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗？

// LONG FORM
Math.floor(5.25) // -> 5.0


// SHORTHAND
~~5.25 // -> 5.0