给前端小白的11个建议（少走弯路）

news2024/10/5 16:20:32

作为一个编程4年的的前端工程师，一路走来踩过许多坑。希望我的经验能让你少踩些坑，在编程的路上走的更顺些！

1. 禁用var声明

只使用const或let声明变量。并且首选const，当一个变量需要重新赋值时，才使用let。并且在创建变量时就应该给变量赋值。

原因：

  • var缺乏作用域的限制，很容易导致全局作用域污染，引发“命名冲突”和“错误赋值”等问题。

  • var存在变量提升，可能导致在变量声明之前就使用变量，产生未定义的情况。

  • var允许重复声明同一变量，容易导致意外修改已有变量的值，引发代码错误。

注意：我们最好在创建变量时就进行赋值，这样可以防止我们的代码出现，声明了变量但未赋值的情况。

代码示例：

// ❌ 错误做法
var old = "";

// ✅ 正确做法
const immutable = "John";
let counter = 1;
counter++; // counter === 2;

// 将对象和数组声明为const，以防止类型更改
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];

2.使用严格相等运算符（===）

在进行相等比较时，只使用严格相等运算符（===）进行比较。

原因：

  • 双等号（==）在进行类型比较时会默认进行类型转换，导致不同类型的值也可能被判定为相等。

  • 严格相等运算符（===）不仅比较两个值的值，还会比较它们的数据类型。只有值和类型都相同时才会返回 true。

注意：在使用双等号进行0作为假值会错误地等于false，

代码示例：

// ❌ 错误做法
1 == "1"; // true
0 == false; // true
"" == 0; // true
null == undefined; // true
[1] == true; // true
"false" == false; // false

// ✅ 正确做法
1 === 1; // true
1 === "1"; // false
0 === false; // false

3.使用模板字符串来拼接内容

使用模板字符串（反引号标记）来拼接字符串，而不是使用加号（+）。

原因：

  • 模板字符串允许在字符串中插入变量或表达式，使得代码更加清晰易读。

代码示例：

const name = 'Alice';
const age = 30;


// ❌ 错误做法
// 字符串拼接 
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.'; 

console.log(greeting); // Hello, my name is Alice and I am 30 years old. 

// 多行字符串（使用\n换行） 
const multiLineString = 'This is a\nmulti-line\nstring.'; 

console.log(multiLineString); // This is a // multi-line // string.

// ✅ 正确做法
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is Alice and I am 30 years old. 

// 多行字符串 
const multiLineString = ` This is a
                          multi-line 
                          string. `;
console.log(multiLineString); 
//This is a 
// multi-line 
// string.

4.在语句末尾使用分号

在行末使用分号结尾是一种很好的习惯，虽然不使用分号，编译器也不会进行报错，但在我们项目越来越庞大代码越来越复杂时，分号可以帮助我们更好的理解代码。维护起来也会更加轻松。

以for循环为例：

代码示例：

// ❌ 错误做法
for (let i = 0 i < numbers.length i++) {
  console.log(numbers[i]);
} // 报错：Uncaught SyntaxError: Unexpected identifier


// ✅ 正确做法
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

在上面的示例中，缺少分号会导致编译器认为它是一个表达式，但是它实际上是三个独立不同的表达式，这样的结果就是会引起报错。

5. 使用对象代替多个参数

在定义函数时，给函数定义多个参数的做法是很愚蠢的一种写法，因为，当需要传的参数变的很多很复杂时，代码的阅读和维护就变的很困难，而使用对象参数是一种很好的替代方案。

代码示例：


// ❌ 错误做法
function avatarUrl(avatar, format = "small", caption = true,) {
  //函数内容
}

avatarUrl(user.avatar, 'thumb', false)

当我们在使用上面这个函数时，很难知道哪些参数被使用了以及他的含义是什么。例如上面avatarUrl的最后一个参数false，就很难让人理解它代表的是什么意思呢？

所以我们在维护时，必须要阅读完函数的定义才能知道他的每个参数代表什么意思。而且当我们需要改变参数的顺序时，不得不改变所有地方的函数调用。

但是如果我们使用对象来传参，一个顺序的改变并不会影响到所有地方的调用：

// ✅ 正确做法
function avatarUrl(avatar, options={format: 'small', caption: true}) {
  // 函数内容
}

avatarUrl(user.avatar, {
caption: false , 
format: "thumb"
})

6. 利用提前返回简化逻辑

在编写代码时，我们经常会用到if/else来进行判断，而且可能会进行多层嵌套，但是过多过深的嵌套会使的我们的代码可读性变差并且很难维护，所以我们使用return来解决这个问题。

提前返回可以减少大量的不必要的else条件，提高代码的可读性

代码示例：

// ❌ 错误做法
function doSomething() {
  if (user) {
    if (user.role === "ADMIN") {
      return 'Administrator';
    } else {
      return 'User';
    }
  } else {
    return 'Anonymous';
  }
}

// ✅ 正确做法
function doSomething() {
  if (!user) return 'Anonymous'
  if (user.role === "ADMIN") return 'Administrator'

  return 'User'
}

7. 熟练掌握内置函数

JavaScript给我们提供了许多内置的Array、Object、String函数。我们需要精通并掌握它们，这样让我们写起代码时来事半功倍。

代码示例：

//我们要过滤掉admin属性值为false的对象

// ❌ 错误做法
const users = [
  {
    username: "JohnDoe",
    admin: false
  },
  {
    username: "Todd",
    admin: true
  },
];
const admins = [];

function getAdmins() {
  users.forEach((user) => {
    if (user.admin) admins.push(user)
  })

  return admins
}

// ✅ 正确做法
function getAdmins() {
  return users.filter((user) => user.admin)
}

8.禁止使用缩写

当初学者在刚开始编写代码时，很容易为了贪图方便和快，就用缩写来进行命名，虽然这样是方便的当时的工作，但是却为后期的维护埋下了定时炸弹。让后续的代码阅读和维护变的难上加难。


// ❌ 错误做法
function someFunction() {
  events.forEach(e => {
    e.tickets.forEach(t => {
      `${e.name} for ${t.full_name}`
    })
  })
}

// ✅ 正确做法
function someFunction() {
  events.forEach(event => {
    event.tickets.forEach(ticket => {
      `${event.name} for ${ticket.full_name}`
    })
  })
}

很明显的是，在下面的例子中我们在阅读和维护时都不用猜测参数e和t代表什么意思和作用，根据命名就可以知道它的作用和含义。极大的提高了代码的可读性和后期的维护。

9. 使用可选链操作符(?.)来代替&&的前置非空判断

在遇到对象的某个属性可能为空(null)或者不存在(undefined)时，我们都要提前对对象进行判空，很多人第一时间都会想到使用&&进行前置非空判断，但是其实遇到这种情况，我们使用可选链操作符(?.也能达到一样的效果，并且可读性更强。

示例1：


// ❌ 错误做法
function doSomething(params) {
  if (params && params.filter) return 'Foo'

  return 'Bar'
}

// ✅ 正确做法
function doSomething(params) {
  if (params?.filter) return 'Foo'

  return 'Bar'
}

10. 用for...of代替for循环

传统的for循环需要我们手动创建索引变量并且需要根据条件判断来进行递增/递减操作，而for...of内置了一个迭代器可以自动帮我们遍历数组中的所有值，这样我们的代码可以变的更加简洁，也可以减少手动操作出差的情况。

let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];

// ❌ 错误做法
// 这样可以避免在每次迭代时重新评估长度
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
    console.log(users[i]);
}

// ✅ 正确做法
for(let user of users) {
  console.log(user);
}

11. 可读性代码胜过聪明代码

  • 永远记住，我们写的代码是给其他开发人员以及未来的自己看的。我们编写的代码的目的是为了解决某个问题，而不是让我们的代码成为一个问题（bug）。

  • 不要为了炫技而写代码，我们要写出每个人都能理解和调试的代码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1865272.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

旧衣回收小程序开发：回收市场的新机遇

旧衣回收小程序开发：回收市场的新机遇

当下&#xff0c;旧衣服回收已经成为了一种流行趋势&#xff0c;居民都将闲置的衣物进行回收&#xff0c;旧衣回收市场规模在不断增加。随着市场规模的扩大&#xff0c;为了让居民更加便利地进行回收&#xff0c;线上回收小程序也应运而生&#xff0c;为大众打造了一个线上回收…
阅读更多...
windows安装Nacos并使用

