lodash.get 函数的实现及使用可选链操作简化取值

正文

lodash.get 函数的实现

lodash.get 函数是 JavaScript 库 Lodash 中的实用函数，它允许从嵌套对象中检索值。它的语法如下：

lodash.get(object, path, [defaultValue])

其中：

• object 是要检索值的对象。
• path 是一个字符串或数组，表示要检索的值的路径。
• defaultValue 是可选参数，如果路径不存在，则返回该值。

lodash.get 函数的实现相对简单，它使用递归来遍历对象并检索值。以下是其实现的伪代码：

function get(object, path, defaultValue) {
  if (path === '') {
    return object;
  }

  const key = path.split('.')[0];
  const restOfPath = path.substring(key.length + 1);

  if (object[key] === undefined) {
    return defaultValue;
  }

  return get(object[key], restOfPath, defaultValue);
}

使用可选链操作简化取值

ES11 引入了可选链操作（又称安全导航操作），它允许使用 ?. 运算符来安全地检索嵌套对象的值。可选链操作的语法如下：

object?.property

其中：

• object 是要检索值的对象。
• property 是要检索的属性。

如果 object 为 null 或 undefined，则可选链操作将返回 undefined。否则，它将返回 object[property]。

lodash.get 函数与可选链操作的比较

lodash.get 函数和可选链操作都是检索嵌套对象值的强大工具。然而，它们有一些关键的区别：

• 语法： lodash.get 函数的语法比可选链操作更复杂。
• 可读性： 可选链操作的语法更简洁，更易读。
• 灵活性： lodash.get 函数允许使用字符串或数组作为路径，而可选链操作只能使用字符串作为路径。
• 支持： lodash.get 函数在所有现代浏览器中都受支持，而可选链操作只在 ES11 及更高版本中受支持。

何时使用 lodash.get 函数？

lodash.get 函数在以下情况下很有用：

• 你需要使用数组作为路径来检索值。
• 你需要检索嵌套对象的深度值。
• 你需要在路径不存在时指定默认值。

何时使用可选链操作？

可选链操作在以下情况下很有用：

• 你需要检索嵌套对象的浅层值。
• 你需要使代码更简洁、更易读。
• 你可以使用 ES11 或更高版本。

结论

lodash.get 函数和可选链操作都是检索嵌套对象值的强大工具。lodash.get 函数更灵活，但可选链操作更简洁、更易读。最终，你应该根据你的具体需求来选择使用哪个工具。

练习题

1. 给定以下对象：

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

使用 lodash.get 函数和可选链操作分别检索以下值：

• name
• age
• address.street
• address.city
• address.state
• address.zip

2. 在以下代码中，使用 lodash.get 函数和可选链操作分别检索 name 属性：

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

const path = 'name';

3. 在以下代码中，使用 lodash.get 函数和可选链操作分别检索 address.city 属性：

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

const path = 'address.city';

4. 在以下代码中，使用 lodash.get 函数和可选链操作分别检索 address.zip 属性：

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

const path = 'address.zip';

5. 在以下代码中，使用 lodash.get 函数和可选链操作分别检索 address.nonExistentProperty 属性：

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

const path = 'address.nonExistentProperty';