20个简洁的 JS 代码片段

当前位置： 首页 » 记录 » javascript » 20个简洁的 JS 代码片段

分类： javascript 86阅读阅读模式

1、单行 If-Else 语句

可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。

例如：

  1. const age = 12;
  2. let ageGroup;
  4. // 冗长的
  5. if (age > 18) {
  6.   ageGroup = "An adult";
  7. } else {
  8.   ageGroup = "A child";
  9. }
  11. // 简洁的
  12. ageGroup = age > 18 ? "An adult" : "A child";

但是，不要过度使用它。过度使用会使你的代码更加冗长且难以解读。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。

2、从数组中删除重复项

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

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

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

原理：

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

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

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

这也是 if-else 的简写。

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

  1. let maybeSomething;
  3. // 冗长的
  4. if(maybeSomething){
  5.   console.log(maybeSomething)
  6. } else {
  7.   console.log("Nothing found")
  8. }
  10. // 简洁的
  11. console.log(maybeSomething ?? "Nothing found")

4、防止崩溃的可选链

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

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误

例如：

  1. const student = {
  2.   name: "Matt",
  3.   age: 27,
  4.   address: {
  5.     state: "New York"
  6.   },
  7. };
  9. // 冗长的
  10. console.log(student && student.address && student.address.ZIPCode); // 不存在 - 返回undefined
  12. // 简洁的
  13. console.log(student?.address?.ZIPCode); // 不存在 - 返回undefined

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

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

  1. let x = 1;
  2. let y = 2;
  4. // 冗长的
  5. let temp = x;
  6. x = y;
  7. y = temp;
  9. // 简洁的
  10. [x, y] = [y, x];

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

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

例如，这里有一些例子：

  1. !!true    // true
  2. !!2       // true
  3. !![]      // true
  4. !!"Test"  // true
  6. !!false   // false
  7. !!0       // false
  8. !!""      // false

7、扩展运算符

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

  1. const nums1 = [1, 2, 3];
  2. const nums2 = [4, 5, 6];
  4. // 冗长的
  5. let newArray = nums1.concat(nums2);
  7. // 简洁的
  8. newArray = [...nums1, ...nums2];

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

  1. let numbers = [1, 2, 3];
  3. // 冗长的
  4. numbers.push(4);
  5. numbers.push(5);
  7. // 简洁的
  8. numbers = [...numbers, 4, 5];

8、拓展解构

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

  1. const student = {
  2.   name: "Matt",
  3.   age: 23,
  4.   city: "Helsinki",
  5.   state: "Finland",
  6. };
  8. // 冗长的
  9. const name = student.name;
  10. const age = student.age;
  11. const address = { city: student.city, state: student.state };
  13. // 简洁的
  14. const { name, age, ...address } = student;

9、 使用 && 进行缩减判断

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

  1. var isReady = true;
  3. function doSomething(){
  4.   console.log("Yay!");
  5. }
  7. // 冗长的
  8. if(isReady){
  9.   doSomething();
  10. }
  12. // 简洁的
  13. isReady && doSomething();

10、模板字符串

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

例如：

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

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

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

  1. const fruits = [
  2.   { type: "Banana", color: "Yellow" },
  3.   { type: "Apple", color: "Green" }
  4. ];
  6. // 冗长的
  7. let yellowFruit;
  8. for (let i = 0; i < fruits.length; ++i) {
  9.   if (fruits[i].color === "Yellow") {
  10.     yellowFruit = fruits[i];
  11.   }
  12. }
  14. // 简洁的
  15. yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");

12、对象属性赋值

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

  1. const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";
  3. // 冗长的
  4. const person = {
  5.   name: name,
  6.   city: city,
  7.   age: age,
  8.   favoriteFood: favoriteFood
  9. };
  11. // 简洁的
  12. const person = { name, city, age, favoriteFood };

13、压缩 For 循环

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

  1. const numbers = [1, 2, 3, 4, 5];
  3. // 冗长的
  4. for(let i = 0; i < numbers.length; i++){
  5.   console.log(numbers[i]);
  6. }
  8. // 简洁的
  9. numbers.forEach(number => console.log(number));

14、 参数默认值

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

  1. // 冗长的
  2. function pickUp(fruit) {
  3.   if(fruit === undefined){
  4.     console.log("I picked up a Banana");
  5.   } else {
  6.     console.log(`I picked up a ${fruit}`);
  7.   }
  8. }
  10. // 简洁的
  11. function pickUp(fruit = "Banana") {
  12.   console.log(`I picked up a ${fruit}`)
  13. }
  15. pickUp("Mango"); // -> I picked up a Mango
  16. pickUp();        // -> I picked up a Banana

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

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

  1. const info = { name: "Matt", country: "Finland", age: 35 };
  3. // 冗长的
  4. let data = [];
  5. for (let key in info) {
  6.   data.push(info[key]);
  7. }
  9. // 简洁的
  10. const data = Object.values(info);

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

可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。

  1. let numbers = [1, 2, 3];
  3. // 冗长的
  4. const hasNumber1 = numbers.indexOf(1) > -1 // -> True
  6. // 简洁的/CLEANER APPROACH
  7. const hasNumber1 = numbers.includes(1)     // -> True

17、压缩多个条件

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

  1. const num = 1;
  3. // 冗长的
  4. if(num == 1 || num == 2 || num == 3){
  5.   console.log("Yay");
  6. }
  8. // 简洁的
  9. if([1,2,3].includes(num)){
  10.   console.log("Yay");
  11. }

18、 指数运算符

是否习惯了使用 Math.pow() 做幂运算？推荐更简洁的**运算符

  1. // 冗长的
  2. Math.pow(4,2); // 16
  3. Math.pow(2,3); // 8
  5. // 简洁的
  6. 4**2 // 16
  7. 2**3 // 8

19、 Math.floor() 简写

向下取整使用Math.floor() 并不是什么新鲜事。但是也可以使用~~运算符

例如：

  1. // 冗长的
  2. Math.floor(5.25) // -> 5.0
  4. // 简洁的
  5. ~~5.25 // -> 5.0

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

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

  1. let num1, num2;
  3. // 冗长的
  4. num1 = 10;
  5. num2 = 100;
  7. // 简洁的
  8. [num1, num2] = [10, 100];

这也适用于使用对象：

  1. student = {
  2.   name: "Matt",
  3.   age: 29,
  4. };
  6. // 冗长的
  7. let name = student.name;
  8. let age = student.age;
  10. // 简洁的
  11. let { name, age } = student;

 

英文 | https://medium.com/geekculture/20-javascript-snippets-to-code-like-a-pro-86f5fda5598e

翻译 | 杨小二

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
永久固定短链接地址：
本文转载于网络，如对文章有疑问，请点击原文地址，咨询原作者。

相关文章

评论一下

相关评论 当前评论 1 条 [ 游客 1 | 博主 0 ]

  1. 大海说道：
    2021年9月11日 22:23

    作者留个联系方式呗

    回复