[JS] Liệu bạn có biết về Array-Like Objects?

LAMP Oct 24, 2020

Giới thiệu

Trong bài trước, mình có nhắc với các bạn về câu chuyện "Phá vỡ quy luật bắc cầu" trong kiểu dữ liệu: https://tech.miichisoft.net/so-sanh-kieu-du-lieu-pha-vo-quy-luat-bac-cau/ để nói lên một điều rằng JS là một ngôn ngữ bậc nhất về những điều thần kì mà mỗi khi dân Dev chúng ta tìm hiểu về nó phải thốt lên WTF �🙈🙈🙈 Còn trong bài viết này, mình sẽ đem đến một khái niệm mà mình đoán là khoảng 90% các bạn mới học JS chưa biết, đó là Array-Like Objects.

Chỉ khoảng một phút đọc thôi, các bạn có thể bổ sung ngay cho mình một khái niệm hay nói đúng ra nó là một skill rất là xịn về JS đó nhaaaa...

Vậy Array-Like Objects là gì?

Hiểu một cách đơn giản thì cái tên nói lên tất cả 😎 Chính xác là như vậy!

Array-Like Objects là một Object mà nó giống một Array nhưng không phải là Array. Ở đây chúng ta nên tập trung hai khía cạnh, thứ nhất là nó trông giống một Array. Và thứ hai, nó thực sự không phải là một Array.

Nghe hoang mang như triết học ấy nhỉ 😌 nhưng thật ra thì dễ hiểu lắm các bạn ơi. Cùng đi vào phân tích từng khía cạnh nhé!

Vì sao nói "Array-Like Objects giống như một Array" ?

Ví dụ ta có một Array-like object:

const animals = {
  0:'Dog',
  1:'Cat',
  2:'Mouse',
  length: 3
}

Khi sử dụng hàm sau:

function testArrayLikeObj()
{
	console.log(animals.length,animals[1])
}

Kết quả trả về "3  Cat". Điều đó cho ta thấy Array-Like Objects giống một array vì nó cho phép chúng ta truy xuất vào index và length như một array bình thường.

Vậy tại sao Array-Like Objects không phải là một Array ?

Nếu như nó là một array thì chắc chắn sẽ sử dụng được các method của array đúng không ? Chúng ta cùng đi vào xem ví dụ sau nhé:

let cat = animals.find(function(animal) {
  return animal == "Cat"
})

Wow, kết là trả về lại là lỗi "Uncaught TypeError: animals.find is not a function". Điều đó cho chúng ta thấy nó không phải là một Array.

Hết 1 phút, vậy là các bạn đã hiểu khi nào một object được gọi là "Array-Like Objects" phải không?  Có bạn nào đặt câu hỏi rằng "Liệu Array-Like Objects có thể convert được thành một Array không? " thì mình xin trả lời rằng có nhé! Nếu các bạn tò mò thì nán lại thêm chút nữa để đọc tiếp nha!

Câu trả lời là có 2 cách để convert Array-Like Objects thành một Array.

  1. Trong ES6, convert một array-like object về array bằng Array.from(animals)
  2. Từ ES5 trở xuống, ta có thể sử dụng Array.prototype.slice.call(animals)

Lời kết

Vậy là chúng ta đã cùng nhau tìm hiểu thêm được một khái niệm gọi là "Array-Like Objects" trong một thời gian ngắn ngủi mà mình đúc kết lại. Tuy nhiên, bài viết chỉ mang tính tham khảo vì đã có rất nhiều bài viết đi sâu hơn về khái niệm này nên mình sẽ để phía dưới để các bạn tham khảo thêm nha!

Tài liệu tham khảo

  1. https://medium.com/@sayes2x/what-is-an-array-like-object-f5dc3d4ab3f6
  2. https://dev.to/dailydotdev/why-do-you-need-to-know-about-array-like-objects-2kga
  3. https://viblo.asia/p/js-nhung-dieu-ky-la-voi-array-XL6lAXkrZek

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.