Hướng dẫn về mảng đối tượng trong JavaScript - Cách tạo, cập nhật và lặp qua đối tượng bằng phương thức mảng JS

Trung bình tôi làm việc với dữ liệu JSON 18 lần một tuần. Và tôi vẫn cần phải google để biết các cách cụ thể để thao tác chúng hầu như mọi lúc. Điều gì sẽ xảy ra nếu có một hướng dẫn cuối cùng luôn có thể cho bạn câu trả lời?

Trong bài viết này, tôi sẽ chỉ cho bạn những kiến ​​thức cơ bản về cách làm việc với mảng đối tượng trong JavaScript.

Nếu bạn đã từng làm việc với cấu trúc JSON, bạn đã làm việc với các đối tượng JavaScript. Theo đúng nghĩa đen. JSON là viết tắt của JavaScript Object Notation.

Tạo một đối tượng đơn giản như sau:

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

Đối tượng này đại diện cho một chiếc xe hơi. Có thể có nhiều loại và nhiều màu sắc của ô tô, mỗi đối tượng sau đó đại diện cho một chiếc xe cụ thể.

Bây giờ, hầu hết thời gian bạn nhận được dữ liệu như thế này từ một dịch vụ bên ngoài. Nhưng đôi khi bạn cần tạo các đối tượng và mảng của chúng theo cách thủ công. Giống như tôi đã làm khi tạo cửa hàng điện tử này:

Xem xét từng mục danh sách danh mục trông giống như sau trong HTML:

Tôi không muốn mã này lặp lại 12 lần, điều này sẽ khiến nó không thể hiểu được.

Tạo một mảng đối tượng

Nhưng chúng ta hãy quay trở lại ô tô. Cùng xem qua bộ dàn xe này:

Chúng ta có thể biểu diễn nó dưới dạng một mảng theo cách này:

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 }, { ... }, ... ] 

Các mảng đối tượng không luôn giống nhau. Chúng ta hầu như luôn luôn cần phải thao túng chúng. Vì vậy, hãy xem cách chúng ta có thể thêm các đối tượng vào một mảng đã có.

Thêm một đối tượng mới khi bắt đầu - Array.unshift

Để thêm một đối tượng ở vị trí đầu tiên, hãy sử dụng Array.unshift.

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

Thêm một đối tượng mới vào cuối - Array.push

Để thêm một đối tượng ở vị trí cuối cùng, hãy sử dụng Array.push.

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

Thêm một đối tượng mới ở giữa - Array.splice

Để thêm một đối tượng ở giữa, hãy sử dụng Array.splice. Chức năng này rất tiện dụng vì nó cũng có thể loại bỏ các mục. Hãy để ý các thông số của nó:

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

Vì vậy, nếu chúng tôi muốn thêm Volkswagen Cabrio màu đỏ ở vị trí thứ năm, chúng tôi sẽ sử dụng:

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

Vòng qua một mảng đối tượng

Để tôi hỏi bạn một câu ở đây: Tại sao bạn muốn lặp qua một mảng đối tượng? Lý do tôi đang hỏi là vòng lặp hầu như không bao giờ là nguyên nhân chính của những gì chúng ta muốn đạt được.

JavaScript cung cấp nhiều hàm có thể giải quyết vấn đề của bạn mà không thực sự triển khai logic trong một chu trình chung. Chúng ta hãy xem xét.

Tìm một đối tượng trong một mảng theo các giá trị của nó - Array.find

Giả sử chúng ta muốn tìm một chiếc ô tô có màu đỏ. Chúng ta có thể sử dụng chức năng Array.find.

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

Hàm này trả về phần tử phù hợp đầu tiên:

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

Cũng có thể tìm kiếm nhiều giá trị:

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

Trong trường hợp đó, chúng tôi sẽ lấy chiếc xe cuối cùng trong danh sách.

Nhận nhiều mục từ một mảng phù hợp với một điều kiện - Array.filter

Các Array.findhàm trả về chỉ có một đối tượng. Nếu chúng ta muốn lấy tất cả các xe màu đỏ, chúng ta cần phải sử dụng 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 //  } // ] 

Chuyển đổi các đối tượng của một mảng - Array.map

Đây là điều mà chúng tôi rất cần. Chuyển một mảng các đối tượng thành một mảng các đối tượng khác nhau. Đó là một công việc cho Array.map. Giả sử chúng tôi muốn phân loại ô tô của mình thành ba nhóm dựa trên kích thước của chúng.

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'] 

Cũng có thể tạo một đối tượng mới nếu chúng ta cần nhiều giá trị hơn:

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' }, // ... // ] 

Thêm thuộc tính vào mọi đối tượng của mảng - 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.

Nếu bạn có trường hợp sử dụng yêu cầu chức năng nâng cao hơn, hãy xem hướng dẫn chi tiết này về mảng hoặc truy cập tài liệu tham khảo các trường W3.

Hoặc liên lạc với tôi và tôi sẽ chuẩn bị một bài viết khác :-)