Array

Создание массива

let arr = [];

let arr = newArray(); // используется редко

Типы значений массива и получение значений

let arr = [
    'Коля',
    {                       // отдельный объект со своими элементами
        type: 'JS',
        age: 36
    },
    true,                   // булевый тип
    function(), {           //  функция
    console.log('Привет, я Коля');
    },                      // висячая запятая (trailing comma)
];

// [] - внутри указываем позицию либо ключ, значения которого мы хотим получить
// console.log(arrOne[1]);

console.log(arr);            // просто вывести весь массив в консоль
console.log(arr[0]);         // выведет: Коля
console.log(arr[1].type);    // доступ к свойствам объекта внутри массива, выведет: JS
console.log(arr[2]);         // выведет: true
arr[3]();                    // выведет: Привет, я Коля
console.log(arr[4]);         // undefined

// Многомерные массивы (например, в виде матрицы:
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix);            //
console.log(matrix[0][1]);      // выведет: 2

Длина массива, свойство length

console.log(arr.length);

Можно обрезать длину массива

Доступ к массиву

Т.к. массив является объектом и, следовательно, ведёт себя как объект. Например, копируется по ссылке.

Копирование массива по ссылке

let arr = ['Ваня', 'Иштван', 'Оля',];

let arrNew = arr;

arrNew.length = 2;  // укорачиваем массив

console.log(arr);   // массив стал короче: "Ваня", "Иштван"

// у массива просто появилось два разных ключа

Способы копирования массивов

let arr1 = [1, 2, 3, ['d', 'f'], null, undefined, () => console.log('dfs')];
let arr2 = arr1.slice(0)
let arr2 = [...arr1]
let arr2 =JSON.stringify(arr1)
let arr2 = JSON.parse(JSON.stringify(arr1))
let arr2 = structuredClone(arr1)
let arr2 = arr1.flat(Infinity)

Изменение значений массива

let arr = ['Ваня', 'Иштван', 'Оля',];

//  Меняем существующее значение
arr[0] = 'Коля';
console.log(arr);   // Ваня поменялся на Колю: 'Коля', 'Иштван', 'Оля'

// Для добавления нового значения надо обратиться по несуществующему ключу
arr[3] = 'Ваня';
console.log(arr);   // 'Коля', 'Иштван', 'Оля', 'Ваня'

---

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

Метод()	Для чего	Что возвращает	Мутирует ли исходный массив
push	добавляет элемент в конец массива	новую длину массива	да
pop	удаляет последний элемент	удаленный элемент	да
map			нет
filter	ищет все элементы, на которых функция-колбэк вернет true	создаёт новый массив, в который войдут только отфильтрованные элементы	нет
concat	склеивает массивы (можно, несколько)	не мутирует исходные массивы, а создает новый	нет
every
find
findIndex
forEach	выполняет указанную функцию один раз для каждого элемента в массиве	ничего	нет
from
join	склеивает элементы массива в строку	зависит от разделителя ('...')	нет
reduce	Агрегация данных (сумма, произведение, среднее значение) или трансформация данных (для преобразования элементов массива в другую структуру данных)	конечное значение, полученное после применения функции обратного вызова ко всем элементам массива.	нет
reverse			да
shift	удаляет первый элемент	удаленный элемент	да
slice	чтобы из массива получить подмассив	новый подмассив	нет
some
sort			да
splice			да
unshift	добавляет в начало	новую длину	да
indexOf	Поиск индекса элемента в массиве	индекс (если его нет, вернет -1)	нет

// ! Изучая любой метод массива, запомните: // * 1. Что делает / для чего он? // * 2. Что он возвращает? // * 3. Мутирует ли он исходный массив?

push добавляет элемент в конец массива shift удаляет элемент в начале (так что второй элемент становится первым) pop удаляет последний элемент в массиве unshift добавляет элемент в начало массива delete удаление конкретных элементов splice добавляет, удаляет и заменяет элементы slice создает новый массив, в который копирует часть, либо весь массив concat создает дубль массива и может дополнить его значениями Array.from static method creates a new, shallow-copied Array instance from an iterable or array-like object.

push

добавляет элемент в конец массива

// let arr = ['Ваня', 'Иштван', 'Оля',];
arr.push('Вася');
console.log(arr);   // 'Ваня', 'Иштван', 'Оля', Вася

shift

удаляет элемент в начале (так что второй элемент становится первым)

// let arr = ['Ваня', 'Иштван', 'Оля',];
arr.shift();
console.log(arr);   // Иштван, Оля

pop

удаляет последний элемент в массиве

