Получить атрибут из каждого элемента массива

у меня есть этот код, и я хочу получить новый массив с атрибутом href каждого элемента массива; возможно, есть другой способ сделать это

let countries = document.querySelectorAll('.el');
let countriesList = Array.prototype.slice.call(countries);
let arra = countriesList.map(link);
function link() {
   for(let i = 0; i < countriesList.length; i++) {
      countriesList[i].getAttribute('href');
   }  
}
console.info(arra)

<div>
  <a class='el' href='italy.php'>Italy</a>
  <a class='el' href='france.php'>France</a>
  <a class='el' href='japan.php'>Japan</a>
  <a class='el' href='china.php'>China</a>
</div>

Ваша функция ссылки не имеет возвращаемого значения, неудивительно, что она не определена.

— 25.03.2024 08:56

И цикл внутри него ненужен

— 25.03.2024 09:17

javascript arrays getattribute

25.03.2024 08:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете преобразовать список узлов в массив и использовать карту, чтобы получить массив href

let arra = [...document.querySelectorAll('.el')].map(item => item.getAttribute('href'))
console.info(arra)

<div>
  <a class='el' href='italy.php'>Italy</a>
  <a class='el' href='france.php'>France</a>
  <a class='el' href='japan.php'>Japan</a>
  <a class='el' href='china.php'>China</a>
</div>

25.03.2024 08:58

Функция, передаваемая в map, вызывается один раз для каждого элемента и должна возвращать значение.

let countries = document.querySelectorAll('.el');
let countriesList = Array.prototype.slice.call(countries);
let arra = countriesList.map(link);
function link(country) {
  return country.getAttribute('href');
}
console.info(arra)

<div>
  <a class='el' href='italy.php'>Italy</a>
  <a class='el' href='france.php'>France</a>
  <a class='el' href='japan.php'>Japan</a>
  <a class='el' href='china.php'>China</a>
</div>

Вы также можете пропустить карту

let countries = document.querySelectorAll('.el');
let countriesList = Array.prototype.slice.call(countries);
let arra = link();
function link() {
   const array = []
   for(let i = 0; i < countriesList.length; i++) {
      array.push(countriesList[i].getAttribute('href'));
   }
   return array
}
console.info(arra)

<div>
  <a class='el' href='italy.php'>Italy</a>
  <a class='el' href='france.php'>France</a>
  <a class='el' href='japan.php'>Japan</a>
  <a class='el' href='china.php'>China</a>
</div>

Array.prototype.slice.call(countries); действительно старомодно. Есть как минимум два более элегантных способа сделать это.

— 25.03.2024 09:16

25.03.2024 09:08

Ваша функция link() ничего не возвращает и имеет ненужный цикл.

Кроме того, Array.prototype.slice.call(countries); больше не является элегантным способом получить массив из коллекции. Array.from — безусловно, самый элегантный и наглядный способ. И для выполнения картографии требуется функция! (Спасибо, Ник)

Вот ваш фиксированный код, который все еще использует отдельную функцию для перехода к функции карты Array.from.

const countryLinks = document.querySelectorAll('.el');

// const getCountry= el => el.getAttribute('href').split('.')[0]; // callback
const getCountry = el => el.textContent; // alternative callback
// Array.from is more descriptive than spread, and we can add the callback
const countryArray = Array.from(countryLinks, getCountry);
console.info(countryArray);

<div>
  <a class='el' href='italy.php'>Italy</a>
  <a class='el' href='france.php'>France</a>
  <a class='el' href='japan.php'>Japan</a>
  <a class='el' href='china.php'>China</a>
</div>

Или const countryArray = Array.from(countryLinks, getCountry), чтобы избежать двух итераций.

— 25.03.2024 09:32

@NickParsons Ох, здорово! Я использовал Array.from вместо распространения всего несколько месяцев и даже не просматривал документацию, поэтому полностью пропустил Array.from(arrayLike, mapFn). Спасибо!

— 25.03.2024 09:36

25.03.2024 09:08

Ответ принят как подходящий

Вы можете избежать повторной итерации коллекции более одного раза, создав экземпляр пустого массива, а затем поместив в него каждое значение в цикле for...of:

const hrefs = [];

for (const anchor of document.querySelectorAll(".el")) {
  hrefs.push(anchor.getAttribute("href"));
}

console.info(hrefs); // ["italy.php", "france.php", "japan.php", "china.php"]

<div>
  <a class = "el" href = "italy.php">Italy</a>
  <a class = "el" href = "france.php">France</a>
  <a class = "el" href = "japan.php">Japan</a>
  <a class = "el" href = "china.php">China</a>
</div>

25.03.2024 09:24

Другие вопросы по теме

Создание массива массивов в фабрике данных Azure

Unshift против присвоения значений с помощью цикла против ручного назначения значений вручную. Какой из них быстрее?

Функция для поиска нескольких значений из массива и замены данных в определенном столбце на основе совпадающих идентификаторов?

Удаление определенных индексов элементов в массиве numpy

В двумерном массиве numpy, как выбрать каждый первый и второй элемент внутренних массивов? Можно ли это сделать с помощью индексации?

Как выделить двухмерный массив динамического размера, используя только один malloc с синтаксисом доступа в двойных квадратных скобках (arr[i][j]) в C?

Как назначить диапазон и массив 1d массиву вариантов 2d?

Как сгладить коллекцию с элементами массива в Laravel

Преобразуйте серию ключей объектов JavaScript в массивы, если они содержат числа

Получение отфильтрованного списка из результатов float32array

Получить атрибут из каждого элемента массива

Ответы 4

Другие вопросы по теме

Похожие вопросы