手写 lodash/get、lodash/set 方法

前提:平时写js代码时经常遇到要使用 lodash 中 _.get 和 _.set 的情况,每次使用都要引用 lodash,总感觉很烦,能不能自己实现一个简单的方法来实现一样的功能呢?

get 方法实现

get 方法接受三个参数,第一个是目标对象或者数组,第二个是获取值的路径,第三个是获取失败时的默认值
function get(object, path, defaultValue) {
    // 判断 object 是否是数组或者对象,否则直接返回默认值 defaultValue
    if (typeof object !== 'object') return defaultValue
    // 沿着路径寻找到对应的值,未找到则返回默认值 defaultValue
    return _basePath(path).reduce((o, k) => (o || {})[k], object) || defaultValue
}

// 处理 path, path有三种形式:'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c'],需要统一处理成数组,便于后续使用
function _basePath(path) {
    // 若是数组,则直接返回
    if (Array.isArray(path)) return path
    // 若有 '[',']',则替换成将 '[' 替换成 '.',去掉 ']'
    return path.replace(/\[/g, '.').replace(/\]/g, '').split('.')
}

set 方法实现
set 方法同样接受三个参数,第一个是源对象或者源数组,第二个是设置值的路径,第三个是value
function set(object, path, value) {
    if (typeof object !== 'object') return object;
    _basePath(path).reduce((o, k, i, _) => {
        if (i === _.length - 1) { // 若遍历结束直接赋值
            o[k] = value
            return null
        } else if (k in o) { // 若存在对应路径,则返回找到的对象,进行下一次遍历
            return o[k]
        } else { // 若不存在对应路径,则创建对应对象,若下一路径是数字,新对象赋值为空数组,否则赋值为空对象
            o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {}
            return o[k]
        }
    }, object)
    // 返回object
    return object;
}

测试
let obj = { a: [{ b: { c: 6 } }] }
console.log(get(obj, 'a[0].b.c', '默认值')) // 6
console.log(get(obj, 'a.5.b.c', '默认值')) // '默认值'
console.log(get(obj, ['a', '0', 'b', 'c'], '默认值')) // 6

let obj1 = { a: [{ b: { c: 6 } }] }
let obj2 = { }
let obj3 = { }
set(obj1, 'a[0].b.c', '默认值')
set(obj2, 'a.0.b.5.c', '默认值')
set(obj3, ['1', '2', 'b', 'c'], '默认值')
console.log(JSON.stringify(obj1)) // {"a":[{"b":{"c":"默认值"}}]}
console.log(JSON.stringify(obj2)) // {"a":[{"b":[null,null,null,null,null,{"c":"默认值"}]}]}
console.log(JSON.stringify(obj3)) // {"1":[null,null,{"b":{"c":"默认值"}}]}
 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值