Lodash 最常用的方法有哪些?各自解决什么问题?
Lodash 最常用的方法按用途可分为几类。数组方面:_.chunk 分块、_.compact 去假值、_.difference 取差集、_.uniq 去重、_.orderBy 多字段排序。对象方面:_.get 安全取嵌套属性(避免 a.b.c 报错)、_.set 安全设置嵌套属性、_.merge 递归合并、_.pick/_.omit 选取或排除属性。函数方面:_.debounce 防抖、_.throttle 节流、_.memoize 缓存计算结果。工具方面:_.cloneDeep 深拷贝、_.isEqual 深比较、_.isEmpty 判空、_.isNil 判断 null 或 undefined。字符串方面:_.camelCase 转驼峰、_.kebabCase 转短横线。其中 _.get、_.debounce、_.cloneDeep、_.isEqual 使用频率最高,几乎是日常开发的标配。
追问
_.get 和可选链 ?. 有什么区别?
可选链 ?. 在属性不存在时返回 undefined,无法自定义默认值;_.get 第三参数可设默认值,且支持数组路径 ['a', '0', 'b'],在路径动态拼接时更灵活。ES2020 之后简单场景可用 ?. + ?? 替代,但动态路径仍需 _.get。
javascriptconst obj = { a: [{ b: { c: 3 } }] }; // 可选链写法 obj?.a?.[0]?.b?.c ?? 'default'; // => 3 // 动态路径只能用 _.get const path = userInput; // 运行时才确定 _.get(obj, path, 'default');
_.debounce 和 _.throttle 核心区别是什么?
debounce 在事件停止触发后的指定时间才执行,适合搜索输入、窗口 resize;throttle 在持续触发期间以固定间隔执行,适合滚动监听、拖拽移动。关键选项:leading 控制是否在等待前立即执行,trailing 控制是否在等待结束后再执行一次。
javascript// debounce: 停止输入 300ms 后才发请求 input.addEventListener('input', _.debounce(search, 300)); // throttle: 滚动时每 100ms 最多执行一次 window.addEventListener('scroll', _.throttle(update, 100));
_.merge 和 Object.assign 有什么区别?
Object.assign 是浅合并,遇到嵌套对象会整体覆盖;_.merge 递归深入合并,嵌套对象的属性会逐层叠加而非替换。另外 _.merge 会处理数组合并(按索引递归),而 Object.assign 直接覆盖。
javascriptconst a = { x: [1, 2], y: { z: 1 } }; const b = { x: [3], y: { w: 2 } }; Object.assign({}, a, b); // => { x: [3], y: { w: 2 } } 嵌套被整体替换 _.merge({}, a, b); // => { x: [3, 2], y: { z: 1, w: 2 } } 递归合并
_.isEmpty 对不同类型的判断规则是什么?
isEmpty 对 null、undefined、boolean、number 返回 true;对数组看 length,对对象看可枚举属性数,对字符串看长度。注意:_.isEmpty(new Error()) 返回 true(Error 没有可枚举属性),_.isEmpty(NaN) 也返回 true。如果只想判断 null/undefined,用 _.isNil。
为什么推荐按需引入 Lodash?
全量引入 lodash 会使打包体积增加约 70KB+(gzip 后)。按需引入只打包用到的方法:
javascript// 全量引入(不推荐) import _ from 'lodash'; // 按需引入 import get from 'lodash/get'; import debounce from 'lodash/debounce';
配合 babel-plugin-lodash 或 lodash-es 的 tree-shaking,可以自动处理全量 import 的按需转换。