Массивы

railway wagons 

let array = [ "A", "B", "C", "D"];
array 

array[0] // "A"
array[1] // "B"
array[2] // "C"
array[3] // "D"

Массив - это особая структура данных

Массив - это пары "ключ-значение".

Значения в массиве могут быть любого типа и в любом сочетании (в т.ч. массив и объект)

Ключ - это указатель позиции значения в некоторой структуре.

Ключ в массиве подобен ключу в строке - всегда начинается с 0

Длина массива определяется свойством .length

Массив - это объект.

Объект - это значит передача по ссылке, а не по значению.

Проверка на массив Array.isArray( arr )

Синтаксис
литерал конструктор описание
[] new Array() пустой массив
[,,] new Array(3) массив без значений в три элемента
[1, 2, 3] new Array(1, 2, 3) массива из элементов number
['a', 'b', 'c'] new Array('a', 'b', 'c') массива из элементов string
[true, undefined, null] new Array(true, undefined, null) массива из элементов различных типов
[[1,2,3], ['a', 'b', 'c'], [[[true]]]] new Array([1,2,3], ['a', 'b', 'c'], [[[true]]]) массив массивов

CRUD для ячейки

let arr = [];

arr.length 0

Create

arr[10] = 'cell'

arr.length 11

Read

arr[10] cell

Update

arr[10] = 'arr cell'

Delete

delete arr[10]

arr[10] undefined

arr.length 11

Длина массива

let arr = [1,1,1,1,1,1,1,1,1,1];

arr.length; 10

Удаление правой части массива

arr.length = 5; [1,1,1,1,1]

Увеличение длинны массива

arr.length = 10; [1,1,1,1,1,,,,,]

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

arr[arr.length - 1] = 'end'; arr.length - 1

arr [1,1,1,1,1,,,,,'end']

Иммутабельность строк. Мутабельность массивов.

 
let str = "abcdefghij";
str.length;  10
str.length = 5;
str[9];   "j"
str.length;  10
  
  
let arr = [
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j'
];
arr.length;  10
arr.length = 5;
arr[9]  undefined
arr.length;  5

Методы массива (CRUD для ячейки)

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

arr.fill(1) [1,1,1]

arr[arr.length - 1] = 'end'; [1,1,'end']

let addToEnd = arr.push('after end') [1,1,'end', 'after end']

addToEnd The push return length of array 4

let delFromEnd = arr.pop() [1,1,'end']

delFromEnd The pop return deleted element 'after end'

let addToStart = arr.unshift('start') ['start',1,'end']

addToStart The unshift return length of array 4

let delFromStart = arr.shift() [1,1,'end']

delFromStart The shift return deleted element 'start'

Методы строка - массив

To Array .split()

let str = "abcdefghij";

let arrFromStr = str.split(""); [ ' a', ' b', ' c', ' d', ' e', ' f', ' g', ' h', ' i', ' j']

let sentence = "How do you do?";

let arrFromSentence = sentence.split(" "); [ ' How', ' do', ' you', ' do?' ]

let uri = "https://goit.ua/course/";

let arrFromUri = uri.split("/"); [ ' https:',, ' goit.ua', ' course', ]

To String .join()

let toStr = arrFromStr.join("") "abcdefghij"

let toSentence = arrFromSentence.join(" ")"How do you do? "

let toUri = arrFromUri.join("/") "https://goit.ua/course/"

Методы массива similar string

Конкатенация .concat()

let first = ['a', 'b']

let second = ['c', 'd']

let adding = first.concat(second) [ ' a', ' b', ' c', ' d' ]

let third = ['e', 'f']

let superAdding = first.concat(second, third) [ ' a', ' b', ' c', ' d', ' e', ' f' ]

Объединяем массивы в новом массиве


let first = [10, 20]    
let second = [30, 40]        
let adding = 
    [...first, ...second]   
[10,20,30,40]

Получить подмассив .slice()

let cdef = superAdding.slice(2) 'cdef'

let cde = superAdding.slice(2, 5) 'cde'

let cdeFromEnd = superAdding.slice(2,-1) 'cde'

Индекс по значению .indexOf(value)

[ ' a', ' b', ' c', ' d', ' e', ' f' ]. indexOf('c') 2

[ ' a', ' b', ' c', ' d', ' e', ' f' ]. indexOf('z') -1

Есть ли такое значение .includes(value)

[ ' a', ' b', ' c', ' d', ' e', ' f' ]. includes('z') false

Методы массива

Сортировка .sort()

[20,100,3,400].sort() 100,20,3,400

Обратный порядок .reverse()

[20,100,3,400].reverse() 400,3,100,20

Обратная сортировка .sort().reverse()

[20,100,3,400].sort().reverse() 400,3,20,100

Забегаем вперед - задаем правило сортировки с помощью стрелочной функции

Если функция возвращает 0, то элементы равны и не перемещаются.

Если функция возвращает 1, то элементы размещаются от меньшего к большему.

Если функция возвращает -1, то элементы размещаются от большего к меньшему. 


array.sort(callback)
callback - функция сортировки
[20,100,3,400].sort((a,b) => a - b)
 3,20,100,400

Деструктуризация массивов

let arr = [10, 20, 30]

let ten = arr[0]

let twenty = arr[1]

let thirty = arr[2]

Как упростить ? Деструктуризация

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

let [ten, twenty, thirty] = [10, 20, 30]

ten === 10 true

twenty === 20 true

thirty === 30 true

Забегаем вперед - используем оператор ... spread


let [ten, ...restOfArr] 
    = [10, 20, 30]
ten  10
restOfArr  [20, 30]

Передача по ссылке и по значению
объявление переменных
let byValue; let array;
By value By link
byValue = 10 array = [10]
let betaByValue = byValue let betaArray = array
betaValue = "Ups" betaArray[0] = "Ups"
byValue ? 10 array[0] ? "Ups"

Копирование массивов

не копирование

let arr = [10]

let bar = arr

bar === arr true

копирование

bar = [];

bar[0] = arr[0];

bar === arr false

bar[0] === arr[0] true

методы для копирования

concat

let arr = [10]

let bar = [].concat(arr)

bar === arr false

slice

let arr = [10]

let bar = arr.slice(0)

bar === arr false

Забегаем вперед - используем оператор ... spread

Копируем массив


let oldArr = [10, 20]
let newArr = [...oldArr]     
[10,20]

newArr === oldArr 
 false

newArr[0] === oldArr[0] 
 true

newArr[1] === oldArr[1] 
 true