学会这五种编写代码的小技巧后,摸鱼时间又长了

62 阅读2分钟

条件判断的简洁写法

在Javascript 我们可以使用某些快捷方式使您的代码更易于阅读。在一些简单的情况下,我们可以使用逻辑运算符 && 和 || 来代替ifelse

&& 运算符示例:

//平常写法
if(loggedIn) {
  console.log("Successfully logged in")
}

//优化后写法
loggedIn && console.log("Successfully logged in")

|| 是“或”的作用。使用此运算符有点棘手,因为它会阻止应用程序执行。但是,我们可以有条件地绕过它。
|| 运算符示例:

//平常写法 
if(users.name) {
  return users.name;
} else {
  return "Getting the users";
}

// 优化后写法
return (users.name || "Getting the users");

检查对象是否有值

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

Object.keys(objectName).length
// 如果它返回 0,则表示该对象为空,否则
 // 显示value的值。

控制台打印表格

这是一个很好的api, console.table() 方法将 CSV 格式或字典格式数据转换为表格形式。

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

console.table(data); // the result is a table below

image.png

快速检测数据类型

如何使用 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]

写在最后

伙伴们,如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信:IsZhangjianhao,邀你进我的前端学习交流群,一起学习前端,成为更优秀的工程师~

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天,点击查看活动详情