JavaScript |十大技巧和窍门

对于 Web 开发或跨平台开发， JavaScript越来越受欢迎。曾经它只被认为是一种前端脚本语言，但现在它作为后端也越来越受欢迎。甚至 Facebook 的 React Native 也是基于 JavaScript 的。因此，了解 JavaScript 中的一些技巧肯定是有益的，这些技巧不仅可以防止我们编写额外的代码行，还可以使我们的代码简洁高效。
1. 更快的数组索引：考虑一个数组[10, 9, 8, 7, 6] ，如果我们想将此数组的值分配给任何变量，我们的首选方法是const a = array[0] 。如果我们想分配多个变量，继续这样做会很乏味。

• 代码 1：老派的方式。
  

html

    var array1 = [10, 9, 8, 7, 6];
    var x = array1[0];
    var y = array1[1];
    var z = array1[2];
    document.write("x = " + x + "<br>");
    document.write("y = " + y + "<br>");
    document.write("z = " + z + "<br>");

• 输出：
  

x = 10
y = 9
z = 8

• 代码 2：更聪明的方法。
  

html

    var array2 = [10, 9, 8, 7, 6];
    var [x, y, z, ...rest] = array2;
    document.write("x = " + x + "<br>");
    document.write("y = " + y + "<br>");
    document.write("z = " + z + "<br>");
    document.write("rest = " + rest + "<br>");

• 输出：
  

x = 10
y = 9
z = 8
rest = 7, 6

2. 定义函数：这个想法是将一些常见或重复的任务放在一起并制作一个函数，这样我们就可以调用该函数，而不是为不同的输入一次又一次地编写相同的代码。每个人都必须在 JavaScript 中使用过这样的函数。

• 代码 1：以标准形式定义函数。
  

html

 

     
Usual function in JavaScript
 
    
 
 
    
        function myFunction(p1, p2) {
            return p1 * p2;
        }
        document.getElementById("demo").innerHTML
                = myFunction(4, 3);
    

 

• 输出：
  

Usual function in JavaScript
12

• 代码 2：还有另一种方法可以将函数视为变量，而不是一个非常有用的技巧，但仍然是一些新的东西。将函数保存在变量中，它使用这样的箭头函数。
  

javascript

 

     

        Function treated as
        variable in JavaScript:
    
 
 
    
 
 
    
        var myFunction = (p1, p2) => {
            return p1 * p2;
        }
        document.getElementById("demo")
            .innerHTML = myFunction(4, 3);
    

 

• 输出：
  

Function treated as variable in JavaScript
12

3. 在一行中定义函数：现在这个技巧真的很酷。如果您了解Python，您可能知道lambda函数，它表现为任意函数并且写在一行中。好吧，我们在 JavaScript 中不使用lambda函数，但我们仍然可以编写单行函数。假设我们想计算两个数字a和b的乘积，我们可以在一行脚本中完成。我们不需要专门编写return语句，因为这种定义方式已经意味着它将自己返回输出。

• 代码：
  

javascript

  

     

        Function treated as
        variable in JavaScript
    
 
  
    
 
  
    
        const productNum = (a, b) => a * b
 
        document.getElementById("demo")
            .innerHTML = myFunction(4, 3);
    

  

• 输出：
  

Function treated as variable in JavaScript
12

4. 布尔值：虽然每种编程语言，都只有两个布尔值True和False 。 JavaScript 通过引入允许用户创建布尔值的功能将其更进一步。与True和False不同，它们通常分别被称为“Truthy”和“Falsy”。为避免混淆，除0、False、NaN、null、“”之外的所有值都默认为 Truthy。布尔值的这种扩展使用有助于我们有效地检查条件。

• 代码：
  

javascript

    const a = !1;
    const b = !!!0;
 
    console.log(a);
    console.log(b);

• 输出：
  

False
True

5.过滤布尔值：有时我们可能想要过滤掉所有的布尔值，比如数组中的“Falsy” bools( 0, False, NaN, null, “” )，这可以通过结合使用map和filter函数来完成.在这里，它使用布尔关键字来过滤掉 Falsy 值。

• 代码：
  

JavaScript

arrayToFilter
    .map(item => {
        // Item values
    })
     
    .filter(Boolean);

Input: [1, 2, 3, 0, "Hi", False, True]

Output: [1, 2, 3, "Hi", True]

6. 创建完全空的对象：如果要求在 JavaScript 中创建一个空对象，我们的第一个 go-to 方法将使用花括号并将其分配给一个变量。但这不是一个空白对象，因为它仍然具有 JavaScript 的对象属性，例如__proto__和其他方法。有一种方法可以创建一个没有任何现有对象属性的对象。为此，我们使用字典并将其分配给空值，其__proto__未定义。

• 代码：
  

javascript

 
    /* Using .create() method to create
       a completely empty object */
 
    let dict = Object.create(null);
 
    // dict.__proto__ === "undefined"

7. 截断数组：虽然.splice ()方法被广泛用于剪切或删除数组的特定部分，但它的最坏情况时间复杂度为O(n)。从数组末尾删除元素存在更好的选择。它使用.数组的长度属性来做到这一点。

• 代码：
  

javascript

let arrayToTruncate = [10, 5, 7, 8, 3, 4, 6, 1, 0];
 
/* Specifying the length till where the
   array should be truncated */
arrayToTruncate.length = 6; 
console.log(arrayToTruncate)

• 输出：如所见，我们必须知道要以这种方式截断的数组的长度，否则会导致错误。这里的运行时间为 O(k)，其中 k 是将留在数组中的元素数。
  

[10, 5, 7, 8, 3, 4]

8. 合并对象：扩展运算符（ … ）的引入允许用户轻松地合并到或更多对象，这以前通过创建单独的函数来实现。

• 代码 1：
  

javascript

function mergeObjects(obj1, obj2) {
    for (var key in obj2) {
        if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key];
    }
    return obj1;
}

• 代码2：通过使用扩展运算符，可以轻松实现上述任务，代码也相当清晰。
  

javascript

    const obj1 = {}; // Items inside the object
    const obj2 = {}; // Items inside the object
 
    const obj3 = {...obj1, ...obj2};

Input: 
obj1 = { site:'GeeksforGeeks', purpose:'Education'}
obj2 = { location:'Noida'}

Output:
obj3 = {site:'GeeksforGeeks', purpose:'Education', location:'Noida'}

9. 更快的条件检查：检查和循环条件是每种编程语言的重要组成部分。在 JavaScript 中，我们这样做：

• 代码 1：
  

javascript

if (condition) {
    doSomething();
}

• 代码 2：但是，使用按位运算符更容易检查条件，也使代码变成了一行：
  

javascript

    condition && doSomething();

10. 使用正则表达式替换所有字符：很多时候，人们会遇到这样一种情况，即每次出现一个字符或一个子字符串，但不幸的是， .replace()方法只替换了一个出现的实例。我们可以通过使用带有.replace()方法的正则表达式来解决这个问题。

• 代码：
  

javascript

    var string = "GeeksforGeeks"; // Some string
 
    console.log(string.replace(/eek/, "ool"));

• 输出：
  

"GoolsforGools"