Как мне перебирать или перечислять объект JavaScript?

Question

У меня есть объект JavaScript, подобный следующему:

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

Теперь я хочу перебрать все p элементы (p1, p2, p3...) И получите их ключи и значения.Как я могу это сделать?

Я могу изменить объект JavaScript, если это необходимо.Моя конечная цель - перебрать некоторые пары ключ-значение, и, если возможно, я хочу избежать использования eval.

Answer 1

Вы можете использовать for-in цикл, как показано другими.Однако вы также должны убедиться, что полученный вами ключ является фактическим свойством объекта, а не взят из прототипа.

Вот фрагмент:

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

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

Answer 2

В ECMAScript 5 вы можете комбинировать Object.keys() и Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };

Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ECMAScript 6 добавляет for...of:

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ECMAScript 8 добавляет Object.entries() это позволяет избежать необходимости поиска каждого значения в исходном объекте:

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

Вы можете комбинировать for...of, разрушающий, и Object.entries:

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

И то, и другое Object.keys() и Object.entries() повторяйте свойства в том же порядке, что и for...in петля но игнорируйте цепочку прототипов.Повторяются только собственные перечислимые свойства объекта.

Answer 3

Вы должны использовать цикл for-in

Но будьте очень осторожны при использовании такого рода циклов, потому что это приведет зациклите все свойства по цепочке прототипов.

Поэтому при использовании циклов for-in всегда используйте hasOwnProperty метод определения того, действительно ли текущее свойство в итерации является свойством объекта, на котором вы проверяете:

for (var prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

Answer 4

Вопрос не будет полным, если мы не упомянем об альтернативных методах перебора объектов.

В настоящее время многие известные библиотеки JavaScript предоставляют свои собственные методы для перебора коллекций, т. е.закончился массивы, Объекты, и массивоподобные объекты.Эти методы удобны в использовании и полностью совместимы с любым браузером.

1. Если вы работаете с jQuery - jQuery - запрос, вы можете использовать jQuery.each() способ.Его можно использовать для плавного перебора как объектов, так и массивов:

   $.each(obj, function(key, value) {
       console.log(key, value);
   });
   

2. В Underscore.js вы можете найти метод _.each(), который выполняет итерацию по списку элементов, передавая каждый по очереди предоставленной функции (обратите внимание на порядок аргументов в повторяемый функция!):

   _.each(obj, function(value, key) {
       console.log(key, value);
   });
   

3. Ло-Тире предоставляет несколько методов для перебора свойств объекта.Базовые модели _.forEach() (или это псевдоним _.each()) полезен для перебора как объектов, так и массивов, однако (!) объекты с length свойства обрабатываются как массивы, и чтобы избежать такого поведения, предлагается использовать _.forIn() и _.forOwn() методы (они также имеют value аргумент идет первым):

   _.forIn(obj, function(value, key) {
       console.log(key, value);
   });
   

   _.forIn() повторяется по собственный и унаследованный перечислимые свойства объекта, в то время как _.forOwn() повторяется только по собственный свойства объекта (в основном проверка на hasOwnProperty функция).Для простых объектов и объектных литералов любой из этих методов будет работать нормально.

Как правило, все описанные методы ведут себя одинаково с любыми предоставленными объектами.Помимо использования родного for..in цикл обычно будет быстрее чем любая абстракция, такая как jQuery.each(), эти методы значительно проще в использовании, требуют меньше кодирования и обеспечивают лучшую обработку ошибок.

Answer 5

В ECMAScript 5 у вас есть новый подход к итерационным полям литерала - 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's

Для старого браузера у вас есть простой и полный полифилл

UPD:

сравнение производительности для всех наиболее популярных случаев в этом вопросе о perfjs.info:

итерация литерала объекта

Answer 6

Вы можете просто повторить это следующим образом:

for (var key in p) {
  alert(p[key]);
}

Обратите внимание , что key не будет принимать значение свойства, это просто значение индекса.

Answer 7

Предисловие:

• Свойства объекта могут быть собственный (свойство находится на самом объекте) или унаследованный (не на самом объекте, а на одном из его прототипов).
• Свойства объекта могут быть перечислимый или не поддающийся перечислению.Неперечисляемые свойства исключаются из множества перечислений свойств / массивов.
• Имена свойств могут быть строками или Символами.Свойства, имена которых являются символами, исключены из множества перечислений / массивов свойств.

Здесь, в 2018 году, ваши варианты для циклического просмотра свойств объекта следующие (некоторые примеры следуют за списком):

1. for-in [MDN, спецификация] — Циклическая структура , которая перебирает имена объектов перечислимый свойства, включая унаследованные, имена которых являются строками
2. Object.keys [MDN, спецификация] — Функция , предоставляющая массив имен объектов собственный, перечислимый свойства, имена которых являются строками.
3. Object.values [MDN, спецификация] — Функция , предоставляющая массив ценности из свойств объекта собственный, перечислимый свойства.
4. Object.entries [MDN, спецификация] — Функция , предоставляющая массив имен и значения объекта собственный, перечислимый свойства (каждая запись в массиве представляет собой [name, value] массив).
5. Object.getOwnPropertyNames [MDN, спецификация] — Функция , предоставляющая массив имен объектов собственный свойства (даже неисчислимые), имена которых являются строками.
6. Object.getOwnPropertySymbols [MDN, спецификация] — Функция , предоставляющая массив имен объектов собственный свойства (даже неисчислимые), имена которых являются символами.
7. Reflect.ownKeys [MDN, спецификация] — Функция , предоставляющая массив имен объектов собственный свойства (даже неперечисляемые), независимо от того, являются ли эти имена строками или символами.
8. Если ты хочешь ВСЕ из свойств объекта, включая неперечисляемые унаследованные, вам необходимо использовать цикл и Object.getPrototypeOf [MDN, спецификация] и использовать Object.getOwnPropertyNames, Object.getOwnPropertySymbols, или Reflect.ownKeys для каждого объекта в цепочке прототипов (пример внизу этого ответа).

Со всеми ними , кроме for-in, вы бы использовали какую - то циклическую конструкцию для массива (for, for-of, forEach, и т.д.).

Примеры:

for-in:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.keys (с помощью for-of цикл, но вы можете использовать любую зацикливающую конструкцию):

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.values:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
    console.log(`${value}`);
}

Object.entries:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertyNames:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertySymbols:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Reflect.ownKeys:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Все свойства, включая унаследованные неисчислимые:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
    for (const name of Reflect.ownKeys(current)) {
        const value = o[name];
        console.log(`[${depth}] ${String(name)} = ${String(value)}`);
    }
}

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 8

Поскольку es2015 становится все более популярным, я публикую этот ответ, который включает использование генератора и итератора для плавного выполнения [key, value] пары.Как это возможно в других языках, например Ruby.

Хорошо, вот код:

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
  [Symbol.iterator]: function* () {
    for (const i of Object.keys(this)) {
      yield [i, this[i]];
    }
  }
};

for (const [k, v] of MyObject) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Всю информацию о том, как вы можете создать итератор и генератор, вы можете найти на странице разработчика Mozilla.

Надеюсь, Это кому-то помогло.

Редактировать:

ES2017 будет включать в себя Object.entries что заставит повторять [key, value] создавать пары в объектах еще проще.Теперь известно, что это будет частью стандарта в соответствии с тс39 информация о этапе.

Я думаю, пришло время обновить мой ответ, чтобы он стал еще более свежим, чем сейчас.

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
};

for (const [k, v] of Object.entries(MyObject)) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Вы можете найти больше об использовании на MDN Страница

Answer 9

for(key in p) {
  alert( p[key] );
}

Примечание:вы можете сделать это через массивы, но вы будете перебирать length и другие свойства тоже.

Answer 10

