Javascript 使用变量动态访问对象属性
我正在尝试使用动态名称访问对象的属性。这可能吗Javascript 使用变量动态访问对象属性,javascript,object,properties,Javascript,Object,Properties,我正在尝试使用动态名称访问对象的属性。这可能吗 const something = { bar: "Foobar!" }; const foo = 'bar'; something.foo; // The idea is to access something.bar, getting "Foobar!" 一个对象有以下几种类型: 点符号:something.bar 括号符号:something['bar'] 括号之间的值可以是任何表达式。因此,如果属性名称存储在变量中,则必须使用括号表示
const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
一个对象有以下几种类型:
- 点符号:
something.bar
- 括号符号:
something['bar']
var某物={
酒吧:“富”
};
var foo='bar';
//x=something[foo]和something[foo]=x都按预期工作
log(something[foo]);
console.log(something.bar)
在javascript中,我们可以通过以下方式访问:
- 点符号-
foo.bar
- 方括号-
或foo[someVar]
foo[“string”]
var foo = { pName1 : 1, pName2 : [1, {foo : bar }, 3] , ...}
var name = "pName"
var num = 1;
foo[name + num]; // 1
// --
var a = 2;
var b = 1;
var c = "foo";
foo[name + a][b][c]; // bar
更新
使用obj[variable]
可以轻松访问对象中的根属性,但嵌套会使事情变得复杂。不要编写已经编写好的代码,我建议使用lodash.get
范例
// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);
// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);
Lodash get可以以不同的方式使用,下面的文档是一个ES6示例,说明如何使用通过连接两个字符串动态生成的属性名访问对象的属性
var suffix = " name";
var person = {
["first" + suffix]: "Nicholas",
["last" + suffix]: "Zakas"
};
console.log(person["first name"]); // "Nicholas"
console.log(person["last name"]); // "Zakas"
这叫做其他人已经提到了“点”和“方”语法,所以我想以类似的方式介绍访问函数和发送参数 代码
var obj={method:function(p1、p2、p3){console.log(“method:,arguments)}
var str=“方法('p1','p2','p3')
var match=str.match(/^\s*(\s+)\(.*)\;\s*$/);
var func=匹配[1]
var参数=匹配[2]。拆分(',');
对于(变量i=0;i
您可以通过多种不同的方式实现这一点
let foo = {
bar: 'Hello World'
};
foo.bar;
foo['bar'];
括号表示法特别强大,因为它允许您访问基于变量的属性:
let foo = {
bar: 'Hello World'
};
let prop = 'bar';
foo[prop];
这可以扩展到在对象的每个属性上循环。这似乎是多余的,因为新的JavaScript结构,例如。。。但有助于说明一个用例:
let foo = {
bar: 'Hello World',
baz: 'How are you doing?',
last: 'Quite alright'
};
for (let prop in foo.getOwnPropertyNames()) {
console.log(foo[prop]);
}
对于嵌套对象,点和括号表示法也按预期工作:
let foo = {
bar: {
baz: 'Hello World'
}
};
foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;
对象分解
我们还可以考虑对象分解作为访问对象中属性的一种方法,但如下:
let foo = {
bar: 'Hello World',
baz: 'How are you doing?',
last: 'Quite alright'
};
let prop = 'last';
let { bar, baz, [prop]: customName } = foo;
// bar = 'Hello World'
// baz = 'How are you doing?'
// customName = 'Quite alright'
您应该使用
JSON.parse
,查看
这是我的解决方案:
function resolve(path, obj) {
return path.split('.').reduce(function(prev, curr) {
return prev ? prev[curr] : null
}, obj || self)
}
用法示例:
resolve("document.body.style.width")
// or
resolve("style.width", document.body)
// or even use array indexes
// (someObject has been defined in the question)
resolve("part.0.size", someObject)
// returns null when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})
您可以使用Lodash get这样做
_.get(object, 'a[0].b.c');
ES5//检查深度嵌套的变量
这段简单的代码可以检查深层嵌套的变量/值是否存在,而不必一路上检查每个变量
var getValue = function( s, context ){
return Function.call( context || null, 'return ' + s )();
}
Ex.-对象的深度嵌套数组:
a = [
{
b : [
{
a : 1,
b : [
{
c : 1,
d : 2 // we want to check for this
}
]
}
]
}
]
而不是:
if(a && a[0] && a[0].b && a[0].b[0] && a[0].b[0].b && a[0].b[0].b[0] && a[0].b[0].b[0].d && a[0].b[0].b[0].d == 2 ) // true
我们现在可以:
if( getValue('a[0].b[0].b[0].d') == 2 ) // true
干杯 不久前,我问了一个关于这个话题的问题,这个问题有点重复。经过过多的研究,我发现这里缺少了很多信息,我觉得我有一些有价值的东西可以补充到这篇老文章中
- 首先,我想说明有几种方法可以获取属性值并将其存储在动态变量中。IMHO的第一个最流行、最简单的方法是:
let elem = document.getElementById('someDiv');
let cssProp = elem.style['width'];
使用上面的代码示例;如果存储在'elem'变量中的div元素的width属性是在CSS样式表中设置的,而不是在其HTML标记中设置的,那么毫无疑问,您将获得存储在cssProp变量中的undefined返回值。出现未定义的值是因为为了获得正确的值,需要计算写在CSS样式表中的代码以获得值;必须使用一种方法来计算样式表中的属性值
- 从今以后,使用getComputedStyle()方法李>
- 作为旁注,getComputedValue方法只获取,不设置。这显然是一个主要的缺点,但是有一个方法可以从CSS样式表中获取并设置值,尽管它不是标准的Javascript。 JQuery方法李>
希望这对别人有帮助 我遇到了一个例子,我想把一个对象属性的“地址”作为数据传递给另一个函数,并用AJAX填充该对象,从地址数组进行查找,然后在另一个函数中显示。我不能在不做字符串杂技的情况下使用点表示法,所以我认为可以用数组来代替。我最终做了一些不同的事情,但似乎与这篇文章有关 下面是一个语言文件对象的示例,类似于我希望从中获取数据的对象:
const locs = {
"audioPlayer": {
"controls": {
"start": "start",
"stop": "stop"
},
"heading": "Use controls to start and stop audio."
}
}
我希望能够传递一个数组,比如:[“audioPlayer”,“controls”,“stop”]来访问语言文本,在本例中是“stop”
我创建了这个小函数,它查找“最不特定”(第一个)地址参数,并重新分配
if( getValue('a[0].b[0].b[0].d') == 2 ) // true
let properyValue = element.style['enter-a-property'];
let elem = document.getElementById('someDiv');
let cssProp = elem.style['width'];
function getCssProp(){
let ele = document.getElementById("test");
let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}
$(selector).css(property,value)
const locs = {
"audioPlayer": {
"controls": {
"start": "start",
"stop": "stop"
},
"heading": "Use controls to start and stop audio."
}
}
function getText(selectionArray, obj) {
selectionArray.forEach(key => {
obj = obj[key];
});
return obj;
}
/* returns 'stop' */
console.log(getText(["audioPlayer", "controls", "stop"], locs));
/* returns 'use controls to start and stop audio.' */
console.log(getText(["audioPlayer", "heading"], locs));
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
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
}