JavaScript动态获取对象二级(多级)属性(值)的几种方法

推荐最后一种自定义函数方法

在一些特殊情况下，对象是动态的，它可用是一级、二级、多级对象，这是不规整的
那么如何获取这种动态属性的对象属性值呢？

const obj = {
  lisi: {
    age: 18,
    "test-age": 20,
    hobby: [
      "写代码",
      "打篮球",
      {
        Games: ["英雄联盟", "古墓丽影", "神秘海域"],
      },
    ],
  },
};

const key1 = "lisi";
const key2 = "age";
const key3 = "lisi.age";

// 以下输出全为 undefined ; 因为 obj 内压根就没有key1~key3这个3属性
console.log(obj.key1);
console.log(obj.key2);
console.log(obj.key3);

// 1. 静态获取(一般正常方式) 不过这种方式有一定缺陷，例如无法获取 test-age
console.log(obj.lisi.age); // 18
// console.log(obj.lisi.test-age); // 语法报错

// 2. 动态获取; 可解决上方无法获取 test-age的问题
console.log(obj.lisi["test-age"]); // 20

console.log(obj[key1].age); // 18

console.log(obj[key1][key2]); // 18

// 为什么会是undefined？ 因为obj内没有 lisi.age (lisi.age被视为一个key，即test-age相同)
console.log(obj[key3]); // undefined

// 使用eval函数动态获取(既然是动态获取test-age也是没问题的)
console.log(eval(`obj.${key1}.age`)); // 18
console.log(eval(`obj.${key1}.${key2}`)); // 18
console.log(eval("obj." + key3)); // 18

// 使用 Function 动态获取 (此方法在浏览器控制台可用，但是放到nodejs里就不行了，目前我还不知道是什么情况)
// console.log(new Function("return " + ("obj." + key1))());

// 自定义函数(推荐)
function GetProperty(obj, str) {
  str = str.replace(/\[(\w+)\]/g, ".$1"); // 处理数组下标
  let arr = str.split(".");
  for (let i in arr) {
    obj = obj[arr[i]] || "";
  }
  return obj;
}
console.log(GetProperty(obj, key3)); // 18
console.log(GetProperty(obj, "lisi.test-age")); // 20
console.log(GetProperty(obj, "lisi.hobby[2].Games[1]")); // 古墓丽影

作者: Lete乐特

文章链接: JavaScript动态获取对象二级(多级)属性(值)的几种方法 | Lete乐特 's Blog

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog !