手写 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":"默认值"}}]}

巴特西

手写 lodash/get、lodash/set 方法

get 方法实现

set 方法实现

测试

最新文章

热门文章