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

news2024/11/15 13:30:37

作为一个编程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);
}