Вывод ассоциативных массивов JavaScript
 

Каким образом можно вывести ключ и значение ассоциативного массива через JavaScript?

Пробую так, но система только выводит ключ и номер элемента массива но не значение. Как вывести значение?

Очевидно, что Object.keys получает ключи.
Тут нужно немного ручной работы:

document.write(key + ' ' + pets[key] + '<br>');

К сожалению "красивого" способа перебора объекта в js так и не завезли.

Спасибо за ваш вариант, вроде можно еще так.

Скажите, а forEach - это метод объекта? Это не встроенная конструкция как в пхп например foreach?
И еще к примеру эта строка Здесь pets выступает в качестве объекта, а не массива?

В javascript всё наследуется от объекта. Потому с массивом можно делать всё тоже что и с объектом(втч использовать перебор for in), а вот с объектом (напрямую) методы массива(forEach) не применить.

Просто for in не рекомендуется использовать на случай стороннего расширения прототипа:

<script>
Object.prototype.ext = 'нежданчик'

var pets = {cat: 'Котэ'}
 
for (let key in pets) {
            document.write(`Свойство: ${key}. Значение свойства: ${pets[key]}<br>`);
        };
</script>

При любом использовании for in рекомендуется использовать проверку на собственные свойства(что при Object.keys не нужно):

<script>
Object.prototype.ext = 'нежданчик'

var pets = {cat: 'Котэ'}
 
for (let key in pets) if(pets.hasOwnProperty(key)) {
            document.write(`Свойство: ${key}. Значение свойства: ${pets[key]}<br>`);
        };
</script>

:-?

<script>
pets =
      {
        Scratchy : 'Guinea Pig',
        Squeeky : 'Guinea Pig',
        Fluffy : 'Rabbit',
        Thumper : 'Rabbit',
        Snoopy : 'Dog',
        Tiddles : 'Cat'
      }

 Object.entries(pets).forEach(function([key,value]){
		 document.write(key + ' ' + value + '<br>');
	 });
</script>

рони, как обычно без ослика, как и Object.values.
А вообще всё это хрень и оверхед, что им мешало при закладке for of расширить его до работы с объектами(и вообще сделать объект iterable по умолчанию, строку же сделали) - непонятно. =(
Конечно можно захреначить себе хэлпер типа:

Object.prototype[Symbol.iterator] = function* () {
 for(let key in this) 
   if(this.hasOwnProperty(key))
     yield {key, value: this[key]};
};

for(let {value} of {a:1, b:2}){
  console.log(value)
}

Но это ещё больший оверхэд.

как здорово что на сервере нет этого браузерного коллапса

Aetae,
:thanks:

Ассоциативный массив — тип данных, позволяющий хранить пары вида «(ключ, значение)».

В Javascript для организации ассоциативного массива используется тип Map. Однако, если предполагается, что в качестве ключей будут использоваться только строки, то можно использовать тип Object, как частный вид, а точней подобие ассоциативного массива.

Поскольку тип Object — это не ассоциативный массив, то вам нужно конкретно указать, что именно вы хотите сделать с объектом. Статичный метод Object.entries принимает объект, чьи перечислимые свойства будут возвращены в виде массива пар [key, value].

<script>
const pets = {
	Scratchy: "Guinea Pig",
	Squeeky: "Guinea Pig", 
	Fluffy: "Rabbit", 
	Thumper: "Rabbit", 
	Snoopy: "Dog", 
	Tiddles: "Cat"
};

for(const [key, value] of Object.entries(pets)) {
	document.write(`Свойство: ${key}. Значение свойства: ${value}<br>`);
}</script>

Что вам мешает описать свою структуру данных со своим итератором хранящемся в свойстве Symbol.iterator. (Во встроенных типах именно так и сделано). Если вам нужен единственный экземпляр перечислимого «объекта», то и у него можно объявить свойство Symbol.iterator, указывающее, как его перечислять. (Пример выше для цели топик-стартера подходит идеально)

<script>
const pets = {
	Scratchy: "Guinea Pig",
	Squeeky: "Guinea Pig",
	Fluffy: "Rabbit",
	Thumper: "Rabbit",
	Snoopy: "Dog",
	Tiddles: "Cat",
	*[Symbol.iterator]() { yield* Object.entries(this) }
};

for(const [key, value] of pets) {
	document.write(`Свойство: ${key}. Значение свойства: ${value}<br>`);
}</script>

Для этого существуют статичные методы Object.keys, Object.values и Object.entries, и цикл for-of. (Также можете объявить метод Symbol.iterator, в котором указывается реализация собственного алгоритма перечисления)

Ну и если говорить про ассоциативный массив, то его полному определению в JavaScript соответствует тип Map.

<script>
const pets = new Map([
	["Scratchy", "Guinea Pig"],
	["Squeeky", "Guinea Pig"],
	["Fluffy", "Rabbit"],
	["Thumper", "Rabbit"],
	["Snoopy", "Dog"],
	["Tiddles", "Cat"]
]);

for(const [key, value] of pets) {
	document.write(`Свойство: ${key}. Значение свойства: ${value}<br>`);
}
</script>

Если вас интересуют у «объекта» только ключи или значения, то храните их в типе Set или Array, если и ключи и значения, то в типе Map. Конечно же представители этих типов перечисляемы.

В таком нет необходимости, поскольку существует статичный метод Object.entries и цикл for-of.

При реализации какой-либо структуры данных вам потребуется для неё своя собственная реализация перечисления. Например, итератор от массива не подойдёт для строк и т. д.

Это всё благоглупости. В одном и том же коде иногда интересуют ключи, иногда значения, иногда и то и то. И хочется чтобы любая задача решалась красиво и аккуратно. Чистых же задач не существует.
У всех этих "своих типов"(как и у Map с Set) нет няшного литерала.)
Конечно, можно babel подкрутить и писать на своём особом js с блэкджеком, но печаль то как раз в оверхэде и отсутствии поведения из коробки, что babel просто спрячет под капот.