遍历段落数组并从 JavaScript 中的另一个数组添加内容答案

【问题标题】：Iterate through array of paragraphs and add content from another array in JavaScript遍历段落数组并从 JavaScript 中的另一个数组添加内容
【发布时间】：2020-07-07 07:10:50
【问题描述】：

我有 3 个 <p> 想要动态更改的元素。我有数组中这些段落的值。

这是我的 HTML：

<p class="para">text xxx</p>
<p class="para">text yyy</p>
<p class="para">text zzz</p>

这是我的 JS：

var mobile = window.matchMedia("(max-width: 567px)")
let paragraphs = document.querySelectorAll('.para')
let paraText = [
  'text for mobile xxx',
  'text for mobile yyy',
  'text for mobile zzz'
]

if (mobile) {
  paragraphs.map(paragraph => {
    paragraph.innerText = '{belonging element from paraText}'
  })
}

我该如何做到这一点？

【问题讨论】：

那么您的问题是从数组中为特定段落选择正确的文本？
Map 接受第二个参数，即迭代的索引，您可以使用它从数组中提取相应的元素。 paragraphs.map((paragraph, index) => paraText[index] )

标签： javascript arrays

【解决方案1】：

querySelectorAll 返回 NodeList 而不是数组，因此不会有 map 函数。

此外，map 用于基于现有数组创建新数组，而您的用例是关于修改其他对象。 forEach 在这里更合适。

请尝试converting the NodeList into an Array：

if (mobile) {
  let paragraphsArray = [...paragraphs];
  paragraphsArray.forEach((element, i) => {
    element.innerText = paraText[i];
  })
}

或者，简单地迭代paraText：

if (mobile) {
  paraText.forEach((text, i) => {
    paragraphs[i].innerText = text;
  })
}

【讨论】：

【解决方案2】：

这样的？

if (window.matchMedia("(max-width: 567px)")) {
  const paraText = [
    'text for mobile xxx',
    'text for mobile yyy',
    'text for mobile zzz'
  ];

  document.querySelectorAll('.para')
    .forEach((p, i) => p.innerText = paraText[i]);
}

【讨论】：