JavaScript >> Javascript 文檔 >  >> Tags >> map

JavaScript 的 map() 方法指南

簡介

遍歷序列可用於訪問和顯示序列的元素 - 但通常是對每個或部分元素運行操作。

注意: 將函數應用於序列的每個元素,並將轉換後的結果返回到新序列中稱為 映射 ,其中原始序列的每個元素,Ex , 映射到新序列的潛在轉換元素 Exi .

與大多數語言一樣,JavaScript 具有 map 操作 的高效實現 , 它內置在 Array 中 類。

JavaScript 的 map() 方法

讓我們來看看for-loop 語法,看看我們如何將某些方法應用於每個元素。假設我們有一組分數,並希望在每個分數上加 5 分以幫助提高分數:

const mathScores = [39, 50, 45, 41, 50]; 
let newScores = [];
  
for (let i = 0; i < mathScores.length; i++) {
    newScores.push(mathScores[i] + 5);
}

console.log(newScores); // [44,55,50,46,55]

在上面的代碼中,我們循環了 mathScores 數組,每個成員加5,然後將新分數推送到newScores 數組。

這是一個非常標準的過程,與 map() 非常相似 會!

語法

該方法的語法相當簡單:

const newArray = oldArray.map((currentValue, index, array)=>{
    // Do stuff with currentValue
})

indexarray 是可選的,可用於訪問 index currentValue 和原始數組本身。

  • newArray - map()之後返回的新數組 功能已應用。
  • oldArray - map() 函數對原始數組進行操作,不會改變它。
  • currentValue - map() 的值 函數在步驟 X 處處理 ,其中函數定義在步驟 X 發生的情況 .
  • index - 當前值的索引。
  • array - 指向原始數組的可選參數。

為了獲得直觀的視覺體驗 - 您可以嘗試記錄這些值並直接返回原始值而不做任何更改:

const mathScores = [39, 50, 45, 41, 50];
  
mathScores.map((currentValue, index, array) => {
    console.log('Current value:' + currentValue);
    console.log('Index:' + index);
    console.log('Array:' + array);
    return currentValue;
})
"Current value:39"
"Index:0"
"Array:39,50,45,41,50"
...
"Current value:50"
"Index:4"
"Array:39,50,45,41,50"

如何map() 工作嗎?

map() 出於所有實際目的,函數需要元素才能處理 - 但如果您正在調用的數組 map() on 是空的,它只會返回一個空數組。它可以與箭頭函數或常規函數一起使用:

在 ES6 之前,您通常會將回調定義為:

const codes = [101, 201, 301, 303, 202];
let mathCodes = codes.map(function(code) {
    return `mth${code}`;
});
  
console.log(mathCodes); //["mth101","mth201","mth301","mth303","mth202"]

但是,在 ES6 中,您可以使用箭頭函數來使代碼更清晰:

const codes = [101, 201, 301, 303, 202]; 
let mathCodes = codes.map((code)=>{
    return `mth${code}`;
});
  
console.log(mathCodes); //["mth101","mth201","mth301","mth303","mth202"]

map() 示例

我們來看幾個map()的例子 功能!例如,讓我們計算列表中每個數字的平方根:

const numbers = [9, 36, 64, 144];
  
let squareRoots = numbers.map((number) => {
    return Math.sqrt(number);
});
  
console.log(squareRoots); // [3,6,8,12]

或者,我們可以將每個元素映射到它的長度:

const names = ["Bilbo", "Gandalf", "Nazgul"];
let lengths = names.map((name) => name.length);
console.log(lengths); // [5,7,6]

或者,我們可以映射每個學生對象 他們的名字和姓氏:

const students = [
    {firstName : "John", lastName: "Doe"},
    {firstName : "Stephen", lastName: "Matt"},
    {firstName : "Abigail", lastName: "Susu"}
];
  
let studentsNames = students.map(student => {
      return `${student.firstName} ${student.lastName}`;
})
  
console.log(studentsNames); // ["John Doe","Stephen Matt","Abigail Susu"]

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

map() 的真正常見用例之一 前端的功能是將數據包裝在 HTML 中:

let cont = document.getElementById('#container');
  
let users = [
    { firstName : "John", lastName: "Doe", age: 17 },
    { firstName : "Stephen", lastName: "Matt", age: 16 },
    { firstName : "Abigail", lastName: "Susu", age: 15 }
];
  
let singleUser = users.map((user)=>{
    // Let's add the firstname and lastname together
    let fullName = user.firstName + ' ' + user.lastName;
    return `
      <h3 class='name'>${fullName}</h3>
      <p class="age">${user.age}</p>
    `
});
  
container.innerHTML = singleUser;

map() 與其他迭代器方法相比?

map() 是 JavaScript 中迭代器方法的一個示例,它對了解您何時想要使用哪個迭代器方法非常有用。迭代器方法使您可以循環遍歷數組中的所有對像以執行特定操作。

在判斷是否使用map()時 函數,最好考慮另一種迭代器技術是否更可取。

以下是 JavaScript 中可用的一些附加迭代器方法:

  • reduce() :歸約操作是函數式編程中最強大的操作之一,通常涉及歸約 一個向量到一個標量(一個值列表,到一個值)。這可以是對數組中的所有值求和,找到平均值、最小值或最大值,或者以任何其他方式將較長的數據集縮減為源自原始數據的較小數據集。
  • 過濾器() :過濾允許您從列表中過濾掉不符合某些特定條件的項目,並返回符合條件的剩餘項目的數組。
  • forEach() :類似於 for...loop , forEach() 對列表中的每個項目執行一個函數。它允許您遍歷一個數組並對每個項目執行一項工作。

在某種程度上 - 這引出了一個問題:

map() 與 forEach()

因為這兩種方法都通過一個數組運行並用於將一個函數應用於每個成員,所以 map()forEach() 方法可能看起來非常相似。

這兩種方法的主要區別在於 map() 函數返回一個新數組 , 而 forEach() 方法不會 - 它更改原始數組 .

此外,在 map() 的每次迭代中 函數,你會 return 一個變換的元素。使用 forEach() ,您不會返回它們,但可以在該更改元素上就地運行函數。不過,您甚至不必在元素上運行函數!

這使得 forEach() 如果只記錄值而不更改它們,則更可取:

const characters = ['z', 'y', 'x', 'w'];
  
characters.forEach(character => {
    console.log(character);
});

然而,如果你的目標是改變 元素,map() 是首選。

使用 map() 使用其他數組方法

map() 方法來自函數式編程 - 使用函數式編程,鏈接方法就像呼吸一樣自然。鍊式函數操作非常普遍,可以提供非常複雜的操作流水線!

讓我們看看如何鏈接 map()Array 的一些其他功能方法 類。

使用 map() 過濾器()

過濾通常是管道中的第一個操作,因為對可能不包含在結果中的元素運行操作效率低下,除非您過濾的條件取決於管道中的其他操作。

一個常見的步驟順序是 filter() 一個基於特定條件的數組,然後是 map() 剩下的元素。

讓我們創建一個學生數組來過濾和映射:

const mathStudents = [
    {
      name: 'Jane',
      score: 60,
      enrollmentYear: 2019
    },
    {
      name: 'Emmy',
      score: 40,
      enrollmentYear: 2020
    },
    {
      name: 'John',
      score: 43,
      enrollmentYear: 2019
    },
    {
      name: 'Linda',
      score: 20,
      enrollmentYear: 2019
    }
]

現在,讓我們根據他們的年份過濾學生 - 只獲取上一代,然後映射他們的分數,

我們將分數映射到“及格”/“不及格”等級,以形成更便於人類閱讀的格式:

const passingStudents = mathStudents
    .filter((student) => student.enrollmentYear < 2020)
    .map((student) => {
      if (student.score > 40) {
        return student.name + ': passing'
      } else return student.name + ': not passing'
    });

console.log(passingStudents); // ["Jane: passing","John: passing","Linda: not passing"]

使用 map()reverse()

有時您可能需要在執行其他操作之前或之後反轉數組。這可以使用 reverse() 輕鬆完成 功能:

const numbers = [21, 32, 43, 54, 65];
const newNumbers = numbers.map((number) => number * 2).reverse();
  
console.log(numbers); // [21,32,43,54,65]
console.log(newNumbers); // [130,108,86,64,42]

我們已插入 reverse() 函數在循環的末尾,以便它反轉結果數組。如果我們要放置 reverse()map() 之前調用 調用 - 我們實際上會反轉 original 數組,以及映射其元素,而不是反轉新的結果數組:

const numbers = [21, 32, 43, 54, 65];
const newNumbers = numbers.reverse().map((number) => number * 2);
  
console.log(numbers); // [65,54,43,32,21]
console.log(newNumbers); // [130,108,86,64,42]

使用 map() 在對像上

map() 在使用 Object 靜態方法(Object.keys() , Object.values() , 和 Object.entries() )。因為這些對象靜態方法中的每一個都會產生一個數組,map() 可以簡單地鏈接到每個:

const scores = { math: 50, English: 70, Physics: 45, Agric: 60 };  
let newScores = Object.values(scores).map((score) => score + 5);
  
console.log(newScores); // [55,75,50,65]

結論

在本指南中,我們查看了 map() JavaScript 中的方法。

該方法遍歷數組,將函數應用於數組的每個元素,並將新的元素序列作為新數組返回。我們通過實例了解了該方法的語法、參數和用法。

進一步 - 我們比較了 map() forEach() 的方法 方法,並探索了我們如何鏈接 map()filter() , reverse() 和對象。


Tutorial JavaScript 教程
  1. 在 Javascript 中舍入小數 - 一個有趣的問題。

  2. 指導?你會感興趣嗎?

  3. 使用 Kinesis Data Firehose 進行分析 📊

  4. 在 HTML 元素中顯示 concat 數組

  5. 我如何管理我的 react redux

  6. 使用 Node.Js、ExpressJs、MongoDB 和 VueJs 構建 Todo 應用程序——第 1 部分

  7. 原版 JavaScript 畫布圖像轉黑白

  1. Three.js 中的點雲效果

  2. JS 數組操作怪癖

  3. 將具有屬性的數組轉換為列表

  4. 用javascript鎖定tab鍵?

  5. 作為初學者如何從頭開始學習編碼

  6. 一個方便的 npm 腳本,用於創建新的 Gatsby 博客文章

  7. 賽普拉斯與劇作家:哪一個更適合您?

  1. 使用 ReactJS 創建 PDF 文檔

  2. 谷歌地圖標籤放置

  3. 在 35 分鐘內使用 React.Js、Next.Js 和 Bootstrap5 構建 Instagram 克隆

  4. 回顧 Eloquent Javascript #Chpt5