數組map用法詳解

一、數組map方法

在JavaScript中，數組是非常常用的數據類型之一，為了方便開發者對數組進行處理，ES5新增了數組map方法。它作用於數組的每一個元素，返回一個新數組，並且不改變原數組。map方法接收一個回調函數作為參數，回調函數的返回值將會作為新數組的每一個元素。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => item * 2);
console.log(newArr);
// Output: [2, 4, 6, 8, 10]

上述代碼中，原數組arr中的每一個元素都被乘以2，得到新數組newArr。

二、數組方法map用法

除了在ES5中數組原生提供的map方法，還有一些常用的數組方法會使用到map方法。比如數組的forEach、filter、reduce等方法都能用map來實現。

const arr = [1, 2, 3, 4, 5];
// forEach實現
arr.forEach((item, index, array) => {
  array[index] = item * 2;
});
console.log(arr);
// Output: [2, 4, 6, 8, 10]

// map實現
const newArr = arr.map(item => item * 2);
console.log(newArr);
// Output: [2, 4, 6, 8, 10]

上述代碼中，forEach和map都使用了回調函數來對數組進行遍歷並對每個元素進行操作。但是，map返回了一個新數組，不改變原數組。

三、數組map應用

數組map方法可以應用於對數組元素進行處理、篩選、查找等操作。下面是一些應用場景的示例：

1. 將數組對象中某個屬性提取出來組成新的數組

const arr = [{name: 'apple', count: 2}, {name: 'banana', count: 3}, {name: 'orange', count: 4}];
const newArr = arr.map(item => item.name);
console.log(newArr);
// Output: ['apple', 'banana', 'orange']

2. 將數組中的字符串元素轉化成數字類型

const arr = ['1', '2', '3', '4', '5'];
const newArr = arr.map(Number);
console.log(newArr);
// Output: [1, 2, 3, 4, 5]

3. 將數組中所有元素轉化成小寫字母

const arr = ['APPLE', 'BANANA', 'ORANGE'];
const newArr = arr.map(item => item.toLowerCase());
console.log(newArr);
// Output: ['apple', 'banana', 'orange']

四、數組map方法的使用

數組map方法的使用要點：

• 傳入的回調函數應該是一個純函數，即沒有副作用並且始終返回相同的結果。
• map方法返回的新數組長度和原數組長度相同。
• 如果數組元素為undefined，map不會調用回調函數處理該項。
• 回調函數接收三個參數：當前元素值、當前元素索引、數組本身。

五、數組map

除了數組自帶的map方法，ES6中還新增了Map類型。Map類型是一個無序的鍵值對集合，可以使用任何值（包括對象）作為鍵或值。對於不需要使用到數組 index 下標的數據結構，使用 Map 會是一個更好的選擇。

1. 遍歷map數組

const myMap = new Map();
myMap.set(0, 'hello');
myMap.set(1, 'world');
const newArr = Array.from(myMap).map(([key, value]) => value);
console.log(newArr);
// Output: ['hello', 'world']

2. js數組的map方法

Array.prototype.map = function(callback){
  let result = [];
  for(let i = 0; i < this.length; i++){
    result.push(callback(this[i], i, this));
  }
  return result;
};

讓我們一起來了解一個新的方法，就是：

3. js數組對象轉map對象

const arr = [['key1', 'value1'], ['key2', 'value2']];
const myMap = new Map(arr);
console.log(myMap);
// Output: Map(2) {"key1" => "value1", "key2" => "value2"}

六、map和數組效率選取

雖然數組和Map都有遍歷和查找的需求，但是它們的特點不一樣。如果你需要類似於“索引”的查找方式，那麼使用數組可能更適合。如果你想存儲鍵值對並且需要快速查找和遍歷鍵值對，那麼使用Map就更好。

七、小結

本文詳細介紹了JavaScript中數組map方法的用法及其應用。map方法作為數組的核心功能之一，為開發者提供了更加便捷的數據處理方式。同時，本文也介紹了一些與map方法相關的小技巧，如forEach、filter、reduce方法使用map實現、Map類型的使用等。