发布于 由admin

JavaScript内核与高级编程之：`JavaScript`的`Lens`：其在不可变数据更新中的函数式抽象。

嘿，各位代码爱好者！欢迎来到今天的“JavaScript内核与高级编程”特别讲座。今天我们要聊点有意思的，关于如何在JavaScript里玩转“Lens”，让不可变数据的更新变得像切黄油一样顺滑。

什么是Lens？别告诉我你只知道蔡依林那首歌！

Lens，字面意思是“透镜”，在编程世界里，它是一种函数式抽象，用于聚焦和操作数据结构中的特定部分，同时保持数据的不变性。想象一下，你有一张复杂的地图，Lens就是你的放大镜，可以让你清晰地看到你想看的地方，并且在不破坏地图本身的情况下，进行一些修改。

简而言之，Lens提供了一种安全、高效、可组合的方式来访问和更新不可变数据结构中的深层嵌套属性。

为什么要用Lens？难道直接修改对象不好吗？

好问题！直接修改对象当然简单粗暴，但是…

  • 风险！风险！还是风险！ 直接修改会改变原始对象，这在并发、状态管理和调试方面会带来不可预测的问题。
  • 不可控！ 你不知道有多少地方依赖于这个对象，改了之后会不会影响到其他地方？
  • 难以追踪！ 状态变化难以追踪，调试噩梦开始…

不可变数据提供了更好的可预测性和可控性。每次修改都会创建一个新的对象，原始对象保持不变。这让我们可以更容易地进行状态管理、调试和并发编程。

但是，直接操作深层嵌套的不可变对象会变得非常繁琐，代码会变得难以阅读和维护。

Lens就像一个优雅的中间人，它允许我们以一种简洁、安全的方式访问和更新这些不可变数据，而无需手动遍历和复制整个对象。

Lens的核心概念：Getter和Setter

Lens的核心是两个函数：getter 和 setter。

  • Getter： 负责从数据结构中提取特定的值。
  • Setter： 负责创建一个新的数据结构，其中目标值已被更新。

让我们看一个简单的例子：

const person = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zipCode: '12345'
  }
};

// 手动访问city
const city = person.address.city; // "Wonderland"

// 手动更新city（不推荐，直接修改了原对象）
person.address.city = 'New Wonderland';

// 使用Lens的Getter和Setter
const cityGetter = (obj) => obj.address.city;
const citySetter = (obj, value) => ({
  ...obj,
  address: {
    ...obj.address,
    city: value
  }
});

// 获取city
const cityValue = cityGetter(person); // "Wonderland"

// 更新city (返回新的对象，原对象不变)
const newPerson = citySetter(person, 'New Wonderland');

console.log(person.address.city); // Wonderland (原对象没变)
console.log(newPerson.address.city); // New Wonderland (新对象)

在这个例子中，我们定义了cityGetter 和 citySetter 函数来访问和更新person对象的address.city属性。 citySetter 函数使用对象扩展运算符 (...) 创建了一个新的对象，确保原始对象 person 不会被修改。

Lens的威力：组合！

Lens真正的力量在于它的可组合性。 我们可以将多个Lens组合在一起，来访问和更新深层嵌套的属性。

想象一下，我们想要更新 person 对象的 address.city.name，如果 city 本身也是一个对象，包含 name 和 population 字段。

const person = {
  name: 'Alice',
  address: {
    city: {
      name: 'Wonderland',
      population: 1000
    },
    zipCode: '12345'
  }
};

// 定义 cityLens
const cityLens = {
    get: (obj) => obj.address.city,
    set: (obj, value) => ({
      ...obj,
      address: {
        ...obj.address,
        city: value
      }
    })
  };

// 定义 cityNameLens
const cityNameLens = {
    get: (obj) => obj.name,
    set: (obj, value) => ({
        ...obj,
        name: value
    })
};

// 组合 Lens (手动组合)
const composedGet = (obj) => cityNameLens.get(cityLens.get(obj));
const composedSet = (obj, value) => cityLens.set(obj, cityNameLens.set(cityLens.get(obj), value));

// 使用组合后的 Lens
const cityName = composedGet(person); // Wonderland
const newPerson = composedSet(person, 'New Wonderland');

console.log(person.address.city.name); // Wonderland
console.log(newPerson.address.city.name); // New Wonderland

虽然这个例子很简单，但它展示了Lens的可组合性。我们可以将多个 Lens 组合在一起，来访问和更新深层嵌套的属性。 但是手动组合太麻烦了，我们需要一个更优雅的方案。

Lens库：Ramda、monocle-ts等

幸运的是，有一些优秀的JavaScript库提供了Lens的实现，例如Ramda、monocle-ts等。 这些库提供了方便的函数来创建、组合和使用 Lens。

Ramda: 是一个流行的函数式编程库，提供了强大的Lens支持。

import { lensPath, view, set } from 'ramda';

const person = {
  name: 'Alice',
  address: {
    city: {
      name: 'Wonderland',
      population: 1000
    },
    zipCode: '12345'
  }
};

// 使用 lensPath 创建 Lens
const cityLens = lensPath(['address', 'city', 'name']);

// 使用 view 获取值
const cityName = view(cityLens, person); // Wonderland

// 使用 set 更新值
const newPerson = set(cityLens, 'New Wonderland', person);

