Как создать многомерный массив javascript. Удаление деталей массива. Добавление пользовательских свойств к массивам

В JavaScript так же как и в других языках программирования для работы с массивами применяются разные методы.

Методы упрощают построение логики и её реализации в скрипте.

Ниже приведены базовые методы для работы с массивами в JS.

push

Метод push() добавляет значение в конец массива.

Let arr = ; arr.push(312); console.log(arr); // →

pop

Метод pop() удаляет последний элемент из массива или возвращает его значение.

Let arr = ; arr.pop(); console.log(arr); // →

Используя возможность получить значение последнего элемента массива, как пример, мы можем получить формат изображения:

Let img = "https://example.com/img/name.png"; let format = img.split(".").pop(); console.log(format); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

unshift

Метод unshift() добавляет элемент в начало массива.

Let arr = ; arr.unshift(312); console.log(arr); // →

shift

Метод shift() удаляет первый элемент из массива.

Let arr = ; arr.shift(); console.log(arr); // → ;

Нужно понимать, что при применении методов shift и unshift у каждого элемента массива изменяется его индекс. Это может замедлять выполнение программы если массив имеет большую длину.

split

Метод split() применяется для трансформации строки в массив. Split разделяет строку (string) по указаному параметру.

Let str = "Аня, Маша, Саша, Даша"; // это строка let arr = str.split(", "); console.log(arr); // → ["Аня", "Маша", "Саша", "Даша"] - это массив

join

Метод join() объединяет элементы массива в строку, через указанный в параметре разделитель.

Let arr = ["Notpad++", "Sublime", "VSCode"]; // это массив let str = arr.join(", "); console.log("Редакторы для кода: " + str); // → "Редакторы для кода: Notpad++, Sublime, VSCode"

slice

Метод slice() создаёт новый массив, в который копирует элементы из источника начиная с элемента c индексом первого параметра переданного в метод, до элемента с индексом второго параметра.

Например: slice(3, 7) вернёт элементы с индексами 3, 4, 5, 6. Элемент с индексом 7 не войдёт в массив.

Если в slice() передан параметр с отрицательным значением, то он возвращает новый массив с количеством элементов указанных в параметре, но уже взятых с конца исходного массива.

Метод slice не изменяет исходный массив.

Вот несколько примеров работы метода slice():

Let arr = ["A", "B", "C", "D", "E", "F", "G"]; // Вернёт массив в котором будут элементы с индексами от 2 до 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Вернёт новый массив в котором будут элементы с индексами от 3 до arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Вернёт копию исходного массива console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Вернёт новый массив состоящий из последних трёх элементов исходного console.log(arr.slice(-3)); // → ["E", "F", "G"]

splice

Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

Синтаксис:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Параметры:

• start - Индекс, по которому начинать изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.
• deleteCount - Целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. В этом случае вы должны указать как минимум один новый элемент. Если deleteCount больше количества элементов, оставшихся в массиве, начиная с индекса start, то будут удалены все элементы до конца массива.
• itemN - Необязательные параметры. Добавляемые к массиву элементы. Если вы не укажете никакого элемента, splice() просто удалит элементы из массива.

Возвращаемое значение

Описание

Если количество указанных вставляемых элементов будет отличным от количества удаляемых элементов, массив изменит длину после вызова.

Let arr = ["Барса", "Шахтёр", "МЮ", "Милан", "Реал", "Аякс", "Ювентус"]; let nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["МЮ", "Милан", "Реал"] console.log(arr); // → ["Барса", "Шахтёр"] arr.splice(1, 0, "Зенит", "ЦСКА", "Спартак"); console.log(arr); // → ["Барса", "Зенит", "ЦСКА", "Спартак", "Шахтёр"]

reverse

Метод reverse() меняет порядок элементов массива на обратный. В результате первый элемент массива становится последним, а последний элемент - первым.

Let arr = ; console.log(arr.reverce()); // → console.log(["Алиса", "БГ", "ГО", "ДДТ"].reverce()); // → ["ДДТ", "ГО", "БГ", "Алиса"]

map

Метод map() проходит по элементам массива производя с ними заданные действия и возвращает копию массива с изменёнными элементами.