windows安装Nacos并使用

Nacos&#xff08;前身为阿里巴巴的Nacos Config和Nacos Discovery&#xff09;是一个开源的动态服务发现、配置和服务管理平台&#xff0c;由阿里巴巴开发并维护。它提供了一种简单且易于使用的方式来管理微服务架构中的服务注册、发现和配置管理。 主要功能包括&#xff1a;…
阅读更多...
[leetcode]move-zeroes 移动零

[leetcode]move-zeroes 移动零

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size(), left 0, right 0;while (right < n) {if (nums[right]) {swap(nums[left], nums[right]);left;}right;}} };
阅读更多...
web渗透-SSRF漏洞及discuz论坛网站测试

web渗透-SSRF漏洞及discuz论坛网站测试

一、简介 ssrf(server-side request forgery:服务器端请求伪造&#xff09;是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;ssrf是要目标网站的内部系统。(因为他是从内部系统访问的&#xff0c;所有可以通过它攻击外网无法访问的内部系统&…
阅读更多...
一文搞懂Linux多线程【下】

一文搞懂Linux多线程【下】

目录 &#x1f6a9;多线程代码的健壮性 &#x1f6a9;多线程控制 &#x1f6a9;线程返回值问题 &#x1f6a9;关于Linux线程库 &#x1f6a9;对Linux线程简单的封装 在观看本博客之前&#xff0c;建议大家先看一文搞懂Linux多线程【上】由于上一篇博客篇幅太长&#xff0c;为…
阅读更多...
一键掌握多渠道推广效果！Xinstall超级渠道功能，让你的App推广更高效

一键掌握多渠道推广效果！Xinstall超级渠道功能，让你的App推广更高效

在App运营的大潮中&#xff0c;如何高效、精准地推广App&#xff0c;成为每一位运营者关注的焦点。传统的推广方式&#xff0c;如地推、代理、分销、广告等&#xff0c;虽然能够带来一定的用户增长&#xff0c;但如何衡量推广效果、如何与合作伙伴结算、如何管理下属渠道等问题…
阅读更多...
一个项目学习Vue3---快速认识TypeScript

一个项目学习Vue3---快速认识TypeScript

问题1&#xff1a;什么是TypeScript TypeScript是一种由微软开发的开源编程语言&#xff0c;它是JavaScript的一个超集。TypeScript添加了静态类型检查功能&#xff0c;并且可以编译为纯JavaScript代码&#xff0c;使得开发者可以利用JavaScript的生态系统和工具。TypeScript的…
阅读更多...
拉普拉斯变换与卷积

拉普拉斯变换与卷积

前面描述 卷积&#xff0c;本文由卷积引入拉普拉斯变换。 拉普拉斯变换就是给傅里叶变换的 iωt 加了个实部&#xff0c;也可以反着理解&#xff0c;原函数乘以 e − β t e^{-\beta t} e−βt 再做傅里叶变换&#xff0c;本质上都是傅里叶变换的扩展。 加入实部的拉普拉斯变…
阅读更多...
门店客流统计)

门店客流统计)

门店客流统计 代码部分效果 代码部分 import cv2 import numpy as np from tracker import * import cvzone import timebg_subtractor cv2.createBackgroundSubtractorMOG2(history200, varThreshold140)# Open a video capture video_capture cv2.VideoCapture(r"sto…
阅读更多...
【JavaScript】DOM编程

【JavaScript】DOM编程

目录 一、什么是DOM编程 二、获取DOM树上的元素结点 1.直接获取 2.间接获取 三、操作获取到的DOM元素结点 1.操作元素的属性 2.操作元素的行内样式 3.操作元素中间的文本 四、增删DOM元素结点 一、什么是DOM编程 开发人员写好的网页文件在生产环境中是需要部署在Web服务器上的。…
阅读更多...
机器人控制系列教程之动力学建模(1)

机器人控制系列教程之动力学建模(1)

