Javascript создание массива: JavaScript | Массивы - Блог сумасшедшего сисадмина

Содержание

Array.from() — JavaScript — Дока

Кратко
Как пишется
Пример
1. Массив из строки
2. Массив из Set
3. Массив из NodeList
Как понять
На практике
1. Николай Лопин советует

Кратко

Скопировано

Функция Array.from() создаёт новый массив на основе переданного объекта. Объект должен быть либо массивоподобным (как строка или объект arguments), либо итерируемым (как Set или Map).

Как пишется

Скопировано

Функция Array.from() принимает три аргумента, последние два из которых не обязательны:

Объект, на основе которого создаётся массив.
Функция преобразования элемента перед его добавлением в массив. Работает как метод map().
Значение, которое будет использоваться как this в функции из второго параметра.

Возвращает новый массив, составленный из элементов переданного объекта.

Пример

Скопировано

Массив из строки

Скопировано

const arr = Array.from('дока')console.log(arr)// ['д', 'о', 'к', 'а']
          const arr = Array.from('дока')
console.log(arr)
// ['д', 'о', 'к', 'а']

Массив из

Set Скопировано

const uniqueNumbers = new Set()uniqueNumbers.add(1)uniqueNumbers.add(2)uniqueNumbers.add(3)const arr = Array.from(uniqueNumbers)// [1, 2, 3]
          const uniqueNumbers = new Set()
uniqueNumbers.add(1)
uniqueNumbers.add(2)
uniqueNumbers.add(3)
const arr = Array.from(uniqueNumbers)
// [1, 2, 3]

Массив из NodeList

Скопировано

Получить URL из всех ссылок на странице:

const linkElements = document.getElementsByTagName('a')const arrLinks = Array.from(linkElements, function(a) { return a. href })
          const linkElements = document.getElementsByTagName('a')
const arrLinks = Array.from(linkElements, function(a) { return a.href })

Как понять

Скопировано

В JavaScript и браузерных API есть много объектов, которые очень похожи на массив, но не являются им. Объекты могут выглядеть как массив, но не иметь всех методов массива: forEach(), map(), filter() и так далее.

Такие объекты приходится превращать в массивы для удобства работы с ними или для интеграции с библиотеками. Array.from() создан, чтобы решить проблему конвертации таких объектов в новый массив.

Array.from() работает не со всеми объектами. Объект должен обладать одним из двух свойств, чтобы его получилось превратить в массив:

Элементы объекта проиндексированы и объект имеет свойство length. Такие объекты называют массивоподобными, потому что именно эти свойства присущи массиву. Этим свойством обладают объекты arguments, NodeList, HTMLCollection.
Объект итерируемый, то есть реализует интерфейс Iterable. Этим свойством обладают объекты Set и Map.

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

☝️

При создании массива происходит поверхностное копирование (shallow copy) элементов. Если объект, на основе которого создаётся массив, содержит вложенные структуры данных, то эти вложенные структуры скопированы не будут. При их изменении в объекте изменения будут видны и в полученном массиве.

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Если вызвать Array. from() без аргументов, то произойдёт ошибка «TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))».

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

Вместо последовательного вызова Array.from() и .map()

const name = 'Mike'const spacedLetters = Array.from(name).map(function (letter) {    return `*${letter}*`})console.log(spacedLetters)// ['*M*', '*i*', '*k*', '*e*']
          const name = 'Mike'
const spacedLetters = Array.from(name).map(function (letter) {
    return `*${letter}*`
})
console.log(spacedLetters)
// ['*M*', '*i*', '*k*', '*e*']

…можно записать один вызов Array.from() со вторым аргументом:

const name = 'Mike'const spacedLetters = Array. from(name, function(letter) { return `*${letter}*` })
           const name = 'Mike'
const spacedLetters = Array.from(name, function(letter) { return `*${letter}*` })

При выполнении этого кода не создаётся промежуточный массив.

🛠 Можно использовать Array.from(), чтобы генерировать последовательности значений без использования классического цикла for.

Для этого нужно создать объект, который соответствует требованиям — имеет свойство length и индексы. Так как размер массива не всегда совпадает с количеством элементов внутри, мы можем создать объект со свойством length, но без индексированных элементов, и создавать такие элементы с помощью второго аргумента:

const nums = Array.from({length: 4}, function(value, index) {  // value будет undefined  return index * 2})console.log(nums)// [0, 2, 4, 6]
          const nums = Array.from({length: 4}, function(value, index) {
  // value будет undefined
  return index * 2
})
console. log(nums)
// [0, 2, 4, 6]

Оценка материала

Если вы нашли ошибку, отправьте нам пулреквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

.length

ctrl

+ alt + ←

Следующий материал

→

Array.of()

ctrl + alt + →

Видео курс JavaScript Starter. Методы массивов

Главная >
Каталог >
org/ListItem»> JavaScript Стартовый >
Методы массивов

Для прохождения теста нужно авторизироваться

Войти Регистрация

Вы открыли доступ к тесту! Пройти тест

Для просмотра полной версии видеокурса, онлайн тестирования и получения доступа к дополнительным учебным материалам купите курс Купить курс

Для просмотра всех видеокурсов ITVDN, представленных в Каталоге, а также для получения доступа к учебным материалам и онлайн тестированию купите подписку Купить подписку

№1

Введение

0:28:13

Материалы урокаДомашние заданияТестирование

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

№2

Структура кода