Использование объектов в цикле
Почему нельзя использовать объекты в циклах? Или это ошибка браузера? Этот код не работает в Chrome 42, говоря, что undefined не является функцией:
test = { first: "one"}
for(var item of test) {
console.log(item)
}
16 ответов
Я сделал объекты повторяемыми с помощью этого кода:
Object.prototype[Symbol.iterator] = function*() {
for(let key of Object.keys(this)) {
yield([ key, this[key] ])
} }
Использование:
for(let [ key, value ] of {}) { }
Цикл for..of поддерживает только итерируемые объекты, такие как массивы, но не объекты.
Чтобы перебрать значения объекта, используйте:
for (var key in test) {
var item = test[key];
}
Вы можете использовать этот синтаксис:
let myObject = {first: "one"};
for(let [key, value] of Object.entries(myObject)) {
console.log(key, value); // "first", "one"
}
Тем не мение, Object.entries сейчас имеет плохую поддержку не работает в IE или iOS Safari. Вам, вероятно, понадобится полифилл.
Если вы храните данные в хранилище значений ключей, используйте Map который специально разработан для этой цели.
Если вам нужно использовать объект, ES2017 (ES8) позволяет вам использовать Object.values:
const foo = { a: 'foo', z: 'bar', m: 'baz' };
for (let value of Object.values(foo)) {
console.log(value);
}
Если это еще не поддерживается, используйте polyfill: Альтернативная версия для Object.values()
И, наконец, если вы поддерживаете более старую среду, которая не поддерживает этот синтаксис, вам придется прибегнуть к использованию forEach а также Object.keys:
var obj = { a: 'foo', z: 'bar', m: 'baz' };
Object.keys(obj).forEach(function (prop) {
var value = obj[prop];
console.log(value);
});
Iterator, Iterable и цикл for в ECMAScript 2015/ ES6
let tempArray = [1,2,3,4,5];
for(element of tempArray) {
console.log(element);
}
// 1
// 2
// 3
// 4
// 5
Но если мы сделаем
let tempObj = {a:1, b:2, c:3};
for(element of tempObj) {
console.log(element);
}
// error
Мы получаем ошибку, потому что цикл for..of работает только на Iterables, то есть объект, который имеет @@iterator, который придерживается протокола Iterator, то есть он должен иметь объект соследующим методом. Следующий метод не принимает аргументов и должен возвращать объект с этими двумя свойствами.
done: сигнализирует, что последовательность завершилась, когда true, и false означает, что может быть больше значений: это текущий элемент в последовательности
Итак, чтобы сделать объект Iterable, то есть заставить его работать с for..of, мы можем:
1. Сделайте объект Iterable, присваивая его мистическому свойству @@iterator через свойство Symbol.iterator. Вот как:
let tempObj = {a:1, b:2, c:3};
tempObj[Symbol.iterator]= () => ({
next: function next () {
return {
done: Object.keys(this).length === 0,
value: Object.keys(this).shift()
}
}
})
for(key in tempObj){
console.log(key)
}
// a
// b
// c
2. Используйте Object.entries, который возвращает Iterable:
let tempObj = {a:1, b:2, c:3};
for(let [key, value] of Object.entries(tempObj)) {
console.log(key, value);
}
// a 1
// b 2
// c 3
3. Используйте Object.keys, вот как:
let tempObj = {a:1, b:2, c:3};
for (let key of Object.keys(tempObj)) {
console.log(key);
}
// a
// b
// c
Надеюсь это поможет!!!!!!
Потому что у литерала объекта нет свойства Symbol.iterator. Чтобы быть точным, вы можете перебирать только String, Array, Map, Set, arguments, NodeList(не поддерживается широко) и Generator с for... of loop.
Чтобы справиться с итерацией Object Literal, у вас есть два варианта.
для... в
for(let key in obj){
console.log(obj[key]);
}
Object.keys + forEach
Object.keys(obj).forEach(function(key){
console.log(obj[key]);
});
Ответ - нет. Нельзя использовать For..Of с литералами объекта.
Я согласен с Overv, что For..Of только для итераций. У меня был точно такой же вопрос, потому что я использую Objects для перебора ключей и значений с for..in. Но я только что понял, что для этого предназначены ES6 MAPS и SETS.
let test = new Map();
test.set('first', "one");
test.set('second', "two");
for(var item of test) {
console.log(item); // "one" "two"
}
Следовательно, он достигает цели не использовать for..In (проверка с помощью hasOwnProperty) и не использовать Object.keys().
Кроме того, ваши ключи не ограничиваются строками. Вы можете использовать числа, объекты или другие литералы.
Объектные литералы не имеют встроенных итераторов, которые необходимы для работы с for...of петли. Тем не менее, если вы не хотите идти дальше, добавив свой собственный [Symbol.iterator] к вашему объекту, вы можете просто использовать Object.keys() метод. Этот метод возвращает Array объект, который уже имеет встроенный итератор, так что вы можете использовать его с for...of цикл как это:
const myObject = {
country: "Canada",
province: "Quebec",
city: "Montreal"
}
for (let i of Object.keys(myObject)) {
console.log("Key:", i, "| Value:", myObject[i]);
}
//Key: country | Value: Canada
//Key: province | Value: Quebec
//Key: city | Value: Montreal
Можно определить итератор для любого объекта, таким образом, вы можете установить различную логику для каждого объекта.
var x = { a: 1, b: 2, c: 3 }
x[Symbol.iterator] = function* (){
yield 1;
yield 'foo';
yield 'last'
}
Тогда просто итерация x
for (let i in x){
console.log(i);
}
//1
//foo
//last
То же самое можно сделать на Object.prototype объект И есть общий итератор для всех объектов
Object.prototype[Symbol.iterator] = function*() {
for(let key of Object.keys(this)) {
yield key
}
}
затем повторить ваш объект, как это
var t = {a :'foo', b : 'bar'}
for(let i of t){
console.log(t[i]);
}
Или так
var it = t[Symbol.iterator](), p;
while(p = it.next().value){
console.log(t[p])
}
Однострочный ответ на основе Mozilla doc Generator - Symbol iterator - добавьте это к своему объекту, чтобы сделать его итерируемым :
*[Symbol.iterator]() { yield* Object.values(this) }
пример 1 - получение значений:
Я просто сделал следующее, чтобы легко утешить свои вещи.
for (let key in obj) {
if(obj.hasOwnProperty(key){
console.log(`${key}: ${obj[key]}`);
}
}
Как насчет использования Object.keys для получения массива ключей? А потом для каждого на массиве?
obj = { a: 1, b:2}
Object.keys(obj).forEach( key => console.log(`${key} => ${obj[key]}`))
Используя Array Destruction, вы можете выполнить итерацию следующим образом, используя forEach
const obj = { a: 5, b: 7, c: 9 };
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
Это из 2015 года, мы в 2022 году, и я думаю, что мы можем сказать, что хороший способ решить эту проблему — добавить итератор.
Например, если бы у нас был такой фрагмент:
Это очень простая реализация, которую вы можете заменитьObject.entries(obj)сObject.keys(obj)илиObject.values(obj)в соответствии с потребностями проекта.
В ES6 вы можете пойти с генератором:
var obj = {1: 'a', 2: 'b'};
function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
}
let generator = entries(obj);
let step1 = generator.next();
let step2 = generator.next();
let step3 = generator.next();
console.log(JSON.stringify(step1)); // {"value":["1","a"],"done":false}
console.log(JSON.stringify(step2)); // {"value":["2","b"],"done":false}
console.log(JSON.stringify(step3)); // {"done":true}
Вот это jsfiddle. На выходе вы получите объект с "value" а также "done" ключи. "Value" содержит все, что вы хотите иметь и "done" текущее состояние итерации в bool.
Как насчет использования
function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
}
for ([key, value] of entries({a: "1", b: "2"})) {
console.log(key + " " + value);
}