很棒的 JavaScript hacks
使用条件的快捷方式
检查对象是否有值
控制台
运算符 Typeof
打乱数组元素
在本文中,我将分享一些实用的 JavaScript 技巧。这些技巧可以精简代码,并帮助你运行优化的代码。那就让我们开始学习吧!
使用条件的快捷方式
JavaScript 允许你使用某些快捷方式,使代码看起来更简洁。在一些简单的情况下,你可以使用逻辑运算符 && 和 || 来代替if 和 else。
&& 运算符示例:
//instead of
if(loggedIn) {
console.log("Successfully logged in")
}
//use
loggedIn && console.log("Successfully logged in")
|| 的作用相当于“或”子句。现在,使用此运算符有点棘手,因为它可能会阻止应用程序执行。不过,我们可以通过一个条件来解决这个问题。
|| 运算符示例:
//instead of
if(users.name) {
return users.name;
} else {
return "Getting the users";
}
// use
return (users.name || "Getting the users");
检查对象是否有值
当你处理多个对象时,很难跟踪哪些对象包含实际值,哪些可以删除。
这里有一个快速技巧,教你如何使用 Object.keys() 函数检查对象是否为空或包含值。
Object.keys(objectName).length
// if it returns 0 it means the object is empty, otherwise it
// displays the number of values.
控制台
这个很棒的技巧将帮助您使用 console.table() 方法将 CSV 格式或字典格式的数据转换为表格形式。
//console.table
const data = [
{"city": "New York"},
{"city": "Chicago"},
{"city": "Los Angeles"},
]
console.table(data); // the result is a table below
运算符 Typeof
这个简单的技巧将向您展示如何使用 typeof() 运算符检查 JS 中任何数据的类型。您只需将数据或变量作为 typeof() 的参数传递即可。
let v1 = "JavaScript";
let v2 = true;
let v3 = 123;
let v4 = null;
console.log(typeof v1) //---> string
console.log(typeof v2) //---> boolean
console.log(typeof v3) //---> number
console.log(typeof v4) //---> object
打乱数组元素
要在不使用任何外部库(如 Lodash)的情况下对数组的元素进行打乱,只需运行以下魔术:
const list = [1, 2, 3];
console.log(list.sort(function() {
return Math.random() -0.5;
})); //---> [2, 1, 3]
就是这样!#HappyCoding
请在评论部分让我知道任何其他很棒的 JS 技巧可以添加到列表中 :)
文章来源:https://dev.to/iammtander/awesome-javascript-hacks-35e3