使用JavaScript數組map修改頁面元素

一、什麼是JavaScript數組map?

JavaScript數組map是一種非常強大的函數，其可以用於遍曆數組，並改變數組中的元素值，而不影響原有數組。map函數接受一個函數作為參數，並將該函數作用於數組的每個元素，得到的值再組成一個新的數組返回。下面是一個簡單的示例：

//定義一個數組
const arr = [1,2,3,4];

// 使用map遍曆數組，得到新數組
const newArr = arr.map((item) => {
  return item * 2;
});

console.log(newArr); //[2,4,6,8]

可以看出，使用map函數遍歷原數組，對每個元素都乘以2，得到的新數組為[2,4,6,8]，原數組不發生改變。這就是map函數的特性。

二、如何使用map來修改頁面元素

現在，我們來看一下如何通過JavaScript數組map來修改頁面元素。下面是一個具體的例子：

// 根據class名選取頁面中所有的p元素
const allP = document.querySelectorAll('.paragraph');

// 使用map函數修改所有p標籤的內容
const newAllP = Array.prototype.map.call(allP, (p) => {
  return p.innerHTML + "被修改了";
});

//將修改後的結果重新替換掉原來的p標籤
Array.prototype.forEach.call(allP, (p, index) => {
  p.innerHTML = newAllP[index];
});

上述代碼中，首先我們通過class名選取到頁面中所有的p標籤，然後使用map函數修改了每個p標籤的innerHTML，其內容加上了”被修改了”，得到了一個新的數組。最後，我們使用forEach函數將修改後的結果依次賦值給原來的p標籤，完成了對頁面元素的修改。

三、如何進行其他類型的修改

除了修改頁面元素的內容之外，我們還可以利用map函數修改元素的屬性、樣式等。下面是一些常見的類型修改的示例:

修改元素的屬性

//根據class名選取所有img元素
const allImg = document.querySelectorAll('.img-item');

//使用map函數修改img元素屬性
const newAllImg = Array.prototype.map.call(allImg, (img) => {
  img.setAttribute('src', '../img/default.jpg');
});

//將修改後的結果重新替換掉原來的img元素
Array.prototype.forEach.call(allImg, (img, index) => {
  img.setAttribute('src', newAllImg[index]);
});

修改元素的樣式

//根據class名選取所有div元素
const allDiv = document.querySelectorAll('.box');

//使用map函數修改div元素樣式
const newAllDiv = Array.prototype.map.call(allDiv, (div) => {
  div.style.backgroundColor = 'red';
});

//將修改後的結果重新替換掉原來的div元素
Array.prototype.forEach.call(allDiv, (div, index) => {
  div.style.backgroundColor = newAllDiv[index];
});

通過上述示例代碼，我們可以看出，其他類型的修改同樣可以使用map函數完成，並且可以根據具體需求，對元素的任何屬性進行修改。

總結

JavaScript數組map是一個非常有用的函數，它能夠遍曆數組，並修改數組中的元素，而不影響原有的數組。通過map函數，我們可以輕鬆的對頁面中的元素、屬性或樣式進行修改，提高頁面的交互效果，為用戶提供更好的體驗。