前端开发技巧总结

1、 空合并

空合并运算符 ?? ，如果左侧未定义，则返回右侧。如果是，则返回左侧：

let maybeSomething;
 
// LONG FORM
if(maybeSomething){
  console.log(maybeSomething)
} else {
  console.log("Nothing found")
}
 
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")
console.log(maybeSomething || "Nothing found")

2、可选链

如果你使用运算符访问对象的属性，但未定义该属性，则会引发错误。这是使用可选链接的地方。

如果你使用可选链运算符？，并且属性未定义，返回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

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

使用双感叹号 (!!) 在 JS 中将任何内容转换为布尔值。

!!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 numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

6、 类固醇的字符串

你可以通过将字符串包装在反引号内并使用${}来嵌入值来直接将变量嵌入到字符串中：

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

7、对象属性分配

如果你希望对象键与值具有相同的名称，则可以省略对象文字：

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

7、更短的 for 循环

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

8、 函数参数的默认值

在 JavaScript 中，你可以为函数参数提供默认值，以便可以带或不带参数调用函数：

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

顺便说一句，你还可以使用箭头函数使其更短！

 
const pick = (fruit = "Banana") => console.log(`I picked up a ${fruit}`)

9、声明变量

你可以像这样巧妙地将变量声明组合成一行：

// LONGER FORM
let name;
let age;
let favoriteFood = "Pizza";
 
// SHORTHAND
let name, age, favoriteFood = "Pizza";

10、 将值放入数组

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

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、检查一个项目是否在数组中

你可以使用 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、检查多个条件

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

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

在 JavaScript 中，您可以使用解构从数组中提取值。这也可用于在没有第三个帮助程序的情况下交换两个变量：

let x = 1;
let y = 2;
 
// LONGER FORM
let temp = x;
x = y;
y = temp;
 
// SHORTHAND
[x, y] = [y, x];

15、舍入数字时 Math.floor 的简写

你可以使用 ~~ 运算符，而不是使用 Math.floor() 函数来向下舍入数字：

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

16、将字符串转换为数字

你可以使用一元运算符 ( +) 将字符串转换为数字：

// LONGER FORM
const num = parseInt("1000");
 
// SHORTHAND
const num = +"1000";
 
//也可以让这一项乘1来实现隐式转换
const num = "1000" * 1;

17、字符串去空格

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g,"");};

18、input 检测输入数字

replace(/^\.$/g,"")  //清除第一个“.”  
replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3') //只能输入3个小数 

19、获取数组并集、交集、差集

let a = new Set([1, 2, 3]); 
let b = new Set([4, 3, 2]); 
// 并集 
let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} 
// 交集 
let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} 
// （a 相对于 b 的）差集 
let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

20、字符串去重

let str = "352255"; 
let unique = [...new Set(str)].join(""); // 352