前端代码规范 - JavaScript 部分规范

命名规范

使用有意义且一致的命名方式，提高代码的可读性。

在这里插入代码片// 错误示例：难以理解的命名
let n = 20; // 代表什么？
let d = new Date();

// 正确示例：清晰的命名
let maxRetryCount = 20;
let currentDate = new Date();

一致的命名方式有助于团队协作和代码理解。

// 变量命名：使用驼峰命名法
let smallApple;

// 常量命名：使用全大写字母，单词间用下划线分隔
const SMALL_APPLE;

// 类命名：采用Pascal命名法，方法和属性使用驼峰命名法
class SmallApple {
    constructor() {
        this.color = 'green';
    }
    // 类的方法
    eat() {
        console.log('Eating the apple.');
    }
}

// 枚举命名：使用Pascal命名法，属性全部大写并用下划线分隔
const enum Fruits {
    APPLE,
    BANANA,
    ORANGE
}

// 布尔类型：以 is 或 has 开头
let isReady;

// 私有成员：以下划线 _ 开头
class Example {
    _privateMethod() {
        // ...
    }
}

强类型设计

避免使用隐式类型转换，明确数据类型的转换，明确数据类型可以减少运行时错误。

// 布尔属性：避免使用数字来表示布尔值
let isAvailable = true;

// 数据转换：对于从DOM获取的字符串类型数据，应在适当时候转换为预期的类型
const input = document.getElementById('input').value;
const inputValue = parseInt(input, 10);

// 错误示例：隐式类型转换
let result = "3" + 4; // 结果为字符串 "34"

// 正确示例：显式类型转换
let result = parseInt("3", 10) + 4; // 结果为数字 7

函数设计

函数是构建模块化、可维护代码的基础。良好的函数设计可以提高代码的可读性、易用性和可扩展性。以下是JavaScript函数设计的一些最佳实践和规范，以及如何应用这些规范的代码示例。

单一职责

每个函数应该只做一件事情，并且做好。这样做可以提高函数的可复用性和可测试性。

// 错误示例：一个函数处理多个任务
function handleUserData(user) {
    if (user.age > 18) {
        // 验证年龄
    }
    if (user.name !== "") {
        // 检查名称
    }
    saveUser(user);
}

// 正确示例：函数分离责任
function isValidUser(user) {
    return user.age > 18 && user.name !== "";
}

function saveUser(user) {
    if (isValidUser(user)) {
        // 保存用户信息
    }
}

函数命名规范

函数名应该清晰地表明函数的功能。使用动词或动词短语来描述所执行的操作。

// 错误示例
function data(user) {
    // ...
}

// 正确示例
function createUser(user) {
    // 创建用户
}

参数长度

尽量减少函数的参数数量。过多的参数会使函数难以理解和使用。如果函数需要多个参数，考虑使用一个对象来传递参数。

// 错误示例
function createUser(name, email, password, age, gender) {
    // ...
}

// 正确示例
function createUser({ name, email, password, age, gender }) {
    // ...
}

默认参数

为函数参数提供默认值，这样可以使函数更容易使用，同时避免了在函数体内进行不必要的检查。

function createMessage(message, sender = 'System') {
    console.log(`${sender}: ${message}`);
}

createMessage('Hello World'); // 输出: System: Hello World

纯函数

尽可能编写纯函数，这些函数不会改变外部状态，也不依赖于它们。纯函数更容易测试和推理。

let count = 0;

// 错误示例
function increment() {
    count += 1;
}

// 正确示例
function increment(count) {
    return count + 1;
}

性能优化

优化JavaScript的性能是提高用户体验和减少资源消耗的关键。以下几个实用技巧和代码示例，帮助你高效地优化你的JavaScript代码。

减少DOM操作

缓存查询，对DOM元素进行查询后，将其存储在变量中以避免重复查询。

// 错误示例：频繁操作DOM
for (let i = 0; i < 100; i++) {
    document.getElementById('myElement').innerText = i;
}

// 正确示例：减少DOM操作
let myElement = document.getElementById('myElement');
for (let i = 0; i < 100; i++) {
    myElement.innerText = i;
}

提升JavaScript代码质量

避免嵌套循环

嵌套循环会增加代码的复杂度，使其难以阅读和维护。我们可以通过将内部循环提取为一个单独的函数来优化代码。
优化前：

for (let i = 0; i < array1.length; i++) {
  for (let j = 0; j < array2.length; j++) {
    // 一些复杂的逻辑
  }
}

优化后：

function processInnerLoop(item) {
  for (let j = 0; j < array2.length; j++) {
    // 一些复杂的逻辑
  }
}

for (let i = 0; i < array1.length; i++) {
  processInnerLoop(array1[i]);
}

使用map、filter和reduce替代for循环

在处理数组时，我们经常使用for循环来迭代数组并进行一些操作。然而，使用map、filter和reduce这些高阶函数可以使代码更加简洁和易于理解。
优化前：