Просмотрев все ответы здесь, hasOwnProperty не требуется для моего собственного использования, потому что мой объект json чист;на самом деле нет смысла добавлять какую-либо дополнительную обработку javascript.Это все, что я использую:

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}

Answer 11

через прототип с 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

Answer 12

Интересно, что люди в этих ответах затронули оба вопроса Object.keys() и for...of но никогда не объединял их:

var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
    console.log(key + ':' + map[key]);

_{Ты не можешь просто for...of ан Object потому что это не итератор, и for...index или .forEach()ввод в действие Object.keys() это уродливо / неэффективно.
Я рад, что большинство людей воздерживаются от for...in (с проверкой или без нее .hasOwnProperty()) поскольку это тоже немного запутанно, поэтому, помимо моего ответа выше, я здесь, чтобы сказать...}

---

Вы можете заставить обычные ассоциации объектов повторяться!Ведет себя точно так же , как Mapы с непосредственным использованием фантазии for...of
ДЕМОНСТРАЦИЯ работает в 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 (не добавляя их все), но все еще хотели использовать аккуратную объектную нотацию, поскольку объекты теперь можно повторять, теперь вы можете просто создать карту из нее!

//shown in demo
var realMap = new Map({well:'hello', there:'!'});

---

Для тех, кто не любит подкладывать или возиться с prototype в общем, не стесняйтесь вместо этого создавать функцию в window, называя ее чем-то вроде 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:'!'}))

или

for (let pair of getObjIterator(ordinaryObject))

Нет никаких причин, по которым это не сработало бы.

Добро пожаловать в будущее.

Answer 13

Объект.ключи(obj) :Массив

извлекает все ключи со строковым значением всех перечислимых собственных (не унаследованных) свойств.

Таким образом, он выдает тот же список ключей, что и вы предполагаете, тестируя каждый ключ объекта с помощью hasOwnProperty.Вам не нужна эта дополнительная тестовая операция, чем и Object.keys( obj ).forEach(function( key ){}) предполагается, что это будет быстрее.Давайте докажем это:

var uniqid = function(){
			var text = "",
					i = 0,
					possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
			for( ; i < 32; i++ ) {
					text += possible.charAt( Math.floor( Math.random() * possible.length ) );
			}
			return text;
		}, 
		CYCLES = 100000,
		obj = {}, 
		p1,
		p2,
		p3,
		key;

// Populate object with random properties
Array.apply( null, Array( CYCLES ) ).forEach(function(){
	obj[ uniqid() ] = new Date()
});

// Approach #1
p1 = performance.now();
Object.keys( obj ).forEach(function( key ){
	var waste = obj[ key ];
});

p2 = performance.now();
console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds.");

// Approach #2
for( key in obj ) {
	if ( obj.hasOwnProperty( key ) ) {
		var waste = obj[ key ];
	}
}

p3 = performance.now();
console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds.");

В моем Firefox у меня есть следующие результаты

• Подход Object.keys занял 40.21101451665163 миллисекунды.
• for...in/hasOwnProperty сближение заняло 98,26163508463651 миллисекунды.

PS.в Chrome разница еще больше http://codepen.io/dsheiko/pen/JdrqXa

PS2:В ES6 (ECMAScript 2015) вы можете выполнять итерацию объекта iterable приятнее:

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
    console.log(pair);
}

// OR 
let map = new Map([
    [false, 'no'],
    [true,  'yes'],
]);
map.forEach((value, key) => {
    console.log(key, value);
});

Answer 14

Вот еще один метод для перебора объектов.

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


Object.keys(p).forEach(key => { console.log(key, p[key]) })

Answer 15

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

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

<p>
  Output:<br>
  p1 = values1<br>
  p2 = values2<br>
  p3 = values3
</p>

Answer 16

В Object.keys() метод возвращает массив собственных перечислимых свойств данного объекта.Читайте об этом подробнее здесь

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

Object.keys(p).map((key)=> console.log(key + "->" + p[key]))

Answer 17

