前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >12 个你可能还未使用的 JS 技巧

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

作者头像
前端达人
发布2021-07-16 17:09:10
7180
发布2021-07-16 17:09:10
举报
文章被收录于专栏:前端达人前端达人前端达人
英文 | 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 的这些特性和技巧有用且有趣,并且你发现了任何新技巧,请在留言区与我分享它们。

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

感谢你的阅读,编程愉快!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-07-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 、短循环
  • 2、调整一个数组的长度
  • 3、函数参数
  • 4、 JavaScript 中的时间戳
  • 5、删除数组中的一个值
  • 6、JavaScript 中的 IN 运算符
  • 7、JavaScript 字符串填充
  • 8、Power ** 运算符
  • 9、includes()
  • 10、重定向到 URL
  • 11、一元运算符 (+)
  • 12、将浮点数转换为整数(快速方法)
  • 最后的想法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档