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

Question

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

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

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

Можно использовать jQuery.

Answer 1

Это просто объект JavaScript:

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

Вы можете пройти через него, используя for..in loop :

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

• Новая структура данных, представленная в 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

Answer 4

В 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

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

Answer 5

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

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

Answer 6

Сегодня мы выпустили наш новый пакет под названием 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.

Answer 7

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

 
    var countries = ['Canada','Us','France','Italy'];  <br/>
    // Arrow Function  <br/>
    countries.map((value, key) => key+ ' : ' + value );  <br/>
    // Anonomous Function  <br/>
    countries.map(function(value, key){  <br/>
         return key + " : " + value;  <br/>
    });  <br/>