Answers:
something.bar
something['bar']
方括号之间的值可以是任何表达式。因此,如果属性名称存储在变量中,则必须使用方括号表示法:
var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected
这是我的解决方案:
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'})
在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
您可以通过许多不同的方式来实现这一目标。
let foo = {
bar: 'Hello World'
};
foo.bar;
foo['bar'];
方括号符号特别强大,因为它使您可以基于变量访问属性:
let foo = {
bar: 'Hello World'
};
let prop = 'bar';
foo[prop];
这可以扩展为遍历对象的每个属性。由于更新的JavaScript结构(例如for ... of),这似乎是多余的,但有助于说明一个用例:
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'
我考虑了以下意见并表示同意。避免评估。
使用可以很容易地访问对象的根属性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可以以多种方式使用,这是指向lodash.get文档的链接
eval
。stackoverflow.com/questions/86513/…–
eval
诸如访问属性之类的琐碎东西显然是过大的,在任何情况下都不太可取。什么是“麻烦”?obj['nested']['test']
效果很好,不需要您将代码嵌入字符串中。
obj['nested']['value']
-记住孩子们,评估是邪恶的!
_.get
带到桌子上的人。我认为这个答案现在应该投票而不是投票。这可能是多余的,但是很高兴知道它的存在。
每当需要动态访问属性时,都必须使用方括号而不是“”来访问属性。运算符
语法:object [propery}
const something = { bar: "Foobar!" };
const foo = 'bar';
// something.foo; -- not correct way at it is expecting foo as proprty in something={ foo: "value"};
// correct way is something[foo]
alert( something[foo])
我遇到一个我以为的案例我想将对象属性的“地址”作为数据传递给另一个函数,并填充该对象(使用AJAX),从地址数组中查找,并在该另一个函数中显示。我不能在不进行字符串杂技的情况下使用点表示法,所以我认为数组可能更适合传递。我最终还是做了一些不同的事情,但似乎与这篇文章有关。
这是一个语言文件对象的示例,例如我想要从中获取数据的对象:
const locs = {
"audioPlayer": {
"controls": {
"start": "start",
"stop": "stop"
},
"heading": "Use controls to start and stop audio."
}
}
我希望能够传递一个数组,例如:[“ audioPlayer”,“ controls”,“ stop”]以访问语言文本,在这种情况下为“ stop”。
我创建了这个小函数,用于查找“最不特定”(第一个)地址参数,并将返回的对象重新分配给它自己。然后准备查找下一个最特定的地址参数(如果存在)。
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));
当您还必须将参数传递给此函数时,它会变得很有趣。
代码 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
这段简单的代码可以检查深度嵌套的变量/值的存在,而不必一路检查每个变量。
var getValue = function( s, context ){
return Function.call( context || null, 'return ' + s )();
}
例如 -深度嵌套的对象数组:
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
干杯!
我问了一个问题,该问题在不久前已经重复了此主题,经过大量研究,发现这里缺少许多信息,我觉得我可以在此较旧的帖子中添加一些有价值的东西。
let properyValue = element.style['enter-a-property'];
但是我很少走这条路线,因为它不适用于通过样式表分配的属性值。举个例子,我将用一些伪代码进行演示。
let elem = document.getElementById('someDiv');
let cssProp = elem.style['width'];
使用上面的代码示例;如果存储在'elem'变量中的div元素的width属性是在CSS样式表中设置样式的,而不是在其HTML标记中设置样式的,则毫无疑问,您将获得内部存储的undefined的返回值cssProp变量的值。出现未定义的值是因为为了获得正确的值,需要按顺序计算在CSS样式表中编写的代码以获取值。您必须使用一种方法来计算属性值,该属性的值位于样式表之内。
function getCssProp(){
let ele = document.getElementById("test");
let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}
W3Schools getComputedValue Doc这是一个很好的示例,并且可以让您使用它。但是,此链接Mozilla CSS getComputedValue doc详细讨论了getComputedValue函数,并且任何对此主题不太清楚的有抱负的开发人员都应阅读该链接。
$(selector).css(property,value)
...得到,并且确实凝固。这就是我所使用的,唯一的缺点是您必须了解JQuery,但是老实说,这是每个Javascript开发人员都应该学习JQuery的很多很好的原因之一,它使生活变得轻松,并提供了像这样的方法,不适用于标准Javascript。希望这对某人有帮助!!!
对于希望设置嵌套变量的值的任何人,下面是执行此操作的方法:
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
您应该使用JSON.parse
,看看https://www.w3schools.com/js/js_json_parse.asp
const obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
console.log(obj.name)
console.log(obj.age)
const something = { bar: "Foobar!" };
const foo = 'bar';
something[\`${foo}\`];
foo
已经是一个字符串,因此`${foo}`
与完全相同foo
。(此外,您的代码似乎还有一些不属于此的反斜杠。但是即使您修复了该语法错误,它也仍然毫无意义。)