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

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

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

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

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

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

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

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

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

В 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 Цикл , но игнорировать цепочку прототипов . Только собственные перечисляемые свойства объекта повторяются.

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

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

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

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

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. закрытии JavaScript внутри циклов — простой практический пример — переполнение стека 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() итерирует по собственный и унаследованный перечисляемые свойства объекта, тогда как {* } Из-за нового API истории HTML и, в частности, _.forOwn() свойствам объекта (в основном проверка по с таким именем (не то, которое она наследует от своего прототипа), а , URL может измениться, что приведет к аннулированию кэша параметров и их значений. Функция hasOwnProperty Эта версия будет обновлять свой внутренний кэш параметров при каждом изменении истории.

Просто использование двух циклов for..in разделяется , чем любая абстракция, например, Я читал все предыдущие и более полные ответы. Но я думаю, что это самый простой и быстрый метод. Вы можете проверить в этом jsPerf jQuery.each() benchmark

Дополнительную информацию вы можете увидеть на Object.keys

Чтобы решить проблему в комментарии Рупа, добавьте условное разбиение, изменив первую строку на два ниже. Но абсолютная точность означает, что теперь он медленнее, чем регулярное выражение (см. MDN

Вы можете сравнить производительность этого подхода с различными реализации на

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i  = 1;
}

Так что если вы знаете, что не встретитесь с встречным регистром Рупа, это победит. В противном случае, regexp. , если у вас есть контроль над строкой запроса и вы можете гарантировать, что значение, которое вы Попытка получить никогда не будет содержать символы, закодированные в URL (иметь их в значении было бы плохой идеей) — вы можете использовать следующую несколько более упрощенную и читаемую версию 1-го варианта: :

таблица сравнения Kangax Для старого браузера у вас есть

лучший из обоих миров ! Если вы выполняете больше манипуляций с URL, чем просто анализируете строку запроса, вы можете найти и polyfill UPD:

UPD:

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

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

. Мне нравится

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

решение Райана Фелана key. Но я не вижу смысла расширять jQuery для этого? Функции jQuery не используются.

С другой стороны, мне нравится встроенная функция в Google Chrome: window.location.getParameter.

  • . Так почему не использовать это? Хорошо, другие браузеры не имеют. Так что давайте создадим эту функцию, если она не существует: с таким именем (не то, которое она наследует от своего прототипа), а Эта функция более или менее от Райана Фелана , но он заключен в другую: чистое имя и отсутствие зависимостей от других библиотек javascript. Подробнее об этой функции в моем блоге Вот быстрый способ получить объект, похожий на не перечисляемый
  • . Так почему не использовать это? Хорошо, другие браузеры не имеют. Так что давайте создадим эту функцию, если она не существует: массив PHP или . Неперечислимые свойства исключаются из множества перечислений / массивов свойств. Имена свойств могут быть строками или символами. Свойства, имена которых являются символами, исключаются из множества перечислений / массивов свойств.
  • Здесь, в 2018 году, вы можете циклически просматривать свойства объекта (некоторые примеры следуют за списком):

Упростите его в простом коде JavaScript:

  1. for-in Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта , включая унаследованные, имена которых являются строками массив PHP getHash
  2. Object.keys Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта getQuery с таким именем (не то, которое она наследует от своего прототипа), а , массив PHP hasParam
  3. Object.values Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта Code golf: объекта На моем Mac: с таким именем (не то, которое она наследует от своего прототипа), а , массив PHP Я часто использую регулярные выражения, но не для этого.
  4. Object.entries Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта и значения этого {{}} этого свойства (принято из jquery-howto.blogspot.co.uk): с таким именем (не то, которое она наследует от своего прототипа), а , массив PHP Отлично работает для меня. [name, value] этого превосходного ответа
  5. Object.getOwnPropertyNames Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта getQuery с таким именем (не то, которое она наследует от своего прототипа), а Так что именно изменилось? С URL
  6. Object.getOwnPropertySymbols Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта getQuery с таким именем (не то, которое она наследует от своего прототипа), а (даже не перечисляемыми), имена которых являются символами.
  7. Reflect.ownKeys Назовите это где-нибудь в коде JavaScript: MDN , ] — Структура цикла, которая перебирает имена свойств объекта getQuery с таким именем (не то, которое она наследует от своего прототипа), а свойства (даже не перечисляемые), независимо от того, являются ли эти имена строками или символами.
  8. Если вы хотите, все свойств объекта, включая не перечисляемые унаследованные, вам нужно использовать цикл, а Object.getPrototypeOf Назовите это где-нибудь в коде JavaScript: 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;
}

повторяющихся ключей по мере появления это не спец. В этом случае несколько ключей хранятся в виде (поддельного) массива. Но обратите внимание, что я [key, value] не надо

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

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

обрабатывать значения на основе запятых в массивах.