Вы можете добавить простой Предначертание функция для всех объектов, так что вы можете автоматически перебирать любой объект:

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        for (var key in this) {
            if (!this.hasOwnProperty(key)) {
                // skip loop if the property is from prototype
                continue;
            }
            var value = this[key];
            func(key, value);
        }
    },
    enumerable: false
});

Для тех людей, которым не нравится "для ...в"-метод:

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        var arr = Object.keys(this);
        for (var i = 0; i < arr.length; i++) {
            var key = arr[i];
            func(key, this[key]);
        }
    },
    enumerable: false
});

Теперь вы можете просто позвонить:

p.forEach (function(key, value){
    console.log ("Key: " + key);
    console.log ("Value: " + value);
});

Если вы не хотите конфликтовать с другими forEach-методами, вы можете присвоить ему свое уникальное имя.

Answer 18

Только код 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
}

Answer 19

Циклы могут быть довольно интересными при использовании чистого JavaScript.Похоже, что только ECMA6 (Новая спецификация JavaScript 2015) получил циклы под контролем.К сожалению, сейчас, когда я пишу это, оба браузера и популярная интегрированная среда разработки (IDE) все еще не могут полностью поддерживать новые навороты.

На первый взгляд, вот как выглядел объектный цикл JavaScript до ECMA6:

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 году не существовало реального надежного способа зацикливания на JavaScript, кроме того, что многие популярные библиотеки (jQuery, подчеркивание и т.д.) решили повторно внедрить.

По состоянию на 2015 год, теперь у нас есть улучшенный "из коробки" способ зацикливания (и разрыва) любого типа объектов (включая массивы и строки).Вот как в конечном итоге будет выглядеть цикл в JavaScript, когда рекомендация станет основной:

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

Обратите внимание, что большинство браузеров не будут поддерживать приведенный выше код по состоянию на 18 июня 2016 года.Даже в Chrome вам нужно включить этот специальный флаг, чтобы он работал: chrome://flags/#enable-javascript-harmony

Пока это не станет новым стандартом, старый метод все еще можно использовать, но есть также альтернативы в популярных библиотеках или даже облегченные альтернативы для тех, кто не использует ни одну из этих библиотек.

Answer 20

    var p =[{"username":"ordermanageadmin","user_id":"2","resource_id":"Magento_Sales::actions"},
{"username":"ordermanageadmin_1","user_id":"3","resource_id":"Magento_Sales::actions"}]
for(var value in p) {
    for (var key in value) {
        if (p.hasOwnProperty(key)) {
            console.log(key + " -> " + p[key]);
        }
    }
}

Answer 21

Если кому-то нужно пройти через arrayObjects с условием:

var arrayObjects = [{"building":"A", "status":"good"},{"building":"B","status":"horrible"}];

for (var i=0; i< arrayObjects.length; i++) {
  console.log(arrayObjects[i]);
  
  for(key in arrayObjects[i]) {      
    
      if (key == "status" && arrayObjects[i][key] == "good") {
        
          console.log(key + "->" + arrayObjects[i][key]);
      }else{
          console.log("nothing found");
      }
   }
}

Answer 22

Учитывая ES6, я хотел бы добавить свою собственную ложку сахара и предложить еще один подход для перебора свойств объекта.

Поскольку обычный JS-объект не является повторяющийся просто из коробки, мы не можем использовать for..of цикл для перебора его содержимого.Но никто не может остановить нас чтобы сделать его повторяемым.

Давайте у нас будет book объект.

let book = {
  title: "Amazing book",
  author: "Me",
  pages: 3
}

book[Symbol.iterator] = function(){

  let properties = Object.keys(this); // returns an array with property names
  let counter = 0;
  let isDone = false;

  let next = () => {
    if(counter >= properties.length){
      isDone = true;
    }
    return { done: isDone, value: this[properties[counter++]] }
  }

  return { next };
}

Поскольку мы это сделали, мы можем использовать это таким образом:

