Map 函數：一對一資料轉換
有時需要修改資料以傳回其一部分或執行一致的操作，這就是 映射。
| 方法 | 返回值 | 一对一 | 对所有元素运行 |
|---|---|---|---|
| .map((value, index, array) => *) | 数组 | 是 | 是 |
每當需要為每個輸入產生一個輸出時，map 通常是首選方法。它接受一個 映射 函數，該函數對每個記錄進行操作。映射函數傳回的值將出現在新數組中，其位置與原始值相同。
從 for 迴圈到 .map()
.map() 與基本的 for 迴圈完美匹配。
例如，需要將以下數組中的所有元素轉換為大寫字母：
<code class="language-javascript">const data = ['a', 'b', 'c', 'd'];</code>
以下是幾種實作方式：
<code class="language-javascript">// 旧的命令式方法 - for 循环
function mapToUpper(data) {
const newData = new Array(data.length);
for (let i = 0; i < data.length; i++) {
newData[i] = data[i].toUpperCase();
}
return newData;
}
// 新的命令式方法 - for...of 循环
function mapToUpper(data) {
const newData = [];
for (let value of data) {
newData.push(value.toUpperCase());
}
return newData;
}
// 新的声明式方法 - .map()
const mapToUpper = (data) => data.map(value => value.toUpperCase());</code>一些變體，例如 `const newData = new Array(data.length)` 與 `const newData = []`，並非由不同的循環類型強制要求，而是代表了一些歷史上的編碼風格差異。
`.map()` 的常見用途包括從物件中取得值或對資料執行一致的變更或 *轉換*。
通常需要從每個較大的記錄中獲取一條資訊。 `map` 正是為此而設計的。
<code class="language-javascript">const data = [{
name: 'Alec Berg',
roles: ['Creator', 'Executive Producer'],
}, {
name: 'Bill Hader',
roles: ['Creator', 'Executive Producer', 'Actor', 'Director'],
}];
// 只需要姓名
data.map((entry) => entry.name);
// [ 'Alec Berg', 'Bill Hader' ]</code>如果需要對訂單提供員工折扣，`map` 也能做到！
<code class="language-javascript">const cart = [{
itemId: 12345,
name: 'shoes',
price: 70.00,
},{
itemId: 54321,
name: 'shirt',
price: 15.25,
}];
// 应用折扣
const applyDiscount = (discountPercent, order) => {
// 首先，获取“剩余”金额。
// 如果折扣为 10%，则乘数为 0.9
const multiplier = 1 - (discountPercent / 100);
// 为每个项目创建一个新条目，其中包含折扣后的价格。
// 我们将包含旧价格以供参考。
return order.map((item) => ({
...item,
price: item.price * multiplier,
originalPrice: item.price,
}));
};</code>此處未給出輸出結果。如果您想自己嘗試，建議將其貼上到瀏覽器控制台或 RunJS 等工具中，我使用該工具編寫和測試這些範例。
這是資料轉換的一個特殊版本。從「無資訊」開始，但擁有陣列此行為為每個條目提供了 *索引*，並且可以透過新增 1 將索引（從零開始）轉換為計數數字。
不需要使用 `value`（提供給 *映射* 函數的第一個參數），但必須為其提供一個名稱才能存取第二個參數。底線字元是一個有效的變數名，通常用於表示不需要的值，就像在本例中一樣。
<code class="language-javascript">const getCountingNumbers = (upTo) => new Array(upTo)
// 新数组是“稀疏的”，需要值才能映射
.fill('')
// 第二个参数是数组索引。
.map((_, index) => index + 1);
getCountingNumbers(5);
// [ 1, 2, 3, 4, 5 ]</code>雖然這是一個 `.map()` 的範例，但較新的函數也可以執行此操作：`Array.from()`。
<code class="language-javascript">const getCountingNumbers = (upTo) => Array.from(
// 通过提供具有长度的对象来“伪造”类似数组的对象
{ length: upTo },
// 使用与 .map() 相同的映射函数。
(_, index) => index + 1
);</code>在使用 `.map()` 時討論另一種方法似乎很奇怪，但在幕後，`Array.from()` 至少會為上面的範例呼叫 `.map()`。
希望這能幫助您了解如何使用 `.map()`。資料轉換是許多工具和產業的核心，因此 `.map()` 是許多專案中的關鍵部分。
如果您對 `.map()` 有任何問題或意見，我很樂意討論！
以上是JavaScript 陣列：地圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
