我不知道的那些高效的JS写法

1.从数组中删除重复项

以前在JS里删除重复项是用foreach，当时感觉好不想用这种笨傻的方式啊，有没有像JAVA一样有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)]

2.防止崩溃的可选链

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

3.将任何值转换为布尔值

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

4.扩展运算符

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];

5.传播解构

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;

6.使用 && 进行短路评估

var isReady = true;
 
 
function doSomething(){
  console.log("Yay!");
}
 
 
// LONGER FORM
if(isReady){
  doSomething();
}
 
 
// SHORTHAND
isReady && doSomething();

7.类固醇的字符串

const age = 41;
const sentence = `I'm ${age} years old`;
 
 
// result: I'm 41 years old

8.从数组中查找特定元素

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");

9.对象属性赋值 对象键与值具有相同的名称

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 };

10.默认功能参数

// 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

11.将对象的值收集到数组中

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);

12.检查一个项目是否存在于数组中

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

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

13.压缩多个条件

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");
}

记住了吗?