提高 JavaScript 代码的可读性、可维护性和性能的技巧（1）

最新推荐文章于 2024-11-08 14:35:14 发布

恶龙没有咆哮

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量196

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44380380/article/details/132582535

版权

1、箭头函数 =>

箭头函数是一种 JavaScript 函数的简化语法，它通常用于定义匿名函数或简单的函数。箭头函数的语法如下

(parameters) => expression

其中，parameters 是函数的参数列表，可以是零个或多个参数，而 expression 则是函数体，通常是一个表达式，它会被计算并返回结果。

以下是箭头函数的一些特点和使用场景：

简化的语法：箭头函数的语法非常简洁，适用于定义简单的函数。

隐式返回：如果函数体只包含一个表达式，可以省略大括号 {} 和 return 关键字，函数会隐式返回这个表达式的值。

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

//使用普通函数定义匿名函数：
const greet = function(name) {
  return `Hello, ${name}!`;
};

//使用箭头函数简化匿名函数：
const greet = (name) => `Hello, ${name}!`;

没有自己的 this：箭头函数没有自己的 this 上下文，它会继承自包含它的函数的 this。这在某些情况下可以避免传统函数中 this 绑定的问题。

const obj = {
  value: 42,
  getValue: function() {
    return this.value; // 此处的 this 指向 obj
  },
  getArrowValue: () => {
    return this.value; // 此处的 this 也指向 obj，因为箭头函数没有自己的 this
  }
};

适用场景：箭头函数适合于简单的函数，特别是那些不需要大量的逻辑和多行代码的情况，例如在数组方法中使用。
```
const numbers = [1, 2, 3, 4, 5];

// 使用箭头函数计算平方值
const squared = numbers.map(x => x * x);
```

需要注意，尽管箭头函数在许多情况下非常方便，但并不是适用于所有情况。在需要更复杂的函数体或需要访问自己的 this 上下文时，传统的函数声明可能更合适。选择使用箭头函数还是传统函数取决于具体的需求和上下文。

2、模板字面量

模板字面量（Template literals）是一种 JavaScript 字符串的高级语法，引入自 ECMAScript 6（ES6）标准，它允许你在字符串中嵌入表达式和变量，并且支持多行字符串。模板字面量使用反引号 （backticks）来包裹字符串，并且在字符串中使用${}` 语法来插入表达式。

const name = '张三';
const age = 28;
// 使用模板字面量创建字符串
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);
// 输出: Hello, my name is 张三 and I am 28 years old.

在上述示例中，${name} 和 ${age} 是嵌入式表达式，它们会被相应的变量值替换，并将结果插入到字符串中。

模板字面量的优点：

更可读：相对于传统的字符串拼接方法，模板字面量更易于阅读和理解。

支持多行字符串：你可以创建包含多行文本的字符串，而不需要使用 \n 换行符。

const multiline = `
  This is a
  multi-line
  string.
