每个前端都应该掌握的7个代码优化的小技巧

简介: 每个前端都应该掌握的7个代码优化的小技巧

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

1. 字符串的自动匹配(Array.includes

在写代码时我们经常会遇到这样的需求,我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||===去进行判断匹配。但是如果大量的使用这种判断方式,定然会使得我们的代码变得十分臃肿,写起来也是十分累。其实我们可以使用Array.includes来帮我们自动去匹配。

代码示例:

// 未优化前的写法
const isConform = (letter) => {
  if (
    letter === "a" ||
    letter === "b" ||
    letter === "c" ||
    letter === "d" ||
    letter === "e"
  ) {
    return true;
  }
  return false;
};
复制代码
// 优化后的写法
const isConform = (letter) =>
  ["a", "b", "c", "d", "e"].includes(letter);
复制代码

2.for-offor-in自动遍历

for-offor-in,可以帮助我们自动遍历Arrayobject中的每一个元素,不需要我们手动跟更改索引来遍历元素。

注:我们更加推荐对象(object)使用for-in遍历,而数组(Array)使用for-of遍历

for-of

const arr = ['a',' b', 'c'];
// 未优化前的写法
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  console.log(element);
}
复制代码
// 优化后的写法
for (const element of arr) {
   console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"
复制代码

for-in

const obj = {
  a: 1,
  b: 2,
  c: 3,
};
// 未优化前的写法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}
复制代码
// 优化后的写法
for (const key in obj) {
  const value = obj[key];
  // ...
}
复制代码

3.false判断

如果你想要判断一个变量是否为null、undefined、0、false、NaN、'',你就可以使用逻辑非(!取反,来帮助我们来判断,而不用每一个值都用===来判断

// 未优化前的写法
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};
复制代码
// 优化后的写法
const isFalsey = (value) => !value;
复制代码

4.三元运算符代替(if/else

在我们编写代码的时候肯定遇见过if/else选择结构,而三元运算符可以算是if/else的一种语法糖,能够更加简洁的表示if/else

// 未优化前的写法
let info;
if (value < minValue) {
  info = "Value is最小值";
} else if (value > maxValue) {
  info = "Value is最大值";
} else {
  info = "Value 在最大与最小之间";
}
复制代码
//优化后的写法
const info =
  value < minValue
    ? "Value is最小值"
    : value > maxValue ? "Value is最大值" : "在最大与最小之间";
复制代码

5.函数调用的选择

三元运算符还可以帮我们判断当前情况下该应该调用哪一个函数,

function f1() {
  // ...
}
function f2() {
  // ...
}
// 未优化前的写法
if (condition) {
  f1();
} else {
  f2();
}
复制代码
// 优化后的写法
(condition ? f1 : f2)();
复制代码

6.用对象代替switch/case选择结构

switch case通常是有一个case值对应一个返回值,这样的结构就类似于我们的对象,也是一个键对应一个值。我们就可以用我们的对象代替我们的switch/case选择结构,使代码更加简洁

const dayNumber = new Date().getDay();
// 未优化前的写法
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
复制代码
// 优化后的写法
const days = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};
const day = days[dayNumber];
复制代码

7. 逻辑或(||)的运用

如果我们要获取一个不确定是否存在的值时,我们经常会运用if判断先去判断值是否存在,再进行获取。如果不存在我们就会返回另一个值。我们可以运用逻辑或(||)的特性,去优化我们的代码

// 未优化前的写法
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}
复制代码
// 优化后的写法
const name = user?.name || "Anonymous";
复制代码

写在最后

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

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

相关文章
|
前端开发
前端页面调试小技巧(谷歌浏览器)
前端页面调试小技巧(谷歌浏览器)
75 0
|
XML 前端开发 测试技术
【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。 这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完成的情况下,借助 Mock API 实现预对接,加速开发进程。测试团队可以通过 Mock API 解决不必要的系统,完成集成测试。 Eolink Apikit 为前端工程师提供 API 文档管理,快速接口测试,以及 Mock API 创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看 API 文档详情与历史记录,快速生成和使用 Mock API 提前进行页面效果验证。
81 0
|
18天前
|
缓存 监控 前端开发
基于 CoffeeScript 的内网管理监控软件前端代码优化
本文探讨了基于CoffeeScript的内网管理监控软件前端代码优化方法,包括数据请求缓存、界面更新采用虚拟DOM技术以及增强错误处理机制,旨在提升软件性能、响应速度和用户体验。
28 4
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
34 1
|
7月前
|
前端开发 JavaScript API
前端代码优化方法
前端代码优化方法
92 0
|
前端开发 vr&ar
【前端验证】fork-join_none线程立即执行的一次代码优化记录
【前端验证】fork-join_none线程立即执行的一次代码优化记录
|
前端开发
项目实战14—前端代码优化
项目实战14—前端代码优化
83 0
|
前端开发 Shell Linux
【前端】React 组件调试小技巧
【前端】React 组件调试小技巧
254 0
|
存储 前端开发 数据处理
前端开发提效小技巧之业务功能篇
用技术实现梦想,用梦想打开前端技术之门。分享我工作中总结的前端开发提效小技巧,本篇是关于业务功能的。
645 1