本文共 3731 字,大约阅读时间需要 12 分钟。
英文 | https://levelup.gitconnected.com/12-javascript-features-youve-probably-never-used-db932c413cdd
翻译 | 杨小二
当我使用 JavaScript 开始我的 Web 开发生涯时。我喜欢寻找技巧和技巧来缩短我的代码编写时间和精力。我主要在 Quora 和 StackOverflow 等热门网站上搜索 JavaScript 技巧或者答案来解决自己遇到的问题。
在本文中,我将向你展示 12 个你可能从未使用过或觉得学习 JavaScript很有趣的功能。
你知道在 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)
你知道我们可以使用 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"]
你不需要定义函数参数,你可以将函数参数用作数组对象,而无需在函数实现时声明参数。
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)
你知道在 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)
通常,我们使用 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]
通过使用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
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
此功能将为你节省大量数学计算时间。你可能使用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()函数更清晰易懂。
我敢打赌,你们中的大多数人都用来indexOf在数组中查找元素。不要使用那个方法。因为我们有更好的方法来做同样的工作。使用include方法而不是indexOf返回布尔值的结果。
var array = ["Python", "JavaScript", "C++", "Dart", "JAVA"]console.log(array.includes("JavaScript")) //Trueconsole.log(array.includes("C#")) // false
JavaScript 有一些方法可以在你执行代码后,将你重定向到浏览器中的网站。当用户在网站上执行任何操作并且 JavaScript 将用户重定向到另一个 URL 时,这个就会派上用场。
const Redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);redirect('https://medium.com/@codedev101')
一元运算符可以方便地将字符串数字转换为数字格式并将日期转换为毫秒。看看下面的代码示例。
var strnum = "324.5"var num = +strnumconsole.log(num) // 324.5var currentDate = new Date(); var millisSince = +currentDate;console.log(millisSince)
要将浮点数转换为整数,你必须使用Math.floor()、Math.round()和Math.ceil()方法,但你可以使用|按位 OR 运算符以更快的方式进行转换。查看下面的代码示例。
// old wayconsole.log(Math.floor(23.56))// Quick wayconsole.log(23.56 | 0)
我希望你会发现 JavaScript 的这些特性和技巧有用且有趣,并且你发现了任何新技巧,请在留言区与我分享它们。
如果你觉得这篇文章有帮助,请点一个赞。
感谢你的阅读,编程愉快!
学习更多技能
请点击下方公众号
转载地址:http://awdpi.baihongyu.com/