20个适合初级开发者超好用的JS小技巧

清疚 2022-09-10 03:19 158阅读 0赞

![783feca2c83aed0f3ecd5c0e38bd8432.png][]

英文 | https://javascript.plainenglish.io/20-awesome-tips-for-better-and-more-professional-coding-with-javascript-2becaedb5f9

翻译 | 杨小二

JavaScript 是流行编程语言之一，也是许多开发人员最喜欢的语言之一。你可以用它构建 Web 或移动混合应用程序，甚至是机器人开发学习。该语言对于初学者来说，也不是那么困难。

但是，你有一些现实生活中的问题需要在 JavaScript 中解决。其中一些你可以快速解决，而其中一些则很棘手。

今天，在本文中，我们将介绍 20 个技巧，这些技巧可以更好地编码，以更好、更轻松地的方式解决 JavaScript 中的问题。这些技巧可能对专业开发人员有所帮助，但对新开发人员来说也会很有趣。

**1、数字转换字符串/字符串转换数字**

这个技巧很简单，它可以帮助你将数字转换为字符串或将字符串转换为数字。查看下面的代码示例以了解转换的工作原理。

// number to string
    let num1 = 4
    let string1 = num1.toString();
    // string to number
    let string2 = "5"
    let num2 = Number(string2)

**2、短循环**

在 JavaScript 中，你通常知道编写多行循环，但你却很少使用编写仅一行的短循环。想知道怎么做？查看下面的示例代码。

const ProgrammingLang = ["JavaScript", "Python", "C++", "Dart", "Java"]
    // Long Loop Version
    for (let i = 0; i < ProgrammingLang.length; i++) {
      const lang = ProgrammingLang[i];
      console.log(lang);
    }
    // Short Loop Version
    for (let lang of ProgrammingLang) console.log(lang);

**3、性能计算**

这个技巧将帮助你计算代码性能，与在 Google Chrome 上完成的性能计算相同。

const startTime = performance.now();
    something();
    const endTime = performance.now();
    console.log("function took ${startTime - endTime} milliseconds");

**4、以简单的方式交换值**

当你需要在没有任何额外变量（如 temp）的情况下交换值时，这个技巧对你来说会很方便。这个技巧是交换值的一种简单快捷的方法。

let a = 5; 
    let b = 6;
    [a, b] = [b, a]
    console.log(a) // 6
    console.log(b) // 5

**5、合并数组**

这个技巧将帮助你将数组合并为一个数组。查看下面的代码以了解它是如何工作的。

const names1 = ["Haider", "John", "Jessica"];
    const names2 = ["Ferb", "Emma", "Watson"];
    const allnames = [...names1, ...names2];
    console.log(allnames); // ["Haider", "John", "Jessica", "Ferb", "Emma", "Watson"]

**6、以简单的方式删除重复项**

这个技巧将帮助你在短时间内以简单的方式从数组中删除所有重复项。

const fruits = ["apple", "mango", "orange", "apple", "pineapple", "pineapple", "peach", "mango"]
    const fruiteWithoutDupli = [...new Set(fruits)];
    console.log(fruiteWithoutDupli) // [ "apple", "mango", "orange", "pineapple", "peach" ]

**7、验证给定的参数是数字**

这个技巧将向你展示如何验证你在函数中传递的参数是否为数字。

function isNumber(num){
        return !isNaN(parseFloat(num)) && isFinite(num);
    }
    isNumber(34) // true
    isNumber('JavaScript') // false

**8、验证给定参数是一个数组**

本技巧将向你展示如何验证在函数中传递的参数是否为数组。

function isArray(arr){
        return Object.prototype.toString.call(arr) === '[object Array]' ;
    }
    isArray([34]) // true
    isArray('JavaScript') // false

**9、清空数组**

这是在一行代码中完全清空数组的最酷技巧。查看下面的代码以了解它是如何工作的。

var array1 = [ "JavaScript", "Python", "C++" ];
    array1.length = 0;
    console.log(array1) // [] array will become empty

**10、从数组中获取最大值和最小值**

本技巧将指导你以快速简便的方式从数组中查找最小值和最大值。现在你不需要为此问题编写长循环即可实现这一功能。

var  numbers = [1, 6, 2, 8, 10, 11 ,24, 3, 9];
    var max = Math.max.apply(Math, numbers); // 24
    var min = Math.min.apply(Math, numbers); // 1

