Массивы в 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']
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.