資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 中將 Map 的鍵轉換為陣列？
在 JavaScript 中，將 Map 的鍵轉換為陣列有多種方法。可以使用 `map.keys()` 方法訪問 Map 中的鍵，然後應用 `Array.from()` 方法建立訪問鍵的陣列。也可以使用擴充套件運算子代替 `Array.from()` 方法來建立鍵陣列。
給定一個 JavaScript Map，任務是將 Map 的鍵轉換為陣列。以下是一個示例：
給定的 Map −
{ 1: "India", 2: "Russia", 3: "USA", 4: "Japan", 5: "UK" };
生成的陣列 −
[1, 2, 3, 4, 5]
實現此目標有多種方法。其中一些是：
使用 `Array.from` 和 `Map.keys()` 方法
使用擴充套件運算子和 `Map.keys()` 方法
使用 `for...of` 迴圈
使用 `Array.from()` 和 `Map.keys()` 方法
`Array.from()` 方法從任何可迭代物件返回一個數組。`Map.keys` 方法用於以可迭代形式返回 Map 的所有鍵。要將 Map 的鍵轉換為陣列，請按照以下步驟操作：
使用 `Map.keys()` 方法獲取所有 Map 鍵。它返回一個包含 Map 鍵的 `MapIterator` 物件。
使用 `Array.from()` 從 `MapIterator` 中提取 Map 鍵。它返回一個包含所有 Map 鍵的陣列。
示例
在此示例中，我們有一個 Map，其鍵是數字，值是國家名稱。我們使用 `Array.from` 方法從 Map 中提取所有鍵（數字）。
<html>
<head>
<title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
<h2>Convert Map keys to an array using Array.from method</h2>
<p>Click the following button to get the Keys from the map</p>
<button id="btn" onclick="convert( )" > Click Here </button> <br>
<p id="result"> </p>
<script>
function convert( ){
let result = document.getElementById("result")
let mp = new Map( );
mp.set(1, "India");
mp.set(2, "Russia");
mp.set(3, "USA");
mp.set(4, "Japan");
mp.set(5, "UK");
let keys;
keys = Array.from( mp.keys( ) );
result.innerText = "Converted Array : [ " + keys + " ]";
}
</script>
</body>
</html>
使用擴充套件運算子和 `Map.keys()` 方法
JavaScript 擴充套件運算子允許我們將陣列擴充套件為單個數組元素。`Map.keys` 方法用於以可迭代形式返回 Map 的所有鍵。要將 Map 的鍵轉換為陣列，請按照以下步驟操作：
使用 `Map.keys()` 方法獲取所有 Map 鍵。它返回一個包含 Map 鍵的 `MapIterator` 物件。
使用擴充套件運算子從 `MapIterator` 中提取 Map 鍵。它返回一個包含所有 Map 鍵的陣列。
示例
在此示例中，我們有一個 Map，其鍵是數字，值是國家名稱。我們使用擴充套件運算子從 Map 中提取所有鍵（數字）。
<html>
<head>
<title>Example- convert Map keys to an array in JavaScript</title>
</head>
<body>
<h2>Convert Map keys to an array using Spread Operator</h2>
<p>Click the following button to get the Keys from the map</p>
<button id="btn" onclick="convert( )" > Click Here </button><br>
<p id="result"> </p>
<script>
function convert(){
let result = document.getElementById("result")
let mp = new Map();
mp.set(1, "India");
mp.set(2, "Russia");
mp.set(3, "USA");
mp.set(4, "Japan");
mp.set(5, "UK");
let keys;
keys = [ ...mp.keys() ];
result.innerText = "Converted Array : [ " + keys + " ]";
}
</script>
</body>
</html>
使用 `for...of` 迴圈
`for...of` 語句迴圈遍歷可迭代物件的 value。`Map.keys` 方法用於以可迭代形式返回 Map 的所有鍵。要將 Map 的鍵轉換為陣列，請按照以下步驟操作：
建立一個空陣列來儲存鍵。
使用 `for...of` 迴圈迭代所有 Map 鍵（從 `Map.keys()` 方法獲取）。
在每次迭代中，將該鍵推入空陣列。
示例
<html>
<head>
<title>Example -convert Map keys to an array in JavaScript</title>
</head>
<body>
<h2>Convert Map keys to an array using for...of loop</h2>
<p>Click the following button to get the Keys from the map</p>
<button id="btn" onclick="convert( )" > Click Here </button> <br>
<p id="result"> </p>
<script>
function convert(){
let result = document.getElementById("result")
let mp = new Map();
mp.set(1, "India");
mp.set(2, "Russia");
mp.set(3, "USA");
mp.set(4, "Japan");
mp.set(5, "UK");
let keys = [];
for(let key of mp.keys()){
keys.push(key)
}
result.innerText = "Converted Array : [ " + keys + " ]";
}
</script>
</body>
</html>
13K+ 次瀏覽
