Chuyển đổi giá trị bản đồ thành mảng javascript

Để convert Map Values ​​thành Array trong JavaScript có 3 phương thức chính là 1 hoặc 2 liner code. Chúng sẽ trả về các giá trị trong một mảng theo cùng một thứ tự trong quá trình tạo

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
5

Phương pháp chuyển đổi giá trị bản đồ thành mảng

  • Phương pháp
    const ageMap = new Map([
      ['Person1', 11],
      ['Person2', 33],
      [10000001, 11]
    ]);
    
    const result = [...ageMap.values()];
    
    console.log(result);
    // [11, 33, 11]
    6
  • Toán tử trải rộng/Cú pháp (_______27) Phương thức
  • Phương pháp
    const ageMap = new Map([
      ['Person1', 11],
      ['Person2', 33],
      [10000001, 11]
    ]);
    
    const result = [...ageMap.values()];
    
    console.log(result);
    // [11, 33, 11]
    8

2 phương pháp đầu tiên sẽ sử dụng Bản đồ. nguyên mẫu. values() từ đối tượng tích hợp Map để lấy một đối tượng iterator giữ các giá trị theo thứ tự chèn

Phương pháp
const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
6

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [];
ageMap.forEach((value, key) => result.push(value));

console.log(result);
// [11, 33, 11]
0 là một phương thức tĩnh sẽ tạo một mảng mới sao chép nông các đối tượng từ bất kỳ đối tượng có thể lặp nào bao gồm cả đối tượng trả về từ Bản đồ. nguyên mẫu. giá trị(). Phương pháp này dễ sử dụng nếu tất cả các kiểu dữ liệu của Giá trị là nguyên thủy

Trong ví dụ bên dưới, chúng ta sẽ truyền vào các giá trị có thể lặp lại, sau đó kết quả sẽ là một mảng mới chứa tất cả các giá trị theo cùng một thứ tự

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = Array.from(ageMap.values());

console.log(result);
// [11, 33, 11]

Toán tử trải rộng/Cú pháp (_______27) Phương thức

Dựa trên tài liệu chính thức của Cú pháp trải rộng, chúng ta có thể thấy rằng nó có thể mở rộng bất kỳ lần lặp nào. Như vậy, chúng ta có thể tận dụng cơ chế của nó để trải ra thành một đối tượng mảng

Trong ví dụ bên dưới, chúng tôi trải đối tượng có thể lặp lại giá trị

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
5 thành một mảng

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]

Phương pháp
const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
8

Từ hướng dẫn này, chúng tôi biết rằng

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
2 sẽ không trả về bất kỳ kết quả nào. Do đó, chúng ta sẽ tạo một mảng mới trước khi thực hiện phương thức

Trong ví dụ bên dưới, chúng ta sẽ đẩy dữ liệu trong mỗi lần lặp vào mảng kết quả

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [];
ageMap.forEach((value, key) => result.push(value));

console.log(result);
// [11, 33, 11]

Phần kết luận

Chúng tôi xem xét 3 phương pháp chuyển đổi Giá trị bản đồ thành mảng trong JavaScript

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
6 và toán tử trải rộng là cách dễ thực hiện nhất khi kiểu dữ liệu bên trong Giá trị bản đồ đều là kiểu nguyên thủy

Phương pháp

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
8 sẽ tốt nếu bạn muốn thực hiện một số thao tác như sao chép sâu hoặc thao tác khác sau mỗi lần lặp lại với giá trị

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
1 hoạt động trên các iterable chẳng hạn như
/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
0, nên bạn chỉ cần chuyển nó làm đối số cho
/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
1. Điều này sẽ dẫn đến một mảng các mảng chứa khóa và giá trị từ
/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
0. Để minh họa điều này, hãy xem xét ví dụ sau

________số 8

Để chuyển đổi mảng các mảng này thành một mảng các đối tượng, bạn chỉ cần chuyển một hàm bản đồ làm đối số thứ hai (tùy chọn) cho

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
1, hàm này sẽ được gọi trên mọi phần tử của mảng. Ví dụ.

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
0

Bạn có thể rút ngắn chức năng bản đồ thành một lớp lót bằng cách sử dụng;

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
1

Sử dụng toán tử trải rộng với /* [ {key: 'foo', value: 1}, {key: 'bar': value: 2}, {key: 'baz': value: 3}, ] */ 2

Bạn có thể sử dụng toán tử trải rộng trên

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
0 để giải nén các phần tử của nó thành một mảng, chẳng hạn như vậy

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
4

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

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
0. Thay vào đó, để chuyển đổi cái này thành một mảng các đối tượng, bạn có thể gọi phương thức
/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
2 trên mảng kết quả, chẳng hạn như theo cách sau

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
7

Bạn có thể rút ngắn chức năng bản đồ thành một lớp lót bằng cách sử dụng;

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
8

Lặp lại trên /* [ {key: 'foo', value: 1}, {key: 'bar': value: 2}, {key: 'baz': value: 3}, ] */ 0 và thêm các phần tử vào mảng

Bạn có thể chỉ cần lặp lại đối tượng

/* [
    {key: 'foo', value: 1},
    {key: 'bar': value: 2},
    {key: 'baz': value: 3},
] */
0 bằng bất kỳ phương pháp lặp tương thích nào và thêm từng mục làm đối tượng vào mảng kết quả

Ví dụ: bạn có thể sử dụng

const arr = Array.from(myMap);

console.log(arr); // [['foo', 1], ['bar', 2], ['baz', 3]]
6 theo cách sau

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
2

Hoặc, cách khác, bạn có thể sử dụng vòng lặp

const arr = Array.from(myMap);

console.log(arr); // [['foo', 1], ['bar', 2], ['baz', 3]]
7 như vậy

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap.values()];

console.log(result);
// [11, 33, 11]
4

Hy vọng bạn tìm thấy bài viết này hữu ích. Nó được xuất bản vào ngày 29 tháng 9 năm 2021. Hãy thể hiện tình yêu và sự ủng hộ của bạn bằng cách

Làm cách nào để tạo mảng đối tượng từ bản đồ trong JavaScript?

map() tạo một mảng mới từ việc gọi một hàm cho mọi phần tử mảng . map() gọi một hàm một lần cho mỗi phần tử trong một mảng. map() không thực thi chức năng cho các phần tử trống. map() không thay đổi mảng ban đầu.

Làm cách nào để lấy tất cả các giá trị từ bản đồ trong JavaScript?

JavaScript Bản đồ. Phương thức entries() được sử dụng để trả về một đối tượng iterator chứa tất cả các cặp [key, value] của mỗi thành phần của bản đồ. Nó trả về các cặp [key, value] của tất cả các thành phần của bản đồ theo thứ tự chèn của chúng.

Bản đồ JavaScript có trả về một mảng không?

Phương thức map() trả về một mảng hoàn toàn mới với các phần tử đã chuyển đổi và cùng một lượng dữ liệu . Trong trường hợp forEach() , ngay cả khi nó trả về undefined , nó sẽ thay đổi mảng ban đầu bằng lệnh gọi lại.

Làm cách nào để lấy tất cả các giá trị từ bản đồ trong TypeScript?

Chúng tôi sử dụng phương thức get() của bản đồ trong TypeScript để lấy giá trị cho một khóa trong bản đồ. Bản đồ là cấu trúc dữ liệu cặp khóa-giá trị.