汇智动力

售前免费咨询热线: 4 0 0 - 1 8 6 - 0 9 0 5
汇智资讯Huizhi information

当前位置:首页 »12 个JavaScript 特性技巧你可能从未使用过

12 个JavaScript 特性技巧你可能从未使用过

日期:2021-06-30 11:59:37 访问量: 来源:
当我使用 JavaScript 开始我的 Web 开发生涯时。我喜欢寻找技巧和技巧来缩短我的代码编写时间和精力。我主要在 Quora 和 StackOverflow 等热门网站上搜索 JavaScript 技巧或者答案来解决自己遇到的问题。
在本文中,我将向你展示 12 个你可能从未使用过或觉得学习 JavaScript很有趣的功能。

1 、短循环

你知道在 JavaScript 中你可以在一行中缩短循环吗?这意味着你现在可以为循环编写更少的代码。
  •  
  •  
  •  
  •  
  •  
  •  
  •  
var names = ["John", "Trevor", "Steve", "Jacob"]// long methodfor(var i = 0;  i < names.length; i++) {   console.log(names[i])}//short single line methodfor(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=3array2.length=1console.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 functionadd(1, 3, 5)

4、 JavaScript 中的时间戳

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

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
// original methodvar date = new Date()timestamp = date.getDate()console.log(timestamp)// shorter methodtimestamp = new Date().getDate()console.log(timestamp)// shortest methodtimestamp += 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 methoddelete array[4]//splice methodarray.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")) // 00123console.log("123".padEnd(5, "0")) // 12300 console.log("123".padEnd(10, "0")) // 1230000000

8、Power ** 运算符

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

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

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

  •  
  •  
  •  
  •  
  •  
  •  
// old methodvar 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 methodvar p = 2**5 + 2**5 + 2**1 + 2**3 + 2**4 + 2**9console.log(p) // 602

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

9、includes()

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

  •  
  •  
  •  
var array = ["Python", "JavaScript", "C++", "Dart", "JAVA"]console.log(array.includes("JavaScript")) //Trueconsole.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 = +strnumconsole.log(num) // 324.5var currentDate = new Date(); var millisSince = +currentDate;console.log(millisSince)

12、将浮点数转换为整数(快速方法)

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

  •  
  •  
  •  
  •  
// old wayconsole.log(Math.floor(23.56))// Quick wayconsole.log(23.56 | 0)

相关阅读Reading

全国热线:400-186-0905

总部热线:028-6547-1147

周一至周日9:30-24:00

我要咨询
汇智动力微信

汇智动力微信公众号