lodash-es中的set和get的用法

lodash-eslodash 的一个模块化版本,允许你通过 ES 模块(ECMAScript Modules)的方式按需导入函数,以减少最终打包体积。lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。在 lodash-es 中,_.set_.get 是两个非常有用的函数,用于在深层嵌套的对象中安全地读取和设置值。

_.get

_.get 函数用于从对象或数组中按照路径获取值。如果路径不存在,可以返回默认值。这对于避免在深度嵌套的对象中访问不存在的属性时引发错误非常有用。

语法

javascript 复制代码
_.get(object, path, [defaultValue])
  • object (Object|Array):要查询的对象或数组。
  • path (Array|string):要查询的属性路径。字符串路径中的键可以使用点号(.)或方括号([])分隔。
  • [defaultValue] (*):如果解析的值是 undefined,则返回此值。

示例

javascript 复制代码
import { get } from 'lodash-es';

const object = { 'a': [{ 'b': { 'c': 3 } }] };

console.log(get(object, 'a[0].b.c'));
// => 3

console.log(get(object, ['a', '0', 'b', 'c']));
// => 3

console.log(get(object, 'a.b.c', 'default'));
// => 'default'

_.set

_.set 函数用于设置对象路径上的值。如果路径不存在,将创建它。这对于动态地向深层嵌套的对象添加属性非常有用。

语法

javascript 复制代码
_.set(object, path, value)
  • object (Object|Array):要修改的对象或数组。
  • path (Array|string):要设置的属性路径。字符串路径中的键可以使用点号(.)或方括号([])分隔。
  • value (*):要设置的值。

示例

javascript 复制代码
import { set } from 'lodash-es';

const object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4

_.set(object, ['x', '0', 'y', 'z'], 5);
console.log(object.x[0].y.z);
// => 5

通过这两个函数,你可以灵活地在 JavaScript 对象或数组中读取和设置值,而无需担心路径是否存在。这在处理复杂的数据结构时特别有用。

相关推荐
crary,记忆1 天前
微前端 - Module Federation使用完整示例
前端·react·angular
aiguangyuan2 天前
浅谈 React Hooks
react·前端开发
whatever who cares3 天前
React hook之userReducer
react.js·react
aiguangyuan3 天前
React Hooks 基础指南
react·前端开发
aiguangyuan4 天前
React 项目初始化与搭建指南
react·前端开发
aiguangyuan5 天前
React 组件异常捕获机制详解
react·前端开发
aiguangyuan5 天前
深入理解 JSX:React 的核心语法
react·前端开发
aiguangyuan5 天前
React 基础语法
react·前端开发
aiguangyuan7 天前
React 核心概念与生态系统
react·前端开发
aiguangyuan7 天前
React 18 生命周期详解与并发模式下的变化
react·前端开发