干净的代码：JavaScript 不变性、核心概念和工具

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《干净的代码：JavaScript 不变性、核心概念和工具》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

什么是数据可变性？

直接修改现有数据值的行为称为可变性。在 JavaScript 中，对象和数组默认是可变的：

// 可变性示例
const user = { name: 'alice' };
user.name = 'bob';           // 修改对象属性

const numbers = [1, 2, 3];
numbers.push(4);             // 修改数组
numbers[0] = 0;              // 修改数组元素

这种可变性可能导致难以察觉的错误，尤其是在大型应用中。

为何要避免可变性？

来看一个简单的例子：

// 使用可变性的代码
const cart = {
  items: [],
  total: 0
};

function addProduct(cart, product) {
  cart.items.push(product);
  cart.total += product.price;
}

// 使用示例
const myCart = cart;
addProduct(myCart, { id: 1, name: "laptop", price: 999 });
// myCart 直接被修改
console.log(cart === myCart); // true，两个变量指向同一个对象

可变性带来的问题：

1. 共享引用: 代码的不同部分可能在不知情的情况下修改同一个对象。
2. 副作用: 修改可能影响到使用同一个对象的其它函数。
3. 难以调试: 难以追踪代码的哪一部分修改了对象。
4. 复杂测试: 可变性使单元测试更难编写。

解决方案：不可变编程

不可变方法为每次修改都创建数据的新副本：

// 不可变代码
function addProduct(cart, product) {
  // 创建新对象，不修改原对象
  return {
    items: [...cart.items, product],
    total: cart.total + product.price
  };
}

// 使用示例
const initialCart = { items: [], total: 0 };
const newCart = addProduct(initialCart, { id: 1, name: "laptop", price: 999 });

console.log(initialCart); // { items: [], total: 0 }
console.log(newCart);     // { items: [{...}], total: 999 }
console.log(initialCart === newCart); // false，它们是不同的对象

这种方法的优势：

1. 可预测性: 每个函数都返回一个新状态，没有隐藏的副作用。
2. 更改追踪: 每次修改都会创建一个可追踪的新对象。
3. 轻松测试: 函数是纯函数，测试更简单。
4. 更好的调试: 可以比较修改前后的状态。

现代不可变性工具

Immer：简洁的编写风格

Immer 允许您编写看起来像普通 JavaScript 代码，但会产生不可变结果的代码：

import produce from 'immer';

const initialCart = {
  items: [],
  total: 0,
  customer: {
    name: 'alice',
    preferences: {
      notifications: true
    }
  }
};

// 不使用 Immer（冗长方式）
const updatedCart = {
  ...initialCart,
  items: [...initialCart.items, { id: 1, name: "laptop", price: 999 }],
  total: initialCart.total + 999,
  customer: {
    ...initialCart.customer,
    preferences: {
      ...initialCart.customer.preferences,
      notifications: false
    }
  }
};

// 使用 Immer（简洁方式）
const updatedCartImmer = produce(initialCart, draft => {
  draft.items.push({ id: 1, name: "laptop", price: 999 });
  draft.total += 999;
  draft.customer.preferences.notifications = false;
});

Immer 的优势：

• 熟悉的语法：像平时一样编写代码。
• 无需学习新的 API：使用常规 JavaScript 对象和数组。
• 快速：只复制修改的部分。
• 自动变更检测：只在需要时追踪变更并创建新引用。
• 与 TypeScript 配合良好：保留所有类型信息。

Immutable.js：高效的数据结构

Immutable.js 提供了专门用于不可变性的数据结构：

import { Map, List } from 'immutable';

// 创建不可变结构
const cartState = Map({
  items: List([]),
  total: 0
});

// 添加一个商品
const newCart = cartState
  .updateIn(
    ['items'],
    items => items.push(Map({
      id: 1,
      name: "laptop",
      price: 999
    }))
  )
  .update('total', total => total + 999);

// Immutable.js 方法总是返回新的实例
console.log(cartState.getIn(['items']).size); // 0
console.log(newCart.getIn(['items']).size);   // 1

// 轻松比较
console.log(cartState.equals(newCart)); // false

// 转换回普通的 JavaScript 对象
const cartJS = newCart.toJS();

Immutable.js 的优势：

• 快速的不可变数据结构。
• 用于处理数据的丰富 API。
• 节省内存的数据共享。
• 使用 equals() 轻松进行相等性检查。
• 防止意外修改。

用于实现不可变性的 ESLint 配置

ESLint 可以通过特定的规则来帮助执行不可变的编码实践：

// .eslintrc.js
module.exports = {
  plugins: ['functional'],
  rules: {
    'functional/immutable-data': 'error',
    'functional/no-let': 'error',
    'functional/prefer-readonly-type': 'error'
  }
};

这些规则将：

• 防止直接数据变异。
• 鼓励使用 const 而不是 let。
• 建议在 TypeScript 中使用只读类型。

TypeScript 和不可变性

TypeScript 通过其类型系统来帮助强制执行不可变性：

// 商品和购物车的不可变类型
type Product = {
  readonly id: number;
  readonly name: string;
  readonly price: number;
};

type Cart = {
  readonly items: ReadonlyArray;
  readonly total: number;
};

// TypeScript 防止修改
const cart: Cart = {
  items: [],
  total: 0
};

// 编译错误：items 是只读的
cart.items.push({ id: 1, name: "Laptop", price: 999 });

// 函数必须创建一个新的购物车
function addProduct(cart: Cart, product: Product): Cart {
  return {
    items: [...cart.items, product],
    total: cart.total + product.price
  };
}

// TypeScript 保证原对象不会被更改
const newCart = addProduct(cart, { id: 1, name: "Laptop", price: 999 });

TypeScript 的只读修饰符：

• readonly：防止属性更改。
• ReadonlyArray：防止数组更改。
• Readonly：使所有属性都只读。

这些类型会在编译时进行检查，有助于尽早发现错误。

结论

不可变性使您的代码更可预测且更易于维护。虽然需要一些时间来适应，但可靠性和可维护性方面的好处是值得的。

今天关于《干净的代码：JavaScript 不变性、核心概念和工具》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！