9个实用的JavaScript开发技巧，你一定要看下

╰+攻爆jí腚メ 2023-01-12 15:53 158阅读 0赞

![51f40ee7a3f622030ceccd5120ee7711.png][]

英文 | https://javascript.plainenglish.io/9-javascript-hacks-nobody-talks-about-f15445e301ca

翻译 | web前端开发公众号

从Web开发到机器学习再到应用程序开发，JavaScript拥有大量的应用程序列表。

幸运的是，JavaScript提供了可以方便使用的全面功能列表，但是，其中许多功能和hack并不流行，很少被谈论。

有了如此众多的应用程序和用例，代码的复杂性也随之增加，知道这些开发技巧的窍门肯定可以为你节省大量时间。

因此，我整理了9个没人讨论过的实用JavaScript开发技巧清单，希望对你有所帮助，我们现在开始吧。

## **1、快速调整大小和清空数组** ##

编程时我们经常需要更改或清空数组。执行此操作的最有效方法是使用Array.length方法。

const array = [1,2,3,4,5]; 
    console.log（array）; // 5
    array.length--; 
    console.log（array）; // 4
    array.length + = 15; 
    console.log（array）; // 19

该代码段的输出为：

[1, 2, 3, 4, 5]
    [1, 2, 3, 4]
    [1, 2, 3, 4, ..15 empty]
    undefined

你还可以通过将长度设置为0来删除数组的所有元素。

let arr= ['a', 'b', 'c'];
    arr.length = 0;
    console.log(arr.length); // Ouput=> 0
    console.log(arr); // Output=> []

## **2、有条件的快捷方式** ##

在编程过程中，当满足特定条件时，你可能需要一段特定的代码。

例如，你可能想要向未登录的用户显示登录页面，而当用户登录时，你想要显示主页。可以使用条件语句来实现这种逻辑。

var x=1;
    if(x==1){
        console.log(x)
      }
    else{
        console.log("Error")
      }

但是，可以使用三元运算符（?和:）轻松实现这种逻辑。

它需要三个操作数：一个条件，后跟一个?，如果条件为true，则要执行的表达式，然后是a :，然后是条件为false时必须执行的表达式。

让我们看一下代码，以更好地理解它。

var x=1;
    console.log( x==1? x: "Error"); //Output: 1

## **3、动态导入** ##

导入模块的标准方法很简单，但是当你需要动态导入函数时又会怎样呢？

import defaultExport from "module-name";
    import { export1 as alias1 } from "module-name";
    import { export1 , export2 } from "module-name";
    import { export1 , export2 as alias2 , [...] } from "module-name";
    import defaultExport, { export1 [ , [...] ] } from "module-name";
    import defaultExport, * as name from "module-name";

你可能仅在满足某些条件时才需要导入某些特定模块，而这正是动态导入起作用的地方。你可以使用import功能动态导入模块。

要动态导入，请使用关键字import作为函数并传入模块名称。

import（'some-module'）
         . 
         then（obj => ...）. catch（err => console.log（err））

如你所见，它返回一个promise，解析为一个模块对象。

静态导入可用于导入关键和必要的模块，而动态导入可提供一些好处：

1.  静态导入会增加代码的加载时间，也可能导致未使用的模块。
2.  静态导入说明符字符串不能动态生成。
3.  静态导入会导致不必要的内存使用。

## **4、空位合并运算符** ##

如果需要检查某个值是否为null，然后分配一个默认值，则空值合并运算符（??）可以是实时保存程序。这样可以防止应用程序出现无法预料的错误和意外行为。

const name = null ?? 'Anonymous';
    console.log(name); // Output=> 'Anonymous'
    const age= undefined?? 18;
    console.log(bar); // Output=> 18

换句话说，当左侧操作数为undefined（或null）时，此运算符将返回右侧操作数。

该操作员提供的巨大优势立即显现出来。

它不仅会导致更多的无错误代码，而且还将有助于避免可能导致崩溃的意外情况。

值得注意的是，可以使用OR运算符（||）来实现相同的目的。

