Лучший способ сохранить массив ключ => значение в JavaScript?

Каков наилучший способ хранения key=>valueмассива в javascript и как его можно перебрать?

Ключ каждого элемента должен быть тегом, например {id}или просто, idа значение должно быть числовым значением идентификатора.

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

JQuery может быть использован.

Вот что такое JavaScript-объект:

var myArray = {id1: 100, id2: 200, "tag with spaces": 300};
myArray.id3 = 400;
myArray["id4"] = 500;

Вы можете пройти через это с помощью for..inцикла :

for (var key in myArray) {
  console.log("key " + key + " has value " + myArray[key]);
}

Смотрите также: Работа с объектами (MDN).

В ECMAScript6 также есть Map(см. Таблицу совместимости браузера там):

• Объект имеет прототип, поэтому на карте есть ключи по умолчанию. Это можно обойти, используя map = Object.create (null) начиная с ES5, но это делалось редко.

• Ключами объекта являются строки и символы, где они могут иметь любое значение для карты.

• Вы можете легко получить размер карты, в то время как вам придется вручную отслеживать размер объекта.

Если я вас правильно понял

var hash = {};
hash['bob'] = 123;
hash['joe'] = 456;

var sum = 0;
for (var name in hash) {
    sum += hash[name];
}
alert(sum); // 579

Вы можете использовать карту .

• Новая структура данных, представленная в JavaScript ES6.
• Альтернатива JavaScript Object для хранения пар ключ / значение.
• Имеет полезные методы для итерации по парам ключ / значение.

var map = new Map();
map.set('name', 'John');
map.set('id', 11);

// Get the full content of the Map
console.log(map); // Map { 'name' => 'John', 'id' => 11 }

Получить значение карты с помощью ключа

console.log(map.get('name')); // John 
console.log(map.get('id')); // 11

Получить размер карты

console.log(map.size); // 2

Проверьте ключ существует в карте

console.log(map.has('name')); // true
console.log(map.has('age')); // false

Получить ключи

console.log(map.keys()); // MapIterator { 'name', 'id' }

Получить значения

console.log(map.values()); // MapIterator { 'John', 11 }

Получить элементы карты

for (let element of map) {
  console.log(element);
}

// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

Распечатать пары ключ-значение

for (let [key, value] of map) {
  console.log(key + " - " + value);
}

// Output: 
// name - John
// id - 11

Печатать только ключи карты

for (let key of map.keys()) {
  console.log(key);
}

// Output:
// name
// id

Печатать только значения карты

for (let value of map.values()) {
  console.log(value);
}

// Output:
// John
// 11

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

Массивы обычно отображаются с использованием синтаксиса в квадратных скобках, а объекты (массивы «key => value») - с использованием синтаксиса фигурных скобок, хотя вы можете получить доступ и задать свойства объекта с помощью синтаксиса в квадратных скобках, как показал Алексей Романов.

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

Простой массив, например.

$(document).ready(function(){

    var countries = ['Canada','Us','France','Italy'];
    console.log('I am from '+countries[0]);
    $.each(countries, function(key, value) {
        console.log(key, value);
    });

});

Вывод -

0 "Канада"

1 "Мы"

2 "Франция"

3 "Италия"

Выше мы видим, что мы можем зациклить числовой массив с помощью функции jQuery.each и получить доступ к информации вне цикла с помощью квадратных скобок с цифровыми клавишами.

Простой объект (JSON)

$(document).ready(function(){

    var person = {
        name: "James",
        occupation: "programmer",
        height: {
            feet: 6,
            inches: 1
        },
    }

    console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation);

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

});

Вывод -

Меня зовут Джеймс, и я программист 6 футов 1

имя Джеймс

профессиональный программист

Высота объекта {футы: 6, дюймы: 1}

В языке, подобном php, это будет считаться многомерным массивом с парами ключ-значение или массивом в массиве. Я предполагаю, потому что вы спросили о том, как пройти через массив значений ключа, вы хотели бы знать, как получить объект (массив значений =>), такой как объект person выше, чтобы иметь, скажем, более одного человека.

Итак, теперь, когда мы знаем, что массивы javascript обычно используются для числовой индексации, а объекты - более гибко для ассоциативной индексации, мы будем использовать их вместе для создания массива объектов, через которые мы можем циклически проходить, например:

JSON массив (массив объектов) -

$(document).ready(function(){

    var people = [
        {
            name: "James",
            occupation: "programmer",
            height: {
                feet: 6,
                inches: 1
            }
        }, {
            name: "Peter",
            occupation: "designer",
            height: {
                feet: 4,
                inches: 10
            }
        }, {
            name: "Joshua",
            occupation: "CEO",
            height: {
                feet: 5,
                inches: 11
            }
        }
    ];

    console.log("My name is "+people[2].name+" and I am a "+people[2].height.feet+" ft "+people[2].height.inches+" "+people[2].occupation+"\n");

    $.each(people, function(key, person) {
        console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation+"\n");
    });

});

Вывод -

Меня зовут Джошуа, и я 5 футов 11 генеральный директор

Меня зовут Джеймс, и я программист 6 футов 1

Меня зовут Питер, и я 4 фута 10 дизайнеров

Меня зовут Джошуа, и я 5 футов 11 генеральный директор

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

Объекты внутри массива:

var cars = [
        { "id": 1, brand: "Ferrari" }
        , { "id": 2, brand: "Lotus" }
        , { "id": 3, brand: "Lamborghini" }
    ];

Просто сделай это

var key = "keyOne";
var obj = {};
obj[key] = someValue;

Я знаю, что уже поздно, но это может быть полезно для тех, кто хочет других путей. Другой способ сохранить массив key => values ​​- использовать метод массива map (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) вы также можете использовать функцию стрелки

 
    var countries = ['Canada','Us','France','Italy'];  

    // Arrow Function  

    countries.map((value, key) => key+ ' : ' + value );  

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Сегодня мы выпустили наш новый пакет под названием laravel-blade-javascript. Он предоставляет вам директиву Blade javascript для экспорта переменных PHP в JavaScript. Так что он в основном делает то же самое, что и популярный пакет Jeffrey Way PHP-Vars-To-Js-Transformer, но вместо экспорта переменных в контроллер наш пакет делает это в виде.

Вот пример того, как его можно использовать:

@javascript('key', 'value')

Визуализированный вид выведет:

<script type="text/javascript">window['key'] = 'value';</script>

Итак, в вашем браузере у вас теперь есть доступ к ключевой переменной:

console.log(key); //outputs "value"

Вы также можете использовать один аргумент:

@javascript(['key' => 'value'])

Который будет выводить так же, как в первом примере.

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