12 个你可能还未使用的 JS 技巧

偏执的太偏执、 2022-10-11 13:49 135阅读 0赞

![936b4588b86ef910ad54f09d6a16a7ba.png][]

英文 | https://levelup.gitconnected.com/12-javascript-features-youve-probably-never-used-db932c413cdd

翻译 | 杨小二

当我使用 JavaScript 开始我的 Web 开发生涯时。我喜欢寻找技巧和技巧来缩短我的代码编写时间和精力。我主要在 Quora 和 StackOverflow 等热门网站上搜索 JavaScript 技巧或者答案来解决自己遇到的问题。

在本文中，我将向你展示 12 个你可能从未使用过或觉得学习 JavaScript很有趣的功能。

# **1 、短循环** #

你知道在 JavaScript 中你可以在一行中缩短循环吗？这意味着你现在可以为循环编写更少的代码。

var names = ["John", "Trevor", "Steve", "Jacob"]
    // long method
    for(var i = 0;  i < names.length; i++) { 
      console.log(names[i])
    }
    //short single line method
    for(let name of names) console.log(name)

# **2、调整一个数组的长度** #

你知道我们可以使用 JavaScript length方法调整数组的大小吗？长度不仅用于获取数组的大小。如果我们将数组的长度设置为任意数字，它将对数组进行切片。

var array1 = [1, 2, 3, 4, 5, 6]
    var array2 = ["Python", "JavaScript", "C++", "Dart"]
    array1.length=3
    array2.length=1
    console.log(array1) // [1, 2, 3]
    console.log(array2) // ["Python"]

# **3、函数参数** #

你不需要定义函数参数，你可以将函数参数用作数组对象，而无需在函数实现时声明参数。

function add() // no paramter is defined
    {
      var sum = 0
      for(var i=0; i < arguments.length; i++)
      {
          sum=sum + arguments[i]
    
    
      }
      console.log("Total Sum : ", sum) // Total Sum : 9
    }
    // calling function
    add(1, 3, 5)

# **4、 JavaScript 中的时间戳** #

你知道在 JavaScript 中我们有很多方法可以使用 Date 方法来获取日期吗？查看下面的代码示例。

// original method
    var date = new Date()
    timestamp = date.getDate()
    console.log(timestamp)
    // shorter method
    timestamp = new Date().getDate()
    console.log(timestamp)
    // shortest method
    timestamp += new Date();
    console.log(timestamp)

# **5、删除数组中的一个值** #

通常，我们使用 delete 方法从数组中删除一个项目。但这就是在阵列中打孔的方法。它将 undefined 放在删除项目索引上。

我们可以使用该splice方法做一些工作，但它会从数组中完全删除索引，而不会留下任何漏洞。

// synatax :  splice(array index, number of value to delete )
    var array = [1, 2, 3, 4, 5, 6]
    //delete method
    delete array[4]
    //splice method
    array.splice(4,1) 
    console.log(array) // [1, 2, 3, 4, 6]

# **6、JavaScript 中的 IN 运算符** #

通过使用in运算符，你可以检查对象中是否存在键。当你检查对象中是否存在特定键时，这个技巧就会派上用场。

var a = 4 
    var b = 5 
    var list = {1:7, 3:9, 4:0, 2:9}
    console.log(a in list) //true 
    console.log(b in list) // false

# **7、JavaScript 字符串填充** #

JavaScript 填充用在字符串文本中添加。我们可以在字符串的开头或结尾添加填充。这是padStartand的语法padEnd。

padStart(targetLength, padString(optional))
    padEnd(targetLength, padString(optional))

PadString 是两种 Padding 方法中的可选参数。下面是理解他们工作的代码示例。

console.log("123".padStart(5)) // 123 
    console.log("123".padStart(5, "0")) // 00123
    console.log("123".padEnd(5, "0")) // 12300 
    console.log("123".padEnd(10, "0")) // 1230000000

# **8、Power \*\* 运算符** #

此功能将为你节省大量数学计算时间。你可能使用Math.pow()函数来计算数字的幂。但我们可以使用 \*\* 运算符代替它。

// old method
    var p = Math.pow(2,5)
    console.log(p) // 32
    // new method
    var p = 2**5
    console.log(p) // 32

你会认为Math.pow()仍然是最好的方法。那么使用这种方法的长数学方程呢？

// old method
    var p = Math.pow(2,5) + Math.pow(2,5) + Math.pow(2,1) + Math.pow(2,3) + Math.pow(2,4) + Math.pow(2,9)
    console.log(p) // 602
    // new method
    var p = 2**5 + 2**5 + 2**1 + 2**3 + 2**4 + 2**9
    console.log(p) // 602

嗯，它比使用Math.pow()函数更清晰易懂。

# **9、includes()** #

我敢打赌，你们中的大多数人都用来indexOf在数组中查找元素。不要使用那个方法。因为我们有更好的方法来做同样的工作。使用include方法而不是indexOf返回布尔值的结果。

var array = ["Python", "JavaScript", "C++", "Dart", "JAVA"]
    console.log(array.includes("JavaScript")) //True
    console.log(array.includes("C#")) // false

# **10、重定向到 URL** #

JavaScript 有一些方法可以在你执行代码后，将你重定向到浏览器中的网站。当用户在网站上执行任何操作并且 JavaScript 将用户重定向到另一个 URL 时，这个就会派上用场。

const Redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);
    redirect('https://medium.com/@codedev101')

# **11、一元运算符 (+)** #

一元运算符可以方便地将字符串数字转换为数字格式并将日期转换为毫秒。看看下面的代码示例。

var strnum = "324.5"
    var num = +strnum
    console.log(num) // 324.5
    var currentDate = new Date(); 
    var millisSince = +currentDate;
    console.log(millisSince)

# **12、将浮点数转换为整数（快速方法）** #

要将浮点数转换为整数，你必须使用Math.floor()、Math.round()和Math.ceil()方法，但你可以使用|按位 OR 运算符以更快的方式进行转换。查看下面的代码示例。

// old way
    console.log(Math.floor(23.56))
    // Quick way
    console.log(23.56 | 0)

# **最后的想法** #

我希望你会发现 JavaScript 的这些特性和技巧有用且有趣，并且你发现了任何新技巧，请在留言区与我分享它们。

如果你觉得这篇文章有帮助，请点一个赞。

感谢你的阅读，编程愉快！

#  #

**学习更多技能**

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

![a29c0dd844aa29e4854793deb3133cda.gif][]

[936b4588b86ef910ad54f09d6a16a7ba.png]: /images/20221005/7e6e1f558fdb45ae823dc1a4e25754a2.png
[a29c0dd844aa29e4854793deb3133cda.gif]: /images/20221005/efdd8900762744efb4b70b0530ab433e.png