Question

我有一个填充HTML对象的数组-就我而言，它们都是 li 项。我必须用来自这些 lis 的textContent创建一个新数组。所以我有两个数组：

A = [li, li, li, li, li];
B = [];

我已经写了这样的函数：

function addContent() {
  for (let i = 0; i < A.length; i++) {
    let newConent = A[i].textContent;
    B.push(newConent);
  }
}

所以我的问题是：有没有已知的方法或更理想的方法？我对JavaScript方法感兴趣。

预先感谢（x

Answer 1

如果A是一个数组，则可以这样：

B = A.map(li => li.textContent)

但是我不认为您真的有一个数组。如果您通过querySelectorAll之类的方法获取元素，则需要为其创建一个数组。

const lis = document.querySelectorAll('li')
const A = []

for (let i = 0; i < lis.length; i++) {
  A.push(lis[i])
}

const B = A.map(li => li.textContent)

console.log(B)

<li>a</li>
<li>b</li>
<li>c</li>

Answer 2

您可以使用.map()遍历列表项数组并返回所需的属性值：

const list = [...document.querySelectorAll("li")];

const text = list.map(li => li.textContent);

console.log(text);

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

或者，您也可以使用for...of循环：

const list = document.querySelectorAll("li");
const text = [];

for (item of list)
    text.push(item.textContent);

console.log(text);

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Answer 3

您可以使用Array.prototype.map()

map()方法创建一个新的array，其结果是在调用数组中的每个元素上调用提供的function。

let lis = Array.from(document.querySelectorAll('li'));
let texts = lis.map(li => li.textContent);
console.log(texts);

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

用JavaScript中现有的数组创建新数组

3 个答案: