20个简洁的 JS 代码片段

困惑吗？让我解释一下它是如何工作的：

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

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

3、 较短的 If-Else 的空合并

=======================

这也是 if-else 的简写。

你可以使用看涨合并，而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??，如果没有定义左侧返回右侧。如果是，则返回左侧：

let maybeSomething;

// LONG FORM

if(maybeSomething){

console.log(maybeSomething)

} else {

console.log(“Nothing found”)

}

//SHORTHAND

console.log(maybeSomething ?? “Nothing found”)

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、将任何值转换为布尔值

================

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

例如，这里有一些例子：

!!true // true

!!2 // true

!![] // true

!!“Test” // true

!!false // false

!!0 // false

!!“” // false

7、扩展运算符

===========

使用扩展运算符组合两个数组…：

const nums1 = [1, 2, 3];

const nums2 = [4, 5, 6];

// LONG FORM

let newArray = nums1.concat(nums2);

// SHORTHAND

newArray = […nums1, …nums2];

也可以使用此语法代替将值推送到数组：

let numbers = [1, 2, 3];

// LONGER FORM

numbers.push(4);

numbers.push(5);

// SHORTHAND

numbers = […numbers, 4, 5];

8、传播解构

==========

使用扩展运算符将剩余元素分配给变量：

const student = {

name: “Matt”,

age: 23,

city: “Helsinki”,

state: “Finland”,

};

// LONGER FORM

const name = student.name;

const age = student.age;

const address = { city: student.city, state: student.state };

// SHORTHAND

const { name, age, …address } = student;

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

===================

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

var isReady = true;

function doSomething(){

console.log(“Yay!”);

}

// LONGER FORM

if(isReady){

doSomething();

}

// SHORTHAND

isReady && doSomething();

10、类固醇的字符串

==============

通过将字符串包装在反引号内并${}用于嵌入值，从而在字符串之间插入变量。

例如：

const age = 41;

const sentence = I'm ${age} years old;

// result: I’m 41 years old

11、 从数组中查找特定元素

==================

使用find()方法查找匹配特定条件的元素：

const fruits = [

{ type: “Banana”, color: “Yellow” },

{ type: “Apple”, color: “Green” }

];

// LONGER FORM

let yellowFruit;

for (let i = 0; i < fruits.length; ++i) {

if (fruits[i].color === “Yellow”) {

yellowFruit = fruits[i];

}

}

// SHORTHAND

yellowFruit = fruits.find((fruit) => fruit.color === “Yellow”);

12、对象属性赋值

=============

你是否希望对象键与值具有相同的名称？你可以省略对象文字来执行此操作：

const name = “Luis”, city = “Paris”, age = 43, favoriteFood = “Spaghetti”;

// LONGER FORM

const person = {

name: name,

city: city,

age: age,

favoriteFood: favoriteFood

};

// SHORTHAND

const person = { name, city, age, favoriteFood };

13、压缩 For 循环

================

使用内置forEach()方法通过一行代码循环遍历数组：

const numbers = [1, 2, 3, 4, 5];

// LONGER FORM

for(let i = 0; i < numbers.length; i++){

console.log(numbers[i]);

}

// SHORTHAND

numbers.forEach(number => console.log(number));

14、 默认功能参数

==============

你可以为函数参数提供默认值：

// LONG FORM

function pickUp(fruit) {

if(fruit === undefined){

console.log(“I picked up a Banana”);

} else {

console.log(I picked up a ${fruit});

}

}

// SHORTHAND

function pickUp(fruit = “Banana”) {

console.log(I picked up a ${fruit})

}

pickUp(“Mango”); // -> I picked up a Mango

pickUp(); // -> I picked up a Banana

15、将对象的值收集到数组中

==================

用于Object.values()将对象的所有值收集到一个新数组中：

const info = { name: “Matt”, country: “Finland”, age: 35 };

// LONGER FORM

let data = [];

for (let key in info) {

data.push(info[key]);

}

// SHORTHAND

const data = Object.values(info);

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

=====================

这不一定是速记，因为你几乎不会保存几个字符。但这是一种更清洁的方法。

你可以使用 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

17、压缩多个条件

=============

避免使用长|| 检查多个条件链，你可以使用你刚刚在上一个技巧中学到的东西——即，使用 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”);

}

18、 指数运算符

=============

你Math.pow()习惯把一个数字提高到一个幂吗？你知道你也可以使用**运算符吗？

// LONGER FORM

Math.pow(4,2); // 16

Math.pow(2,3); // 8

// SHORTHAND

4**2 // 16

2**3 // 8

19、 Math.floor() 简写

=======================

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

例如：

// LONG FORM

Math.floor(5.25) // -> 5.0

// SHORTHAND

~~5.25 // -> 5.0

20、 用一行代码分配多个值

==================

使用解构语法在一行中分配多个值：