我有一个JavaScript对象,如下所示:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?
我有一个JavaScript对象,如下所示:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?
当前回答
在可枚举JavaScript对象上进行循环的一个好方法是使用object.keys或object.entries并使用map函数,这对于ReactJS来说可能是非常棒和常见的。如下所示:
// assume items:
const items = {
first: { name: 'phone', price: 400 },
second: { name: 'tv', price: 300 },
third: { name: 'sofa', price: 250 },
};
对于循环和显示ReactJS上的一些UI,如下所示:
~~~
<div>
{Object.entries(items).map(([key, ({ name, price })]) => (
<div key={key}>
<span>name: {name}</span>
<span>price: {price}</span>
</div>
))}
</div>
实际上,我使用了两次析构函数赋值,一次用于获取key,一次是获取name和price。
其他回答
因为提问者的[第二个目标是循环一些键值对],最后不要寻找循环。
var p ={"p1":"value1","p2":"value2","p3":"value3"};
if('p1' in p){
var val=p['p1'];
...
}
下面是另一种迭代对象的方法。
变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};Object.keys(p).forEach(key=>{console.log(key,p[key])})
变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};for(p中的var键){if(p.hasOwnProperty(键)){console.log(key+“=”+p[key]);}}<p>输出:<br>p1=值1<br>p2=值2<br>p3=值3</p>
有趣的是,这些答案中的人都提到了Object.keys()和for。。。但从未组合:
var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
console.log(key + ':' + map[key]);
你不能只是为了。。。因为它不是迭代器,并且。。。index或.forEach()调用Object.keys()是丑陋/低效的。我很高兴大多数人都没有。。。in(有或没有检查.hasOwnProperty()),因为这也有点混乱,所以除了我上面的答案之外,我想说。。。
您可以使普通对象关联迭代!行为就像地图一样,直接使用了。。。属于DEMO在Chrome和FF中工作(我假设只有ES6)
var ordinaryObject = {well:'hello', there:'!'};
for (let pair of ordinaryObject)
//key:value
console.log(pair[0] + ':' + pair[1]);
//or
for (let [key, value] of ordinaryObject)
console.log(key + ':' + value);
只要你在下面加上我的垫片:
//makes all objects iterable just like Maps!!! YAY
//iterates over Object.keys() (which already ignores prototype chain for us)
Object.prototype[Symbol.iterator] = function() {
var keys = Object.keys(this)[Symbol.iterator]();
var obj = this;
var output;
return {next:function() {
if (!(output = keys.next()).done)
output.value = [output.value, obj[output.value]];
return output;
}};
};
无需创建一个真正的Map对象,该对象不具备良好的语法功能。
var trueMap = new Map([['well', 'hello'], ['there', '!']]);
for (let pair of trueMap)
console.log(pair[0] + ':' + pair[1]);
事实上,有了这个填充程序,如果您仍然想利用Map的其他功能(不填充它们),但仍然想使用整洁的对象表示法,因为对象现在是可迭代的,那么您现在只需从中创建一个Map即可!
//shown in demo
var realMap = new Map({well:'hello', there:'!'});
对于那些不喜欢填充,或者不喜欢处理原型的人,可以在窗口上创建函数,然后调用类似于getObjIterator()的函数;
//no prototype manipulation
function getObjIterator(obj) {
//create a dummy object instead of adding functionality to all objects
var iterator = new Object();
//give it what the shim does but as its own local property
iterator[Symbol.iterator] = function() {
var keys = Object.keys(obj)[Symbol.iterator]();
var output;
return {next:function() {
if (!(output = keys.next()).done)
output.value = [output.value, obj[output.value]];
return output;
}};
};
return iterator;
}
现在,您可以将其作为普通函数调用,其他任何内容都不受影响
var realMap = new Map(getObjIterator({well:'hello', there:'!'}))
or
for (let pair of getObjIterator(ordinaryObject))
这没有理由不起作用。
欢迎来到未来。
使用纯JavaScript时,循环可能非常有趣。似乎只有ECMA6(新的2015 JavaScript规范)控制了循环。不幸的是,在我写这篇文章的时候,浏览器和流行的集成开发环境(IDE)仍然在努力完全支持这些新功能。
在ECMA6之前,JavaScript对象循环是什么样子的
for (var key in object) {
if (p.hasOwnProperty(key)) {
var value = object[key];
console.log(key); // This is the key;
console.log(value); // This is the value;
}
}
此外,我知道这超出了这个问题的范围,但在2011年,ECMAScript 5.1仅为数组添加了forEach方法,这基本上创建了一种新的改进方法来循环遍历数组,同时仍保留不可迭代的对象与旧的冗长和混乱的for循环。但奇怪的是,这种新的forEach方法不支持导致其他各种问题的break。
基本上在2011年,除了许多流行的库(jQuery、Undercore等)决定重新实现之外,没有一种真正可靠的JavaScript循环方法。
截至2015年,我们现在有了一种更好的开箱即用的方式来循环(和中断)任何对象类型(包括数组和字符串)。以下是当推荐成为主流时,JavaScript中的循环最终会是什么样子:
for (let [key, value] of Object.entries(object)) {
console.log(key); // This is the key;
console.log(value); // This is the value;
}
注意,截至2016年6月18日,大多数浏览器都不支持上述代码。即使在Chrome中,您也需要启用此特殊标志才能工作:chrome://flags/#enable-javascript和谐
在这成为新标准之前,旧方法仍然可以使用,但在流行的库中也有替代方法,甚至对于那些不使用这些库的人来说,也有轻量级的替代方法。