如何从 Javascript 对象获取属性值

Question

我有一个 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 在这里：PLUNKR

Answer 1

使用以下函数：

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")
);

Answer 2

使用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.

Answer 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;
  }
}

Answer 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() 在

工作

如何从 Javascript 对象获取属性值

How to get Property value from a Javascript object

javascript

arrays

jquery

javascript-objects

dom-events

如何从 Javascript 对象获取 属性 值

How to get Property value from a Javascript object

javascript

arrays

jquery

javascript-objects

dom-events

如何从 Javascript 对象获取属性值