Как добавить HTML атрибутов в массив, используя Javascript

Question

Я пытаюсь добавить атрибуты из трех HTML элементов в массив.

Вот пример HTML:

<p x="30">Paragraph 1</p>
<p x="50">Paragraph 2</p>
<p x="100">Paragraph 3</p>

Вот Javascript, который имеет Получил меня ближе всего к результатам, которые я ищу:

const paragraphs = document.querySelectorAll(`p`);
      let i;
      for (i = 0; i < paragraphs.length; i++) {
        let dataSetOne = paragraphs[i].getAttribute('x');
        let dataSetOneArray = Array.from(dataSetOne);

      }

Когда я console.log (dataSetOne), я получаю "30" "50" "100", что я и надеялся.

Когда я пытаюсь добавить эти атрибуты в массив, используя Array.from (dataSetOne), я получаю три массива, которые выглядят так: Array (1) ["3", "0"]; Array (2) ["5", "0"] Array (3) ["1", "0", "0"].

Массив, который я ищу, таков: Array ["30 "," 50 "," 100 "]

Я пробовал несколько других функций, но ни одна из них не приближает меня к результату, который я ищу.

Это не для конкретного c проекта. Я пытаюсь улучшить мое понимание массивов и объектно-ориентированного программирования.

Заранее спасибо за помощь.

Answer 1

Как насчет

let dataSetOneArray = [];
for (i = 0; i < paragraphs.length; i++) {
    let dataSetOne = paragraphs[i].getAttribute('x');
    dataSetOneArray.push(dataSetOne);
  }

Answer 2

Array.from()

Метод Array.from() создает новый копируемый экземпляр Array из массива или повторяемого объекта.

Поскольку вы используете Array.from() внутри for для l oop в каждой итерации, создается новый массив. Вы можете просто объявить массив ( dataSetOneArray ) вне значения атрибута l oop и pu sh напрямую.

const paragraphs = document.querySelectorAll(`p`);
let dataSetOneArray = [];
let i;
for (i = 0; i < paragraphs.length; i++) {
  let dataSetOne = paragraphs[i].getAttribute('x');
  dataSetOneArray.push(dataSetOne);
}

Хотя вы можете добиться этого в более более простой способ, используя Array.prototype.map () :

Метод map() создает новый массив, заполненный результатами вызова предоставленной функции на каждый элемент в вызывающем массиве.

var elList = Array.from(document.querySelectorAll('p'));
var res = elList.map(el => el.getAttribute('x'));
console.log(res);

<p x="30">Paragraph 1</p>
<p x="50">Paragraph 2</p>
<p x="100">Paragraph 3</p>