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, 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ư thế này
{
"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 xe ô 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 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ộ dàn 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 của các đối tượng không giống nhau mọi lúc. 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 đã tồn tại
Thêm một đối tượng mới khi bắt đầu - Mảng. không dịch chuyển
Để 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 đối tượng mới vào cuối - Mảng. đẩy
Để 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 đối tượng mới vào giữa - Mảng. mối nối
Để thêm một đối tượng vào 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 chiếc Volkswagen Cabrio màu đỏ vào vị trí thứ năm, chúng tôi sẽ sử dụng
Lặp qua một mảng các đối tượng
Cho 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 mảng các đối tượng?
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. chúng ta hãy xem
Tìm đối tượng trong mảng theo giá trị của nó - Array. tìm thấy
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
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 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
},
{
...
},
...
]
Hàm này trả về phần tử phù hợp đầu tiên
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ũ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ẽ lấy chiếc xe cuối cùng trong danh sách
Lấy nhiều mục từ một mảng khớp với một điều kiện - Array. lọc
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 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
},
{
...
},
...
]
Biến đổi các đối tượng của mảng - Array. bản đồ
Đây là thứ 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à công việc dành cho
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
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ũng có thể tạo một đối tượng mới nếu chúng ta cần thêm 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
},
{
...
},
...
]
Thêm thuộc tính vào mọi đối tượng của mảng - Array. cho mỗi
Nhưng nếu chúng ta cũng muốn kích thước xe thì sao? . Đây là một trường hợp sử dụng tốt cho chức năng
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
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
},
{
...
},
...
]
Sắp xếp mảng theo thuộc tính - Array. loại
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 hàm
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
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 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];
Đả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ó thỏa mãn điều kiện hay không - Array. mọi, Mảng. bao gồm
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
Chúng ta có một chiếc cabrio màu đỏ trong danh sách xe ô tô không? . Có một sản phẩm cụ thể trong giỏ hà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
},
{
...
},
...
]
Bạn có thể nhớ chức năng
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
let car = {
"color": "red",
"type": "cabrio",
"registration": new Date['2016-05-02'],
"capacity": 2
}
cars.unshift[car];
Tóm lược
Trong bài viết này, chúng tôi đã giới thiệu các hàm cơ bản giúp bạn tạo, thao tác, biến đổi và lặp qua các mảng đối tượng. Họ nên 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 trường học 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. -]
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển Jamstack, người tạo và truyền phát video trên YouTube, nhà phát triển nhà phát triển @Kontent, người đam mê in 3D, người chơi AoE2 tồi, người yêu German Shepherd
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu