12 个你可能还未使用的 JS 技巧
共 3832字，需浏览 8分钟
·
2021-07-05 04:08
英文 | https://levelup.gitconnected.com/12-javascript-features-youve-probably-never-used-db932c413cdd
翻译 | 杨小二
1 、短循环
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 = 0for(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 = 4var b = 5var list = {1:7, 3:9, 4:0, 2:9}console.log(a in list) //trueconsole.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)) // 123console.log("123".padStart(5, "0")) // 00123console.log("123".padEnd(5, "0")) // 12300console.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)
最后的想法
我希望你会发现 JavaScript 的这些特性和技巧有用且有趣，并且你发现了任何新技巧，请在留言区与我分享它们。
如果你觉得这篇文章有帮助，请点一个赞。
感谢你的阅读，编程愉快！
学习更多技能
请点击下方公众号