В примере ниже к каждому элементу массива прибавим значение индекса этого элемента (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Let arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //

или каждое значение массива умножим к примеру на 12

Let arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →

filter

Метод filter() используется для фильтрации массивов. Он проходит по массиву, возвращая только те элементы, которые проходят заданное условие.

Например отфильтруем значения массива из чисел оставив только те, которые больше 21

Let arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →

Обратите внимание, что 21 не вошло в результат массива, так как условие было вернуть то что больше 21. Чтобы и 21 вошло в массив, то условие ставим как больше или равно: element >= 21

reduce

Метод reduce() последовательно идёт по элементам массива, аккумулируя при этом промежуточный результат согласно заданного в условии действия функции. В конечном результате он возвращает всего одно значение.

Часто этот метод применяют для того, чтобы найти сумму всех чисел в массиве. Пример:

Let arr = ; let summa = arr.reduce((acc, element) => acc + element); console.log(summa); // → 370

sort

Метод sort() применяется для сортировки элементов массива согласно заданным параметрам.

Пример - возьмём массив чисел о отсортируем их по порядку возврастания:

Let arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →

includes

Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false .

Пример использования includes() .

Вот такое логическое выражение:

Let animal = "dog"; if (animal == "cat" || animal == "dog" || animal == "lion" || animal == "horse") { // ........ }

используя метод includes можно записать вот так:

Let animal = "dog"; const animals = ["cat", "dog", "lion", "horse"]; if (animals.includes(animal)) { // ........... }

Учимся индексировать массивы в js , удалять и добавлять их элементы.

Массив в JavaScript - это глобальный объект, предназначенный для хранения списка значений.

Он похож на другие переменные тем, что может хранить данные любого типа. Но у массива есть одно важное отличие от переменной: в нём может одновременно храниться больше одного элемента.

Массив - это упорядоченный набор значений. Каждое значение называется элементом и имеет свой номер, который называется индекс.

Элемент внутри массива может быть любого типа. Причём элементы одного массива могут быть разных типов: числа, строки, логические элементы и даже объекты или другие массивы.

Порядок элементов массива отсчитывается с 0 . Получается, что в массиве всегда будет смещение индекса на единицу: у первого элемента будет индекс 0 , у второго 1 , и т.д.

Вот пример массива с элементами различных типов:

Создание (объявление) массива

Массивы очень удобны, потому что в них можно хранить столько данных, сколько нужно. Максимально возможный размер js -массива — 2 32 элемента.

Нужно сказать JavaScript , что мы хотим создать именно массив. Для этого есть два варианта: значение в квадратных скобках или ключевое слово new .

Короткая запись: при помощи квадратных скобок

Заключённый в квадратные скобки список значений, разделённых запятыми.

var myArray = [ "Джек", "Сойер", "Джон", "Дезмонд" ];

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

Значения задаются так же, как и простые переменные, то есть строки нужно объявлять заключёнными в кавычки и т.д.

Чтобы объявить пустой массив, оставьте скобки пустыми:

var myArray = ;

Длинная запись: при помощи конструктора Array()

var lostArray = new Array("Джек", "Сойер", "Джон", "Дезмонд"); var twinPeaksArray = new Array("Лора", 2, ["Боб", "Лиланд", "Дейл"]);

Ключевое слово new говорит JavaScript создать новый массив, значения которого передаются как параметры.

Если вы заранее знаете, сколько элементов будет в вашем массиве, можно сразу передать это значение в конструкторе.

var myArray = new Array(80);

Выражение, приведенное выше, создаст пустой массив, состоящий из 80 слотов со значениями undefined .

Объявление пустого массива:

var myArray = new Array();

Доступ к элементам массива

С помощью индекса каждого элемента можно работать с любыми данными в массиве, обращаясь к ним при помощи оператора :

var myArray = ["Джек", "Сойер", "Джон", "Дезмонд"]; console.log(myArray); // Выводит “Джек” console.log(myArray); // Выводит “Дезмонд”

В массиве может быть несколько уровней, то есть каждый элемент может сам быть массивом. В итоге получится двумерный js -массив . Как же обратиться к этим массивам, которые располагаются внутри других - «многомерным массивам »?

Для примера давайте рассмотрим массив, представляющий семью. Дети из этой семьи записаны отдельным массивом внутри главного:

var familyArray = ["Мардж", "Гомер", ["Барт", "Лиза", "Мэгги"]];

Можно представить его следующим образом:

Для обращения к значению «Лиза »:

var lisa = familyArray; console.log(lisa); // выводит «Лиза»

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

Добавление элементов в массив

Мы разобрались, как обращаться к элементам массива при помощи соответствующих им индексов. Похожим образом можно добавлять (или изменять) элементы, объявляя, например:

var myArray = [ "Кейт", "Сун"]; myArray = "Джулиет"; console.log(myArray); // Выводит "Кейт, Сун, Джулиет"

Что произойдёт, если я объявлю элемент с индексом, перед которым нет других элементов? Массив сам создаст все недостающие элементы и присвоит им значение undefined :

var myArray = ["Кейт", "Сун"]; myArray = "Джулиет"; console.log(myArray.length); // Выводит «6» console.log(myArray); // Prints ["Кейт", "Сун", undefined, undefined, undefined, "Джулиет"]

Узнать какова длина js -массива можно, воспользовавшись свойством length . В примере, приведенном выше, в массиве шесть элементов, и для трёх из них не было задано значение - они обозначены как undefined .

Метод push()

С помощью метода push() можно добавить в js -массив один или несколько элементов. Push() принимает неограниченное количество параметров, все они будут добавлены в конец массива.

var myArray = [ "Кейт", "Сут"]; myArray.push("Джулиет"); // Добавляет в конец массива элемент "Джулиет" myArray.push("Либби", "Шеннон");// Добавляет в конец массива элементы "Либби" и "Шеннон" console.log(myaArray); // Prints ["Кейт", "Сун", " Джулиет ", "Либби", "Шеннон"]

Метод unshift()

Метод unshift() работает также как и push() , только добавляет элементы в начало массива.

var myArray = [ "Кейт", "Сун"]; myArray.unshift("Джулиет"); // Добавляет в начало массива элемент "Джулиет" myArray.unshift("Либби", "Шеннон"); // Добавляет в начало массива элементы "Либби" и "Шеннон" console.log(myArray); // Выводит ["Либби", "Шеннон", "Джулиет", "Кейт", "Сун"]

Удаление элементов массива

Методы pop() и shift()

Методы pop() и shift() удаляют последний и первый элемент массива, соответственно:

var myArray = ["Джек", "Сойер", "Джон", "Дезмонд", "Кейт"]; myArray.pop(); // Удаляет элемент "Кейт" myArray.shift(); // Удаляет элемент "Джек" console.log(myArray); // Выводит ["Сойер", "Джон", "Дезмонд"]

Метод splice()

С помощью метода splice() можно удалять или добавлять элементы в массив, при этом точно указывая индекс элементов.

В следующем примере метод splice() добавляет два элемента, начиная с индекса 2 (то есть с третьего элемента ):

var fruitArray = ["яблоко", "персик", "апельсин", "лимон", "лайм", "вишня"]; fruitArray.splice(2, 0, "дыня", "банан"); console.log(fruitArray); // Выводит ["яблоко", "персик", "дыня", "банан", "апельсин", "лимон", "лайм", "вишня"]

Первый параметр метода splice() - индекс. Он указывает, на какой позиции нужно добавить/удалить элементы. В нашем примере мы выбрали индекс 2 (со значением «апельсин» ).

Второй параметр - количество элементов, которые требуется удалить. Мы указали значение 0, поэтому ничего не удалится.

Следующие параметры - необязательные. Они добавляют в массив новые значения. В нашем случае нужно добавить «дыню» и «банан», начиная с индекса 2.

С массивами можно работать посредством различных методов, предоставляемых конструктором Array.

Методы pop/push и shift/unshift

Рассмотрим методы pop() и push(). Эти методы позволяют работать с массивами как со стеками. Стек - это структура данных, в которой доступ к элементам организован по принципу LIFO (англ. last in - first out, «последним пришёл - первым ушел»). Принцип работы стека можно сравнить со стопкой тарелок: чтобы взять вторую сверху, нужно снять верхнюю. Как это работает изображено на рисунке:

И так вернемся к рассмотрению методов push() и pop(). Метод push() добавляет один или несколько новых элементов в конец массива и возвращает его новую длину. Метод pop() - удаляет последний элемент массива, уменьшает длину массива и возвращает удаленное им значение. Стоит обратить внимание на то, что оба эти метода изменяют массив на месте, а не создают его модифицированную копию.

Var foo = ; // foo: foo.push(1,2); // foo: Возвращает 2 foo.pop(); // foo: Возвращает 2 foo.push(3); // foo: Возвращает 2 foo.pop(); // foo: Возвращает 3 foo.push(); // foo: ] Возвращает 2 foo.pop() // foo: Возвращает foo.pop(); // foo: Возвращает 1 var fruits = ["груши", "бананы", "яблоки"]; var picked = fruits.pop(); document.write("Вы сорвали мои " + picked); Попробовать »

Методы shift() и unshift() ведут себя во многом также, как pop() и push(), за исключением того, что они вставляют и удаляют элементы в начале массива. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места под новые элементы, добавляет один или несколько элементов в начало массива и возвращает новую длину массива. Метод shift() удаляет первый элемент массива и возвращает его значение, смещая все последующие элементы для занятия свободного места в начале массива.

Var f = ; // f: f.unshift(1); // f: Возвращает: 1 f.unshift(22); // f: Возвращает: 2 f.shift(); // f: Возвращает: 22 f.unshift(3,); // f:,1] Возвращает: 3 f.shift(); // f:[,1] Возвращает: 3 f.shift(); // f: Возвращает: f.shift(); // f: Возвращает: 1

Метод join

Метод Array.join() используется для объединения элементов массива в одну строку. Методу можно передать необязательный строковой аргумент, который будет использоваться для разделения элементов в строке. Если разделитель не задан, то при вызове метода символом-разделителем по умолчанию будет запятая.

Var a = ["Ветер","Дождь","Огонь"]; var myVar1 = a.join(); //"Ветер,Дождь,Огонь" var myVar2 = a.join(", "); //"Ветер, Дождь, Огонь" var myVar3 = a.join(" + "); //"Ветер + Дождь + Огонь" document.write(myVar1 + "
" + myVar2 + "
" + myVar3); Попробовать »

Метод Array.join() является обратным по отношению к методу String.split(), который создает массив путем разбиения строки на фрагменты.

Метод reverse

Метод Array.reverse() меняет порядок следования элементов в массиве на противоположный и возвращает массив с переставленными элементами. Этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве.

Var myArr = ["один", "два", "три"]; document.write(myArr.reverse()); Попробовать »

Метод concat

Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), последовательно дополненный значениями всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов сам является массивом, тогда будут добавлены все его элементы. Имена массивов используются в качестве аргументов и указываются в том порядке, в котором нужно объединить их элементы.

Var a = ; a.concat(4, 5) //Возвращает a.concat(); //тоже самое - возвращает a.concat(,) //Возвращает

Метод sort

Метод Array.sort() на месте сортирует элементы массива и возвращает отсортированный массив. Если метод sort() вызывается без аргумента, то он сортирует элементы массива в алфавитном порядке (временно преобразует их в строки для выполнения сравнения). В качестве аргумента метод sort() может принимать функцию сравнения, которая определяет порядок сортировки элементов.

Var a = ["Киви", "Апельсины", "Груши"]; a.sort(); var s = a.join(", "); //Апельсины, Груши, Киви document.write(s); //пример с числами var myArr = ; myArr.sort(); document.write(myArr); //1,10,2 Попробовать »

Наверное от сортировки чисел вы ожидали увидеть немного другой результат. Такая сортировка произошла потому, что метод sort() сортирует элементы, преобразуя их в строки. Поэтому и порядок у них получается строковой - ведь "10"

Для сортировки в каком-либо ином порядке, отличном от алфавитного, можно передать методу sort() в качестве аргумента функцию сравнения. Следует однако учесть, что функцию сравнения придется писать самим. Эта функция должна иметь два параметра, так как она устанавливает, какой из двух ее аргументов должен присутствовать раньше в отсортированном списке. Чтобы было легче разобраться и написать такую функцию, есть несколько правил, по которым будет определяться порядок элементов:

• Если первый аргумент должен предшествовать второму, функция сравнения возвращает отрицательное число (если a
• Если первый аргумент должен следовать за вторым, то функция сравнения возвращает положительное число (если a > b)
• Если два значения эквивалентны (т. е. порядок их расположения не важен), функция сравнения возвращает 0 (если a == b)

Для сравнения в качестве своих аргументов функция использует элементы массива:

Function foo(a,b) { //определяем функцию проверки if (a b) return 1; return 0; //если a == b } var a = ; a.sort(foo); //в качестве аргумента передается только имя функции document.write(a.join(", ")); //тоже самое записать более коротко var a = ; a.sort(function(a,b) { //используем анонимную функцию return a - b; //функция возвращает значение 0 }); document.write(a); //1,2,5,10 Попробовать »

Первая запись в примере написана так, для того, чтобы было легче понять, как это работает. Обратите внимание, насколько удобно использовать во втором фрагменте анонимную функцию. Она вызывается только один раз, поэтому нет необходимости давать ей имя.

Примечание: Если в массиве есть неопределенные элементы (undefined), они переносятся в конец массива.

Метод slice

Метод Array.slice() используется для копирования указанного участка из массива и возвращает новый массив содержащий скопированные элементы. Исходный массив при этом не меняется.

Синтаксис метода:

Имя_массива.slice(begin, end);

Имя_массива следует заменить именем того массива, из которого нужно извлечь определенный набор элементов для нового массива. Метод принимает два аргумента, которые определяют начало и конец возвращаемого участка массива. Метод копирует участок массива, начиная от begin до end, не включая end. Если указан только один аргумент, возвращаемый массив будет содержать все элементы от указанной позиции до конца массива. Можно использовать отрицательные индексы - они отсчитываются с конца массива.

Var arr = ; arr.slice(0,3); //Возвращает arr.slice(3); //Возвращает arr.slice(1,-1); //Возвращает arr.slice(-3,-2); //Возвращает

Метод splice

Метод Array.splice() - это универсальный метод для работы с массивами. Он изменяет массив на месте, а не возвращает новый измененный массив, как это делают методы slice() и concat(). Метод splice может удалять элементы из массива, вставлять новые элементы, заменять элементы - по очереди и одновременно. Он возвращает массив, состоящий из удаленных элементов, если ни один из элементов не был удален, вернет пустой массив.

Синтаксис метода:

Имя_массива.splice(index , кол-во, elem1, ..., elemN);

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

Var fruits = ["апельсины", "яблоки", "груши", "виноград"]; var deleted = fruits.splice(2,2); //возвращает ["груши", "виноград"] document.write(deleted); var arr = ; arr.splice(4); //Возвращает ; массив стал: arr.splice(1,2); //Возвращает ; массив стал: arr.splice(1,1); //Возвращает ; массив стал: Попробовать »

Первые два аргумента метода splice() задают элементы массива, подлежащие удалению. За этими двумя аргументами может следовать любое количество дополнительных аргументов, задающих элементы, которые будут вставлены в массив, начиная с позиции, заданной первым аргументом.

Var fruits = ["апельсины", "яблоки"]; fruits.splice(2,0, "арбузы"); //возвращает document.write(fruits); //стало ["апельсины", "яблоки", "арбузы"] var arr = ; arr.splice(2,0,"a","b"); //Возвращает ; стало arr.splice(2,2,); //Возвращает ["a","b"]; стало ,3,4,5] Попробовать »

Стоит обратить внимание, что в отличие от concat(), метод splice() не разбивает на отдельные элементы массивы, передаваемые в качестве аргументов. То есть, если методу передается массив для вставки, он вставляет сам массив, а не элементы этого массива.

Метод toString

Метод toString() преобразует элементы массива в строку, используя в качестве символа-разделителя запятую.

Var arr = ["Молоко","Хлеб","Печенье"]; var food = arr.toString(); document.write(food); //Молок,Хлеб,Печенье Попробовать »

Обратите внимание, метод возвращает ту же строку, что и метод join() при вызове его без аргументов.

indexOf и lastIndexOf

Метод indexOf возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента.

Синтаксис методов indexOf() и lastIndexOf():

Имя_массива.indexOf(искомый_элемент, индекс) имя_массива.lastIndexOf(искомый_элемент, индекс)

Первый аргумент метода указывает значение элемента, индекс которого нужно найти, второй аргумент (необязательный), указывает индекс с которого будет начинаться поиск. Если одинаковых вхождений несколько, выбирается наименьший (первый) индекс. Если элемент с искомым значением не найден, метод вернет -1. Внутри метода для поиска используется строгое сравнение (===).

Var a = ; a.indexOf(3); //вернет 2 a.indexOf(3,4); //вернет 6 a.indexOf(35); //вернет -1: нет элемента с таким значением a.indexOf(2); // 1

Метод lastIndexOf() тоже возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Разница лишь в том, что метод lastIndexOf() выбирает наибольший (последний) индекс.

Var a = ; a.lastIndexOf(3); //вернет 7 a.lastIndexOf(35); //вернет -1: нет элемента с таким значением a.lastIndexOf(2); // 6

Методы итераторы

Методы, описанные ниже, являются итераторами. Во всех современных браузерах для работы с массивами есть методы, которые предназначены для перебора элементов и выполнения различных действий над ними. Это методы forEach(), map(), filter(), every(), some, reduce() и reduceRight().

Они перебирают элементы массива начиная с 0 до length - 1 и, если элемент существует, передают его в callback обработчик-функцию.

forEach

Синтаксис метода:

Имя_массива.forEach(callback, thisArg)

В качестве первого аргумента указывается callback-функция, которую метод forEach() будет вызывать для каждого элемента массива. Реализацию вызываемой функции-обработчика нужно писать самим. Вызываемая функция должна иметь три параметра: первый параметр принимает в качестве аргумента - значение элемента массива, второй - индекс элемента, и третий - сам массив. Однако, если нужно использовать только значения элементов массива, можно написать функцию только с одним параметром. Второй аргумент - thisArg (необязательный) будет передан в качестве значения this.

Var arr = ; function foo(value) { var sum = value * this; return document.write(sum + "
"); } arr.forEach(foo, 5); //второй аргумент будет передан в качестве значения this //пример с тремя параметрами var a = ; a.forEach(function(el, idx, a) { document.write("a["+idx+"] = "+el+" в ["+a+"]
"); }); Попробовать »

filter

Синтаксис метода:

Имя_массива.filter(callback, thisObject)

Метод filter() создает и возвращает новый массив, который будет содержать только те элементы массива, для которых вызов функции callback возвратит true.

Function isBig(element, index, array) { //возвращает числа, которые больше или равны 10 return (element >= 10); //если значение элемента больше или равно 10 - выражение вернет true } var filtered = .filter(isBig); //filtered

map

Метод map() создает и возвращает новый массив, который будет состоять из результатов вызова функции callback(item, idx, ar) для каждого элемента массива.

Var a = ; var b = a.map(function(item, idx, arr) { return item * item; }); // b =

every и some

Метод every() возвращает true, если для всех элементов массива указанная функция, используемая для их проверки, вернет true.

Метод some() возвращает true, если во время проверки в указанной функции один или несколько элементов вернут true.

Var a = ; a.every(function(x) { return x 10; }) //true: одно число > 10

reduce и reduceRight

Синтаксис методов:

Имя_массива.reduce(callback, initialValue) имя_массива.reduceRight(callback, initialValue)

Метод reduce() применяет указанную функцию (callback) в отношении сразу двух значений в массиве, перебирая элементы слева направо, сохраняя при этом промежуточный результат.

Аргументы функции callback: (previousValue, currentItem, index, array)

• previousValue - возвращаемый результат callback функции (он же промежуточный результат)
• currentItem - текущий элемент массива (элементы перебираются по очереди слева-направо)
• index - индекс текущего элемента
• array - обрабатываемый массив

initialValue (инициализирующее значение) - объект, используемый в качестве первого аргумента первого вызова функции callback. Проще говоря, значение previousValue при первом вызове равно initialValue. Если initialValue нет, то оно равно первому элементу массива, а перебор начинается со второго:

Var a = ; function foo(prevNum,curNum) { sum = prevNum + curNum; alert(sum); return sum; } var result = a.reduce(foo, 0); document.write(result); Попробовать »

Разберем как работает этот пример. Первыми аргументами функции foo являются:

• prevNum = 0 (так как initialValue - 0)
• curNum = 1 (текущий элемент - 1-ый элемент массива)

К числу 0 прибавляется 1. Этот результат (sum: 1) будет передан как prevNum при следующем запуске функции. И так далее пока не дойдет до последнего элемента. Возвращенный результат - сумма от последнего запуска, составит 15 (1+2+3+4+5).

Метод reduceRight работает аналогично методу reduce, но идет по массиву справа-налево:

Var a = ["h","o","m","e"]; function bar(prevStr, curItem) { return prevStr + curItem; } document.write(a.reduceRight(bar)); //emoh

• Перевод

• I. Перебор настоящих массивов
  1. Метод forEach и родственные методы
  2. Цикл for
  3. Правильное использование цикла for...in
  4. Цикл for...of (неявное использование итератора)
  5. Явное использование итератора
• 1. Использование способов перебора настоящих массивов
  2. Преобразование в настоящий массив
  3. Замечание по объектам среды исполнения

I. Перебор настоящих массивов

На данный момент есть три способа перебора элементов настоящего массива:

1. метод Array.prototype.forEach ;
2. классический цикл for ;
3. «правильно» построенный цикл for...in .

Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа:

1. цикл for...of (неявное использование итератора);
2. явное использование итератора.

1. Метод forEach и родственные методы

Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений - метод forEach .

Пример использования:
var a = ["a", "b", "c"]; a.forEach(function(entry) { console.log(entry); });
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.

К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.

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

ForEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними:

• every - возвращает true , если для каждого элемента массива колбек возвращает значение приводимое к true .
• some - возвращает true , если хотя бы для одного элемента массива колбек возвращает значение приводимое к true .
• filter - создает новый массив, включающий те элементы исходного массива, для которых колбек возвращает true .
• map - создает новый массив, состоящий из значений возращаемых колбеком.
• reduce - сводит массив к единственному значению, применяя колбек по очереди к каждому элементу массива, начиная с первого (может быть полезен для вычисления суммы элементов массива и других итоговых функций).
• reduceRight - работает аналогично reduce, но перебирает элементы в обратном порядке.

2. Цикл for

Старый добрый for рулит :

Var a = ["a", "b", "c"]; var index; for (index = 0; index < a.length; ++index) { console.log(a); }
Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index < len; ++index) { console.log(a); }
Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) { console.log(a); }
Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for...in

Если вам посоветуют использовать цикл for...in , помните, что перебор массивов - не то, для чего он предназначен . Вопреки распространенному заблуждению цикл for...in перебирает не индексы массива, а перечислимые свойства объекта.

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , for...in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:

// a - разреженный массив var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) { if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294) { console.log(a); } }
В данном примере на каждой итерации цикла выполняется две проверки:

1. то, что массив имеет собственное свойство с именем key (не наследованное из его прототипа).
2. то, что key - строка, содержащая десятичную запись целого числа, значение которого меньше 4294967294 . Откуда берется последнее число? Из определения индекса массива в ES5, из которого следует, что наибольший индекс, который может иметь элемент в массиве: (2^32 - 2) = 4294967294 .

Конечно, такие проверки отнимут лишнее время при выполнении цикла. Но в случае разреженного массива этот способ более эффективен, чем цикл for , поскольку в этом случае перебираются только те элементы, которые явно определены в массиве. Так, в примере выше будет выполнено всего 3 итерации (для индексов 0, 10 и 10000) - против 10001 в цикле for .

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

Function arrayHasOwnIndex(array, key) { return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294; }
Тогда тело цикла из примера значительно сократится:

For (key in a) { if (arrayHasOwnIndex(a, key)) { console.log(a); } }
Рассмотренный выше код проверок является универсальным, подходящим для всех случаев. Но вместо него можно использовать более короткую версию, хотя формально и не совсем правильную, но, тем не менее, подходящую для большинства случаев:

For (key in a) { if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) { console.log(a); } }

4. Цикл for...of (неявное использование итератора)

ES6, пока все еще пребывающий в статусе черновика , должен ввести в JavaScript итераторы.

Итератор - это реализуемый объектом протокол, который определяет стандартный способ получения последовательности значений (конечной или бесконечной).
Итератор - это объект, в котором определен метод next() - функция без аргументов, возвращающая объект с двумя свойствами:

1. done (boolean) - принимает значение true , если итератор достиг конца итерируемой последовательности. В противном случае имеет значение false .
2. value - определяет значение, возвращаемое итератором. Может быть не определено (отсутствовать), если свойство done имеет значение true .

Многие встроенные объекты, в т.ч. настоящие массивы, имеют итераторы по умолчанию. Простейший способ применения итератора в настоящих массивах - использовать новую конструкцию for...of .

Пример использования for...of:

Var val; var a = ["a", "b", "c"]; for (val of a) { console.log(val); }
В приведенном примере цикл for...of неявно вызывает итератор объекта Array для получения каждого значения массива.

5. Явное использование итератора

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

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) { console.log(entry.value); }
В данном примере метод Array.prototype.entries возвращает итератор, который используется для вывода значений массива. На каждой итерации entry.value содержит массив вида [ключ, значение] .

II. Перебор массивоподобных объектов

Кроме настоящих массивов, в JavaScript встречаются также массивоподобные объекты . С настоящими массивами их роднит то, что они имеют свойство length и свойства с именами в виде чисел, соответствующие элементам массива. В качестве примеров можно назвать DOM коллекции NodeList и псевдомассив arguments , доступный внутри любой функции/метода.

1. Использование способов перебора настоящих массивов

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

Конструкции for и for...in могут быть применены к массивоподобным объектам точно тем же путем, что и к настоящим массивам.

ForEach и другие методы Array.prototype также применимы к массивоподобным объектам. Для этого нужно использовать вызов Function.call или Function.apply .

Например, если вы хотите применить forEach к свойству childNodes объекта Node , то это делается так:

Array.prototype.forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Для удобства повторного использования этого приема, можно объявить ссылку на метод Array.prototype.forEach в отдельной переменной и использовать ее как сокращение:

// (Предполагается, что весь код ниже находится в одной области видимости) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов.

2. Преобразование в настоящий массив

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

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update : Как было отмечено в комментариях

Массивы — это один из самых часто используемых видов переменных, которые позволяют хранить множество последовательных значений в “одном месте”. Однако когда речь идёт о JavaScript-е, то тут есть куда капнуть.

В этой статье мы рассмотрим тройку малоизвестных техник, которые можно применить при работе с массивами.

1. Добавление пользовательских свойств к массивам

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

Вообще говоря, множество вещей с которыми мы сталкиваемся в JavaScript-е представляет собой объекты. Справедливо будет отметить, что в языке так же присутствую и “примитивные” типы данных, но их значения так или иначе используются в свойствах внутри объектов.

2. Доступ к элементам массива в рамках цикла

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

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

Цикл for...of предназначен для прохода по элементам массива, не затрагивая при этом индекс элемента.

Var ary = ["orange","apple","lychee"]; for (let item of ary){ console.log(item); } // "orange", "apple", "lychee" Для сравнения: вывод индексов элементов в цикле for. var ary = ["orange","apple","lychee"]; for (var item = 0; item < ary.length; item++){ console.log(item); } // 0, 1, 2

3. Количество элементов — не размерность массива

Когда речь идёт о размерности массива, то обычно мы думаем, что подразумевается количество хранящихся в нём элементов. На деле это не совсем так — свойство length рассчитывается в зависимости от максимального индекса элемента.

Свойство length очень неоднозначно. Чтобы в этом убедиться достаточно взглянуть на следующие манипуляции:

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

В последнем примере было достаточно поставить элемент на пятую позицию, в результате чего длина массива стала равна 6. Если вы думаете, что индексы от 0 до 4 создадутся автоматически, то будете неправы. Это можно проверить, используя оператор in .

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false

В данном случае будет справедливо назвать массив ary "разрежённым".

Так же мы можем манипулировать свойством length для того чтобы обрезать массивы. В примере, представленном ниже, демонстрируется “потеря” элемента под индексом 5, путём уменьшения значения свойства length массива ary .

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // undefined