logo标签列表

使用动态计算的名称访问对象属性

javascriptobjectproperties
967

我正在尝试使用动态名称访问对象的属性。 这是可能的吗？

const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
5
请参考以下内容：属性访问：点表示法与方括号表示法有何不同？ 和 如何使用变量作为属性名向对象添加属性？ - Bergi
20个回答
3

其他人已经提到了“点”和“方括号”语法，所以我想用类似的方式来介绍访问函数和发送参数。

代码 jsfiddle

var obj = {method:function(p1,p2,p3){console.log("method:",arguments)}}

var str = "method('p1', 'p2', 'p3');"

var match = str.match(/^\s*(\S+)\((.*)\);\s*$/);

var func = match[1]
var parameters = match[2].split(',');
for(var i = 0; i < parameters.length; ++i) {
  // clean up param begninning
    parameters[i] = parameters[i].replace(/^\s*['"]?/,'');
  // clean up param end
  parameters[i] = parameters[i].replace(/['"]?\s*$/,'');
}

obj[func](parameters); // sends parameters as array
obj[func].apply(this, parameters); // sends parameters as individual values
1

演示对象示例

let obj = {
    name: {
        first_name: "Bugs",
        last_name: "Founder",
        role: "Programmer"
    }
}

用于获取值的点分字符串键

let key = "name.first_name"

功能

const getValueByDottedKeys = (obj, strKey)=>{
    let keys = strKey.split(".")
    let value = obj[keys[0]];   
    for(let i=1;i<keys.length;i++){
        value = value[keys[i]]
    }
    return value
}

调用 getValueByDottedKeys 函数

value = getValueByDottedKeys(obj, key)
console.log(value)

输出

Bugs


const getValueByDottedKeys = (obj, strKey)=>{
    let keys = strKey.split(".")
    let value = obj[keys[0]];   
    for(let i=1;i<keys.length;i++){
        value = value[keys[i]]
    }
    return value
}

let obj = {
    name: {
        first_name: "Bugs",
        last_name: "Founder",
        role: "Programmer"
    }
}

let key = "name.first_name"

value = getValueByDottedKeys(obj, key)
console.log(value)

0

您可以使用方括号表示法动态访问对象的属性。这将类似于obj[yourKey]，但是JavaScript对象实际上并不是为动态更新或读取而设计的。

它们旨在在初始化时定义。如果您想动态分配和访问键值对，应改用映射。

const yourKey = 'yourKey';

// initialise it with the value
const map1 = new Map([
  ['yourKey', 'yourValue']
]);

// initialise empty then dynamically assign
const map2 = new Map();
map2.set(yourKey, 'yourValue');

console.log(map1.get(yourKey));
console.log(map2.get(yourKey));

0

我遇到了同样的问题，但是当处理嵌套属性时，lodash模块存在一定的限制。我按照递归下降解析器的思路编写了一个更通用的解决方案。该解决方案可以在以下Gist中找到：

递归下降对象解引用

0

对于任何想要设置嵌套变量值的人，以下是如何操作：

const _ = require('lodash'); //import lodash module

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4

文档：https://lodash.com/docs/4.17.15#set

此外，如果您想获取一个值的文档：https://lodash.com/docs/4.17.15#get

0

我之前在这个话题上问了一个有点重复的问题，经过大量的研究，并且看到很多应该在这里的信息缺失，我感觉我有一些有价值的东西可以添加到这篇旧帖子中。

  • 首先，我想解决的是获取属性值并将其存储在动态变量中的几种方法。在我看来，第一种最流行、最简单的方法是：
let properyValue = element.style['enter-a-property'];

然而，我很少选择这种方法，因为它不能处理通过样式表分配的属性值。为了给你举个例子，我将用一些伪代码进行演示。

 let elem = document.getElementById('someDiv');
 let cssProp = elem.style['width'];

使用上面的代码示例；如果存储在“elem”变量中的div元素的宽度属性是在CSS样式表中进行了样式设置，而不是在其HTML标记内进行了样式设置，则无疑会在cssProp变量中存储undefined返回值。未定义的值发生是因为为了获得正确的值，必须计算CSS样式表中编写的代码以获取该值，因此；您必须使用一种方法来计算值位于样式表中的属性的值。
因此，getComputedStyle()方法诞生了！
function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

W3Schools getComputedValue Doc 这个链接提供了一个很好的例子，让你可以尝试一下。然而，这个链接 Mozilla CSS getComputedValue doc 更详细地介绍了getComputedValue函数，任何有志于开发的开发者如果对这个主题不是完全清楚的话，都应该阅读一下。

  • 顺便说一句，getComputedValue方法只能获取值，不能设置值。显然，这是一个主要的缺点，但是有一种方法可以从CSS样式表中获取和设置值，虽然它不是标准的Javascript。 JQuery方法...
$(selector).css(property,value)

...获取和设置。这是我使用的方法，唯一的缺点是你必须要了解 JQuery，但这实际上是每个 JavaScript 开发者应该学习 JQuery 的众多好理由之一，它使生活变得轻松，并提供了像这样的方法，这在标准 JavaScript 中是不可用的。 希望这能帮助到某些人！！！

这里的内容是许多其他问题和它们的答案的副本（例如，JavaScript get Styles，myDiv.style.display returns blank when set in master stylesheet）。应该参考那些问题和答案，而不是创建另一个说同样事情的答案。 - Heretic Monkey
0
这里有一种动态访问对象属性的方法，即基于本地存储数据访问JSON对象。假设localstorage数据为{preferredIndustry=foodItemsFeatured}。
需要访问data.foodItemsFeatured。

enter image description here

let storageData = this.data; // JSON Response
let preferredData = localStorage.getItem('preferredIndustry'); //foodItemsFeatured

/* Dynamically access Object's property */
this.preferredFeaturedItems = this.data[preferredData as keyof typeof storageData];
-1

在Javascript中，您可以使用getter

getter文档

检查对象内部是否存在所需属性， 如果不存在，则从窗口中获取

const something = {
    get: (n) => this.n || something.n || window[n]
};
-1

通过引用查找对象，无需使用字符串。请注意，您传递的对象是克隆的，我使用lodash中的cloneDeep进行克隆。

如果对象看起来像

const obj = {data: ['an Object',{person: {name: {first:'nick', last:'gray'} }]

路径看起来像这样

const objectPath = ['data',1,'person',name','last']

然后调用下面的方法，它将返回给定路径的子对象

const child = findObjectByPath(obj, objectPath)
alert( child) // alerts "last"


const findObjectByPath = (objectIn: any, path: any[]) => {
    let obj = objectIn
    for (let i = 0; i <= path.length - 1; i++) {
        const item = path[i]
        // keep going up to the next parent
        obj = obj[item] // this is by reference
    }
    return obj
}
-4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接