Вывод ассоциативных массивов 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 просто спрячет под капот.

В итоге у вас получится код, который никто не поймёт. И вы уже не сможете сказать, что пишете на JavaScript.

С этим примером всё в порядке, я бы не сказал, что ассоциативный массив в JavaScript оторван от реальности. Во всяком случае в сравнении с другими языками вам не нужно писать ни на порядок меньше, ни на порядок больше кода.

JavaScript

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

for(const [key, value] of pets) {
	console.log(`Свойство: ${key}. Значение свойства: ${value}`);
}

C#
Запустить

using System;
using System.Collections.Generic;

class MainClass {
	public static void Main (string[] args) {
		var pets = new Dictionary<String, String> {
			{ "Scratchy", "Guinea Pig" },
			{ "Squeeky", "Guinea Pig" },
			{ "Fluffy", "Rabbit" },
			{ "Thumper", "Rabbit" },
			{ "Snoopy", "Dog" },
			{ "Tiddles", "Cat" }
		};

		foreach(var pair in pets) {
			Console.WriteLine($"Свойство: {pair.Key}. Значение свойства: {pair.Value}");
		}
	}
}

Haskell
Запустить

pets :: [(String, String)]
pets =
  [
    ("Scratchy", "Guinea Pig"),
    ("Squeeky", "Guinea Pig"),
    ("Fluffy", "Rabbit"),
    ("Thumper", "Rabbit"),
    ("Snoopy", "Dog"),
    ("Tiddles", "Cat")
  ]

main :: IO()
main = mapM_ (
  \(key, value) -> putStrLn $
    "Свойство: " ++ key ++ ". Значение свойства: " ++ value
  ) pets

C++
Запустить

#include <map>
#include <iostream>
#include <cassert>

using namespace std;

int main(int argc, char **argv) {
	map<string, string> pets = {
		{ "Scratchy", "Guinea Pig" },
		{ "Squeeky", "Guinea Pig" },
		{ "Fluffy", "Rabbit" },
		{ "Thumper", "Rabbit" },
		{ "Snoopy", "Dog" },
		{ "Tiddles", "Cat" }
	};

	for(auto const& [key, value] : pets) {
		cout
			<< "Свойство: "
			<< key
			<< ". Значение свойства: "
			<< value
			<< endl;
	}
	
	return 0;
}

Swift
Запустить

let pets = [
	"Scratchy": "Guinea Pig",
	"Squeeky": "Guinea Pig",
	"Fluffy": "Rabbit",
	"Thumper": "Rabbit",
	"Snoopy": "Dog",
	"Tiddles": "Cat"
]

for (key, value) in pets {
	print("Свойство: \(key). Значение свойства: \(value)")
}

Malleys,
:victory:

Смотри в чём засада: когда мы делаем так

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

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