Массивы в js.

Массивы в js.

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

В массиве могут храниться элементы любого типа.

В эту коллекцию мы можем вставлять элементы так же куда угодно.

В начало, конец в произвольную позицию и так же вместо чего то.

Два варианта создания массива.

let arr = new Array();
let arr = [];

Предпочтительней второй.

Пример.

let myarr = [True, 1, 2, "Дима"];

Элементы массива нумеруются, начиная с нуля.

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

myarr[3]

Заменить елемент присвоением.

myarr[3] = "Вова"

Вставить в конец.

myarr[4] = "Петя"

Получить длинну (кол-во элементов) можно через свойство lenght.

myarr.lenght

Однако lenght это не количество элементов, а наибольший цифровой индекс плюс один.

let myarr = []
myarr[35] = "Dima"
alert(myarr.lenght) // вернет 34

Если мы вручную увеличим свойство lenght, ничего интересного не произойдёт. Зато, если мы уменьшим его, массив станет короче.

Таким образом, самый простой способ очистить массив – это arr.length = 0;.

Висячая запятая.

Список элементов массива, может оканчиваться запятой:

let myarr = [True, 1, 2, "Дима",];

Методы pop/push, shift/unshift.

Очередь – один из самых распространённых вариантов применения массиваи он поддерживающая два вида операций:

push - добавляет элемент в конец. shift - удаляет элемент в начале, сдвигая очередь, так что второй элемент становится первым.

Пример очереди - список сообщений.

Стек - поддерживает тоже две операции.

push - добавляет элемент в конец. pop - удаляет последний элемент.

Таким образом, новые элементы всегда добавляются или удаляются из «конца».

Пример стека - колода карт.

let myarr = [True, 1, 2, "Дима"];
let el = myarr.pop() // присвоит el "Дима" и вытолкнет елемент из массива
myarr.push("Вова") // добавит "Вова" в конец масива
let el = myarr.shift() // возвратит True и вытолкнет его из массива
myarr.unshift("Петя") // добавит "Петя" в начало массива

Методы push и unshift могут добавлять сразу несколько элементов:

myarr.push("One","Two")

Работать с концом массива быстрее, чем с его началом поэтому методы push/pop выполняются быстро, а методы shift/unshift – медленно.

Медленно потому, что приходится заново все пронумеровывать и чем больше массив тем дольше.

Перебор элементов.

Самый “древний” способ - цикл for.

let myarr = [True, 1, 2, "Дима"];

for (let i = 0; i < myarr.length; i++) {
  alert( arr[i] );
}

Более продвинутый и короткий вариант for … of

for (let item of myarr) {
    alert( item );
}

Цикл for..of не предоставляет доступа к номеру текущего элемента, только к его значению, но в большинстве случаев этого достаточно.

Матрица.

Массивы могут содержать элементы, которые тоже являются массивами.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, центральный элемент

Методы функционального программирования. Перебирающие методы.

forEach, map, filter и reduce

forEach - используется для перебора массива.

filter - используется для фильтрации массива через функцию.

map - используется для трансформации массива.

reduce - используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата, иначе говоря для “свертки” массива в одно значение.

forEach

Проходит по массиву и для каждого элемента массива вызывает функцию callback.

Этой функции он передаёт три параметра callback(item, i, arr):

item – очередной элемент массива.

i – его номер.

arr – массив, который перебирается.

var arr = ["Раз", "Два", "Три"];

arr.forEach(function(item, i, arr) {
  alert( i + ": " + item + " (массив:" + arr + ")" );
});

map

Используется для трансформации массива.

Он создаёт новый массив, который будет состоять из результатов вызова callback(item, i, arr) для каждого элемента arr.

var names = ['HTML', 'CSS', 'JavaScript'];

var nameLengths = names.map(function(name) {
  return name.length;
});

// получили массив с длинами
alert( nameLengths ); // 4,3,10

filter

Он создаёт новый массив, в который войдут только те элементы arr, для которых вызов callback(item, i, arr) возвратит true.

var arr = [1, -1, 2, -2, 3];

var positiveArr = arr.filter(function(number) {
  return number > 0;
});

alert( positiveArr ); // 1,2,3

every/some

Эти методы используются для проверки массива.

every(callback) - возвращает true, если вызов callback вернёт true для каждого элемента arr.

some(callback)» возвращает true, если вызов callback вернёт true для какого-нибудь элемента arr.

var arr = [1, -1, 2, -2, 3];

function isPositive(number) {
  return number > 0;
}

alert( arr.every(isPositive) ); // false, не все положительные
alert( arr.some(isPositive) ); // true, есть хоть одно положительное

reduce

arr.reduce(callback) - используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.

Метод reduce используется для вычисления на основе массива какого-либо единого значения, иначе говорят «для свёртки массива».

var arr = [1, 2, 3, 4, 5]

// для каждого элемента массива запустить функцию,
// промежуточный результат передавать первым аргументом далее
var result = arr.reduce(function(sum, current) {
  return sum + current;
}, 0);

alert( result ); // 15

Кроме callback, методу можно передать «начальное значение» – аргумент initialValue. Если он есть, то на первом вызове значение previousValue будет равно initialValue, а если у reduce нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.

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

Примеры построения цепочек из перебирающих методов.

Убрать нулевые значения и перевести в верхний регистр.

var mylist = ['dima','vova', null, 'kolya', null, 'anna','sveta']
var rez = mylist.filter(function(el){
  return el !== null
}).map(function(el){
  return el.toUpperCase();
})
console.log(rez);

Посчитать количество нулевых значений.

var rez = mylist.filter(function(el){
  return el === null
}).reduce(function(accum,el){
  return accum += 1;
},0)
console.log(rez);

Использование стрелочных функций позволяет написать в одну строку.

var rez = mylist.filter((el) => el === null).reduce((accum,el) => accum += 1, 0)