for(let pValue of book){
  console.log(pValue);
}
------------------------
Amazing book
Me
3

Или если вы знаете мощь ES6 генераторы, так что вы, конечно, можете сделать приведенный выше код намного короче.

book[Symbol.iterator] = function *(){

  let properties = Object.keys(this);
  for (let p of properties){
    yield this[p];
  }

}

Конечно, вы можете применить такое поведение ко всем объектам с помощью создания Object повторяемый на prototype Уровень.

Object.prototype[Symbol.iterator] = function() {...}

Кроме того, объекты, соответствующие протоколу iterable, могут использоваться с новой функцией ES2015 распространение оператор таким образом, мы можем считывать значения свойств объекта в виде массива.

let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]

Или вы можете использовать разрушающий назначение:

let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3

Вы можете проверить JSFiddle ( Ошибка ) со всем кодом, который я привел выше.

Answer 23

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

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3",
    *[Symbol.iterator]() {
        yield *Object.keys(this);
    }
};

[...p] //["p1", "p2", "p3"]

это даст тот же результат, что и при использовании for...in цикл es6.

for(var key in p) {
    console.log(key);
}

Но важно знать, какими возможностями вы теперь обладаете, используя es6!

Answer 24

Я бы сделал это вместо того, чтобы проверять obj.hasOwnerProperty внутри каждого for ... in петля.

var obj = {a : 1};
for(var key in obj){
    //obj.hasOwnProperty(key) is not needed.
    console.log(key);
}
//then check if anybody has messed the native object. Put this code at the end of the page.
for(var key in Object){
    throw new Error("Please don't extend the native object");
}

Answer 25

начиная с ES06, вы можете получить значения объекта в виде массива с помощью

let arrValues = Object.values( yourObject) ;

он возвращает массив значений объекта и не извлекает значения из Prototype!!

MDN DOCS Объект.значения()

и для ключей ( все уже ответили передо мной здесь)

let arrKeys   = Object.keys(yourObject);

Answer 26

Если вы хотите повторить неперечисляемые свойства кроме того, вы можете использовать Object.getOwnPropertyNames(obj) возвращать массив всех свойств (перечислимых или нет), найденных непосредственно у данного объекта.

var obj = Object.create({}, {
  // non-enumerable property
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});

obj.foo = 1; // enumerable property

Object.getOwnPropertyNames(obj).forEach(function (name) {
  document.write(name + ': ' + obj[name] + '<br/>');
});

Answer 27

В последнем ES script вы можете сделать что-то вроде этого:

Object.entries(p);

Answer 28

Object.entries() функция:

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

for (var i in Object.entries(p)){
	var key = Object.entries(p)[i][0];
	var value = Object.entries(p)[i][1];
	console.log('key['+i+']='+key+' '+'value['+i+']='+value);
}

Answer 29

У меня была похожая проблема при использовании Angular, вот решение, которое я нашел.

Шаг 1. Получите все ключи объекта.использование Object.keys.Этот метод возвращает массив собственных перечислимых свойств данного объекта.

Шаг 2. Создайте пустой массив.Здесь будут находиться все свойства, поскольку ваш новый цикл ngFor будет указывать на этот массив, мы должны перехватить их все.Шаг 3. Повторите выбрасывание всех ключей и поместите каждый из них в созданный вами массив.Вот как это выглядит в коде.

    // Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]);
}

Вот ссылка на оригинальный пост. https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

Answer 30

Объект становится итератором, когда он реализует метод .next()

const james = {
name: 'James',
height: `5'10"`,
weight: 185,

[Symbol.iterator]() {
let properties = []
for (let key of Object.keys(james)){
     properties.push(key);
 }

index = 0;
return {
        next: () => {
            let key = properties[index];
            let value = this[key];
            let done = index >= properties.length - 1 ;
            index++;
            return { key, value, done };
        }
    };
  }

};


const iterator = james[Symbol.iterator]();

console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // `5'10`
console.log(iterator.next().value); // 185