// let arr = ['Ваня', 'Иштван', 'Оля',];
arr.pop();
console.log(arr);   // Ваня, Иштван

unshift

добавляет элемент в начало массива

// let arr = ['Ваня', 'Иштван', 'Оля',];
arr.unshift('Вася');
console.log(arr);   // Вася, Ваня, Иштван, Оля

delete

удаление конкретных элементов

// let arr = ['Ваня', 'Иштван', 'Оля',];
delete arr[1];
console.log(arr);           // Ваня, empty, Оля
console.log(arr[1]);        // undefined
console.log(arr.length);    // 3 (остается три)

splice

добавляет, удаляет и заменяет элементы

arr.splice(index[, deleteCount, elem1, ..., elemN]);

удаляем элемент

// let arr = ['Ваня', 'Иштван', 'Оля',];

// начиная с первой позици (Иштван), удаляем один элемент
arr.splice(1, 1);
console.log(arr);    //  Ваня, Оля

// с конца: начиная с последней позиции (Оля), удаляем один элемент
arr.splice(-1, 1);
console.log(arr);   // Ваня, Иштван

удаляем элемент и возвращаем его в переменную

// let arr = ['Ваня', 'Иштван', 'Оля',];
let removed = arr.splice(1, 1);
console.log(removed);   // Иштван

заменяем элементы

// let arr = ['Ваня', 'Иштван', 'Оля',];

// начиная с нулевой позиции (Ваня), заменяем один элемент
arr.splice(0, 1, 'Коля');
console.log(arr);  // Коля, Иштван, Оля

добавляем элементы

// let arr = ['Ваня', 'Иштван', 'Оля',];

// начинаем с первой позиции (перед Иштван), добавляем два элемента
arr.splice(1, 0, 'Коля', 'Маша');   // 0 означает, что мы что-то добавляем
console.log(arr);   // Ваня, Коля, Маша, Иштван, Оля

slice

создает новый массив, в который копирует часть, либо весь массив

arr.slice([start], [end]) НЕ включая [end]

копируем часть массива

// let arrOne = ['Ваня', 'Иштван', 'Оля', ];

// начиная с 1й позиции Иштван, до 2й позиции Оля (не включая)
let arrTwo = arrOne.slice(1, 2);
console.log(arrTwo);    // Иштван

// начиная с предпоследней позиции Иштван, до последней Оля (не включая)
let arrTwo = arrOne.slice(-2, -1);
console.log(arrTwo);  // Иштван

копируем весь массив

// копируем весь массив
let arrTwo = arrOne.slice();
cosole.log(arrTwo);    // Ваня, Иштван, Оля

concat

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

arr.concat(arg1, arg2...)

let arrOne = ['Ваня', 'Иштван', 'Оля', ];
let arrTwo = arrOne.concat('Петя');
console.log(arrTwo);    // 'Ваня', 'Иштван', 'Оля', Петя

Array.from()

More Array.from()

---

Поиск в массиве

arr.indexOf(item, from) ищет item, начиная с индекса from, и возвращает индекс, на котором был найден искомый элемент, в противном случае -1 arr.lastIndexOf(item, from) - то же самое, но ищет справа налево arr.includes(item, from) - ищет item, начиная с индекса from, и возвращает true, если поиск успешен arr.find - поиск в массиве объектов с определённым условием arr.findIndex - то же самое, но возвращает не элемент, а его ключ (позиция) arr.filter - ищет все элементы, на которых функция-колбэк вернет true

методы indexOf/lastIndexOf и includes - аналоги строковым методам

indexOf

ищет item, начиная с индекса from, и возвращает индекс, на котором был найден искомый элемент, в противном случае -1

// let arrOne = ['Ваня', 'Иштван', 'Оля', ];
console.log(arr.IndexOf('Иштван'));     // 1
console.log(arr.IndexOf('Вася'));       // -1
console.log(arr.IndexOf('Иштван', 2));  // -1

includes

ищет item, начиная с индекса from, и возвращает true, если поиск успешен

// let arrOne = ['Ваня', 'Иштван', 'Оля', ];
console.log(arr.includes('Иштван'));    // true
console.log(arr.includes('Вася'));      // false
console.log(arr.includes('Иштван', 2)); // false

// [[1], [2, 3], [4]], 3 ) => 1
const nestedArr = (arr, number) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].includes(number)) {
      return i;
    }
  }
  return -1; // Return -1, если число не найдено во вложенных массивах
}

find

поиск в массиве объектов с определённым условием

let result = arr.find(function(item, index, array) {
    // если true - возвращается текущий элемент и перебор прерывается
    // если все итерации оказались ложными, возвращается undefined
});

