很棒的 JavaScript 技巧 使用快捷方式进行条件判断 检查对象是否具有值 控制台表运算符 Typeof 打乱数组元素

2025-06-07

很棒的 JavaScript hacks

使用条件的快捷方式

检查对象是否有值

控制台

运算符 Typeof

打乱数组元素

在本文中,我将分享一些实用的 JavaScript 技巧。这些技巧可以精简代码,并帮助你运行优化的代码。那就让我们开始学习吧!

黑客

使用条件的快捷方式

JavaScript 允许你使用某些快捷方式,使代码看起来更简洁。在一些简单的情况下,你可以使用逻辑运算符 && 和 || 来代替if 和 else
&& 运算符示例:

//instead of
if(loggedIn) {
  console.log("Successfully logged in")
}

//use
loggedIn && console.log("Successfully logged in")
Enter fullscreen mode Exit fullscreen mode

|| 的作用相当于“或”子句。现在,使用此运算符有点棘手,因为它可能会阻止应用程序执行。不过,我们可以通过一个条件来解决这个问题。
|| 运算符示例:

//instead of 
if(users.name) {
  return users.name;
} else {
  return "Getting the users";
}

// use
return (users.name || "Getting the users");

Enter fullscreen mode Exit fullscreen mode

检查对象是否有值

当你处理多个对象时,很难跟踪哪些对象包含实际值,哪些可以删除。
这里有一个快速技巧,教你如何使用 Object.keys() 函数检查对象是否为空或包含值。

Object.keys(objectName).length
// if it returns 0 it means the object is empty, otherwise it
 // displays the number of values.
Enter fullscreen mode Exit fullscreen mode

控制台

这个很棒的技巧将帮助您使用 console.table() 方法将 CSV 格式或字典格式的数据转换为表格形式。

//console.table
const data = [
  {"city": "New York"},
  {"city": "Chicago"},
  {"city": "Los Angeles"},
]

console.table(data); // the result is a table below
Enter fullscreen mode Exit fullscreen mode

桌子

运算符 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
Enter fullscreen mode Exit fullscreen mode

打乱数组元素

要在不使用任何外部库(如 Lodash)的情况下对数组的元素进行打乱,只需运行以下魔术:

const list = [1, 2, 3];
console.log(list.sort(function() {
   return Math.random() -0.5;
})); //---> [2, 1, 3]
Enter fullscreen mode Exit fullscreen mode

就是这样!#HappyCoding

请在评论部分让我知道任何其他很棒的 JS 技巧可以添加到列表中 :)

干杯

文章来源:https://dev.to/iammtander/awesome-javascript-hacks-35e3
PREV
像专业人士一样调试你的 React 应用
NEXT
我转向了 Web 开发