Hướng dẫn how can we use array of objects in javascript? - làm cách nào chúng ta có thể sử dụng mảng đối tượng trong javascript?

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:

{
  "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. 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:

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

Nhưng nếu chúng ta muốn kích thước xe quá? Trong trường hợp đó, chúng tôi có thể tăng cường đối tượng cho một thuộc tính mới

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);

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ột mảng bằng một thuộc tính - mảng.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 một 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 tôi muốn sắp xếp những chiếc xe dựa trên năng lực 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 luôn thêm trường hợp cho 0 khi giá trị so sánh của cả hai đối tượng là giống nhau để tránh các giao dịch hoán đổi không cần thiết.

Kiểm tra xem các đối tượng trong Array đáp ứng điều kiện - Array. Mọi người, Array.includes

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 hơi không? Có phải tất cả những chiếc xe có khả năng vận chuyển ít nhất 4 người? Hoặc nhiều hơn trung tâm web: Có một sản phẩm cụ thể trong giỏ hàng khô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ớ hà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);

Bản tóm tắt

Trong bài viết này, chúng tôi đã trải qua các chức năng cơ bản giúp bạn tạo, thao tác, biến đổi và lặp qua các mảng của các đối tượng. Họ nên bao gồm hầu hết các trường hợp bạn sẽ vấp ngã.

Nếu bạn có một 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 tham chiếu của 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 :-)