let arr = [
    { name: 'Вася', age: 36 },
    { name: 'Коля', age: 18 },
    { name: 'Оля', age: 'не скажу' },
]

let resultOne = arr.find(function (item, index, array) {
    return item.age === 18;
});

// то же самое только с использованием стрелочной функции
// результат будет таким же
let resultOne = arr.find(item => item.age === 18);
console.log(resultOne); // выведет { name: "Коля", age: 18 }

findIndex

то же самое, но возвращает не элемент, а его ключ (позиция)

let resultTwo = arr.findIndex(item => item.age === 18);
console.log(resultTwo); // 1

filter

ищет все элементы, на которых функция-колбэк вернет true More filter

---

Сортировка массивов

методы: sort(fn) сортирует массив на месте, меняя в нём порядок элементов reverse меняет порядок элементов в массиве на обратный

sort(fn)

сортировка слов

let arr = ['Иштван', 'Ваня', 'Оля',];
console.log(arr.sort()); // Ваня, Иштван, Оля

cортировка чисел

let arr = [8, 22, 1,];
console.log(arr.sort());  // 1, 22, 8
// т.к. по умолчанию элементы сортируются как строки - для строк применяется лексикографический порядок, и действительно выходит, что "8" больше "22"
console.log("8" > "22");    // true

функция сортировки

function compareNumeric(a, b) {
    console.log(`Сравниваем ${a} и ${b}`);
    // if (a > b) return 1;
    // if (a == b) return 0;
    // if (a < b) return -1;
    // или просто:
    return a - b;
}
 */
// или просто использовать стрелочную функцию:
console.log(arrTwo.sort((a, b) => a - b));
// console.log(arrTwo.sort((a, b) => a - b));

// console.log(arrTwo.sort(compareNumeric));

reverse

let arr = ['Иштван', 'Ваня', 'Оля',];
console.log(arr.reverse());

---

Преобразование массивов

методы: map вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции split преобразовывает строку в массив по заданному разделителю join преобразовывает массив в строку с заданным разделителем

map

let result = arr.map(function(item, index, array) {
    //  возвращается новое значение вместо элемента
});

let arr = ['Ваня', 'Иштван', 'Оля',];

// item - каждый элемент массива
// index - его ключ (позиция)
// array - сам массив

let result = arr.map(function (item, index, array) {
    return item[0];
});
// или так:
// let result = arr.map(item => item[0]);
console.log(arr);   // 'Ваня', 'Иштван', 'Оля'
console.log(result);    // 'В', 'И', 'О'

// еще пример
let newArr = arr.map((el) => el + 1)

split

str.split(delim)

let str = 'Ваня,Иштван,Оля';

let arr = str.split(',');
console.log(arr);   // уже массив ['Ваня', 'Иштван', 'Оля']

// можно ограничить кол-во элементов которые попадут в массив

let arrTwo = str.split('', 2);
console.log(arrTwo);    // ['Ваня', 'Иштван']

join

arr.join(glue)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

let arr = ['Ваня', 'Иштван', 'Оля'];
let str = arr.join(',');
console.log(str);

//  еще можно так
// получение строки из массива через спец функции String
// но в этом случае нельзя указать разделитель(((
let arr = ['Ваня', 'Иштван', 'Оля'];
console.log(String(arrTwo));

// ['I', 'am', 'who I am'] => 'I am who I am'

const toSentence = (arr) => {
  return arr.join(' ');
}

---

Массив или объект?

Проверка Array.isArray()

Напомним, что массивы не образуют отдельный тип данных. Они основаны на объектах.

let obj = {};
let arr = [];

console.log(typeof obj);    // object
console.log(typeof arr);    // object

// как же нам узнать где массив, а где нет?

if (Array.isArray(arr)) {       // или obj в нашем случае
    console.log('Это массив!') // т.е. true
} else {
    console.log('Это не массив!')
}

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

цикл for получение и значения и ключа массива цикл for..of для вывода значений (без ключа) метод forEach выполняет функцию для каждого элемента массива методы reduce/reduceRight для вычисления какого-нибудь единого значения на основе всего массива

for

let arr = ['Ваня', 'Иштван', 'Оля',];
console.log(arr.length);    // 3

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

/* выведет:
Ваня
Иштван
Оля
*/

for..of

соблюдает массивную индексацию

let arr = ['Ваня', 'Иштван', 'Оля',];

for (let arrItem of arr) {
    console.log(arrItem);
}

forEach

arr.forEach(function (item, index, array) {
    // ...делать что-то с item
});