console.log(person.address.city.name); // Wonderland
console.log(newPerson.address.city.name); // New Wonderland

lensPath 函数接受一个路径数组，并创建一个 Lens，用于访问和更新该路径上的值。 view 函数用于获取值，set 函数用于更新值。

monocle-ts: 是一个TypeScript库，提供了类型安全的Lens实现。

import { Lens } from 'monocle-ts';

interface City {
  name: string;
  population: number;
}

interface Address {
  city: City;
  zipCode: string;
}

interface Person {
  name: string;
  address: Address;
}

const person: Person = {
  name: 'Alice',
  address: {
    city: {
      name: 'Wonderland',
      population: 1000
    },
    zipCode: '12345'
  }
};

// 创建 Lens
const cityLens = Lens.fromPath<Person>()(['address', 'city', 'name']);

// 获取值
const cityName = cityLens.get(person); // Wonderland

// 更新值
const newPerson = cityLens.set('New Wonderland')(person);

console.log(person.address.city.name); // Wonderland
console.log(newPerson.address.city.name); // New Wonderland

monocle-ts 提供了类型安全的Lens实现，可以帮助我们避免类型错误。

Lens的进阶应用：转换和验证

除了简单的getter和setter，Lens还可以用于更复杂的转换和验证。

例如，我们可以使用Lens来将字符串转换为数字，或者验证用户输入是否符合特定的格式。

import { lensProp, over } from 'ramda';

const product = {
  name: 'Awesome Product',
  price: '100' // 注意这里是字符串
};

// 创建 priceLens
const priceLens = lensProp('price');

// 使用 over 进行转换 (将字符串转换为数字)
const parsePrice = (price) => parseInt(price, 10);
const newProduct = over(priceLens, parsePrice, product);

console.log(product.price); // "100"
console.log(newProduct.price); // 100 (数字)

over 函数接受一个 Lens、一个转换函数和一个对象，并返回一个新的对象，其中目标值已被转换。

Lens的适用场景

  • 复杂的数据结构： 当你需要访问和更新深层嵌套的属性时。
  • 不可变数据： 当你使用不可变数据时，Lens可以帮助你以一种简洁、安全的方式进行更新。
  • 函数式编程： 当你采用函数式编程风格时，Lens可以很好地融入你的代码。
  • 状态管理： 在Redux、Vuex等状态管理库中，Lens可以用于简化状态的更新。

Lens的局限性

  • 学习曲线： Lens的概念可能需要一些时间才能理解。
  • 性能： 在某些情况下，Lens的性能可能不如直接操作对象。 但是，对于大多数应用来说，性能差异可以忽略不计。
  • 库的依赖： 使用Lens通常需要依赖一个库，例如Ramda或monocle-ts。

自己实现一个简单的Lens

为了更好地理解 Lens 的原理，我们可以尝试自己实现一个简单的 Lens。

const createLens = (getter, setter) => ({
  get: getter,
  set: setter
});

const lensPath = (path) => {
  return path.reduce((lens, key) => {
    return {
        get: (obj) => lens.get(obj)[key],
        set: (obj, value) => lens.set(obj, {
            ...lens.get(obj),
            [key]: value
        })
    };
  }, {
    get: (obj) => obj,
    set: (obj, value) => value
  });
};

// 示例
const person = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

// 使用 lensPath 创建 Lens
const cityLens = lensPath(['address', 'city']);

// 获取值
const city = cityLens.get(person); // Wonderland

// 更新值
const newPerson = cityLens.set(person, 'New Wonderland');

console.log(person.address.city); // Wonderland
console.log(newPerson.address.city); // New Wonderland

这个简单的实现可以帮助你更好地理解 Lens 的原理。 注意，这只是一个示例，实际使用中建议使用成熟的 Lens 库。

Lens vs Immer：都是不可变数据更新，有什么区别？

你可能会问，既然有Lens，那Immer呢？它们都是为了方便更新不可变数据，有什么区别？

特性 Lens Immer
核心概念 Getter和Setter函数，聚焦和操作数据结构中的特定部分 基于Proxy的“draft”对象，允许你像修改可变对象一样修改不可变数据
工作方式 函数式，通过组合函数来访问和更新数据 结构共享，利用Proxy捕获修改操作，然后生成新的不可变对象
易用性 学习曲线稍陡峭，需要理解Getter和Setter的概念以及如何组合Lens 更加直观，代码更接近于直接修改可变对象的代码
性能 对于简单操作，性能可能略优于Immer；对于复杂操作，性能可能不如Immer 对于简单操作，性能可能不如Lens；对于复杂操作，性能通常优于Lens
类型安全 取决于使用的库，例如monocle-ts提供了类型安全的Lens实现 TypeScript支持良好
适用场景 需要高度定制化的访问和更新逻辑，或者需要与函数式编程风格保持一致时 需要快速、简单地更新不可变数据，并且不想过多关注底层实现细节时

简单来说，Lens更函数式，更灵活，但学习曲线稍陡峭；Immer更直观，更易用，但定制化程度可能不如Lens。选择哪个取决于你的具体需求和偏好。

总结

Lens是一种强大的函数式抽象，可以帮助我们以一种简洁、安全、可组合的方式访问和更新不可变数据结构中的深层嵌套属性。 虽然它有一定的学习曲线，但掌握Lens可以大大提高你的代码质量和可维护性。

希望今天的讲座对你有所帮助！下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注