it-swarm.com.ru

Как пройти через цикл или перечислить объект JavaScript?

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

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

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

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

2495
Tanmoy

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

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

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

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

3835
levik

В 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)
);

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

781
Axel Rauschmayer

Вы должны использовать цикл 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
}
315
Andreas Grech

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

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

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

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. В Underscore.js вы можете найти метод _.each() , который выполняет итерацию по списку элементов, передавая каждый из них по очереди предоставленной функции (обратите внимание на порядок аргументов в iteratee функция!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash предоставляет несколько методов для перебора свойств объекта. Basic _.forEach() (или его псевдоним _.each()) полезен для циклического обхода как объектов, так и массивов, однако (!) Объекты со свойством length обрабатываются как массивы, и во избежание такого поведения рекомендуется использовать _.forIn() и _.forOwn() методы (они также имеют аргумент value, стоящий первым):

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

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

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

239
VisioN

В 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

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

UPD:

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

объект буквенной итерации

48
Pencroff

Вы можете просто перебрать его так:

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

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

39
Bryan

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

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

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

  1. for-in[ MDN , spec ] - Структура цикла, которая перебирает имена свойств объекта {перечислимый} _, включая унаследованные, чьи имена строки
  2. Object.keys[ MDN , spec ] - Функция, предоставляющая массив имен свойств объекта {own, enumerable _ чьи имена являются строками.
  3. Object.values[ MDN , spec ] - Функция, обеспечивающая массив значений объекта собственного, перечислимый свойства.
  4. Object.entries[ MDN , spec ] - Функция, предоставляющая массив имен и значений объекта собственного, перечислимые свойства.
  5. Object.getOwnPropertyNames[ MDN , spec ] - Функция, предоставляющая массив имен собственных свойств объекта (даже не перечисляемых), чьи имена являются строками.
  6. Object.getOwnPropertySymbols[ MDN , spec ] - Функция, предоставляющая массив имен собственных свойств объекта (даже не перечисляемых), чьи имена являются символами.
  7. Reflect.ownKeys[ MDN , spec ] - функция, предоставляющая массив имен собственных свойств объекта (даже не перечисляемых), являются ли эти имена строками или символами.
  8. Если вы хотите все свойств объекта, включая не перечисляемые унаследованные, вам нужно использовать цикл и Object.getPrototypeOf [ MDN , spec ] и использовать 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;
}

27
T.J. Crowder

Поскольку 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] в объектах еще проще. В настоящее время известно, что оно будет частью стандарта в соответствии с информацией о стадии ts39 .

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

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

24
FieryCod

через prototype with forEach () который должен пропустить цепочку прототипов properties:

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
19
bitstrider

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

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

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

17
Richard Levasseur

Интересно, что люди в этих ответах касались и 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()ing Object.keys() уродлив/неэффективен.
Я рад, что большинство людей воздерживаются от for...in (с проверкой или без проверки .hasOwnProperty()), так как это также немного грязно, поэтому помимо моего ответа выше, я здесь, чтобы сказать ...


Вы можете сделать обычные ассоциации объектов итеративными! Поведение точно так же, как Maps с прямым использованием причудливого for...of
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, который не имеет синтаксического сахара Nice.

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:'!'});

Для тех, кто не любит шимить или вообще возиться с prototype, не стесняйтесь вместо этого делать функцию в окне, называя ее чем-то вроде getObjIterator() then;

//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))

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

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

15
Hashbrown

Object.keys (obj): Array

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

Таким образом, он дает тот же список ключей, что и вы, проверяя каждый ключ объекта с помощью 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 миллисекунд.
  • для ... в/hasOwnProperty подход занял 98.26163508463651 миллисекунд.

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

PS2: в ES6 (EcmaScript 2015) вы можете итерировать итерируемый объект лучше: 

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);
});

12
Dmitry Sheiko

Вот еще один метод, чтобы перебрать объект.

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


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

11
Harsh Patel

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>

10
ParaMeterz

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

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

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

8
George Bailey

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

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
});

Для тех, кому не нравится метод " for ... in " -:

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, вы можете назвать его своим уникальным именем.

7
Biber

Циклы могут быть довольно интересными при использовании чистого 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, Underscore и т.д.) Решили повторно реализовать.

С 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

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

5
Nicolas Bouvrette

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

Я бы сделал это вместо проверки 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");
}
4
Lewis

Что касается 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() {...}

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

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 со всем кодом, который я предоставил выше.

3
Artyom Pranovich

Если кому-то нужно перебрать 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");
      }
   }
}

3
Tadas V.

    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]);
        }
    }
}

3
senthil

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

Object.entries(p);
3
Ankit

Если вы хотите перебратьне перечисляемые свойства, вы также можете использовать 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/>');
});

3
Dheeraj V.S.

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

let arrValues = Object.values( yourObject) ;

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

MDN DOCS Object.values ​​()

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

let arrKeys   = Object.keys(yourObject);
2
yehonatan yehezkel

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

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

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

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

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

Но важно знать, какие возможности у вас сейчас есть, используя es6!

2
Bamieh

Объект становится итератором, когда он реализует метод .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
2
Dan Alboteanu

функция 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);
}

1
nrb

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

for (let o of Object.getOwnPropertyNames(Math)) {
  console.log(o);
}

Я иногда использую это для быстрого тестирования всех функций на объектах с простыми входами и выходами.

1
Matas Vaitkevicius

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

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

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

    // 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

0
Jaime Rios

Если ваше приложение находится в процессе создания строки, хорошая комбинация - это Object.keys, implode и метод массива .map. Например, если у нас есть объект json, такой как

var data = {
    key1: 10,
    key2: 'someString',
    key3: 3000
}

.. и мы хотели бы сгенерировать "Значения: key1 = 10, key2 = someString, key3 = 3000".

Мы можем сделать это в одной строке кода:

var str = `The values are ${implode(', ', Object.keys(data).map(function(key){return `${key} = ${data[key]}`}))}.`;

Implode сворачивает массив в строку с разделителем (первым аргументом), вставленным между элементами; .map выполняет итерацию по массиву, возвращающему массив, а другие ответы достаточно хорошо разработаны для Object.keys.

0
Randhir Rawatlal

Это как перебрать объект javascript и поместить данные в таблицу.

<body>
<script>
function createTable(objectArray, fields, fieldTitles) {
  let body = document.getElementsByTagName('body')[0];
  let tbl = document.createElement('table');
  let thead = document.createElement('thead');
  let thr = document.createElement('tr');

  for (p in objectArray[0]){
    let th = document.createElement('th');
    th.appendChild(document.createTextNode(p));
    thr.appendChild(th);
    
  }
 
  thead.appendChild(thr);
  tbl.appendChild(thead);

  let tbdy = document.createElement('tbody');
  let tr = document.createElement('tr');
  objectArray.forEach((object) => {
    let n = 0;
    let tr = document.createElement('tr');
    for (p in objectArray[0]){
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(object[p]));
      tr.appendChild(td);
      n++;
    };
    tbdy.appendChild(tr);    
  });
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
  return tbl;
}

createTable([
              {name: 'Banana', price: '3.04'}, // k[0]
              {name: 'Orange', price: '2.56'},  // k[1]
              {name: 'Apple', price: '1.45'}
           ])
</script>

0
Giovanni Gianni