Циклы For..In в JavaScript - пары ключ-значение

Question

Мне было интересно, есть ли способ сделать что-то вроде цикла PHP foreach в JavaScript.Функциональность, которую я ищу, выглядит примерно так: PHP Snippet:

foreach($data as $key => $value) { }

Я просматривал цикл JS for..in, но, похоже, нет способа указать as.Если я сделаю это с помощью «нормального» цикла for (for(var i = 0; i < data.length; i++), есть ли способ получить пары ключ => значение?

Answer 1

for (var k in target){
    if (target.hasOwnProperty(k)) {
         alert("Key is " + k + ", value is " + target[k]);
    }
}

hasOwnProperty используется для проверки, действительно ли ваше target обладает этим свойством, а не унаследовало его от своего прототипа.Немного проще было бы:

for (var k in target){
    if (typeof target[k] !== 'function') {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

Он просто проверяет, что k не является методом (как если бы target было array, вы получите оповещение о множестве методов, например, indexOfpush, pop и т. Д.)

Answer 2

Никто не упомянул Object.keys, поэтому я упомяну это.

Object.keys(obj).forEach(function (key) {
   // do something with obj[key]
});

Answer 3

Если вы можете использовать ES6 изначально или с Babel (компилятор js), то вы можете сделать следующее:

const test = {a: 1, b: 2, c: 3};

for (const [key, value] of Object.entries(test)) {
  console.log(key, value);
}

Который распечатает этот вывод:

a 1
b 2
c 3

Метод Object.entries() возвращает массив пар перечислимых свойств [key, value] собственного объекта данного объекта в том же порядке, что и цикл for...in (разница заключается в том, что в цикле перечисляет свойства и в цепочке прототипов) .

• Object.entries документация
• для ... документации
• Уничтожение задания Документация
• Перечислимость и владение недвижимостью Документация

Надеюсь, это поможет! =)

Answer 4

for in будет работать для вас.Если вы думаете об объекте как о карте:

for(key in obj){
    // The key is key
    // The value is obj[key]
}

Answer 5

var obj = {...};
for (var key in obj) {
    var value = obj[key];

}

Синтаксис php - просто сахар.

Answer 6

Я предполагаю, что вы знаете, что i является ключом, и что вы можете получить значение через data[i] (и просто хотите ярлык для этого).

ECMAScript5 введен forEach ^[MDN] для массивов (кажется, у вас есть массив):

data.forEach(function(value, index) {

});

Документация по MDN предоставляет оболочку для браузеров, не поддерживающих ее.

Конечно, это не работает для объектов, но вы можете создать аналогичную функцию для них:

function forEach(object, callback) {
    for(var prop in object) {
        if(object.hasOwnProperty(prop)) {
            callback(prop, object[prop]);
        }
    }
}

Поскольку вы пометили вопрос с помощью jquery , jQuery предоставляет $.each ^[docs] , который зацикливается как на массив, так и на объектные структуры.

Answer 7

for (var key in myMap) {
    if (myMap.hasOwnProperty(key)) {
        console.log("key =" + key);
        console.log("value =" + myMap[key]);
    }
}

В javascript каждый объект имеет набор встроенных пар ключ-значение, которые имеют метаинформацию. Когда вы перебираете все пары ключ-значение для объекта, вы также перебираете их. Использование hasOwnProperty () отфильтровывает их.

Answer 8

Вы можете использовать for..in для этого.

for (var key in data)
{
    var value = data[key];
}

Answer 9

ES6 предоставит Map.prototype.forEach (callback), который можно использовать следующим образом:

myMap.forEach(function(value, key, myMap) {
                        // Do something
                    });

Answer 10

Если вы используете Lodash , вы можете использовать _.forEach

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key + ": " + value);
});
// => Logs 'a: 1' then 'b: 2' (iteration order is not guaranteed).