我有一个JavaScript对象,如下所示:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?


当前回答

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};var myMap=新地图(Object.entries(p));for(let[k,v]of myMap.entries()){console.log(`${k}:${v}`)}<h3>ECMAScript 2017年</h3><p><b>Object.entries()</b>使将<b>对象转换为映射</b>变得简单:</p>

其他回答

变量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>

在ECMAScript 5中,在literal-Object.keys的迭代字段中有了新的方法

您可以在MDN上看到更多信息

我的选择如下,作为当前版本浏览器(Chrome30、IE10、FF25)中的更快解决方案

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i += 1;
}

您可以将此方法的性能与jsperf.com上的不同实现进行比较:

扩展实施对象键迭代对象文字迭代

您可以在Kangax的兼容表上看到浏览器支持

对于旧浏览器,您有简单而完整的polyfill

UPD:

perfjs.info上此问题中所有最常见情况的性能比较:

对象文字迭代

只有JavaScript代码没有依赖项:

var p = {"p1": "value1", "p2": "value2", "p3": "value3"};
keys = Object.keys(p);   // ["p1", "p2", "p3"]

for(i = 0; i < keys.length; i++){
  console.log(keys[i] + "=" + p[keys[i]]);   // p1=value1, p2=value2, p3=value3
}

有趣的是,这些答案中的人都提到了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中迭代对象的多种方法

正在使用。。。在回路中

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};for(输入p){if(p.hasOwnProperty(键)){console.log(`${key}:${p[key]}`)}}

正在使用。。。回路的

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};for(对象.keys(p)的let键){console.log(`key:${key}&value:${p[key]}`)}

将forEach()与Object.keys、Object.values、Object.entries一起使用

变量p={“p1”:“值1”,“p2”:“值2”,“p3”:“值3”};Object.keys(p).forEach(key=>{console.log(`${key}:${p[key]}`);});对象.values(p).forEach(值=>{console.log(值);});Object.entries(p).forEach(([key,value])=>{console.log(`${key}:${value}`)})