Понимание массивов в JavaScript

Массив в JavaScript – это упорядоченный сбор данных.

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

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

В этом блоге мы пойдем:

• Как массивы помогают консолидировать код
• Создание массивов
• Индексация массивов
• Доступ к предметам в массивах
• Поиск длины массивов
• Добавление предметов в массивы
• Удаление предметов в массивах
• Изменение элементов в массивах
• Петля через массивы

Как массивы помогают консолидировать код

Давайте посмотрим на то, как массивы помогают нам конденсироваться и организовать код.

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

const animal1 = 'cat'
const animal2 = 'panda'
const animal3 = 'sloth'

Вместо этого мы можем объединить всех наших животных в массив под названием животные Анкет В приведенном ниже примере у нас есть одна переменная, животные , с тремя элементами, кошка , Панда и лень Анкет

let animals = ['cat', 'panda', 'sloth']

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

Есть два способа создать массив:

1. Обозначение с кронштейном с использованием []
2. Строитель массива с использованием Новый ключевое слово

Как нотация кронштейна, так и метод конструктора создают массив.

Давайте посмотрим на оба метода.

Во -первых, давайте использовать скобки [] Чтобы создать животные переменная, массив, содержащий элементы, кошка , Панда и лень . Мы можем распечатать животные В консоли показать множество животных, ["cat", "panda", "lloth"] Анкет

let animals = ['cat', 'panda', 'sloth']

console.log(animals)
// ["cat", "panda", "sloth"]

Далее, давайте использовать Новый Ключевое слово для создания животные переменная, массив, содержащий элементы, кошка , Панда и лень . Результат использования новый Ключевое слово – это то же самое, что и с использованием кронштейнов [] .

let animals = new Array('cat', 'panda', 'sloth')

console.log(animals)
// ['cat', 'panda', 'sloth']

Кроншень [] Нотация – это предпочтительный и более простой способ создания массива, потому что метод конструктора может привести к непреднамеренным результатам. Например, при работе с числами.

Если мы хотим поместить целое число 3 В массиве, используя метод конструктора, он даст нам три неопределенное Элементы вместо [3] .

let numberOfAnimals = new Array(3)

console.log(numberOfAnimals)
// [undefined, undefined, undefined]

Если мы хотим поместить целое число 3 В массиве, используя синтаксис кронштейнов, мы получаем то, что ожидали, [3] .

let numberOfAnimals = [3]

console.log(numberOfAnimals)
// [3]

Массивы также могут содержать больше, чем просто струны. Массивы могут хранить различные типы данных, такие как числа, строки, объект и т. Д.

let pets = ['cat', 2, 'panda', 1, 'sloth', 8, { cute: true }]

Индексация массивов

Элементы в массивах упорядочены последовательно по индексам. Каждый элемент в массиве имеет индекс. Индексы являются целочисленными значениями, начиная с 0 Анкет

Давайте вернемся к нашему животные массив снова.

let animals = ['cat', 'panda', 'sloth']

Вот что наши животные Массив выглядит с их соответствующими индексами:

• кошка 1 -й элемент в массиве и кошка S Индекс является 0.
• Панда это 2 -й элемент в массиве и Панда S Индекс 1.
• лень 3 -й элемент в массиве и лень S показатель 2.

Чтобы найти индекс определенного элемента, мы используем Indexof метод Indexof Возвращает первый индекс, где элемент найден или возвращает -1 Если элемент не найден.

Здесь мы используем Indexof Чтобы найти индекс 'panda' в нашем животные множество.

// Print the index of 'panda', 1
console.log(animals.indexOf('panda'))
// 1

// Print -1 because 'dragon' is not in the `animals` array
console.log(animals.indexOf('dragon'))
// -1

Доступ к предметам в массивах

Массивы представляют собой упорядоченные элементы с индексами.

Чтобы получить доступ к элементу, мы размещаем номер индекса в скобки [] После имени переменной. Синтаксис выглядит так, variablename [indexnumber] Анкет

Например, чтобы получить доступ к первым элементам, мы используем синтаксис, variablename [0] Анкет

Давайте посмотрим на это в действии. Чтобы получить доступ к первым элементам, кошка , в животные , мы используем синтаксис, животные [0] Анкет

let animals = ['cat', 'panda', 'sloth']

console.log(animals[0])
// 'cat'

console.log(animals[1])
// 'panda'

console.log(animals[2])
// 'sloth'

Если мы попытаемся получить доступ к индексу, который не существует, мы получим неопределенное Анкет В этом примере индекс 4 не существует, так что неопределенное печатается, когда мы пытаемся получить доступ животные [4] Анкет

let animals = ['cat', 'panda', 'sloth']
console.log(animals[4])
// undefined

Массивы также могут быть вложены, что означает, что массив может храниться в массиве. Как и раньше, мы получаем доступ к элементам в вложенных массивах с синтаксисом variablename [indexnumber] , но с дополнительным [IndexNumber] Чтобы получить доступ к индексу в рамках начального массива. Таким образом, синтаксис для доступа к элементу в массиве в массиве выглядит так, variablename [IndexNumber] [IndexNumber] Анкет

Давайте посмотрим на этот вложенный массив, Нарученныенималы Анкет

let nestedAnimals = [
  ['blue whale', 'blue jay'],
  ['red panda', 'red ants', 'red fox'],
]

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

Вот элементы первого уровня с их соответствующими индексами.

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

Теперь давайте посмотрим на код и распечатайте 'синий кит' . 'Blue Whale' находится в массиве индекса 0 из Нарученныенималы Анкет Индекс 0 содержит массив ["Blue Whale", "Blue Jay"], Анкет 'Blue Whale' это индекс 0 Индекс 0 . Так что чтобы получить доступ 'синий кит' , мы используем синтаксис, Нарученныенималы [0] [0] Анкет

