JavaScript 2.3 - Массивы

RedDeveloper
01.04.2023 12:24
JavaScript 2.3 - Массивы

JavaScript 2.3 - Массивы

Массивы

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

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

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

Примеры

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

const numbers = [1, 2, 3, 4, 5];

Создание массива строк

const fruits = ['apple', 'banana', 'orange'];

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

Все элементы в массиве имеют индекс, начиная с 0. Это означает, что в приведенном ниже массиве красный цвет имеет индекс 0, зеленый - индекс 1, а синий - индекс 2 (0,1,2). Для доступа к определенному значению в массиве мы используем квадратные скобки с индексом:

const colors = ['red', 'green', 'blue'];
console.info(colors[1]); // outputs 'green'
console.info(colors[2]); // outputs 'blue'

Если вы попытаетесь получить доступ к несуществующему индексу массива, JavaScript вернет неопределенное значение. Это означает, что значение по указанному индексу не существует в массиве.

Например, рассмотрим следующий код:

const numbers = [1, 2, 3, 4, 5];
console.info(numbers[10]); // outputs undefined

В этом коде мы пытаемся получить доступ к значению по индексу 10 массива numbers. Однако массив numbers содержит только 5 элементов, поэтому значения по индексу 10 не существует. В этом случае JavaScript вернет неопределенное значение, указывающее на то, что по этому индексу нет значения.

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

Работа с массивами

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

const numbers = [1, 2, 3, 4, 5];
numbers[2] = 6;
console.info(numbers); // outputs [1, 2, 6, 4, 5]

В этом примере мы заменяем элемент с индексом 2 на значение 6. В результате мы получаем массив [1, 2, 6, 4, 5].

Наиболее распространенные методы

Push(): Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

const fruits = ['apple', 'banana'];
fruits.push('orange');
console.info(fruits); // outputs ['apple', 'banana', 'orange']

Pop(): Удаляет последний элемент из массива и возвращает этот элемент.

const numbers = [1, 2, 3];
const lastNumber = numbers.pop();
console.info(lastNumber); // outputs 3
console.info(numbers); // outputs [1, 2]

IndexOf(): Возвращает индекс первого вхождения указанного элемента в массив, или -1, если элемент не найден.

const animals = ['cat', 'dog', 'bird', 'cat'];
const catIndex = animals.indexOf('cat');
console.info(catIndex); // outputs 0
const fishIndex = animals.indexOf('fish');
console.info(fishIndex); // outputs -1

Shift(): Удаляет первый элемент из массива и возвращает этот элемент.

const numbers = [1, 2, 3];
const firstNumber = numbers.shift();
console.info(firstNumber); // outputs 1
console.info(numbers); // outputs [2, 3]

Unshift(): Добавляет один или несколько элементов в начало массива и возвращает новую длину массива.

const fruits = ['orange', 'banana'];
fruits.unshift('apple');
console.info(fruits); // outputs ['apple', 'orange', 'banana']

Length: Возвращает количество элементов в массиве.

const numbers = [1, 2, 3, 4, 5];
console.info(numbers.length); // outputs 5

Concat(): Объединяет два или более массивов и возвращает новый массив.

const fruits = ['apple', 'banana'];
const veggies = ['carrot', 'spinach'];
const food = fruits.concat(veggies);
console.info(food); // outputs ['apple', 'banana', 'carrot', 'spinach']

Flat(): Создает новый массив со всеми элементами подмассива, конкатенированными в него рекурсивно до указанной глубины.

const numbers = [1, [2, 3], [4, [5]]];
const flattened = numbers.flat(2);
console.info(flattened); // outputs [1, 2, 3, 4, 5]

Splice(): Добавляет или удаляет элементы из массива по указанному индексу и возвращает удаленные элементы.

const numbers = [1, 2, 3, 4, 5];
const removed = numbers.splice(2, 2);
console.info(numbers); // outputs [1, 2, 5]
console.info(removed); // outputs [3, 4]

Slice(): Возвращает часть массива в новый массив.

const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(1, 3);
console.info(sliced); // outputs [2, 3]

Sort(): Сортирует элементы массива по местам и возвращает отсортированный массив.

const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.info(fruits); // outputs ['apple', 'banana', 'orange']
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

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

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.