使用Array.prototype.map對JavaScript數組進行操作的十個例子

一、map的基本用法

Array.prototype.map()是JavaScript數組對象的一個原型方法，可以將一個數組映射成其他形式的數組。它接收一個函數作為參數，該函數將作用於原數組的每一個可枚舉元素，返回一個新的數組。

以下是一個基本的map用法示例：

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map((x) => x * 2);
console.log(arr2); // [2, 4, 6, 8]

在這個例子中，arr1數組的每個元素都乘以2，返回一個新的arr2數組。

二、將字符串數組轉換為數字數組

當我們需要將一個字符串數組轉換為數字數組時，可以使用map方法加上一元箭頭函數將每個字符串轉換為數字：

const strArr = ['1', '2', '3', '4'];
const numArr = strArr.map((x) => Number(x));
console.log(numArr); // [1, 2, 3, 4]

在這個例子中，將字符串數組轉換為數字數組時，箭頭函數的Number將每個字符串轉換為相應的數字。

三、將對象數組中的某個屬性提取到一個新的數組中

當我們需要將一個對象數組中的某個屬性提取到一個新的數組中時，可以使用map方法加上一元箭頭函數獲取該屬性：

const userArr = [
  { name: 'Mike', age: 30 },
  { name: 'Tom', age: 25 },
  { name: 'Jane', age: 35 },
];
const nameArr = userArr.map((x) => x.name);
console.log(nameArr); // ['Mike', 'Tom', 'Jane']

在這個例子中，將userArr數組中每個對象的name屬性提取出來放到新的nameArr數組中。

四、使用map實現過濾

當我們需要在數組中進行過濾時，可以結合map和filter方法實現。以下示例將數組中所有大於3的元素過濾掉：

const arr3 = [1, 2, 3, 4, 5];
const arr4 = arr3.map((x) => {
  if (x > 3) {
    return null;
  } else {
    return x;
  }
}).filter((x) => x !== null);
console.log(arr4); // [1, 2, 3]

在這個例子中，map方法結合if語句過濾掉大於3的元素，返回一個包含null元素的數組。filter方法再將null元素過濾掉，得到最終結果。

五、使用map實現數組元素的去重

當我們需要去掉數組中的重複元素時，可以利用map方法實現。以下示例去掉數組中的重複元素：

const arr5 = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const arr6 = [...new Set(arr5.map((x) => x))];
console.log(arr6); // [1, 2, 3, 4]

在這個例子中，利用map方法將數組元素映射成可枚舉的set對象，再利用展開運算符和Set對象的特性去重。

六、使用map和join方法實現字符連接

當我們需要將數組元素連接成一個字符串時，可以結合map和join方法實現。以下示例將數組元素連接成以逗號分隔的字符串：

const arr7 = ['apple', 'banana', 'orange'];
const str1 = arr7.map((x) => x).join(',');
console.log(str1); // 'apple,banana,orange'

在這個例子中，利用map方法將數組元素映射為一個新的數組，再利用join方法將新數組中的元素以逗號分隔連接成一個字符串。

七、使用map和reduce方法實現數組元素的求和

當我們需要計算數組元素的和時，可以結合map和reduce方法實現。以下示例對數組元素進行求和：

const arr8 = [1, 2, 3, 4];
const sum = arr8.map((x) => x).reduce((a, b) => a+b);
console.log(sum); // 10

在這個例子中，利用map方法將數組元素映射為一個新的數組，再利用reduce方法對新數組元素求和。

八、使用map和reduce方法實現一維數組的轉置

當我們需要將一維數組轉置為二維數組時，可以結合map和reduce方法實現。以下示例將一維數組[1,2,3,4]轉置為二維數組[[1,2],[3,4]]：

const arr9 = [1, 2, 3, 4];
const size = 2;
const transposedArr = arr9.map((x, i) => i % size === 0 ? arr9.slice(i, i + size) : null )
                        .filter((x) => x != null);
console.log(transposedArr); // [[1, 2], [3, 4]]

在這個例子中，利用map方法和slice方法將一維數組映射為二維數組的可枚舉元素，再利用filter方法過濾null元素得到最終結果。

九、使用map實現數組元素的排列組合

當我們需要對數組元素進行排列組合時，可以利用map方法實現。以下示例將數組[1,2,3]的所有排列組合列出來：

const arr10 = [1, 2, 3];
const combArr = arr10.map((x) => arr10.map((y) => [x, y]))
                      .reduce((pre, cur) => pre.concat(cur))
                      .filter((x) => x[0] !== x[1]);
console.log(combArr); // [[1, 2], [1, 3], [2, 1], [2, 3], [3, 1], [3, 2]]

在這個例子中，利用map方法和嵌套map方法將數組元素進行組合，再利用reduce方法將組合結果合併為一個數組。最後再利用filter方法過濾掉自身重複元素得到最終結果。

十、使用map實現二維數組的轉置

當我們需要將二維數組轉置時，可以利用map方法實現。以下示例將二維數組[ [1,2], [3,4] ]轉置為[ [1,3], [2,4] ]：

const arr11 = [[1,2], [3,4]];
const transposedArr2 = arr11[0].map((x, i) => arr11.map((y) => y[i]));
console.log(transposedArr2); // [[1, 3], [2, 4]]

在這個例子中，利用map方法和嵌套map方法將二維數組進行轉置。