**11、 数组中的随机项**

在本技巧中，我将向你展示如何从数组中获取随机项。这个随机项可以是字符串或整数或任何数据类型。

var items = [1, 4, 5, 6, 7, 8];
    var  randomItem = items[Math.floor(Math.random() * items.length)];
    console.log(randomItem) // 4

**12、错误处理**

有时会出现不寻常的错误，并使开发人员处理这些错误成为一个问题。这个技巧在这方面很有用。我将向你展示如何在不终止整个程序的情况下使用 try-except 语句处理错误。

var items = [1, 4, 5, 6, 7, 8];
    try 
    {
      console.log(items[2])
    }
    catch (error)
    {
      console.log("we got an error")
    }

**13、 缩短你的数组**

缩短数组的一个好方法是使用长度方法。这个技巧将指导你使用长度方法来缩短数组，我认为这是一种快速简便的方法。但这一种破坏性的方式，这意味着你可能会丢失数组中其他已删除的元素。

var items = [1, 4, 5, 6, 7, 8];
    items.length = 4
    console.log(items) //[1, 4, 5, 6]

**14、 避免在循环中使用 For —**

你应该避免使用 for-in 循环。取而代之的是，你应该使用比 for-in 循环快得多的普通循环。

// for in loop
    var numbers = [1, 3, 4, 5]
    var sum = 0;  
    for (var i in numbers) 
    {  
        sum += numbers[i];  
    }
    // instead use this
    var numbers = [1, 3, 4, 5]
    var sum = 0;  
    for(var i=0; i < numbers.length; i++)
    {
      sum +=numbers[i];
    }

**15、使用map函数在数组中循环**

循环数组是一个耗时且代价高昂的问题，但我们可以使用 map 函数以更快的方式完成此操作。本技巧将向你展示如何使用 map 函数循环遍历数组。

var squares = [1,2,3,4].map(function (val) {  
        console.log(val)
    }); 
    // Output
    // 1
    // 2
    // 3
    // 4

**16、逗号运算符**

这个技巧将帮助你理解逗号运算符。逗号运算符 (,) 计算其每个操作数（从左到右）并返回最后一个操作数的值。

var a = 1
    var b = (a++, 3)
    console.log(a) // 2  value of 'a' is increamented
    console.log(b) // 3

**17、使用正则表达式替换所有字符**

我们可以使用正则表达式替换字符串中的所有字符。以下将向你展示如何做到这一点。

var string = "JavaScript"; 
    
    
    console.log(string.replace(/Script/, "code"));  //Javacode

**18、数组中所有值的总和**

如你所知，我们必须使用循环来计算数组中所有值的总和。但是，这个技巧将帮助你在没有任何循环的情况下计算数组值的总和。

var values = [1, 2, 5, 6];
    var sum = values.reduce((x, y) => x + y);
    console.log(sum); // 14

**19、 打乱数组的元素**

这个技巧很棒，将指导你如何以简单的方式打乱数组的元素。

var arr = [1, 2, 3, 4, 5];
    console.log(arr.sort(function() 
    {
        return Math.random() - 0.5
    }));  //[1, 4, 5, 2, 3]

**20、等号 (== , ===)**

在 JavaScript 中，我们不使用“==”来比较值或数据；我们总是使用“===”。如果你尝试使用双重赋值运算符，则会给你带来问题。

// wrong way
    if(22 == '22'){
      console.log(true)
    }
    //correct way
    if(22 === "22"){
      console.log(true)
    }
    else{
      console.log(false)
    }

**最后想法**

好吧，我知道还有许多其他有关于JavaScript的技巧，但是，今天这20个技巧对我来说很有用（我认为它们对初学者开发人员很有帮助）。

如果我错过了任何重要的JvavScript技巧，请在留言区告诉我，让我知道，非常感谢。

在此，我希望你将来会发现这篇文章对你有所帮助。

祝你能够快乐的编写JavaScript！

#  #

**学习更多技能**

**请点击下方公众号**

![a9c64352de35ccd7870202eedb52e570.gif][]

[783feca2c83aed0f3ecd5c0e38bd8432.png]: /images/20220829/6c254b9e16a54c7aa2af8e710b745723.png
[a9c64352de35ccd7870202eedb52e570.gif]: /images/20220829/6789c2bee31640c6a5f0432928e157b2.png