`;

console.log(multiline);
// 输出:
// This is a
// multi-line
// string.

更灵活：你可以在模板字面量中嵌入任何表达式，包括变量、函数调用等。

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// 输出: The sum of 5 and 10 is 15.

总之，模板字面量是一种强大的字符串构建工具，它使得在 JavaScript 中创建复杂的字符串变得更加容易和直观。这种语法的引入极大地提高了字符串处理的便捷性和可读性。

3、解构赋值

解构赋值是一种强大的 JavaScript 特性，它允许你从数组或对象中提取值并将它们分配给变量，从而使变量声明更加简洁和可读。以下是一些示例，演示如何使用解构赋值简化变量声明：

1. 对象解构赋值：

// 普通方式
const person = { firstName: 'John', lastName: 'Doe' };
const firstName = person.firstName;
const lastName = person.lastName;

// 使用对象解构赋值
const { firstName, lastName } = person;

2. 数组解构赋值：

// 普通方式
const numbers = [1, 2, 3, 4, 5];
const firstNumber = numbers[0];
const secondNumber = numbers[1];

// 使用数组解构赋值
const [firstNumber, secondNumber] = numbers;

3.默认值：

你还可以为解构赋值提供默认值，以防提取的值不存在或为 undefined：

const person = { firstName: 'John' };
const { firstName, lastName = 'Doe' } = person;
// 如果 lastName 不存在，将使用默认值 'Doe'

4. 重命名：

你可以使用冒号 : 来重命名提取的变量：

const person = { first: 'John', last: 'Doe' };
const { first: firstName, last: lastName } = person;
// 变量 firstName 和 lastName 现在包含 'John' 和 'Doe'

5.嵌套解构：

可以在对象和数组中进行嵌套解构：

const person = { name: { first: 'John', last: 'Doe' }, age: 30 };
const { name: { first, last }, age } = person;

6.函数参数解构：

解构赋值也可以用于函数参数，以使函数参数更具可读性：

// 普通方式
function greet(person) {
  const { firstName, lastName } = person;
  console.log(`Hello, ${firstName} ${lastName}`);
}

// 使用函数参数解构
function greet({ firstName, lastName }) {
  console.log(`Hello, ${firstName} ${lastName}`);
}

const person = { firstName: 'John', lastName: 'Doe' };
greet(person);

4、展开运算符 …

展开运算符（spread operator）是 JavaScript 中的一项强大功能，它允许你将数组、对象或字符串拆分为单独的元素，并将它们合并到其他数组、对象或字符串中。以下是展开运算符的常见用法：

1. 展开数组：

合并数组：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

复制数组：

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
console.log(copyArray); // [1, 2, 3]

2. 展开对象：

合并对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

复制对象：

const originalObject = { x: 1, y: 2 };
const copyObject = { ...originalObject };
console.log(copyObject); // { x: 1, y: 2 }

3. 展开函数参数：

传递数组作为参数：

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 6

4. 展开字符串：

将字符串拆分为字符数组：

const str = 'hello';
const characters = [...str];
console.log(characters); // ['h', 'e', 'l', 'l', 'o']

5、剩余参数：

展开运算符还可与剩余参数结合使用，用于处理不定数量的参数。

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

const result = sum(1, 2, 3, 4, 5);
console.log(result); // 15

展开运算符在 JavaScript 中非常有用，可以让你更灵活地操作数组和对象，以及在函数参数中传递和处理数据。它提供了一种方便的方法来创建副本、合并数据和将数据分解为更小的部分。

6、函数式编程

函数式编程是一种编程范式，它强调使用纯函数和函数组合来处理数据和逻辑。

1. 纯函数：

纯函数是指在给定相同输入的情况下，总是返回相同输出，并且没有任何副作用的函数。副作用包括修改全局变量、改变传递给函数的参数、进行 I/O 操作等。纯函数具有以下特点：

相同输入产生相同输出。
不会修改传递给它的参数。
不会对外部状态造成影响。
没有副作用。

纯函数的好处在于它们易于测试、理解和推理，因为它们不涉及隐藏的状态变化。

// 纯函数示例
function add(a, b) {
  return a + b;
}

// 非纯函数示例，有副作用
let total = 0;
function addToTotal(number) {
  total += number;
}

2. 函数组合：

函数组合是将多个函数按照一定的顺序组合在一起以创建新函数的过程。这有助于将代码分解为小块、可复用的函数，并且提高了代码的可读性。

// 函数组合示例
function add(x) {
  return x + 1;
}

function multiply(x) {
  return x * 2;
}

// 组合add和multiply函数
const compose = (f, g) => (x) => f(g(x));

const addAndMultiply = compose(multiply, add);

console.log(addAndMultiply(5)); // 先加1再乘以2，结果为12

3。高阶函数：

高阶函数是接受一个或多个函数作为参数或返回一个函数的函数。它们在函数式编程中非常常见，用于操作和转换函数。

// 高阶函数示例
function double(x) {
  return x * 2;
}

function triple(x) {
  return x * 3;
}

function apply(func, x) {
  return func(x);
}

console.log(apply(double, 5)); // 10
console.log(apply(triple, 5)); // 15