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 để tìm những cách cụ thể để thao tác với 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, thì bạn đã từng 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ư 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à màu sắc của ô tô, mỗi đối tượng sau đó đại diện cho một chiếc ô tô 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 như thế này 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 mã không thể duy trì được.
Tạo một mảng các đối tượng
Nhưng chúng ta hãy trở lại với ô tô. Cùng xem qua bộ ảnh xe độ này nhé:
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
},
{
...
},
...
]
Mảng đối tượng không phải lúc nào cũng giống nhau. Chúng ta hầu như 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 đã 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 Array.unshift.
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date('2016-05-02'),
"capacity": 2
}
cars.unshift(car);
Thêm đố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 đối tượng mới vào 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. Xem ra cho 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 chiếc Volkswagen Cabrio màu đỏ vào 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
Để 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 các đối tượng? Lý do tôi 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 tôi 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ự triển khai logic trong một chu trình chung. Hãy xem qua.
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ô 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 ta 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 khớp với một điều kiện – Array.filter
Các Array.find hàm chỉ trả về một đối tượng. Nếu chúng ta muốn lấy tất cả các ô tô màu đỏ, chúng ta cần 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à một cái gì đó chúng ta cần rất thường xuyên. Biế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 Array.map. Giả sử chúng ta 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 một thuộc tính vào mọi đối tượng của một mảng – Array.forEach
Nhưng nếu chúng ta cũng muốn kích thước xe thì sao? Trong trường hợp đó, chúng ta có thể tăng cường đối tượng cho một thuộc tính mới size. Đây là một trường hợp sử dụng tốt cho Array.forEach chức năng.
cars.forEach(car => {
car['size'] = "large";
if (car.capacity <= 5){
car['size'] = "medium";
}
if (car.capacity <= 3){
car['size'] = "small";
}
});
Sắp xếp mảng theo thuộc tính – Array.sort
Khi chúng ta hoàn thành việc chuyển đổi các đối tượng, chúng ta thường cần sắp xếp chúng theo cách này hay cách khác.
Thông thường, việc sắp xếp dựa trên giá trị của thuộc tính mà mọi đối tượng có. Chúng ta có thể sử dụng Array.sort nhưng chúng ta cần cung cấp một hàm xác định cơ chế sắp xếp.
Giả sử chúng ta muốn sắp xếp những chiếc xe dựa trên sức chứa của chúng theo thứ tự giảm dần.
let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (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
// },
// ...
// ]
Các Array.sort so sánh hai đối tượng và đặt đối tượng đầu tiên vào vị trí thứ hai nếu kết quả của chức năng sắp xếp là dương. Vì vậy, bạn có thể xem chức năng sắp xếp như thể nó là một câu hỏi: Có nên đặt đối tượng đầu tiên ở vị trí thứ hai không?
Đảm bảo luôn thêm trường hợp bằng 0 khi giá trị được so sánh của cả hai đối tượng là như nhau để tránh hoán đổi không cần thiết.
Kiểm tra xem các đối tượng trong mảng có đáp ứng một điều kiện hay không – Array.every, Array.includes
Array.every và Array.some trở nên hữu ích khi chúng ta chỉ cần kiểm tra từng đối tượng cho một điều kiện cụ thể.
Chúng ta có một chiếc cabrio màu đỏ trong danh sách xe ô tô không? Có phải tất cả các ô tô đều có khả năng chở ít nhất 4 người không? Hoặc tập trung vào web hơn: Có sản phẩm cụ thể nào trong giỏ hàng không?
cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true
cars.every(car => car.capacity >= 4);
// output: false
Bạn có thể nhớ chức năng Array.includes tương tự như Array.somenhưng chỉ hoạt động đối với các kiểu nguyên thủy.
Tóm lược
Trong bài viết này, chúng ta đã xem qua các hàm cơ bản giúp bạn tạo, thao tác, chuyển đổi và lặp qua các mảng đối tượng. Họ sẽ bao gồm hầu hết các trường hợp bạn sẽ vấp phải.
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 về trường W3.
Hoặc Hãy liên lạc với tôi và tôi sẽ chuẩn bị một bài viết khác 🙂
