使用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函数，我们可以轻松的对页面中的元素、属性或样式进行修改，提高页面的交互效果，为用户提供更好的体验。