如何从 Javascript 对象中获取属性值答案

【问题标题】：How to get Property value from a Javascript object如何从 Javascript 对象中获取属性值
【发布时间】：2016-09-27 09:31:12
【问题描述】：

我有一个 JavaScript 对象。

var obj = { Id: "100", Name: "John", Address: {Id:1,Name:"Bangalore"} }
var dataToRetrieve= "Name";

function GetPropertyValue(object,dataToRetrieve){
      return obj[dataToRetrieve]
}
var retval = GetPropertyValue(obj,dataToRetrieve)

这很好用。但是，如果我尝试获取 "Address.Name" 的属性值，

喜欢：var dataToRetrieve = "Address.Name"; 它显示undefined。

注意：属性变量是用户从HTML中设置的，可以根据用户要求（他想要哪个属性值）进行更改。

我想要达到的目标：

1) 如果dataToRetrieve = "Name"，应该给我"John"，

2) 如果dataToRetrieve = "Id"，应该给我"100"，

3) 如果dataToRetrieve = "Address.Name"，应该给我"Bangalore"，

4) 如果 dataToRetrieve = "Address.Id" ，它应该给我 1

请戳这里：PLUNKR

【问题讨论】：

您可能还对 lodash 的 get 方法感兴趣。 lodash.com/docs#get

标签： javascript jquery arrays javascript-objects dom-events

【解决方案1】：

使用reduce()方法

var obj = {
  Id: "100",
  Name: "John",
  Address: {
    Id: 1,
    Name: "Bangalore"
  }
}

function GetPropertyValue(obj1, dataToRetrieve) {
  return dataToRetrieve
    .split('.') // split string based on `.`
    .reduce(function(o, k) {
      return o && o[k]; // get inner property if `o` is defined else get `o` and return
    }, obj1) // set initial value as object
}


console.log(
  GetPropertyValue(obj, "Name"),
  GetPropertyValue(obj, "Id"),
  GetPropertyValue(obj, "Address.Name"),
  GetPropertyValue(obj, "Address.Id"),
  GetPropertyValue(obj, "Address.Idsd"),
  GetPropertyValue(obj, "Addre.Idsd")
)

对于较旧的浏览器，请检查 polyfill option of reduce method。

【讨论】：

添加对undefined 值的保护是个好主意，就像上面的答案一样。
效果很好。 1个问题：如果obj包含一些数组属性，它会工作吗？ like var obj = { Id: "100", Name: "John", Address: [{Id:1,Address:"Bangalore"},{Id:2,Address:"Mysore"}] } 然后调用函数像 GetPropertyValue(obj, "Address[0].Name") ?
@BimalDas : GetPropertyValue(obj, "Address.0.Name") 会工作
这是一个允许括号表示法和带有空格的属性名称以及验证输入的版本：it.knightnet.org.uk/kb/node-js/get-properties

【解决方案2】：

使用以下函数：

var obj = { Id: "100", Name: "John", 
            Address:  [{ Id:1, Name:"Bangalore" }, { Id:2, Name: "Mysore" } ] };

function GetPropertyValue(object, dataToRetrieve) {
    dataToRetrieve.split('.').forEach(function(token) {
      if (object) object = object[token];
    });
    
    return object;
}

console.log(
  GetPropertyValue(obj, "Address.0.Name"),
  GetPropertyValue(obj, "Address.1.Id"),
  GetPropertyValue(obj, "Name"),
  GetPropertyValue(obj, "Id"),
  GetPropertyValue(obj, "Unknown"),
  GetPropertyValue(obj, "Some.Unknown.Property")
);

【讨论】：

【解决方案3】：

 function GetPropertyValue(object,dataToRetrieve){
  var valueArray = dataToRetrieve.split(".");
  if (valueArray.length <= 1) {
    return object[valueArray];
  } else {
    var res;
    function browseObj(obj, valueArray, i) {
      if (i == valueArray.length)
        res = obj;
      else
        browseObj(obj[valueArray[i]], valueArray, i+1);
    }
    browseObj(object, valueArray, 0);
    return res;
  }
}

【讨论】：

【解决方案4】：

我编写了一个标准的可重用对象方法来动态访问嵌套属性。就像

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

它将采用嵌套属性的动态参数。如果它们是字符串类型，它们是对象属性，如果是数字类型，那么它们是数组索引。一旦你有了这个，你的工作就变得很容易了。让我们看看..

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};
var props = ["Address","Name"],
      obj = { Id: "100", Name: "John", Address: {Id:1,Name:"Bangalore"} },
      val = obj.getNestedValue(...props);
console.log(val);
// or you can of course do statically like
      val = obj.getNestedValue("Address","Name");
console.log(val);

您可以看到getNestedValue() 和它的孪生setNestedValue() 在https://stackoverflow.com/a/37331868/4543207 工作

【讨论】：