# 11 Структуры данных JS: массивы

Эта статья принадлежит к серии Структуры данных JS, которая будет содержать следующие статьи:

Массивы
Стеки
Очереди
Связанный список (скоро)
Устанавливает (скоро)
Словари / карты (скоро)
Таблицы хешей (скоро)
Деревья: двоичное дерево поиска (BST) (скоро)
Деревья: AVL Tree (скоро)
Деревья: Красно-черное дерево (скоро)
Деревья: двоичная куча / Heapsort (скоро)
Графики (скоро)

Как и любой другой язык программирования, JS поддерживает массивы, массивы являются самой простой структурой данных и помогают нам хранить данные последовательно, предположим, что мы хотим хранить животных в зоопарке, без массива, который мы могли бы сделать следующим образом:

const animal1 = 'elephant';
const animal2 = 'monkey';
const animal3 = 'snake';
const animal4 = 'lion';

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

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

const animals = ['elephant', 'monkey', 'snake', 'lion'];

Все просто, правда? Массивы дают нам дополнительные возможности для обработки более сложных наборов данных!

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

Есть много способов создать массив, мы могли бы сделать это с помощью оператора new:

const myArray = new Array();

Также можно определить количество предметов таким образом:

const myArray = new Array(9);

Это особенно полезно, когда вам нужно выполнить операцию фиксированное количество раз, скажем, мы хотим 10 раз напечатать «привет», мы могли бы это сделать:

[...Array(10)].forEach(emptyItem => console.log('Hello'));

Но наиболее распространенный способ создания массива - просто использовать [] вместо слов New и Array, например:

const myArray = [];

Многомерные массивы

Массивы позволяют нам создавать массивы внутри массивов, которые генерируют массивы 3D, 4D или xD, скажем, мы храним результаты чемпионата по футболу, мы могли бы сделать это следующим образом:

const soccerChampionshipResults = [[3, 2], [0, 0], [1, 0], [4, 1]]

В этом примере мы создаем трехмерный массив и можем получить доступ к каждому результату так же, как и до того, как soccerCha ChampionshipResults [0] вернет [3, 2], soccerCha ChampionshipResults [1] вернет значение [0, 0] и так далее.

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

Вы можете получить доступ к элементу внутри массива, указав курсор непосредственно на желаемый элемент следующим образом:

const animals = ['elephant', 'monkey', 'snake', 'lion'];
console.log(animals[2])

В этом примере вы получите третий элемент (змейку) вашего массива, причина в том, что указатель массива начинается с 0.

const animals = [
  'elephant', // element number 0
  'monkey', // element number 1
  'snake',  // element number 2
  'lion' // element number 3
];

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

const animals = ['elephant', 'monkey', 'snake', 'lion'];
console.log(animals.length) // will return 4

Другой метод доступа к элементам внутри массива - использование метода forEach:

const animals = ['elephant', 'monkey', 'snake', 'lion'];
animals.forEach(animal => console.log(`Hello I am a ${animal}`));
/* will output
Hello I am a elephant
Hello I am a monkey
Hello I am a snake
Hello I am a lion
*/

Вы также можете использовать map, reduce, filter, for..in, for..of в зависимости от того, что вы хотите сделать, если вы хотите больше об этих методах, я написал несколько статей об этом:

# 2 Функциональный подход: сокращение
Одна из самых полезных и красивых вещей, которые предлагает Javascript, - это сокращение, этот метод может помочь вам решить множество… medium.com

# 10 Основы JS: различные циклы и примеры
В языке Javascript есть разные способы получения элементов из массива, некоторые из них быстрее, а другие более элегантны, в… medium.com

Создание новых элементов в массиве

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

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

Чтобы добавить элемент в начало массива, вам нужно переместить другие элементы в новую позицию, вы можете сделать это следующим образом:

Но самый простой способ сделать это - использовать функцию unshift:

const animals = ["elephant", "monkey", "snake", "lion"];
animals.unshift('macaw');
console.log(animals); // will return [ 'macaw', 'elephant', 'monkey', 'snake', 'lion' ]

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

Это проще, чем добавлять в середине или в начале, вы можете использовать для этого array.length:

const animals = ["elephant", "monkey", "snake", "lion"];
animals[animals.length] = 'macaw';
console.log(animals); // will return [ 'elephant', 'monkey', 'snake', 'lion', 'macaw' ]

Атрибут array.length всегда возвращает количество элементов внутри массива, вы также можете использовать метод push для добавления элементов в конце, например:

const animals = ["elephant", "monkey", "snake", "lion"];
animals.push('macaw');
console.log(animals); // will return [ 'elephant', 'monkey', 'snake', 'lion', 'macaw' ]

Добавление элементов в середину (или в любую позицию) массива

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

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

const animals = ["elephant", "monkey", "snake", "lion"];
animals.splice(2, 0, 'macaw');
console.log(animals); // will return [ 'elephant', 'monkey', 'snake', 'lion', 'macaw' ]

Где 2 - это позиция, которую вы хотите добавить, а 0 - это общее количество элементов, которые вы хотите удалить после этой позиции.

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

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

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

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

Лучше использовать подход переопределения длины, чем использовать удаление, как только удаление сохранит последний элемент без какого-либо значения, например:

const animals = ["elephant", "monkey", "snake", "lion"];
delete animals[3];
console.log(animals); // will return [ 'elephant', 'monkey', 'snake', <1 empty item> ]
console.log(animals.length); // will return 4

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

const animals = ["elephant", "monkey", "snake", "lion"];
animals.shift();
console.log(animals); // will return [ 'monkey', 'snake', 'lion' ]

Удаление элемента из середины (или любой позиции) из массива

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

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

const animals = ["elephant", "monkey", "snake", "lion"];
animals.splice(2, 1); 
console.log(animals); // will return ["elephant", "monkey", "lion"]

Где 2 - это позиция элемента, а 1 - количество элементов, которые вы хотите удалить.

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

Удалить элемент с конца очень просто, вам нужно просто переопределить длину до длины -1:

const animals = ["elephant", "monkey", "snake", "lion"];
animals.length = animals.length - 1;
console.log(animals); // will return ["elephant", "monkey", "snake"]

Вы также можете удалить более одного элемента из конца, определяющего длину до length -x, где x - количество элементов, которые вы хотите удалить.

animals.length = animals.length - 2;
console.log(animals); // will return ["elephant", "monkey"]

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

Сортировка по умолчанию

Самый простой метод сортировки для организации элементов в порядке Unicode - это использование метода сортировки:

const animals = ["elephant", "monkey", "snake", "lion"];
animals.sort();
console.log(animals); // will return [ 'elephant', 'lion', 'monkey', 'snake' ]

Этот метод выполняет сортировку на месте, что означает, что он не создаст новый массив, а заменит текущий порядок массива.

Будьте осторожны, когда у вас есть элементы с нижним и верхним регистром внутри вашего массива, когда символы верхнего регистра идут первыми в таблице Unicode, поэтому такой элемент, как Zebra, будет помещен перед элементом, например, под названием аллигатор.

const animals = ["elephant", "monkey", "Zebra", "snake", "lion"];
animals.sort();
console.log(animals); // will return [ 'Zebra', 'elephant', 'lion', 'monkey', 'snake' ]

Пользовательская сортировка

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

const populationList = [10000000, 1000000, 500000, 600000];
populationList.sort((a, b) => a - b);
console.log(populationList); 
// will return: [ 500000, 600000, 1000000, 10000000 ]

Обратная сортировка

Возможно инвертировать элементы массива, используя алгоритм ниже:

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

Кроме того, вы можете использовать собственный метод reverse (), чтобы сделать то же самое:

const animals = ["elephant", "monkey", "snake", "lion", "zebra"];
animals.reverse();
console.log(animals); 
// will return [ 'zebra', 'lion', 'snake', 'monkey', 'elephant' ]

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

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

Метод indexOf

Есть много способов поиска в массиве в Javascript, начнем с indexOf:

const animals = ["elephant", "monkey", "snake", "lion"];
const haveMonkeyInList = animals.indexOf("monkey") > -1;
const positionWhereMonkeyWasFound = animals.indexOf("monkey");
console.log({ haveMonkeyInList, positionWhereMonkeyWasFound });
// will output: { haveMonkeyInList: true, positionWhereMonkeyWasFound: 1 }

Когда indexOf находит искомый элемент, он возвращает позицию, где этот элемент был найден, когда indexOf не нашел искомого элемента, он возвращает -1.

Фильтр метода

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

const animals = ["elephant", "monkey", "snake", "lion"];
const animalsWithLetterE = 
  animals.filter(
   animal =>
    animal.indexOf("e") > -1
  );
console.log(animalsWithLetterE);
// will output: [ 'elephant', 'monkey', 'snake' ]

В приведенном выше примере мы смешали indexOf с методом фильтрации, но в этом случае мы используем indexOf для поиска подстроки внутри строки.

Метод включает

Спецификация ES7 предоставила нам метод include, который уменьшает это:

const haveMonkeyInList = animals.indexOf('monkey') > -1

К этому:

const haveMonkeyInList = animals.includes('monkey')

Также можно отправить дополнительный параметр, определяющий, с какой позиции вы хотите начать поиск:

const animals = ["elephant", "snake", "monkey", "lion"];
console.log(animals.includes('monkey', 1));
// will return true because exists an element called 'monkey' from  the item with index 1
console.log(animals.includes('elephant', 1));
// will return false because doesn't exists an element called 'elephant' from the item with index 1

Другие методы массивов

нанизывать()

Позволяет выводить содержимое массива в строковом формате:

const animals = ["elephant", "snake", "monkey", "lion"];
console.log(animals.toString());
// will output: "elephant,snake,monkey,lion"

присоединиться()

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

const animals = ["elephant", "snake", "monkey", "lion"];
console.log(animals.join('-'));
// will output: "elephant-snake-monkey-lion"

fill ()

Позволяет заменить содержимое строк в массиве новым содержимым

const animals = ["elephant", "snake", "monkey", "lion"];
console.log(animals.fill('animals'));
// will output: ["animals", "animals", "animals", "animals"]

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

const animals = ["elephant", "snake", "monkey", "lion"];
console.log(animals.fill('animals', 2, 3));
// will output: ["elephant", "snake", "animals", "lion"]

из()

Позволяет создать новый массив из старого:

const animals = ["elephant", "snake", "monkey", "lion"];
const animalsCopy = Array.from(animals);
animals[0] = 'zebra';
console.log(animalsCopy);
// will output: ["elephant", "snake", "monkey", "lion"]

Если вы хотите узнать больше о Javascript и структурах данных, я рекомендую эти книги:

Вы не знаете серию JS от Кайла Симпсона (мой любимый)
Eloquent JS от Марин Хавербеке
Head First Javascript, Майкл Моррисон
Секреты JavaScript-ниндзя Беар Бибо и Джон Ресиг
Изучение структур данных и алгоритмов JavaScript, автор - Лойан Гронер

Если вы говорите по-португальски, посмотрите мои видео на YouTube о структурах данных в Javascript:

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

Рикардо Луз (@_rxluz) | Twitter
Последние твиты от Рикардо Луса (@_rxluz). Инженер Javascript @loylap. Писатель, фанат ECMAScript, React, NodeJS… twitter.com

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

# 11 Структуры данных JS: массивы