Эта статья представляет Ecmascript 6, принесет нам новые методы работы массива и как применять эти новые функции массива в существующих браузерах.
Примечание: я буду использовать термины конструктора и класса поочередно.
Классовые методы
Метод, который есть у самого массива.
Array.from (Arraylike, Mapfunc?, Thisarg?)
Основная функция массива. От () заключается в преобразовании двух типов объектов в массивы.
Массивные объекты
Этот класс объектов обладает свойствами длины и индекса. Результат оператора DOM принадлежит этому классу, например Document.GetElementsByClassName ().
Итерабируемые объекты
При принятии значений можно взять только один элемент за раз. Массивы являются итерационными, например, новая структура массива, карта (карта) и установка (установка) в Ecmascript.
Следующий код является примером преобразования объекта массива в массив:
Кода -копия выглядит следующим образом:
let lis = document.queryselectorall ('ul.fancy li');
Array.from (lis) .foreach (function (li) {
console.log (узел);
});
Результат Queryselectorall () не является массивом, и не будет никакого метода Foreach (). Вот почему нам нужно преобразовать этот метод в массив, прежде чем использовать его.
Использование отображения через Array.from ()
Array.from () также является альтернативой генерикам с использованием map ().
Кода -копия выглядит следующим образом:
let spans = document.queryselectorall ('span.name');
// map (), обычно:
let names1 = array.prototype.map.call (spans, s => s.textcontent);
// array.from ():
let names2 = array.from (Spans, s => S.TextContent);
Вторым параметром в двух методах является функция стрелки.
В этом примере результат Document.Queryselectorall () является еще одним объектом класса массива, а не массивом. Вот почему мы не можем вызовать карту () напрямую. В первом примере, чтобы использовать Foreach (), мы преобразуем объект массива классов в массив. Здесь мы пропускаем промежуточные шаги с помощью общих методов и двухпараметрических версий массива. От ().
Отверстия
Array.from () игнорирует отсутствующие элементы - отверстия в массиве, которые будут рассматриваться как неопределенные элементы.
Кода -копия выглядит следующим образом:
> Array.from ([0,, 2])
[0, не определен, 2]
Это означает, что вы можете использовать Array.from () для создания или заполнения массива:
Кода -копия выглядит следующим образом:
> Array.from (new Array (5), () => 'a')
['a', 'a', 'a', 'a', 'a', 'a']
> Array.from (новый массив (5), (x, i) => i)
[0, 1, 2, 3, 4]
Если вы хотите заполнить массив фиксированным значением, то Array.prototype.fill () (см. Ниже) будет лучшим выбором. Первый - два метода приведенного выше примера.
от () в подклассе массива (массив)
Другой сценарий использования для Array.from () - преобразование экземпляра объекта массива или итерабируемого объекта в подкласс массива. Если вы создаете подкласс массивов Myarray и хотите преобразовать этот тип объекта в экземпляр Myarray, вы можете просто использовать myarray.from (). Причина, по которой это можно использовать, заключается в том, что в Ecmascript 6 конструкторы будут наследовать (конструктор родительского класса является прототипом его конструктора подкласса).
Кода -копия выглядит следующим образом:
класс Myarray Extends Array {
...
}
Let ancessofmyArray = myarray.from (aniterable);
Вы можете объединить эту функцию с отображением для выполнения операции карты, где вы управляете конструктором результата:
Кода -копия выглядит следующим образом:
// от () определить конструктор результата через приемник
// (в этом случае Myarray)
let ancessionofmyarray = myarray.from ([1, 2, 3], x => x * x);
// map (): результат всегда является экземпляром массива
Let ancessOfArray = [1, 2, 3] .map (x => x * x);
Array.of (... предметы)
Если вы хотите преобразовать набор значений в массив, вам следует использовать текст источника массива (буквальный массив). Особенно, когда есть только одно значение, и это число, конструктор массива наносит удар. Для получения дополнительной информации, пожалуйста, обратитесь к.
Кода -копия выглядит следующим образом:
> Новый массив (3, 11, 8)
[3, 11, 8]
> Новый массив (3)
[,,,]
> Новый массив (3.1)
Диалератор: неверная длина массива
Так что, если мы хотим преобразовать набор значений в экземпляр суб-конструктора, что мы должны делать? Это значение Array.of () (помните, что подконец массива унаследовал все методы массива, в том числе (), конечно,).
Кода -копия выглядит следующим образом:
класс Myarray Extends Array {
...
}
console.log (myarray.of (3, 11, 8) экземпляр Myarray); // истинный
console.log (myarray.of (3) .length === 1); // истинный
Array.of () будет довольно удобным для обертывания значений в массиве, без странного способа обработки массива (). Но также обратите внимание на Array.prototype.map (), здесь есть яма:
Кода -копия выглядит следующим образом:
> ['a', 'b']. map (array.of)
[['a', 0, ['a', 'b']],
['b', 1, ['a', 'b']]]]]]
> ['a', 'b']. map (x => array.of (x)) // лучше
[['a'], ['b']]
> ['a', 'b']. Map (x => [x]) // Лучше всего (в данном случае)
[['a'], ['b']]
Как вы можете видеть, Map () передаст три параметра в свой обратный вызов. Последние два часто упускаются из виду (детали).
Прототип методов
Есть много новых методов, доступных для случаев массивов.
Итерация над массивами
Следующий метод поможет завершить итерацию в массиве:
Кода -копия выглядит следующим образом:
Array.prototype.Entries ()
Array.prototype.keys ()
Array.prototype.values ()
Каждый из вышеперечисленных методов возвращает ряд значений, но не будет возвращен в качестве массива. Они будут отображаться один за другим через итераторы. Давайте посмотрим на пример (я положу содержимое итератора в массив с помощью массива. От ()):
Кода -копия выглядит следующим образом:
> Array.from (['a', 'b'] .keys ())
[0, 1]
> Array.from (['a', 'b'] .values ())
['a', 'b']
> Array.from (['a', 'b'] .entries ())
[[0, 'a'],
[1, 'b']]
Вы можете объединить записи () и петли в Ecmascript 6, чтобы легко разобрать итеративный объект в пару ключевых значений:
Кода -копия выглядит следующим образом:
for (let [index, elem] of ['a', 'b']. intister ()) {
console.log (index, elem);
}
Примечание. Этот код уже можно запустить в последнем браузере Firefox. T Firefox.
Найдите элементы массива
Array.prototype.find (Predicate, Thisarg?) Возвращает первый элемент, который удовлетворяет функции обратного вызова. Если ни один элемент не удовлетворяет условию, он возвращает неопределенное. например:
Кода -копия выглядит следующим образом:
> [6, -5, 8] .find (x => x <0)
-5
> [6, 5, 8] .find (x => x <0)
неопределенный
Array.prototype.findindex (предикат, эторг?)
Возвращает индекс первого элемента, который удовлетворяет функции обратного вызова. Если не найдено удовлетворительных элементов, -1 возвращается. например:
Кода -копия выглядит следующим образом:
> [6, -5, 8] .findindex (x => x <0)
1
> [6, 5, 8] .findindex (x => x <0)
-1
Оба находят* методы игнорируют отверстия, то есть они не обращают внимания на неопределенные элементы. Подпись функции завершения обратного вызова:
ПРЕДУПРЕЖДЕНИЕ (элемент, индекс, массив)
Найдите NAN через FindIndex ()
Array.prototype.indexof () имеет хорошо известное ограничение, то есть он не может найти NAN. Потому что он использует идентичность (===), чтобы найти соответствующие элементы:
Кода -копия выглядит следующим образом:
> [Nan] .indexof (NAN)
-1
Используя findindex (), вы можете использовать object.is (), что не вызовет такую проблему:
Кода -копия выглядит следующим образом:
> [Nan] .findindex (y => object.is (nan, y))
0
Вы также можете использовать более общий способ создания вспомогательной функции elemis ():
Кода -копия выглядит следующим образом:
> Функция elemis (x) {return object.is.bind (object, x)}
> [Nan] .findindex (elemis (nan))
0
Array.prototype.fill (значение, начало?, Конец?)
Используйте заданное значение, чтобы заполнить массив:
Кода -копия выглядит следующим образом:
> ['a', 'b', 'c']. Fill (7)
[7, 7, 7]
Отверстия не будут рассматриваться с каким -либо специальным лечением:
Кода -копия выглядит следующим образом:
> Новый массив (3) .fill (7)
[7, 7, 7]
Вы также можете ограничить начало и конец своей заполнения:
Кода -копия выглядит следующим образом:
> ['a', 'b', 'c']. Заполните (7, 1, 2)
['a', 7, 'c']
Когда я могу использовать новый метод массива?
Есть некоторые методы, которые можно использовать в браузере.