More forEach

reduce/reduceRight

// Синтаксис
let value = arr.reduce(function(previousValue, item, index, array) {
    // ...
}, [initial]);

// К привычным нам аргументам item, index, array добавляется previousValue:
// previousValue - результат предыдущего вызова этой функции, равен initial при первом вызове (если передан initial),
// item - очередной элемент массива, index - его индекс, array - сам массив

// Функция применяется по очереди ко всем элементам массива и "переносит" свой результат на следующий вызов.

let arrOne = [1, 2, 3, 4];
let reduceValueOne = arrOne.reduce(function (previousValue, item, index, array) {
    return item + previousValue;
}, 0);
console.log(reduceValueOne);    // 10

вывод:

Шаг 1:
previousValue = 0
item = 1
их сумма = 1

Шаг 2:
previousValue = 1
item = 2
их сумма = 3

Шаг 3:
previousValue = 3
item = 3
их сумма = 6

Шаг 4:
previousValue = 6
item = 4
их сумма = 10

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

let arrTwo = ['Ваня', 'Иштван', 'Оля',];
/*
Если не указать начальное значение, то оно будет равно первому элементу массива (previousValue=Ваня).
А работа метода начнется со второго элемента (item=Иштван).
 */

let reduceValueTwo = arrTwo.reduce(function (previousValue, item, index, array) {
    console.log(previousValue); // Ваня
    console.log(item);  // Иштван
    return `${item}, ${previousValue}`; // Иштван, Ваня             \n Оля???????? проверить
});
console.log(`Пользователи: ${reduceValueOne}`)  // Оля, Иштван, Ваня

// Еще пример
let newArr4 = arr5.reduce((acc, cur) => acc + cur, 0)

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

---

ДОПОЛНЕНИЕ

// МАССИВ ИСПОЛЬЗУЕМ КАК МАССИВ

/* Следует помнить, что массив является объектом и, следовательно, ведёт себя как объект. */

let arr = ['Ваня', 'Иштван', 'Оля',]; console.log(typeof arr);

// Добавление нечислового свойства arr.name = "Коля"; console.log(arr); // 'Ваня', 'Иштван', 'Оля', name: 'Коля'

/* Но то, что действительно делает массивы особенными - это их внутреннее представление. Движок JS старается хранить элементы массиво в непрерывной области памяти, один за другим. Существуют и другие способы оптимизации, благодаря которым массивы работают очень быстро.

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

Варианты неправильного применения массива:

1. Добавление нечислового свойства, например: arr.test = 5;

2. Создание "дыр", например: добавление arr[0], затем arr[1000](между ними ничего нет)

3. Заполнение массива в обратном порядке, напр.: arr[1000], arr[999] и т.д. */

МАССИВ ЯВЛЯЕТСЯ ОБЪЕКТОМ ПОЭТОМУ ВЕДЕТ СЕБЯ КАК ОБЪЕКТ

Методы push/pop выполняются быстро, а методы shift/unshift - медленно.

Так, операция unshift должна выполнить 3 действия:

1. Добавить элемент с индексом 0

2. Сдвинуть все элементы вправо, заново пронумеровать их, заменив 0 на 1, 1 на 2 и т.д.

3. Обновить свойство length.

А вот метод push:

1. добавить элемент в конец

2. увеличить значение length

*/

К МЕТОДАМ МАССИВОВ /* Варианты применения массивов:

I. ОЧЕРЕДЬ или упорядоченная коллекция элементов. Очередь поддерживает 2 вида операций:

1. Добавление элемента в конец очереди.

2. Удаление элемента в начале, сдвигая очередь, так что второй элемент становится первым.

II. Структура данных, называемая СТЕК. Стек поддерживает 2 вида операций:

1. Добавление элемента в конец,

2. Удаление последнего элемента.

*/

// МЕТОДЫ // reduce/reduceRight

/*

Если нам нужно перебрать массив - мы можем использовать forEach, for или for..of. Если нам нужно перебрать массив и вернуть данные для каждого элемента - мы используем map.

Методы arr.reduce и arr.reduceRight похожи на эти методы, но они немного сложнее и используются для вычисления какого-нибудь единого значения на основе всего массива.

https://learn.javascript.ru/array

Удаление "пустых" элементов в массиве (необходимо проверить код)

let arr10 = [1, 2, undefined, null, 5 ,7, 0]
console.log(arr10.filter((el) => el !== null && el !== undefined));

Визуализация других методов https://ghost-together.medium.com/map-filter-and-reduce-animated-7fe391a35a47

Статья на freecodecamp https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/