Массивы с JavaScript

Массивы с JavaScript

Массивы — это простейшие структуры данных в информатике и решении задач. Если вы инженер JavaScript, который хочет освоить использование массивов, вы пришли в нужное место. Я намерен превратить вас из новичка в мастера массивов с помощью этого поста в блоге и последующих постов в блоге. Думайте об этом посте в блоге как о серии 😉😉.

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

Преимущества использования массива

Рассмотрим сценарий, в котором мы сохраняем время в минутах, затрачиваемое автобусом X на каждую поездку до пункта назначения Y.

Это будет записано в коде как:

const time_taken_for_trip1 = 60;

const time_taken_for_trip2 = 58;

const time_taken_for_trip3 = 40;

const time_taken_for_trip4 = 50;

const time_taken_for_trip5 = 55;

Однако это не лучший подход, так как это приводит к избыточному и повторяющемуся коду. Это не кажется проблемой, если мы собираемся хранить записи только для нескольких поездок. Однако это становится неэффективным при попытке сохранить записи о сотнях или тысячах поездок. Вышеупомянутая запись может быть сохранена в массиве, как показано ниже.

const trip_records = []; //Declare an empty array

trip_records[0] = 60; // Add an element to the array at index position 0

trip_records[1] = 58; // Add an element to the array at index position 1

trip_records[2] = 40; // Add an element to the array at index position 2

trip_records[3] = 50; // Add an element to the array at index position 3

trip_records[4] = 55; // Add an element to the array at index position 4

Or

const trip_records = [60, 58, 40, 50, 55]; //Declare an array and initialise its elements immediately

Объявление и инициализация массивов

Существует два основных способа создания массивов в JavaScript:

• Конструктор new Array(). Конструктор new Array() используется для создания объектов массива. Он принимает два необязательных аргумента: либо длину нового объекта массива, либо элементы создаваемого массива. Если методу new Array() передается один числовой аргумент, JavaScript интерпретирует его как длину создаваемого массива. Однако если в метод new Array() передается несколько аргументов, разделенных запятыми, JavaScript интерпретирует их как элементы создаваемого массива. Это показано в приведенном ниже коде.

const trip_records = new Array(); // An empty trip_records array  
 
const trip_records = new Array(5); // An empty trip_records array whose length is 5  

const trip_records = new Array (60, 58, 40, 50, 55); // trip_records array declared and initialized with its elements immediately

Однако описанный выше метод не считается лучшей практикой. Буквенное обозначение считается более эффективным методом.

• Обозначение литерала массива. Литерал массива — это список разделенных запятыми выражений, заключенных в пару квадратных скобок []. Когда массив создается с использованием литерала массива, он принимает выражения, разделенные запятыми, в качестве своих элементов и количество добавленных выражений в качестве своей длины.

const trip_records = []; // An empty trip_records array whose length is 0  

const trip_records = [60, 58, 40, 50, 55]; // trip_records array declared and initialized with its elements immediately, whose length is 5

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

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

trip_records[0] // 60

trip_records[1] // 58

Важно отметить, что массивы имеют индекс 0, то есть первый элемент массива имеет индекс 0, а не 1, поэтому индекс последнего элемента в массиве будет на 1 пункт меньше, чем длина массива. В случае массива trip_records 55 имеет индекс 4, а длина массива равна 5.

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

for(let i = 0; i < trip_records.length; i++){
    console.log(trip_records[i]);
} 
/*
60
58
40
50
55
*/

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

Добавление элементов в массивы — одна из основных операций, выполняемых над массивами. Для этого упражнения мы инициализируем массив x, как показано ниже:

const x = [1,2,3,4,5]

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

Массивы JavaScript имеют метод push, который позволяет добавить один или несколько элементов в конец массива, для которого он вызывается. Если мы хотим добавить 6 в конец массива x выше, будет использоваться метод push, как показано в коде ниже.

console.log(x); // [1,2,3,4,5]

x.push(6);

console.log(x); // [1,2,3,4,5,6]

Код ниже иллюстрирует добавление нескольких элементов в конец массива x выше.

console.log(x); // [1,2,3,4,5,6]

x.push(7,8,9,["John", "Doe"])

console.log(x); // [1,2,3,4,5,6,7,8,9,["John", "Doe"]

Временная сложность этой операции составляет O(1), потому что для добавления элемента в конец массива требуется один шаг, поскольку операция не требует перемещения элементов вперед или назад в памяти.

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

Метод unshift массивов JavaScript используется для добавления элементов в начало массивов. Если мы хотим добавить 0 в начало массива x выше, будет использоваться метод unshift, как показано в коде ниже.

console.log(x); // [1,2,3,4,5,6,7,8,9,["John", "Doe"]

