4

Многие спрашивают, как NodeList, HTMLColletion и другой псевдомассив превратить в Array. Так мне нужно наоборот. То есть мне нужно превратить Array, к примеру, в NodeList.

Как это сделать?

Есть два "но":

  1. Я не знаю что у меня именно: NodeList, HTMLColletion или какой-то другой псевдомассив; но у меня есть псевдомассив с тем прото, в который нужно превратить массив.
  2. Варианты с изменением через параметр __proto__ не предлагать, так как мне нужен вариант, который сработает, как минимум, в IE10
5
  • Как минимум могу подсказать функцию по проверке на псевдомассив. Вот, возможно пригодится. Функция canAccessAsArray 21 авг 2017 в 9:35
  • В общем случае это невозможно, потому что native object не может быть создав в обход api. 21 авг 2017 в 9:42
  • @PavelMayorov, суть в том, что мне нужно, чтобы только функционал из этого прото работал на данном массиве
    – Yuri
    21 авг 2017 в 9:43
  • @Yuri это тоже в общем случае невозможно - методы не обязаны работать с "неродными" объектами. Но можете попытаться что-нибудь сделать через Object.create() (IE9+) 21 авг 2017 в 9:45
  • @PavelMayorov, или же все псевдомассивы преобразовывать в массивы и там уже колдовать над свойствами... или над чем там колдовать можно
    – Yuri
    21 авг 2017 в 9:47

1 ответ 1

0

К сожалению, искусственно создать псевдомассив (массивоподобный объект), вроде NodeList и HTMLCollection, никак нельзя, даже с помощью свойства __proto__.

Когда вы измените __proto__ массива, то он просто изменит "родителя" с Array на другой, который вы укажите при смене. Тем самым изменить стандартные свойства с Array.prototype на [{Object}].prototype.

var elements = document.querySelectorAll('div');
var array = [document.querySelector('div')];

// Изменяем прото массива
array.__proto__ = NodeList.prototype;

// Проверяем содержимое обоих элементов
console.log(elements); // [<div></div>, item, entries, forEach, keys, values]
console.log(array); // [<div></div>, item, entries, forEach, keys, values]

// Провряем тип элементов
console.log({}.toString.call(elements)); // [object NodeList]
console.log({}.toString.call(array)); // [object NodeList]

// Но тут сюрприз
console.log(Array.isArray(elements)); // false
console.log(Array.isArray(array)); // true
<div></div>

Как видно из примера, массив не перестал быть массивом, но чисто визуально и по типу объекта он выглядит, как NodeList.

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

Object.canAccessAsArray = function(object) {
  return Number.isInteger(Number(object.length)) && Number(object.length) >= 0;
};

// Тут выдаст массив с тремя пустыми значениями
console.log( Object.canAccessAsArray({length: 3}) + ' => ' + Array.from({length: 3}) );
// А тут есть значения
console.log( Object.canAccessAsArray({'0': 'a', '1': 'b', '2': 'c', length: 3}) + ' => ' + Array.from({'0': 'a', '1': 'b', '2': 'c', length: 3}) );
// А тут будет пустой массив, из за отсутствия length
console.log( Object.canAccessAsArray({'0': 'a', '1': 'b', '2': 'c'}) + ' => ' + Array.from({'0': 'a', '1': 'b', '2': 'c'}) );

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.