JavaScript Array of Objects Tutorial - วิธีสร้างอัปเดตและวนซ้ำออบเจ็กต์โดยใช้วิธี JS Array

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

ในบทความนี้ฉันจะแสดงพื้นฐานของการทำงานกับอาร์เรย์ออบเจ็กต์ใน JavaScript

หากคุณเคยทำงานกับโครงสร้าง JSON แสดงว่าคุณเคยทำงานกับออบเจ็กต์ JavaScript ค่อนข้างแท้จริง JSON ย่อมาจาก JavaScript Object Notation

การสร้างออบเจ็กต์ทำได้ง่ายๆดังนี้:

{ "color": "purple", "type": "minivan", "registration": new Date('2012-02-03'), "capacity": 7 } 

วัตถุนี้แสดงถึงรถยนต์ รถยนต์มีได้หลายประเภทและหลายสีจากนั้นวัตถุแต่ละชิ้นจะแสดงถึงรถยนต์เฉพาะ

ตอนนี้ส่วนใหญ่คุณได้รับข้อมูลเช่นนี้จากบริการภายนอก แต่บางครั้งคุณต้องสร้างวัตถุและอาร์เรย์ด้วยตนเอง เหมือนที่เคยทำตอนสร้าง e-shop:

การพิจารณาแต่ละรายการหมวดหมู่จะมีลักษณะเช่นนี้ใน HTML:

ฉันไม่ต้องการให้รหัสนี้ซ้ำ 12 ครั้งซึ่งจะทำให้ไม่สามารถเข้าถึงได้

การสร้างอาร์เรย์ของวัตถุ

แต่กลับไปที่รถกันเถอะ มาดูรถยนต์ชุดนี้กัน:

เราสามารถแสดงเป็นอาร์เรย์ด้วยวิธีนี้:

let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ] 

อาร์เรย์ของวัตถุไม่เหมือนเดิมตลอดเวลา เราแทบจะต้องจัดการพวกมันอยู่เสมอ ลองมาดูกันว่าเราจะเพิ่มวัตถุในอาร์เรย์ที่มีอยู่แล้วได้อย่างไร

เพิ่มวัตถุใหม่ที่จุดเริ่มต้น - Array.unshift

Array.unshiftหากต้องการเพิ่มวัตถุที่ตำแหน่งแรกที่ใช้

let car = { "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 } cars.unshift(car); 

เพิ่มวัตถุใหม่ในตอนท้าย - Array.push

Array.pushหากต้องการเพิ่มวัตถุที่ตำแหน่งที่ผ่านการใช้งาน

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.push(car); 

เพิ่มวัตถุใหม่ตรงกลาง - Array.splice

Array.spliceหากต้องการเพิ่มวัตถุที่อยู่ตรงกลางใช้ ฟังก์ชั่นนี้มีประโยชน์มากเนื่องจากสามารถลบรายการต่างๆได้ ระวังพารามิเตอร์:

Array.splice( {index where to start}, {how many items to remove}, {items to add} ); 

ดังนั้นหากเราต้องการเพิ่ม Volkswagen Cabrio สีแดงในตำแหน่งที่ 5 เราจะใช้:

let car = {  "color": "red",  "type": "cabrio",  "registration": new Date('2016-05-02'),  "capacity": 2 } cars.splice(4, 0, car); 

วนลูปผ่านอาร์เรย์ของวัตถุ

ให้ฉันถามคุณที่นี่: ทำไมคุณถึงต้องการวนรอบวัตถุ? เหตุผลที่ฉันถามคือการวนซ้ำแทบจะไม่เคยเป็นสาเหตุหลักของสิ่งที่เราต้องการบรรลุ

JavaScript มีฟังก์ชันมากมายที่สามารถแก้ปัญหาของคุณได้โดยไม่ต้องใช้ตรรกะในวงจรทั่วไป ลองมาดู

ค้นหาวัตถุในอาร์เรย์ตามค่า - Array.find

สมมติว่าเราต้องการหารถที่ติดไฟแดง Array.findเราสามารถใช้ฟังก์ชั่น

let car = cars.find(car => car.color === "red"); 

ฟังก์ชันนี้ส่งคืนองค์ประกอบแรกที่ตรงกัน:

console.log(car); // output: // { //   color: 'red', //   type: 'station wagon', //   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //   capacity: 5 // } 

นอกจากนี้ยังสามารถค้นหาหลายค่า:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

ในกรณีนี้เราจะได้รถคันสุดท้ายในรายการ

รับหลายรายการจากอาร์เรย์ที่ตรงกับเงื่อนไข - Array.filter

Array.findกลับมาทำงานเพียงหนึ่งวัตถุ ถ้าเราอยากได้รถป้ายแดงทุกคันต้องใช้Array.filter.

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // { //    color: 'red', //    type: 'station wagon', //    registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 5 //  }, // { //    color: 'red', //    type: 'cabrio', //    registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', //    capacity: 2 //  } // ] 

แปลงวัตถุของอาร์เรย์ - Array.map

นี่คือสิ่งที่เราต้องการบ่อยมาก แปลงอาร์เรย์ของวัตถุให้เป็นอาร์เรย์ของวัตถุต่างๆ Array.mapนั่นคืองานสำหรับ สมมติว่าเราต้องการแบ่งประเภทรถของเราออกเป็นสามกลุ่มตามขนาด

let sizes = cars.map(car => { if (car.capacity <= 3){ return "small"; } if (car.capacity <= 5){ return "medium"; } return "large"; }); console.log(sizes); // output: // ['large','medium','medium', ..., 'small'] 

นอกจากนี้ยังสามารถสร้างวัตถุใหม่ได้หากเราต้องการค่าเพิ่มเติม:

let carsProperties = cars.map(car => { let properties = { "capacity": car.capacity, "size": "large" };  if (car.capacity <= 5){    properties['size'] = "medium";  }  if (car.capacity <= 3){    properties['size'] = "small";  } return properties; }); console.log(carsProperties); // output: // [ //   { capacity: 7, size: 'large' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 5, size: 'medium' }, //   { capacity: 2, size: 'small' }, // ... // ] 

เพิ่มคุณสมบัติให้กับทุกออบเจ็กต์ของอาร์เรย์ - Array.forEach

But what if we want the car object too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => { car['size'] = "large";  if (car.capacity <= 5){    car['size'] = "medium";  }  if (car.capacity <= 3){    car['size'] = "small";  } }); 

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (c1.capacity  c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // { // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // }, // { // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // }, // ... // ] 

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)