在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｝`）})

如果我们不提循环对象的其他方法，这个问题就不完整了。

如今，许多知名的JavaScript库提供了自己的方法来迭代集合，即在数组、对象和类数组对象上迭代。这些方法使用方便，与任何浏览器都完全兼容。

如果使用jQuery，可以使用jQuery.each（）方法。它可以用于对对象和数组进行无缝迭代：$.each（obj，函数（键，值）{console.log（键，值）；});在Undercore.js中，您可以找到方法_.each（），它遍历一个元素列表，依次生成一个提供的函数（注意iterate函数中参数的顺序！）：_.each（obj，函数（值，键）{console.log（键，值）；});Lo-Dash提供了几种迭代对象财产的方法。Basic _.forEach（）（或其别名_.each（））对于循环遍历对象和数组非常有用，但是（！）具有长度属性的对象被视为数组，为了避免这种行为，建议使用_.forIn（）和_.forOwn（）方法（这些方法也有值参数）：_.forIn（obj，函数（值，键）{console.log（键，值）；});_.forIn（）迭代对象的自身和继承的可枚举财产，而_.forOwn（）只迭代对象的自己的财产（基本上是检查hasOwnProperty函数）。对于简单对象和对象文本，这些方法中的任何一种都可以正常工作。

通常，所有描述的方法都具有与任何提供的对象相同的行为。除了将本机用于。。in循环通常比任何抽象（如jQuery.each（））都快，这些方法使用起来非常容易，需要更少的编码，并提供更好的错误处理。

Object.entries(myObject).map(([key, value]) => console.log(key, value))

你可以这样试试。myObject将是｛name:“”，phone:“”｝等等，这将生成密钥和值。所以这里的关键是名字，电话和价值就像狗，123123。

示例｛name:“dog”｝

这里的键是名字，值是狗。

通过带有forEach（）的原型，它应该跳过原型链财产：

Object.prototype.each = function(f) {
    var obj = this
    Object.keys(obj).forEach( function(key) { 
        f( key , obj[key] ) 
    });
}


//print all keys and values
var obj = {a:1,b:2,c:3}
obj.each(function(key,value) { console.log(key + " " + value) });
// a 1
// b 2
// c 3

有趣的是，这些答案中的人都提到了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))

这没有理由不起作用。

欢迎来到未来。

Object.entries（）函数：

变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};for（Object.entries（p）中的var i）{var key=对象条目（p）[i][0]；var value=对象条目（p）[i][1]；console.log（'key['+i+']='+key+'+'value['+i+']='+value）；}