То же самое относится и к 'красные муравьи' Анкет 'красные муравьи' в индексе 1 Индекс 1 a Array. Так Нарученныенималы [1] [1] Доступ 'красные муравьи' Анкет

// Print the 0th index of the 0th index
console.log(nestedAnimals[0][0])
// 'blue whale'

// Print the 1st index of the 1st index
console.log(nestedAnimals[1][1])
// "red ants"

Поиск длины массивов

Чтобы найти длину массива, мы используем длина свойство.

Здесь мы используем длина собственность на животные Чтобы получить длину 3 Анкет

let animals = ['cat', 'panda', 'sloth']

// Print the length of animals
console.log(animals.length)
// 3

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

Чтобы добавить элемент в конец из массива, мы используем push метод

// Append 'sea otter' to the end of the array
let animals = ['cat', 'panda', 'sloth']
animals.push('sea otter')

console.log(animals)
// ['cat', 'panda', 'sloth', 'sea otter'];

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

// Append 'koala' to the beginning of the array
let animals = ['cat', 'panda', 'sloth']
animals.unshift('koala')

console.log(animals)
// ['koala', 'cat', 'panda', 'sloth',];

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

// Append  'zebra' to index 6 of the array
let animals = ['cat', 'panda', 'sloth']
animals[6] = 'zebra'

// undefined is appended until we hit index 6, where we append 'zebra'
console.log(animals)
// ['cat', 'panda', 'sloth', undefined, undefined, undefined, 'zebra'];

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

// Append undefined two times to the end of the array until the length is 5
let animals = ['cat', 'panda', 'sloth']
animals.length = 5

console.log(animals)
// ['cat', 'panda', 'sloth', undefined, undefined]

Удаление предметов в массивах

Удалить Последний Элемент в массиве, мы используем поп метод

// Remove the last element, 'sloth'
let animals = ['cat', 'panda', 'sloth']
animals.pop()

console.log(animals)
// ['cat', 'panda'];

Удалить первый Элемент массива, мы используем Сдвиг метод

// Remove the first element, 'cat'
let animals = ['cat', 'panda', 'sloth']
animals.shift()

console.log(animals)
// ['panda', 'sloth']

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

В этом примере сплайс мутирует животное множество. Удаляет один элемент в индексе 1 Анкет так 'panda' устранен. Массив теперь содержит только 'Cat' и «ленив» Анкет

// Remove 1 element at index 1, 'panda'
let animals = ['cat', 'panda', 'sloth']

animals.splice(1, 1)

console.log(animals)
// ['cat', 'sloth']

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

// Remove 1 element at index 1, and end at index 2 (index 2 is not included)
let animals = ['cat', 'panda', 'sloth']
let slicedAnimal = animals.slice(1, 2)
console.log(slicedAnimal)
// 'panda'

// Animals is not mutated
console.log(animals)
// ["cat", "panda", "sloth"]

Другой способ удалить элементы – установить длину массива в меньшее значение.

// Set length to 2, which removes 'sloth'
let animals = ['cat', 'panda', 'sloth']
animals.length = 2

console.log(animals)
// ['cat', 'panda']

Изменение элементов в массивах

Чтобы изменить значение элемента в массиве, мы указываем индекс внутри скобок [] и задание = оператор для назначения обновленного значения. Синтаксис выглядит как variablename [indextomodify] Анкет

// Modify the value of index 0 ('cat') to 'dog'
let animals = ['cat', 'panda', 'sloth']
animals[0] = 'dog'

console.log(animals)
// ['dog', 'panda', 'sloth']

Мы также можем изменить значение, используя сплайс метод Первый параметр указывает, какой индекс мы должны начать изменять, второй параметр указывает, сколько элементов мы должны удалить, а третий и дальнейшие параметры указывают, какие элементы (ы) мы должны добавить.

// Replace 1 element at index 2 ('sloth') with 'wolf'
let animals = ['cat', 'panda', 'sloth']
animals.splice(2, 1, 'wolf')

console.log(animals)
// ['cat', 'panda', 'wolf']

// Replace 1 element at index 1 ('panda') with 'wolf' and 'lion'
let animals = ['cat', 'panda', 'sloth']
animals.splice(1, 1, 'wolf', 'lion')

console.log(animals)
// ['cat', 'wolf', 'lion', 'sloth']

Петля через массивы

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

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

let animals = ['cat', 'panda', 'sloth']

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

// output:
// cat
// panda
// sloth

для ... из Заявление также зацикливается на массивах.

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

let animals = ['cat', 'panda', 'sloth']

for (let i of animals) {
  console.log(i)
}

// output:
// cat
// panda
// sloth

Вывод

В этом блоге мы узнали:

• Как массивы помогают конденсировать и организовать код.
• Как создать массивы с помощью кронштейна [] обозначения (предпочтительный метод) и конструкторы массива.
• Как массивы индексируются, начиная с 0 Анкет
• Как получить доступ к элементам с помощью [IndexNumber] Анкет
• Как найти длину массива, используя длина метод
• Как добавить элементы, используя толкать , без устранения , = оператор и длина метод
• Как удалить элементы, используя поп , Сдвиг , сплайс и Среза Анкет
• Как изменить элементы, используя = оператор и сплайс Анкет
• Как пройти через массивы, используя для и для ... из петли.

Массивы являются фундаментальной частью программирования в JavaScript. Теперь вы знаете, как с ними работать!

Первоначально опубликовано sophiali.dev

Оригинал: “https://dev.to/sophia_wyl/understanding-arrays-in-javascript-56g0”