let result = [];
for (let i = 0; i < array.length; i++) {
  if (array[i] > 10) {
    result.push(array[i] * 2);
  }
}

优化后：

let result = array.filter(item => item > 10).map(item => item * 2);

使用解构赋值简化代码

解构赋值是ES6中引入的一个新特性，它允许我们用更简洁的语法从数组或对象中提取数据。

优化前：

let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;

优化后：

let { firstName, lastName, age } = person;

多条件if判断

避免重复性的判断某一个变量，可将多个值放在一个数组中，然后调用数组的include方法。

优化前：

if (a === 'a' || a === 'b' || a === 'c' || a === 'd') {
  // 逻辑处理
}

优化后：

if (['a', 'b', 'c', 'd'].includes(a)) { 
  // 逻辑处理
}

使用默认参数值

在函数中，我们经常需要处理未传递的参数。使用默认参数值可以简化这个过程。

优化前：

function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name);
}

优化后：

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

简化 if true else 条件表达式

逻辑只是true/false的赋值时，简化不必要的if语句。

优化前：

if (a > 100) {  
  bool = true;
} else {  
  bool = false;
}

优化后：

bool = a > 10;

indexOf的更简单写法

在数组中查找某个值是否存在可以使用indexOf方法，下面这种写法更简单。

优化前：

if (list.indexOf(item) > -1) {  
  // 存在
}

if (list.indexOf(item) === -1) {  
  // 不存在
}

优化后：

if (~list.indexOf(item)) {  
  // 存在
}

if (!~list.indexOf(item)) {  
  // 不存在
}

switch语句简化

将需要执行的条件存储在键值对象中，最后根据条件调用存储的方法。

优化前：

switch (type) {  
  case 1:    
    run1();    
    break;  
  case 2:    
    run2();    
    break;  
  case 3:    
    run3();    
    break;
}

优化后：

const data = {  
  1: run1,  
  2: run2,  
  3: run3,
};

data[type] && data[type]();

提前return

快速return（也称为提前return或守卫子句）是一种编程模式，特别是在处理多个条件判断时，它可以提高函数的可读性和性能。这种模式通过在函数的开始处检查条件，并在条件满足时立即返回，从而避免执行后续的不必要代码。

优化前：

function check(number) {
  if (number < 0) {
    return "Negative";
  } else if (number === 0) {
    return "Zero";
  } else {
    return "Positive";
  }
}

优化后：

function check(number) {
  if (number < 0) {
    return "Negative";
  }

  if (number === 0) {
    return "Zero";
  }

  return "Positive";
}

可选链运算符?.

可选链运算符?.提供了一种简洁的方式来安全地访问对象中深层嵌套的属性。它允许开发者在不进行每一步引用校验的情况下读取属性值，如果链中的任何引用是null或undefined，表达式将返回undefined。

const vacationItinerary = {        
    wednesday: {            
        venue: "Louvre Museum",            
        expenses: 150,        
    },    
};

使用传统方法来安全地访问一个可能不存在的属性会涉及多个逻辑与操作：

优化前：

const result = vacationItinerary && vacationItinerary.wednesday && vacationItinerary.wednesday.expenses; 

优化后：

const result = vacationItinerary?.wednesday?.expenses;   

多条件&&运算符

当你需要在变量为真时才执行某个函数，可以使用逻辑与&&运算符来简化代码。

优化前：

// 传统的条件判断
if (isValid) {  
  initiateProcess();
}

优化后：

// 简化后的条件执行
isValid && initiateProcess();

使用数字分隔符增强可读性

为了提升大数字的可读性，可以使用下划线_作为数值分隔符，它允许将数字分隔成更易于阅读的形式。

const number = 1_000_000_000;

console.log(number); // 输出：1000000000

字符串转换数字

虽然可以使用parseInt和parseFloat等内置方法将字符串转换为数字，但还有一种更简洁的方式：在字符串前使用一元加号+运算符。

优化前：

let total = parseInt("456");
let average = parseFloat("87.5");
优化后：

let total = +"456";
let average = +"87.5";

if (+currentState === 0) {
  // 执行相关操作
}

使用一元加号+进行转换是一种简单且有效的方法，尤其适合在需要轻量级转换的场景中。

提升控制台输出的清晰度

当你需要在控制台中打印变量的值时，将其包裹在对象字面量中可以同时显示变量名和值，从而提高输出的清晰度。

const username = "Peter";
console.log({ username });

// 控制台输出将会是：
{
   "username": "Peter"
}

这种方法不仅让你一目了然地看到变量的名称和对应的值，而且在调试多个变量时尤其有用。它避免了在控制台中查找与变量值对应的变量名的麻烦，使得调试过程更加高效。

数组截断技巧

要快速截断数组至指定长度，只需修改数组的length属性即可。

let numbers = ['1', '2', '3', '4'];
numbers.length = 2;
console.log(numbers); // 输出：['1', '2']

这个方法简单而直接，能够有效地减少数组的长度，而无需使用额外的函数或方法，尤其在你确切知道需要的数组长度时。