Сайт о телевидении

С массивами можно работать посредством различных методов, предоставляемых конструктором 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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали конструкцию switch case в javascript . В данной статье я бы хотел рассказать, что такое массивы в Javascript . Понятие массива играет важную роль не только в Javascript, но и во всем программировании. Переменная, типа массив, содержит в себе не один элемент, а несколько. Синтаксис создания массива следующий:

Var mas = new Array(значение1, значение2,..., значениеN);

В данном случае создаётся переменная mas типа массив со значениями, указанными в скобках. Обращаю ваше внимание, что массив создаётся с помощью ключевого слова new. Обращаться к элементам массива можно, указав имя массива и в квадратных скобках индекс массива. Индекс массива задаётся с нуля. Давайте приведу пример массива, состоящего из 4 элементов и выведу 2 элемент:

var mas = new Array("privet", 1, 10, 5); document.write("Второй элемент массива = "+mas); // будет выведено число 10

Если мы поставим mas , то будет выведено "privet" , так как индексация массива начинается с нуля. Давайте теперь разберемся, как вывести все элементы массива. Для этого нужно воспользоваться циклом. Помимо знания циклов в Javascript , необходимо знать свойство массивов length , которое возвращает количество элементов массива (или по-другому его длину). Давайте выведем длину массива mas :

var mas = new Array("privet", 1, 10, 5); document.write("Длина массива = "+mas.length); // будет выведено число 4

Вывод всех элементов массива:

var mas = new Array("privet", 1, 10, 5); var i; for (i = 0; i < mas.length; i++) document.write(mas[i]+" ");

Пока что, мы с вами рассматривали одномерные массивы. Вообще массивы могут быть многомерными. Главное необходимо понимать, что, например двумерный массив — это массив элементами которого являются массивы. Давайте с вами разберем такую задачу: необходимо создать двумерный массив 3 на 3, элементы которого задаются пользователем и вывести этот массив. Здесь будем использовать оператор prompt для запроса числа у пользователя:

var mas = new Array(); //объявляем массив const n = 3; //объявляем константу, т.е. массив у нас размером 3 на 3 //для задания двумерного массива необходимо использовать двойной цикл var i; var j; for (i = 0; i < n; i++) { mas[i] = new Array();//Здесь мы как раз каждый элемент массива делаем массивом for (j = 0; j < n; j++) { mas[i][j] = prompt("[" + i +","+j+"]= " ,"..."); //запрашиваем число у пользователя } } for (i = 0; i < n; i++) { for (j = 0; j < n; j++) { document.write("[" + i +","+j+"]= "+ mas[i][j]);} //выводим элемент массива document.write("
"); //переход на новую строку после каждой заполненной строки массива }

В нашем случае двумерный массив соответствует (для примера) такой структуре: mas=[,,] . Видно, что у массива 3 элемента, каждый из которых является сам массивом.

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

• Перевод

