不用 lodash ，写一个简单的工具库也能实现 get 与 merge 函数

前端

2024-01-23 22:14:42

lodash 概述

Lodash 是一个流行的 JavaScript 库，提供了许多有用的函数，例如 get 和 merge。这些函数使 JavaScript 开发人员更容易处理对象和数组。

get 函数：
- 用于从对象中获取值。
- 语法：get(object, path, [defaultValue])
- 参数：
  - object：要获取值的对象。
  - path：要获取值的路径。
  - defaultValue：如果路径不存在，则返回的默认值。
merge 函数：
- 用于将多个对象合并为一个对象。
- 语法：merge(...objects)
- 参数：
  - objects：要合并的对象。

自己实现 get 与 merge 函数

虽然 Lodash 提供了强大的功能，但它也相对比较庞大。如果你只需要使用其中少数几个函数，那么使用 lodash 可能不是一个好主意。因为你会加载很多你不需要的代码。

你可以选择自己实现 get 和 merge 函数。这并不难，而且可以让你更好地理解这两种函数是如何工作的。

实现 get 函数

function get(object, path, defaultValue) {
  if (object == null) {
    return defaultValue;
  }
  const pathArray = path.split(".");
  let result = object;
  for (let i = 0; i < pathArray.length; i++) {
    const key = pathArray[i];
    if (result[key] === undefined) {
      return defaultValue;
    }
    result = result[key];
  }
  return result;
}

实现 merge 函数

function merge(...objects) {
  const result = {};
  for (const object of objects) {
    for (const key in object) {
      if (result[key] === undefined) {
        result[key] = object[key];
      } else if (Array.isArray(result[key]) && Array.isArray(object[key])) {
        result[key] = result[key].concat(object[key]);
      } else if (typeof result[key] === "object" && typeof object[key] === "object") {
        result[key] = merge(result[key], object[key]);
      } else {
        result[key] = object[key];
      }
    }
  }
  return result;
}

使用自己实现的函数

const object = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const path = "address.city";
const defaultValue = "Unknown";

const city = get(object, path, defaultValue);
console.log(city); // Anytown

const newObject = merge(object, {
  age: 31,
  address: {
    zip: "54321",
  },
});

console.log(newObject);