x.unShift(0);

console.log(x); // [0,1,2,3,4,5,6,7,8,9,["John", "Doe"]

Код ниже иллюстрирует добавление нескольких элементов в конец массива x выше.

console.log(x); // [0,1,2,3,4,5,6,7,8,9,["John", "Doe"]

x.unshift(-3,-2,-1,["Positive", "Integers"]);

console.log(x); // [-3,-2,-1,["Positive", "Integers"],0,1,2,3,4,5,6,7,8,9,["John", "Doe"]

Важно отметить, что добавление элементов в начало массива требует больше вычислительных процессов. Напомним, что элементы массива хранятся в памяти последовательно. То есть, если 1 выше хранится по адресу в памяти 1000, 2 будет храниться по адресу в памяти 1001, а 5 будет храниться по адресу в памяти 1005. Следовательно, если мы хотим добавить элементы в начало x, каждый другой элемент массива должен быть перемещен вперед в памяти, чтобы создать достаточно свободной памяти в начале массива для добавления новых элементов. Следовательно, временная сложность добавления элементов в начало массива равна O(n), где n — количество элементов, которые необходимо переместить в память для добавления нового элемента/элементов.

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

Удаление элементов из массива — еще одна важная операция, выполняемая над массивом. Для этого упражнения мы инициализируем массив x, как показано ниже:

const x = [1,2,3,4,5]

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

Метод pop массивов JavaScript позволяет нам удалить последний элемент массива, как показано в коде ниже.

console.log(x); // [1,2,3,4,5]

x.pop();

console.log(x); // [1,2,3,4]

Временная сложность этой операции составляет O(1), потому что для удаления элемента в конце массива требуется один шаг, поскольку операция не требует перемещения элементов вперед или назад в памяти.

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

Метод shift массивов JavaScript позволяет нам удалить первый элемент в массиве, как показано в коде ниже.

console.log(x); // [1,2,3,4]

x.shift();

console.log(x); // [2,3,4]

Важно отметить, что удаление элементов из начала массива требует больше вычислительных процессов. Напомним, что элементы массива хранятся в памяти последовательно. Следовательно, если мы хотим удалить элемент из начала массива x, каждый другой элемент массива должен быть перемещен назад в памяти, чтобы занять первый свободный адрес памяти. Следовательно, временная сложность удаления элементов из массива равна O(n), где n — количество элементов, которые необходимо переместить в память для удаления элемента.

Добавление и удаление элементов из определенных позиций в массиве

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

Метод splice массивов JavaScript позволяет нам добавлять элементы и удалять элементы из массива в определенных позициях. Требуется 2 обязательных и 1 необязательный аргумент. Первый аргумент указывает индекс, с которого должна начинаться наша операция. Второй аргумент используется для указания количества элементов, которые мы хотим удалить из массива (0 передается, если мы не хотим удалять какой-либо элемент). Третий необязательный аргумент (аргументы) — это элемент/элементы, которые мы хотим добавить в массив. Использование метода splice иллюстрируется следующими примерами.

Для этого упражнения мы инициализируем массив x, как показано ниже:

const x = [0,1,2,3,4,5,6,7,8,9]

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

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

console.log(x); // [0,1,2,3,4,5,6,7,8,9]

x.splice(2,3);

console.log(x); // [0,1,5,6,7,8,9]

Подобно удалению элементов из начала массива, временная сложность этой операции составляет O(n). Где n — количество элементов, которые необходимо переместить в память, чтобы элемент был удален.

Добавление элементов в массив с помощью метода splice

Предположим, мы хотим добавить элементы 2,3,4 обратно в массив x, можно использовать метод сращивания, как показано ниже.

console.log(x); // [0,1,5,6,7,8,9]

x.splice(2,0,2,3,4);

console.log(x); // [0,1,2,3,4,5,6,7,8,9]

Первый аргумент 2, переданный методу splice, используется для указания индекса, с которого начнется наша операция. Второй элемент 0 определяет количество элементов, которые мы хотим удалить из массива. 2,3,4 — это элементы, которые мы хотим добавить в массив.

Подобно добавлению элементов в начало массива, временная сложность этой операции составляет O(n). Где n — количество элементов, которые необходимо переместить в память для добавления нового элемента/элементов.

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

console.log(x); // [0,1,2,3,4,5,6,7,8,9]

x.splice(3,3,10,20)

console.log(x); // [0,1,2,10,20,6,7,8,9]

Временная сложность этой операции O(n).

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

Если вы нашли этот пост информативным🤝, поделитесь им, поставьте аплодисменты👏 и следите за дополнительным контентом 😊. Спасибо🤏✨.