Найкращий спосіб збереження масиву значень key => у 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

Ви можете використовувати Map .

• Нова структура даних, представлена ​​в JavaScript ES6.
• Альтернатива об’єкту JavaScript для зберігання пар ключів / значень.
• Має корисні методи ітерації пар ключ / значення.

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, це вважатиметься багатовимірним масивом з парами ключових значень або масивом у масиві. Я припускаю, тому що ви запитали про те, як провести цикл через масив ключових значень, ви хочете знати, як отримати об'єкт (key => масив значень), як об'єкт людини, який має, скажімо, більше однієї людини.

Ну а тепер, коли ми знаємо, що масиви 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 => можуть бути збережені, це за допомогою методу масиву, який називається 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. Він надає вам директиву javascript Blade для експорту змінних PHP в JavaScript. Таким чином, це в основному робить те саме, що популярний пакет Джефрі Вейн 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.