Cách tốt nhất để lưu trữ một khóa => mảng giá trị trong JavaScript?

Cách tốt nhất để lưu trữ một key=>valuemảng trong javascript và làm thế nào điều đó có thể được lặp qua?

Khóa của mỗi phần tử phải là một thẻ, chẳng hạn như {id}hoặc chỉ idvà giá trị phải là giá trị số của id.

Nó phải là thành phần của lớp javascript hiện có hoặc là biến toàn cục có thể dễ dàng được tham chiếu qua lớp.

jQuery có thể được sử dụng.

Đó chỉ là những gì một đối tượng JavaScript là:

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

Bạn có thể lặp qua nó bằng for..invòng lặp :

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

Xem thêm: Làm việc với các đối tượng (MDN).

Trong ECMAScript6 cũng có Map(xem bảng tương thích trình duyệt ở đó):

• Một đối tượng có một nguyên mẫu, vì vậy có các khóa mặc định trong bản đồ. Điều này có thể được bỏ qua bằng cách sử dụng map = Object.create (null) kể từ ES5, nhưng hiếm khi được thực hiện.

• Các khóa của Đối tượng là Chuỗi và Biểu tượng, trong đó chúng có thể là bất kỳ giá trị nào cho Bản đồ.

• Bạn có thể dễ dàng lấy kích thước của Bản đồ trong khi bạn phải theo dõi kích thước thủ công cho Đối tượng.

Nếu tôi hiểu bạn chính xác:

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

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

Bạn có thể sử dụng Bản đồ .

• Một cấu trúc dữ liệu mới được giới thiệu trong JavaScript ES6.
• Thay thế cho Đối tượng JavaScript để lưu trữ các cặp khóa / giá trị.
• Có các phương thức hữu ích để lặp qua các cặp khóa / giá trị.

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 }

Nhận giá trị của Bản đồ bằng cách sử dụng khóa

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

Nhận kích thước của Bản đồ

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

Kiểm tra khóa tồn tại trong Bản đồ

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

Nhận chìa khóa

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

Nhận giá trị

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

Nhận các yếu tố của Bản đồ

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

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

In cặp giá trị khóa

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

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

Chỉ in các phím của Bản đồ

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

// Output:
// name
// id

Chỉ in các giá trị của Bản đồ

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

// Output:
// John
// 11

Trong javascript, một mảng giá trị khóa được lưu trữ dưới dạng một đối tượng. Có những thứ như mảng trong javascript, nhưng chúng vẫn được coi là một số đối tượng, hãy kiểm tra câu trả lời của kẻ này - Tại sao tôi có thể thêm các thuộc tính được đặt tên vào một mảng như thể nó là một đối tượng?

Mảng thường được nhìn thấy bằng cú pháp ngoặc vuông và các đối tượng (mảng "key => value") bằng cú pháp ngoặc nhọn, mặc dù bạn có thể truy cập và đặt thuộc tính đối tượng bằng cú pháp ngoặc vuông như Alexey Romanov đã hiển thị.

Các mảng trong javascript thường chỉ được sử dụng với các khóa số, tự động tăng, nhưng các đối tượng javascript có thể giữ các cặp giá trị khóa được đặt tên, các hàm và thậm chí cả các đối tượng khác.

Mảng đơn giản, vd.

$(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);
    });

});

Đầu ra -

0 "Canada"

1 "Chúng tôi"

2 "Pháp"

3 "Ý"

Chúng ta thấy ở trên rằng chúng ta có thể lặp một mảng số bằng cách sử dụng hàm jQuery.each và truy cập thông tin bên ngoài vòng lặp bằng dấu ngoặc vuông với các phím số.

Đối tượng đơn giản (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);
    });

});

Đầu ra -

Tên tôi là James và tôi là một lập trình viên 6 ft 1

tên James

lập trình viên nghề nghiệp

chiều cao Đối tượng {feet: 6, inch: 1}

Trong một ngôn ngữ như php, điều này sẽ được coi là một mảng nhiều chiều với các cặp giá trị chính hoặc một mảng trong một mảng. Tôi giả sử vì bạn đã hỏi về cách lặp qua một mảng giá trị khóa mà bạn muốn biết làm thế nào để có được một đối tượng (khóa => mảng giá trị) như đối tượng người ở trên để có, giả sử, nhiều hơn một người.

Chà, bây giờ chúng ta biết các mảng javascript thường được sử dụng để lập chỉ mục số và các đối tượng linh hoạt hơn để lập chỉ mục kết hợp, chúng ta sẽ sử dụng chúng cùng nhau để tạo ra một mảng các đối tượng mà chúng ta có thể lặp qua, như vậy -

Mảng JSON (mảng đối tượng) -

$(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");
    });

});

Đầu ra -

Tên tôi là Joshua và tôi là CEO 5 ft 11

Tên tôi là James và tôi là một lập trình viên 6 ft 1

Tên tôi là Peter và tôi là một nhà thiết kế 4 ft 10

Tên tôi là Joshua và tôi là CEO 5 ft 11

Lưu ý rằng bên ngoài vòng lặp tôi phải sử dụng cú pháp dấu ngoặc vuông với khóa số vì đây hiện là mảng các đối tượng được lập chỉ mục bằng số và dĩ nhiên bên trong vòng lặp, hàm số được ngụ ý.

Các đối tượng bên trong một mảng:

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

Đơn giản chỉ cần làm điều này

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

Tôi biết muộn nhưng nó có thể hữu ích cho những người muốn những cách khác. Một cách khác mảng khóa => giá trị có thể được lưu trữ bằng cách sử dụng một phương thức mảng được gọi là map (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) bạn cũng có thể sử dụng chức năng mũi tên

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

    // Arrow Function  

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

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Hôm nay chúng tôi đã phát hành gói mới của chúng tôi được gọi là laravel-blade-javascript. Nó cung cấp cho bạn một lệnh javascript Blade để xuất các biến PHP sang JavaScript. Vì vậy, về cơ bản, nó hoạt động giống như gói PHP-Vars-To-Js-Transformer phổ biến của Jeffrey Way nhưng thay vì xuất các biến trong bộ điều khiển, gói của chúng tôi lại xem.

Đây là một ví dụ về cách nó có thể được sử dụng:

@javascript('key', 'value')

Chế độ xem được hiển thị sẽ xuất ra:

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

Vì vậy, trong trình duyệt của bạn, bây giờ bạn có quyền truy cập vào một biến chính:

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

Bạn cũng có thể sử dụng một đối số duy nhất:

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

Mà sẽ xuất ra giống như ví dụ đầu tiên.

Bạn cũng có thể sử dụng tệp cấu hình để thiết lập một không gian tên nơi chứa tất cả các biến JavaScript đã xuất.