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 google để biết những cách cụ thể để thao túng chúng gần 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ể cung cấp cho bạn câu trả lời? Trong bài viết này, tôi sẽ chỉ cho bạn những điều cơ bản khi làm việc với các 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 ký hiệu đối tượng JavaScript. Tạo một đối tượng đơn giản như thế này: Đối tượng này đại diện cho một chiếc xe. Có thể có nhiều loại và màu sắc của xe hơi, 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ôi đang tạo cửa hàng điện tử này:{
"color": "purple",
"type": "minivan",
"registration": new Date['2012-02-03'],
"capacity": 7
}
Xem xét từng mục danh sách danh mục trông giống như thế này trong HTML:
Tôi không muốn lặp lại mã này 12 lần, điều này sẽ khiến nó không thể chịu đựng được.
Tạo một mảng các đối tượng
Nhưng chúng ta hãy trở lại xe hơi. Hãy xem bộ xe này:
Chúng ta có thể đại diện cho nó như 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
},
{
...
},
...
]
Mảng các đối tượng không giữ nguyên mọi lúc. Chúng ta hầu như luôn cần phải thao túng chúng. Vì vậy, chúng ta hãy xem làm thế nào chúng ta có thể thêm các đối tượng vào một mảng đã tồn tại.
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
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
},
{
...
},
...
]
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 ở cuối - mảng.push
Để thêm một đối tượng ở vị trí cuối cùng, hãy sử dụng
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
},
{
...
},
...
]
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 - mảng.splice
Để thêm một đối tượng ở giữa, hãy sử dụng
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.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 Red Volkswagen Cabrio ở 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];
Lặp qua một mảng các đối tượng
Hãy để tôi hỏi bạn một câu hỏi ở đây: Tại sao bạn muốn lặp qua một loạt các đối tượng? Lý do tôi hỏi là vòng lặp gần 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 chức năng có thể giải quyết vấn đề của bạn mà không thực sự thực hiện logic trong một chu kỳ chung. 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ó - mảng.find
Giả sử chúng tôi muốn tìm một chiếc xe màu đỏ. Chúng ta có thể sử dụng hàm
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
},
{
...
},
...
]
let car = cars.find[car => car.color === "red"];
Hàm này trả về phần tử khớ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 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
},
{
...
},
...
]
Trong trường hợp đó, chúng tôi sẽ nhận được 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 điều kiện - mảng.filter
Hàm
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
},
{
...
},
...
]
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
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
// }
// ]
Biến đổi các đối tượng của một mảng - mảng.map
Đây là một cái gì đó chúng ta cần rất thường xuyên. Chuyển đổi 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
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
let sizes = cars.map[car => {
if [car.capacity