วิธีที่ดีที่สุดในการเก็บ key => value array ใน JavaScript?

วิธีที่ดีที่สุดในการเก็บkey=>valueอาร์เรย์ในจาวาสคริปต์คืออะไรและจะวนลูปอย่างไร

กุญแจสำคัญของแต่ละองค์ประกอบควรเป็นแท็กเช่น{id}หรือเพียงแค่idและค่าควรเป็นค่าตัวเลขของ id

มันควรจะเป็นองค์ประกอบของคลาสจาวาสคริปต์ที่มีอยู่หรือเป็นตัวแปรทั่วโลกซึ่งสามารถอ้างอิงได้อย่างง่ายดายผ่านชั้นเรียน

สามารถใช้ 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 สำหรับการจัดเก็บคู่คีย์ / ค่า
• มีวิธีที่มีประโยชน์สำหรับการทำซ้ำในคู่ของคีย์ / ค่า

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

ในจาวาสคริปต์อาร์เรย์ของค่าคีย์จะถูกจัดเก็บเป็นวัตถุ มีสิ่งต่าง ๆ เช่นอาร์เรย์ในจาวาสคริปต์ แต่พวกมันก็ยังถือว่าเป็นวัตถุยังคงตรวจสอบพวกนี้ตอบ - ทำไมฉันสามารถเพิ่มคุณสมบัติที่มีชื่อในอาร์เรย์ราวกับว่ามันเป็นวัตถุ?

โดยทั่วไปจะเห็นอาร์เรย์โดยใช้ไวยากรณ์วงเล็บเหลี่ยมและวัตถุ ("คีย์ => ค่า" อาร์เรย์) โดยใช้ไวยากรณ์วงเล็บเหลี่ยมแม้ว่าคุณสามารถเข้าถึงและตั้งค่าคุณสมบัติวัตถุโดยใช้ไวยากรณ์วงเล็บเหลี่ยมได้เช่นเดียวกับ Alexey Romanov

โดยทั่วไปแล้วอาร์เรย์ในจาวาสคริปต์จะใช้เฉพาะกับตัวเลขแป้นเพิ่มอัตโนมัติ แต่วัตถุจาวาสคริปต์สามารถเก็บคู่ค่าคีย์ชื่อฟังก์ชั่นและแม้กระทั่งวัตถุอื่น ๆ เช่นกัน

Simple Array

$(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 => value array) เช่นเดียวกับที่วัตถุบุคคลด้านบนมีสมมติว่ามีมากกว่าหนึ่งคน

ตอนนี้เรารู้ว่ามีการใช้อาร์เรย์ 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;

ฉันรู้ว่ามันสาย แต่มันอาจจะมีประโยชน์สำหรับผู้ที่ต้องการวิธีอื่น อีกวิธีหนึ่งในคีย์อาเรย์ => ค่าสามารถจัดเก็บได้โดยใช้วิธีการแบบอาเรย์ที่เรียกว่าแผนที่ (); ( 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 ดังนั้นโดยทั่วไปแล้วจะทำเช่นเดียวกับแพ็คเกจ PHP-Vars-To-Js-Transformer ที่เป็นที่นิยมของ Jeffrey Way แต่แทนที่จะส่งออกตัวแปรในคอนโทรลเลอร์

นี่คือตัวอย่างของวิธีการใช้:

@javascript('key', 'value')

มุมมองที่แสดงผลจะแสดงผล:

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

ดังนั้นในเบราว์เซอร์ของคุณตอนนี้คุณสามารถเข้าถึงตัวแปรสำคัญ:

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

คุณยังสามารถใช้อาร์กิวเมนต์เดียว:

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

ซึ่งจะให้ผลลัพธ์เช่นเดียวกับตัวอย่างแรก

คุณยังสามารถใช้ไฟล์กำหนดค่าเพื่อตั้งค่าเนมสเปซซึ่งตัวแปร JavaScript ที่ส่งออกทั้งหมดควรอยู่ใน