javascript - 使用 Javascript 从 的数据值构建数组

Question

从不成功构建数据值数组

我有很多这样的列表

<ul>
<li class="bu" data-value="apple">Apple</li>
<li class="bu" data-value="banana">Banana</li>
<li class="bu" data-value="mango">Mango</li>
</ul>

加载文档后，我尝试使用 javascript 从具有 bu 类的所有列表中获取数据值以构建数组

var br = document.getElementsByClassName("bu");
for (var i = 0; i < br.length; i++) {
 fruit[i] = this.getAttribute('data-value');}

然后我尝试输出，但没有成功..

alert(fruit);
document.write(fruit);

我想像这样构建数组:

var fruit = ["apple", "banana", "mango"];
fruit[1] = "banana"

一定是javascript有什么错误，但我的水平还没有找到错误..

我想使用没有 Jquery 的普通 javascript。

Answer 1

this 不引用在 for 循环中迭代的项目。虽然你可以通过做来修复它

fruit[i] = br[i].getAttribute('data-value');
// use push instead if the fruit array is initially empty

您还可以考虑使用 Array.from 函数式构造数组:

const fruitArray = Array.from(
  document.getElementsByClassName("bu"), // collection to create the array from
  bu => bu.getAttribute('data-value') // mapper function
);

const fruitArray = Array.from(
  document.getElementsByClassName("bu"), // collection to create the array from
  bu => bu.getAttribute('data-value') // mapper function
);
console.log(fruitArray);

<ul>
  <li class="bu" data-value="apple">Apple</li>
  <li class="bu" data-value="banana">Banana</li>
  <li class="bu" data-value="mango">Mango</li>
</ul>

.dataset在IE11及以后的浏览器上普遍支持，语法比getAttribute好一点，所以如果不是非要支持老浏览器的话，考虑改用它:

const fruitArray = Array.from(
  document.getElementsByClassName("bu"),
  bu => bu.dataset.value
);