Làm thế nào để chuyển đổi bản đồ JavaScript thành mảng đối tượng? – ánh xạ tới mảng javascript

Chuyển đổi Ánh xạ JavaScript thành Mảng đối tượng

Bạn đang xem: ánh xạ tới mảng javascript

Giả sử bạn có đối tượng JavaScript Map sau:

 const myMap = new Map ();
myMap.set ('foo', 1);
myMap.set ('bar', 2);
myMap.set ('baz', 3);

Để chuyển đổi nó thành một mảng đối tượng, chẳng hạn như sau:

 / * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /

Bạn có thể thực hiện bất kỳ thao tác nào sau đây:

Sử dụng Array.from ()

Array.from () hoạt động trên iterables chẳng hạn như Map , bạn có thể chỉ cần chuyển nó làm đối số cho Array.from () . Điều này sẽ dẫn đến một mảng các mảng chứa khóa và giá trị từ Bản đồ . Để minh họa điều này, hãy xem xét ví dụ sau:

 const arr = Array.from (myMap);

console.log (arr); // [['foo', 1], ['bar', 2], ['baz', 3]]

Để chuyển mảng mảng này thành một mảng đối tượng, bạn có thể chỉ cần chuyển một hàm bản đồ làm đối số thứ hai (tùy chọn) cho Array.from () sẽ được gọi trên mọi phần tử của mảng. Ví dụ:

 const arr = Array.from (myMap, function (item) {
    return {key: item [0], value: item [1]}
});

console.log (arr);

/ * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /

Bạn có thể rút ngắn hàm bản đồ thành một lớp lót bằng cách sử dụng; một hàm mũi tên và cú pháp hủy trong đối số hàm gọi lại, như sau:

 const arr = Array.from (myMap, ([key, value]) = & gt; ({key, value}));

console.log (arr);

/ * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /

Sử dụng Toán tử Spread Với Array.prototype.map ()

Bạn có thể sử dụng toán tử spread trên Map để giải nén các phần tử của nó thành một mảng, chẳng hạn như:

Xem Thêm  Việc sử dụng thuộc tính tiêu đề trong Html là gì? - PeterElSt - thuộc tính title trong html là gì

 const arr = [... myMap];

console.log (arr); // [['foo', 1], ['bar', 2], ['baz', 3]]

Như bạn có thể thấy, điều này dẫn đến một mảng các mảng chứa khóa và giá trị từ đối tượng Map . Thay vào đó, để chuyển đổi này thành một mảng đối tượng, bạn có thể gọi phương thức Array.prototype.map () trên mảng kết quả, chẳng hạn theo cách sau:

 const arr = [... myMap] .map (function (item) {
    return {key: item [0], value: item [1]}
});

console.log (arr);

/ * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /

Bạn có thể rút ngắn hàm bản đồ thành một lớp lót bằng cách sử dụng; một hàm mũi tên và cú pháp hủy trong đối số hàm gọi lại, như sau:

 const arr = [... myMap] .map (([key, value]) = & gt; ({key, value}));

console.log (arr);

/ * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /

Lặp lại Bản đồ và thêm phần tử vào mảng

Bạn có thể chỉ cần lặp lại đối tượng Bản đồ bằng bất kỳ phương pháp lặp tương thích nào và thêm từng mục dưới dạng đối tượng vào mảng kết quả.

Ví dụ: bạn có thể sử dụng Map.prototype.forEach () theo cách sau:

 const arr = [];

myMap.forEach ((value, key) = & gt; arr.push ({key, value}));

console.log (arr);

/ * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /

Hoặc, bạn có thể sử dụng vòng lặp for ... of như sau:

 const arr = [];

for (const [key, value] of myMap) {
    arr.push ({key, value});
}

console.log (arr);

/ * [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] * /


Xem Thêm  Elif trong Python là gì? - elif có nghĩa là gì trong python

Xem thêm những thông tin liên quan đến chủ đề ánh xạ tới mảng javascript

JavaScript Array Reduce

  • Tác giả: Programming with Mosh
  • Ngày đăng: 2018-05-15
  • Đánh giá: 4 ⭐ ( 5839 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Array Reduce

    🔥Get the COMPLETE course (83% OFF – LIMITED TIME ONLY): http://bit.ly/2KZea52

    Subscribe for more videos:
    https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1

    Want to learn more from me? Check out my blog and courses:

    http://programmingwithmosh.com
    https://www.facebook.com/programmingwithmosh/
    https://twitter.com/moshhamedani

Mảng ánh xạ JavaScript. Phương thức Map ().

  • Tác giả: ichi.pro
  • Đánh giá: 3 ⭐ ( 3770 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết trước, tôi đã viết về phương thức Filter (), một phương thức mảng gốc tích hợp sẵn đi qua một mảng, chuyển từng phần tử đến một hàm gọi lại được cung cấp và trả về một mảng mới bao gồm các phần tử mà hàm gọi lại trả về giá trị true giá trị. Bây giờ, chúng ta hãy nói về một phương thức mảng tích hợp sẵn rất phổ biến và được sử dụng thường xuyên khác là Map ().

Mảng (Array) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 3764 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng (Array) trong JavaScript – Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Xoay các phần tử trong một mảng trong JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8131 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Phiên bản chung chung, an toàn về loại làm thay đổi mảng: Array.prototype.rotate = (function() {…

Chuyển đổi mảng điểm trong JavaScript

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 6333 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sử dụng phương pháp mảng bản đồ để biến đổi mảng điểm, phản ánh và xoay chúng. Ví dụ: bạn phản ánh một hình dạng đơn giản qua trục y, như được hiển thị bên dưới. Đại…

Các hàm: map, filter, reduce trong Javascript

  • Tác giả: kipalog.com
  • Đánh giá: 5 ⭐ ( 9416 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Map, filter và reduce là các hàm được xử dụng phổ biến trong Js để xử lý các yêu cầu về mảng. Tuy nhiên, đối với các bạn mới thậm chí là với những …

Đối tượng Form trong JavaScript

  • Tác giả: voer.edu.vn
  • Đánh giá: 5 ⭐ ( 8020 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Form trong JavaScript (giáo trình – tài liệu – học liệu từ VOER)

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  list-style-type - CSS: Cascading Style Sheets - loại kiểu danh sách trong css là gì