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 对象或数组中读取和设置值,而无需担心路径是否存在。这在处理复杂的数据结构时特别有用。

相关推荐
楚轩努力变强2 天前
2026 年前端进阶:端侧大模型 + WebGPU,从零打造高性能 AI 原生前端应用
前端·typescript·大模型·react·webgpu·ai原生·高性能前端
~无忧花开~4 天前
React生命周期全解析
开发语言·前端·javascript·react.js·前端框架·react
liangbm35 天前
AI-ViewNote:把网课和会议视频自动卷成结构化笔记
ai·typescript·go·软件构建·开源软件·react·桌面软件
喵了几个咪5 天前
GoWind Content Hub|风行,开箱即用的企业级前后端一体内容中台
vue.js·golang·react·taro
每天都要进步哦5 天前
React入门和快速上手
前端·vue.js·react.js·react
蜡台5 天前
SPA(Single Page Application) Web 应用(即单页应用)架构模式 更新
前端·架构·vue·react·spa·spa更新
L-影5 天前
Agent中的ReAct:类型、作用与避坑指南(下篇)
人工智能·ai·react
闭上眼让寒冷退却6 天前
LilChat项目复杂度+难点+亮点建议
react·socket.io·project
Highcharts.js6 天前
Highcharts React v4 迁移指南(下):分步代码示例与常见问题解决
javascript·react.js·typescript·react·highcharts·代码示例·v4迁移
Highcharts.js7 天前
Highcharts React v4 迁移指南(上):核心变更解析与升级收益
前端·javascript·react.js·react·数据可视化·highcharts·v4迁移