let firstName = null; 
    let lastName = null; 
    let nickName = "Guest";  
    // shows the first truthy value: 
    alert(firstName || lastName || nickName || "Anonymous"); 
    //Guest

OR（||）和无效合并运算符（??）略有不同，即|| 运算符返回第一个真实值，而?? 运算符返回第一个指定值。

## **5、合并数组** ##

数据集越大，合并两个数组时所需的计算能力就越大。

最简单和常用的方法是使用该Array.prototype.concat()方法。

const array1 = ['a'，'b'，'c']; 
    const array2 = ['a'，'e'，'f']; 
    const array3 = array1.concat（array2）;
    console.log（array3）; 
    //输出=>数组[“ a”，“ b”，“ c”，“ a”，“ e”，“ f”]

但是，在处理庞大的数据集时，Array.prototype.concat()并不是最有效的选择，因为这是一个内存密集型任务，因为它会创建一个新数组。

在这种情况下，使用该Array.push.apply(arr1, arr2)方法是更好的选择，因为它合并了两个数组而不创建一个新数组。

let list1 = ['a', 'b', 'c'];
    let list2 = ['a', 'e', 'f'];
    list1.push.apply(list1, list2);
    console.log(list1);
    //Output=> Array ["a", "b", "c", "a", "e", "f"]

## **6、最少的评估** ##

如果要将变量分配给另一个变量，则可能要检查要分配的变量的值是否不为null。

使用一条if语句可以简单地执行此操作，但是，编写if具有多个条件评估的语句可能很麻烦，甚至可能导致错误。

if (var1 !== null || var1 !== undefined || var1 !=='') {
         var2 = var1;
    }

但是，实现此目的的简捷方法存在于JavaScript中。

var2 = var1 || 'Some value';

## **7、默认参数值** ##

你的应用可能会允许用户选择输入自定义值或使用默认值。

这在计算器应用中很常见，在该应用中，除非用户提供了不同的默认利率，否则使用默认利率（例如6.5％）。

同样，可以使用if语句简单地实现此逻辑。

function calculator(principle,rate,time) {
      if (principle === undefined)
        principle = 5000;
      if (rate === undefined)
        rate = 6;
      if (time===undefined)
        time = 3;
      ....
    }

实际上，实现此目的的简便方法非常简单。

function calculator(principle=5000, rate=6, time=3){
       ...
    }

你基本上是在函数声明本身中分配默认值。

## **8、in 运算符** ##

如果要检查对象或其原型链中是否存在指定的属性，则in运算符将为你提供便利。

换句话说，in运算符使检查对象或其原型链中是否存在已定义的属性变得更加容易。

const car = { make: 'Honda', model: 'Accord', year: 1998 };
    console.log('make' in car);
    // expected output: true
    delete car.make;
    if ('make' in car === false) {
      car.make = 'Suzuki';
    }
    console.log(car.make);
    // expected output: "Suzuki"

该运算符返回true 或false。

当使用DOM（文档对象模型）时，此属性将非常有用。

var q= "onrender" in  document.createElement("div");
    if(q){
      ...
    }
    else{
      ...
    }

## **9、强制参数检查** ##

有时，你需要具有某些值才能成功完成任务。

例如，登录电子邮件帐户时，你必须提供电子邮件地址。

同样，注册某些社交媒体平台时，可能需要提供姓名，年龄，电子邮件和电话号码。在这里，平台无法提供默认值。

从开发人员的角度来看，检查是否提供了强制性值，而不是null，令人厌烦的检查，如果需要多次执行检查并且涉及多个这样的强制性值，则更加麻烦。

function submitName(name) {
      if(name=== undefined) {
        throw new Error('Missing parameter');
      }
      return name;
    }

幸运的是，快速检查参数值是否为null的简便方法是通过在此列表上实施＃7 hack（即默认参数值）来完成。

你需要创建一个仅引发错误的函数，以解决缺少的参数问题。

创建此功能后，需要将其分配为必填参数的默认值。