简介 机器人动力学是对机器人机构的力和运动之间关系与平衡进行研究的学科。机器人动力学是以机器人运动为基础&#xff0c;研究在运动过程中连杆与连杆之间、连杆与工件之间力或力矩等关系。 分类&#xff1a; 根据研究方向的不同&#xff0c;机器人的动力学分析也分为正、逆…
阅读更多...
洗地机哪个品牌好？超热门五大尖货洗地机推荐

洗地机哪个品牌好？超热门五大尖货洗地机推荐

随着人们生活水平的提高&#xff0c;卫生健康的意识也在逐渐提升&#xff0c;日常的家庭清洁已经成为了生活中必不可少的一部分。在智能清洁家电中&#xff0c;洗地机凭借其出色的性能和优秀的设计成为了备受关注的产品之一。本文将带大家如何挑选洗地机&#xff0c;以及看看目…
阅读更多...
python实现可视化大屏（django+pyechars）

python实现可视化大屏（django+pyechars）

1.实现效果图 2.对数据库进行迁移 python manage.py makemigrations python manage.py migrate 3.登录页面 {% load static%} <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport"…
阅读更多...
pandas合并，拆分excel

pandas合并，拆分excel

目录 一：按照列进行拆分 二：将某几列的数据写入新excel 三：合并两个sheet数据到一个excel的一个sheet中 我们以商品销售明细为例，说明下excel的数据拆分和合并,我们的原始数据如下： 一：按照列进行拆分 现在我们需要统计下是否配送和支付方式为维度进行分组以后得数据…
阅读更多...
python--序列化模块json与pickle

python--序列化模块json与pickle

什么叫序列化&#xff1f; 将原本的字典、列表等内容转换成一个字符串的过程就 叫做序列化。 多用的两个序列化模块&#xff1a;json与pickle json&#xff0c;用于字符串 和 python数据类型间进行转换 pickle&#xff0c;用于python特有的类型 和 python的数据类型间进行转换 …
阅读更多...
教师资格证考试面试报名流程

教师资格证考试面试报名流程

文章目录 前言面试报名流程一、登录官网二、选择报考省份三、注册报名账号四、确认考试承诺五、填报个人信息六、上传个人照片七、查看个人信息八、面试报名九、等待审核十、考试缴费最后&#xff08;必看&#xff09;附录1. 中小学教师资格考试网2. 广东省教资考试报名通知&am…
阅读更多...
Linux：系统引导过程与服务控制

Linux：系统引导过程与服务控制

目录 一、linux 系统引导过程 1.1、引导过程总览 1.2、系统初始化进程 &#xff08;centos 6和7 的区别&#xff09; 1.2.1、centos 6 的引导过程 init 进程 1.2.2、centos 7(systemd进程) 二、MBR、GRUB菜单、忘记密码故障修复 2.1、修复MBR扇区故障 模拟故障 重启…
阅读更多...
webstorm无法识别tsconfig.json引用项目配置文件中的路径别名

webstorm无法识别tsconfig.json引用项目配置文件中的路径别名

问题 vite项目模板中&#xff0c;应用的ts配置内容写在tsconfig.app.json文件中&#xff0c;并在tsconfig.json通过项目引用的方式导入 {"files": [],"references": [{"path": "./tsconfig.app.json"},{"path": "./t…
阅读更多...
小白学python（第二天）

小白学python（第二天）

哈喽&#xff0c;各位小伙伴们我们又见面了&#xff0c;昨天的文章吸收得如何&#xff1f;可有不懂否&#xff1f;如有不懂可以在品论区留言哦&#xff0c;废话不多说&#xff0c;开始今天的内容。 字符及字符串的续讲 字符&#xff1a;英文字母&#xff0c;阿拉伯数字&#x…
阅读更多...
【QT】设置QTabWidget样式：上、下边线的显示与去除

【QT】设置QTabWidget样式：上、下边线的显示与去除

目录 0.简介 1.环境 2.详细介绍 2.1我的原代码和显示效果 2.2 去掉QTabWidget的边框 2.3 单独留下边线 2.3.1 法一&#xff1a;通过【this->setDocumentMode(true);】设置下边线 2.3.2 通过【QTabWidget::pane】设置下边线 2.4单独设置上边线 2.5 优化界面tab 2.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023