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

这篇具有很好参考价值的文章主要介绍了每个前端应该掌握的7个代码优化的小技巧。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

// 未优化前的写法
const isConform = (letter) => { 
if (letter === "a" ||letter === "b" ||letter === "c" ||
   letter === "d" || letter === "e") {
   return true;   
}   
return false; };

```javascript
// 优化后的写法
 const isConform = (letter) =>   ["a", "b", "c", "d", "e"].includes(letter);

2.for-of和for-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];   
    // ... }

js

复制代码

// 优化后的写法 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判断先去判断值是否存在,再进行获取。如果不存在我们就会返回另一个值。我们可以运用逻辑或(||)的特性,去优化我们的代码文章来源地址https://www.toymoban.com/news/detail-460276.html

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

到了这里,关于每个前端应该掌握的7个代码优化的小技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C++ 字符串完全指南:学习基础知识到掌握高级应用技巧

    字符串用于存储文本。 一个字符串变量包含由双引号括起来的一组字符: 示例 创建一个 string 类型的变量并为其赋值: 字符串连接可以使用 + 运算符来实现,生成一个新的字符串。 示例: 在上面的示例中,我们在 firstName 后面添加了一个空格,以便在输出时在 \\\"John\\\" 和 \\\"D

    2024年04月08日
    浏览(55)
  • 分享24个强大的HTML属性 —— 建议每位前端工程师都应该掌握

    前期回顾    是不是在为 API 烦恼 ?好用免费的api接口大全呼之欲出_0.活在风浪里的博客-CSDN博客 APi、常用框架、UI、文档—— 整理合并 https://blog.csdn.net/m0_57904695/article/details/130459417?spm=1001.2014.3001.5501 👍 本文专栏: 开发技巧  目录 💎  1、Accept 😹  2、Autofocus 🔥  3、In

    2024年02月02日
    浏览(57)
  • Postman生成代码的小技巧

    你还在使用postman吗?你还是一条条复制参数吗?你还是手动录入数据吗?对于一些不经常使用postman的人来说,这个小技巧可以帮助你导入请求,以及转换成开发语言。 1 抓包接口 以CSDN热榜为例,直接F12,查看请求,找到对应接口 2 复制cURL 右击接口 Copy--- Copy as cURL(bash) ,不

    2024年02月05日
    浏览(34)
  • 24个写出漂亮代码的小技巧

    这篇文章我会总结一些实用的有助于提高代码质量的建议,内容较多,建议收藏! 内容概览: 注解、反射和动态代理是 Java 语言中的利器,使用得当的话,可以大大简化代码编写,并提高代码的可读性、可维护性和可扩展性。 我们可以利用 注解 + 反射 和 注解+动态代理 来

    2024年02月05日
    浏览(38)
  • 9 个让你的 Python 代码更快的小技巧

    哈喽大家好,我是咸鱼 我们经常听到 “Python 太慢了”,“Python 性能不行”这样的观点。但是,只要掌握一些编程技巧,就能大幅提升 Python 的运行速度。 今天就让我们一起来看下让 Python 性能更高的 9 个小技巧 原文链接: https://medium.com/techtofreedom/9-fabulous-python-tricks-that-m

    2024年02月03日
    浏览(53)
  • SQL分析与优化:掌握数据中台的关键技巧

    目录 效果界面 技术方案 Notebook集成 基于抽象语法树(AST)的SQL验证 基于大模型Prompt的SQL优化

    2024年02月04日
    浏览(38)
  • SEO优化新手必须掌握的10个技巧和工具

    随着互联网的不断发展,SEO(搜索引擎优化)已成为网站拓展和推广的重要手段之一。对于新手而言,学习SEO的基础知识和技巧是至关重要的。在本文中,我将分享SEO优化新手必须掌握的10个技巧和工具。 1.研究 是SEO优化的重中之重,因为它们直接影响着您的排

    2024年02月07日
    浏览(64)
  • 亚马逊产品图片优化小技巧!8点需掌握?

    对于亚马逊卖家来说,产品图片非常重要,是提高点击率和转化率的重要来源之一。 亚马逊对卖家的商品图片有严格的要求和规定,包括格式、大小、像素、颜色等。主产品形象和其他形象的要求也不同,卖家必须遵守。但是,由于指南经常变化,卖家需要不时地对其进行审

    2023年04月09日
    浏览(35)
  • web前端之使用弹性和外边距进行网页布局、非常有用的小技巧、flex、margin、auto

    图中效果只需要flex和margin便可以实现。 1、d_f: display: flex; 2、fw_w: flex-wrap: wrap; 3、m_a: margin: auto; 4、ml_a: margin-left: auto; 5、mr_a: margin-right: auto; 3、item类名比较特殊,所以单独定义,涉及到变量,不属于公共样式 4、其他类名基本是见名知意,不做过多叙述

    2024年02月20日
    浏览(57)
  • Flutter必备技能:轻松掌握本地存储与数据库优化技巧!

    正因为有网络,App拥有与外界进行信息交换的通道,也因此具备了更新数据的能力。不过,经过交换后的数据通常都保存在内存中,而应用一旦运行结束,内存就会被释放,这些数据也就随之消失了。 因此,我们需要把这些更新后的数据以一定的形式,通过一定的载体保存起

    2024年02月09日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包