В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях - это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for , который выглядит примерно так: for (var i=0; i < value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for ?

На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of , и о методах includes() , some() , every() , filter() , map() и reduce() . Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.

Надо отметить, что обзоры современных подходов к разработке на JS обычно включают в себя примеры, подготовленные с использованием стрелочных функций. Возможно, вы не особенно часто пользуетесь ими - может быть из-за того, что вам они не нравятся, может быть потому, что не хотите тратить слишком много времени на изучение чего-то нового, а, возможно, они просто вам не подходят. Поэтому здесь, в большинстве ситуаций, будут показаны два варианта выполнения одних и тех же действий: с использованием обычных функций (ES5) и с применением стрелочных функций (ES6). Для тех, у кого нет опыта работа со стрелочными функциями, отметим, что стрелочные функции не являются эквивалентами объявлений функций и функциональных выражений. Не стоит заменять одно на другое. В частности, это связано с тем, что в обычных и стрелочных функциях ключевое слово this ведёт себя по-разному.

1. Оператор расширения Оператор расширения (spread operator) позволяет «раскрывать» массивы, подставляя в то место, где использован этот оператор, вместо массивов, их элементы. Похожий подход предложен и для литералов объектов.▍Сильные стороны оператора расширения

• Это - простой и быстрый способ «вытащить» из массива его отдельные элементы.
• Этот оператор подходит для работы с литералами массивов и объектов.
• Это - быстрый и интуитивно понятный метод работы с аргументами функций.
• Оператор расширения не занимает много места в коде - он выглядит как три точки (…).

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

2. Цикл for…of Оператор for…of предназначен для обхода итерируемых объектов. Он даёт доступ к отдельным элементам таких объектов (в частности - к элементам массивов), что, например, позволяет их модифицировать. Его можно считать заменой обычному циклу for .▍Сильные стороны цикла for…of

• Это - простой способ для добавления или обновления элементов коллекций.
• Цикл for…of позволяет выполнять различные вычисления с использованием элементов (суммирование, умножение, и так далее).
• Им удобно пользоваться при необходимости выполнения проверки каких-либо условий.
• Его использование ведёт к написанию более чистого и читабельного кода.

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

3. Метод includes() Метод includes() используется для проверки наличия в коллекции некоего элемента, в частности, например, определённой строки в массиве, содержащем строки. Этот метод возвращает true или false в зависимости от результатов проверки. Пользуясь им, стоит учитывать, что он чувствителен к регистру символов. Если, например, в коллекции есть строковой элемент SCHOOL , а проверка на его наличие с помощью includes() выполняется по строке school , метод вернёт false .▍Сильные стороны метода includes()

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

▍Пример Предположим, у вас имеется гараж, представленный массивом со списком автомобилей, и вы не знаете, есть в этом гараже некий автомобиль, или нет. Для того чтобы решить эту проблему, надо написать код, который позволяет проверять наличие автомобиля в гараже. Воспользуемся методом includes() :

4. Метод some() Метод some() позволяет проверить, существуют ли некоторые из искомых элементов в массиве. Он, по результатам проверки, возвращает true или false . Он похож на вышерассмотренный метод includes() , за исключением того, что его аргументом является функция, а не, например, обычная строка.▍Сильные стороны метода some()

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

▍Пример Предположим, вы - владелец клуба, и в общем-то, вас не интересует - кто именно в ваш клуб приходит. Однако, некоторым посетителям вход в клуб закрыт, так как они склонны к излишнему потреблению спиртных напитков, по крайней мере, в том случае, если они оказываются в вашем заведении сами, и с ними нет никого, кто может за ними присмотреть. В данном случае группе посетителей можно войти в клуб только при условии, что хотя бы одному из них не меньше 18-ти лет. Для того чтобы автоматизировать проверку подобного рода, воспользуемся методом some() . Ниже его применение продемонстрировано в двух вариантах.ES5

ES6

5. Метод every() Метод every() обходит массив и проверяет каждый его элемент на соответствие некоему условию, возвращая true в том случае, если все элементы массива соответствуют условию, и false в противном случае. Можно заметить, что он похож на метод some() .▍Сильные стороны метода every()

• Метод every() позволяет проверить соответствие условию всех элементов массива.
• Условия можно задавать с использованием функций.
• Он способствует применению декларативного подхода при программировании.

▍Пример Вернёмся к предыдущему примеру. Там вы пропускали в клуб посетителей, не достигших 18 лет, но кто-то написал заявление в полицию, после чего вы попали в неприятную ситуацию. После того, как всё удалось уладить, вы решили, что вам всё это ни к чему и ужесточили правила посещения клуба. Теперь группа посетителей может пройти в клуб только в том случае, если возраст каждого члена группы не меньше 18 лет. Как и в прошлый раз, рассмотрим решение задачи в двух вариантах, но на этот раз будем пользоваться методом every() .ES5

ES6

6. Метод filter() Метод filter() позволяет создать, на основе некоего массива, новый массив, содержащий только те элементы исходного массива, которые удовлетворяют заданному условию.▍Сильные стороны метода filter()

• Метод filter() позволяет избежать модификации исходного массива.
• Он позволяет избавиться от ненужных элементов.
• Он улучшает читабельность кода.

▍Пример Предположим, вам надо отобрать из списка цен только те, которые больше или равны 30. Воспользуемся для решения этой задачи методом filter() .ES5

ES6

7. Метод map() Метод map() похож на метод filter() тем, что он тоже возвращает новый массив. Однако он применяется для модификации элементов исходного массива.▍Сильные стороны метода map()

• Метод map() позволяет избежать необходимости изменения элементов исходного массива.
• С его помощью удобно модифицировать элементы массивов.
• Он улучшает читаемость кода.

▍Пример Предположим, у вас имеется список товаров с ценами. Вашему менеджеру нужен новый список товаров, цены которых снижены на 25%. Воспользуемся для решения этой задачи методом map() .ES5

ES6

8. Метод reduce() Метод reduce() , в его простейшем виде, позволяет суммировать элементы числовых массивов. Другими словами, он сводит массив к единственному значению. Это позволяет использовать его для выполнения различных вычислений.▍Сильные стороны метода reduce()

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

▍Пример Предположим, вам надо посчитать ваши расходы за неделю, которые хранятся в массиве. Решим эту задачу с помощью метода reduce() .ES5

ES6

Добавить метки

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