Các thuộc tính đối tượng JavaScript có thứ tự nội tại không? . Map
Ảnh của Samantha Lam trên BaptCác khóa đối tượng JavaScript có theo thứ tự không?
Các đối tượng JavaScript là một công cụ hấp dẫn và hữu ích. Các đối tượng đóng vai trò là triển khai chính của JavaScript đối với “bản đồ băm” [còn được gọi là “bảng băm”], liên kết các khóa đối tượng [chuỗi] với các giá trị được chỉ định thuộc bất kỳ loại nào
“JavaScript được thiết kế trên một mô hình dựa trên đối tượng đơn giản. Đối tượng là tập hợp các thuộc tính và thuộc tính là liên kết giữa tên [hoặc khóa] và giá trị. ” — Tài liệu MDN
Mọi thứ trong JavaScript về mặt kỹ thuật đều là một đối tượng, bao gồm cả “các hàm hạng nhất” của nó. ” Điều đó có nghĩa là bạn có thể sử dụng cú pháp dấu chấm [_______2_______] để truy cập các thuộc tính của bất kỳ biến nào, theo kế thừa nguyên mẫu. Kết quả là bạn có thể gọi .length
trên một chuỗi ký tự. "hi".length // 2
Tuy nhiên, các đối tượng JavaScript có một lỗ hổng nghiêm trọng. chúng không đúng , theo nghĩa duy trì “thứ tự chèn. ” Nói cách khác, các đối tượng không nhớ thứ tự các khóa đối tượng được thêm vào
So sánh khóa đối tượng JavaScript với mảng
Để minh họa rằng các khóa đối tượng JavaScript không được sắp xếp theo thứ tự, hãy so sánh chúng với một mảng. một danh sách đơn giản của các mục trong một thứ tự cụ thể
Mảng JavaScript có thứ tự xác định từ chỉ mục 0 đến mục cuối cùng trong danh sách và các mục được thêm vào mảng bằng cách sử dụng .push[]
giữ nguyên thứ tự chúng được thêm vào. Đó là ý nghĩa của thuật ngữ “thứ tự chèn. ”
Sự khác biệt tùy thuộc vào việc liệu các khóa đối tượng có được đảm bảo theo đúng thứ tự hay không khi bạn lặp lại [có nghĩa là vòng lặp] qua chúng. Mảng có thứ tự được đảm bảo, vì vậy chúng tôi gọi chúng là
Với mảng và các dạng lặp khác [như chuỗi, cho phép bạn lặp theo ký tự], bạn có thể sử dụng vòng lặp for...of
để truy cập từng mục
Với các đối tượng, bạn phải sử dụng vòng lặp for...in
để thay thế. Vì các đối tượng không có khóa đối tượng được sắp xếp, nên bạn không thể sử dụng for...of
“Một vòng lặp
for...in
lặp lại các thuộc tính của một đối tượng theo thứ tự tùy ý. ” — Tài liệu MDN
Ngoài ra, khi sử dụng for...in
, bạn có thể kết thúc với các khóa đối tượng kế thừa hiển thị trong vòng lặp của mình trừ khi bạn thực hiện một số kiểm tra bổ sung, do kế thừa từ chuỗi nguyên mẫu của JavaScript
“Nếu bạn chỉ muốn xem xét các thuộc tính gắn liền với chính đối tượng chứ không phải nguyên mẫu của nó, hãy sử dụng
Map
1 hoặc thực hiện kiểm traMap
2 [cũng có thể sử dụng ______1_______3]. ” — Tài liệu MDN
Nhược điểm khác của vòng lặp for...in
là các khóa đối tượng được định nghĩa là các đối tượng Map
5 không được lặp lại, chỉ những đối tượng được định nghĩa là chuỗi. Mặc dù đó có thể là điều bạn muốn, nhưng cũng có thể không - bạn có thể muốn lặp qua mọi thuộc tính đối tượng bất kể nó được xác định như thế nào
Bạn thực sự có thể truy cập các khóa đối tượng dưới dạng một đối tượng có thể lặp lại bằng cách sử dụng phương thức Map
6, cho phép bạn sử dụng vòng lặp for...of
, nhưng thứ tự của các khóa đối tượng kết quả không được đảm bảo
“Phương thức
Map
8 trả về một mảng gồm các tên thuộc tính có thể đếm được của một đối tượng nhất định, được lặp lại theo cùng thứ tự mà một vòng lặp thông thường sẽ thực hiện. ” — Tài liệu MDN
Hành vi giống nhau đối với Map
9 hoặc .
0 — thứ tự của các thuộc tính đối tượng có thể thay đổi theo thứ tự chèn
Một Map
Đã đặt hàng khóa đối tượng
Nếu bạn thực sự cần các khóa đối tượng của mình được sắp xếp theo thứ tự, thì hãy sử dụng đối tượng .
2, được giới thiệu trong ES6 [ECMAScript 2015]
Một Map
hoạt động giống như một đối tượng thông thường, ngoại trừ bạn sẽ cần gọi .
4 [.
5], .
6 và .
7 thay vì cú pháp dấu chấm thông thường .
hoặc bộ truy cập thuộc tính dấu ngoặc .
9
Bạn cũng sẽ cần khai báo rõ ràng Map
bằng cách sử dụng từ khóa .length
1 cùng với hàm tạo .length
2, .length
3, thay vì ký hiệu chữ đối tượng mà chúng ta thường sử dụng cho các đối tượng [.length
4]
Bạn có thể chuyển đổi một đối tượng thành một Map
không? . Nếu bạn cần các khóa đối tượng được sắp xếp cho một đối tượng JavaScript, thì bạn nên bắt đầu bằng cách sử dụng Map
ngay từ đầu
Đây là một ví dụ mã so sánh hành vi của một đối tượng điển hình với hành vi của một Map
khi có liên quan đến các khóa đối tượng được sắp xếp
Xem mã thô dưới dạng GitHub Gist
Như chúng ta có thể thấy từ ví dụ, các khóa đối tượng dường như được sắp xếp theo thứ tự khi sử dụng for...in
hoặc .length
9, nhưng sự xuất hiện có thể gây hiểu nhầm — thứ tự của các đối tượng đó không được đảm bảo trong JavaScript
Việc sử dụng một đối tượng Map
cũng linh hoạt hơn rất nhiều so với các đối tượng JavaScript truyền thống, vì bạn có thể sử dụng bất kỳ loại nào làm khóa cho một Map
. Các đối tượng bình thường chỉ chấp nhận các chuỗi [và các đối tượng "hi".length // 2
2] làm khóa
Tại sao các khóa đối tượng không được đặt hàng?
Thực sự khá thú vị khi kiểm tra lý do tại sao JavaScript thiếu các khóa đối tượng được sắp xếp. Chôn trong Tài liệu MDN, chúng tôi tìm thấy những điều sau đây
“Mặc dù ECMAScript làm cho thứ tự lặp lại của các đối tượng phụ thuộc vào việc triển khai, nhưng có vẻ như tất cả các trình duyệt chính đều hỗ trợ thứ tự lặp lại dựa trên thuộc tính được thêm sớm nhất đến trước [ít nhất là đối với các thuộc tính không có trên nguyên mẫu]
Tuy nhiên, trong trường hợp của Internet Explorer, khi một người sử dụng
"hi".length // 2
3 trên một thuộc tính, một số hành vi khó hiểu sẽ dẫn đến việc ngăn các trình duyệt khác sử dụng các đối tượng đơn giản như ký tự đối tượng làm mảng kết hợp có thứ tựTrong Explorer, mặc dù giá trị thuộc tính thực sự được đặt thành
"hi".length // 2
4, nhưng nếu sau đó một người thêm lại thuộc tính có cùng tên, thì thuộc tính đó sẽ được lặp lại ở vị trí cũ của nó--không phải ở cuối trình tự lặp lại như người ta có thể mong đợi sau khi có . ” —
Có hai lý do khiến khóa đối tượng không được sắp xếp theo thứ tự trong JavaScript. Đầu tiên, đặc tả ECMAScript cho phép thứ tự lặp lại của các đối tượng thay đổi giữa các lần triển khai. Thứ hai, Internet Explorer có một triển khai kỳ lạ về cách thức hoạt động của toán tử "hi".length // 2
5 trên các khóa đối tượng
Bạn có thể tạo một số lựa chọn thay thế cho các đối tượng JavaScript thông thường nếu bạn cần một “” với các khóa đối tượng được sắp xếp
“Nếu bạn muốn sử dụng một mảng kết hợp có thứ tự trong môi trường nhiều trình duyệt, hãy sử dụng một đối tượng
.
2 nếu có hoặc mô phỏng cấu trúc này bằng hai mảng riêng biệt [một cho các khóa và một cho các giá trị] hoặc tạo một mảng gồm . ” —
Tuy nhiên, lời khuyên của tôi là hãy tự cứu mình khỏi mọi rắc rối đó và chỉ cần sử dụng Map
. Rốt cuộc, bây giờ chúng ta có đối tượng Map
trong JavaScript hiện đại hoặc chúng ta có thể lấy một đối tượng thông qua polyfill bằng công cụ như Babel
Điều đó có nghĩa là sử dụng một đối tượng ES6 Map
sẽ là giải pháp tốt nhất cho các khóa đối tượng được sắp xếp trong JavaScript
Mã hóa vui vẻ. 💮.push[]
0💮
Tiến sĩ. Derek Austin là tác giả của Lập trình nghề nghiệp. Làm thế nào bạn có thể trở thành một lập trình viên có thân hình 6 con số thành công trong 6 tháng, hiện đã có trên Amazon