js 基础系列之如何获取key 为连续变量的 obj 值?

Question

const info = {
    age:[10,20]
}
const key = 'age[0]'

如何获取 info[key] 解析成 info['age']['0'] 也就是 10?

Answer 1

使用 Lodash 方便

import _ from "lodash";

const info = {
    age: [10, 20]
};
const key = "age[0]";

console.log(_.get(info, key));

可以自己写一个简单的 get

function get(it, keyPath) {
    return keyPath
        .split(/[.[\]]/g)
        .filter(s => s)
        .reduce((v, key) => v?.[key], it);
}

filter 和 reduce 是两次循环，而且 reduce 部分是可以中断的，所以直接用循环来写可能更高效

function get(it, keyPath) {
    let v = it;
    for (const key of keyPath.split(/[.[\]]/g)) {
        if (!key) { continue; }
        v = v[key];
        if ((v ?? null) == null) { break; }
    }
    return v;
}

Answer 2

说实话，没有弄明白你所谓的连续变量obj指什么？
其实现在可以获取的是 info['age'][0]和info['age'][1]

Answer 3

不严谨的简单实现（没有考虑边界情况与拓展性）：

function parse(obj, keyValue) {
  const [_, k1, k2] = keyValue.match(/(.+)\[(.+)]/) || []

  return obj[k1][k2]
}

Answer 4

自己实现的话可以

//根据字符串路径获取对象属性 : 'dcjgs[0].count'
function getPropByPath(obj, path, strict) {
    let tempObj = obj;
    path = path.replace(/\[(\w+)\]/g, '.$1');
    path = path.replace(/^\./, '');

    let keyArr = path.split('.');
    let i = 0;
    for (let len = keyArr.length; i < len - 1; ++i) {
      if (!tempObj && !strict) break;
      let key = keyArr[i];
      if (key in tempObj) {
          tempObj = tempObj[key];
      } else {
          if (strict) {
          throw new Error('please transfer a valid prop path to form item!');
          }
          break;
      }
    }
    return tempObj ? tempObj[keyArr[i]] : null
};

Answer 5

function get(object, path, defaultValue) {
    try {
        if (Array.isArray(path)) {
            path = "['" + path.join("']['") + "']";
        } else if (typeof path === "string") {
            path = path.replace(/^\s*\.*|\s+$/g, "");
            if (path[0] !== "[") path = "." + path;
        } else {
            throw new TypeError(typeof path + " is not a string");
        }
        return eval("object" + path) ?? defaultValue;
    } catch (error) {
        console.error(error);
        return defaultValue;
    }
}
console.log(get(info, "age[0]"));
console.log(get(info, ["age", 0]));
console.log(get(info, "age[2]", 30));