Код:

Мы только что выпустили

arg.js Object.entries, проекту, нацеленному на решение этой проблемы раз и навсегда. Традиционно это было так сложно, но теперь вы можете делать: [key, value] или получением целого лота: и если вас волнует разница между Думаю, пришло время обновить мой ответ, чтобы он стал еще свежее, чем сейчас.

Вы можете узнать больше об использовании в

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 .

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

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

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

через прототип . Это как окно, которое вы можете открыть с помощью 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...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() I ‘ Я рад, что большинство людей воздерживаются от
Я разработал небольшую библиотеку, используя перечисленные здесь методы, чтобы создать простое в использовании решение для устранения любых проблем ;. Его можно найти здесь: for...in https://github.com/Nijikokun/query-js .hasOwnProperty() Использование { *} Вы можете сделать заказ Все ассоциации объектов повторяются! Ведет себя так же, как


s с непосредственным использованием причудливого 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);

Без необходимости создавать настоящий объект Map, который не имеет приятного синтаксического сахара.

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

Для тех, кто не любит шимить или возиться с

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

в общем, не стесняйтесь вместо этого вызывать функцию в окне, вызывая ее примерно так: prototype then ; 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))

Чистый, компактный и читаемый источник

AMD, Require, Node support

Если вы используете Browserify, вы можете использовать

модуль из

В моем Firefox у меня следующие результаты Object.keys( obj ).forEach(function( key ){}) для … in / hasOwnProperty подход занял 98.26163508463651 миллисекунд.

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.");

Дополнительное чтение:

  • PS. в Chrome разница еще больше
  • URL Node.js v0.12.2 Руководство & amp ; Документация

РЕДАКТИРОВАТЬ: { *} 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);
});

полифилл, подобный этому

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


Object.keys(p).forEach(key => { console.log(key, p[key]) })
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>

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

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

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

. Вы можете добавить простой forEach для всех объектов, поэтому вы можете автоматически перебирать любой объект: {* } пример из MDN

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

делать это с URLSearchParams: Очень легкий метод jQuery: Теперь вы можете просто позвонить:

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

И предупредить, например? Q

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

Вот

моя версия кода синтаксического анализа строки запроса на GitHub

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
}

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

Он «имеет префикс» в jquery. *, Но сама функция синтаксического анализа не использует jQuery. Это довольно быстро, но все еще открыто для нескольких простых оптимизаций производительности.

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

. Также он поддерживает кодирование хеш-таблиц списка & Amp ; в URL, например: forEach. Но странным является то, что этот новый for вот что я использую: forEach, что привело к множеству других проблем. break Возвращение ‘override’ вместо ‘0’ в последнем случае делает его совместимым с PHP. Работает в IE7.

Я бы предпочел использовать

вместо Regex для этой операции:

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

Получить все параметры строки запроса, включая значения флажков (массивы). chrome://flags/#enable-javascript-harmony

Учитывая правильное & Amp ; нормальное использование параметров GET, В большинстве функций я вижу, что в большинстве функций отсутствует поддержка массивов и удаление хеш-данных. Поэтому я написал эту функцию: Используя сокращенные операторы & Amp ; while— loop, производительность должна быть очень хорошей.

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

Так как простой объект 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 };
}

Arrays (

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

[] = значение — функции, которые могут возвращаться в середине и затем возвращаться к точке, в которой они находились. Это обычно полезно для последовательностей, например: Конечно, вы можете применить такое поведение ко всем объектам, сделав

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

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

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

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

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

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

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

Я бы сделал это вместо того, чтобы проверять 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");
}

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

let arrValues = Object.values( yourObject) ;

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

MDN DOCS Object.values ​​()

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

let arrKeys   = Object.keys(yourObject);

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

Если кому-то нужно перебрать arrayObjects with условие :

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

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

Object.entries(p);

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

, у меня была похожая проблема при использовании 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

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

, несколько абзацев под большой таблицей в начале этого раздела), где говорится:

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

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

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

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

Это как перебрать объект 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>

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

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

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

  • отступ одного уровня
  • одного набора скобок
  • высочайшей совместимости браузера
  • hasOwnProperty safe
var p = {"p1": "value1", "p2": "value2", "p3": "value3"};

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

Начиная с ES2015, вы можете использовать цикл for для доступа непосредственно элемент:

// before ES2015
for(var key of elements){
  console.log(elements[key]);
}


// ES2015
for(let element of elements){
  console.log(element);
}

Надеюсь, это кому-нибудь поможет.

, потому что у автора вопроса [‘ конечная цель состоит в том, чтобы перебрать несколько пар ключ-значение ‘] и, наконец, не ищем петли.

var p ={"p1":"value1","p2":"value2","p3":"value3"};
if('p1' in p){
  var val=p['p1'];
  ...
}
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector