Задачи по JavaScript

Массивы в JavaScript. Задачи на массивы и их решение

Массивы

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

  • В массиве может храниться любое число элементов любого типа.
  • Длина массива динамическая величина и изменяется автоматически при добавлении или удалении элементов массива.
  • Синтаксис для создания нового массива – квадратные скобки со списком элементов внутри.
  • В качестве ключей-индектов выбраны цифры, индексация начинается с нуля.
  • Чтобы получить нужный элемент из массива – после имени переменной которая сылается на массив, указывается номер элемента в квадратных скобках.
  • Элементы можно заменять, добавлять.
  • Так же можно посмотреть текущее число элементов массива, оно содержится в его свойстве length. Свойство length можно изменять напрямую. Если вы установите для свойства length значение, превышающее количество элементов в массиве, новые элементы будут добавлены с начальными значениями undefined. Так же если задать длину массива меньше чем текущее кол-во элементов в массиве то все "не влезшие" элементы в новую длину просто удаляются.
const arr = []; // Создаем пустой массив

const clients = ["Mango", "Poly", "Ajax"]; // Создаем массив clients с тремя элементами

console.log(clients); // Выводим массив в консоль ["Mango", "Poly", "Ajax"]

// Указывая в скобках индекс элемента мы получаем его значение
console.log( clients[0] ); // Mango
console.log( clients[1] ); // Poly
console.log( clients[2] ); // Ajax

// Существующий элемент массива можно перезаписать
clients[0] = 'Chelsey';
console.log( clients[0] ); // Chelsey

// Или добавить
clients[3] = 'Alex';
console.log( clients[3] ); // Alex

//length вернет текущую длину массива
console.log(clients.length); // 4

Обращение к элементу массива

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

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

Методы массивов

Для работы с массивами существует набор методов. Мы рассмотрим основные методы.

push()

Метод push() Позволяет добавить один или несколько элементов в конец массива. Метод push возвращает значение свойства length, которое определяет количество элементов в массиве.

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

let mass = [3,5];
mass.push(6);
mass.push(12);
mass.push(28);
console.log(mass) // 3,5,6,12,28
Метод push javascript

pop()

Метод pop() удаляет элемент в конце массива и возвращает его. Если массив пуст, метод pop возвращает undefined. В следующем примере показано, как удалить элементы из массива, используя метод pop.

let mass = [3,5,7,9];
mass.pop();
console.log(mass) // 3,5,7
            
Метод pop javascript

shift() и unshift()

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

let mass = [3,5,7,9];
mass.shift();
console.log(mass) // 5, 7, 9
mass.unshift(6);
console.log(mass); //6, 5, 7, 9
Метод pop javascript

split() и join()

split("разделитель") - позволяет превратить строку в массив, разбив ее по разделителю указанному в скобочках. Split - это метод строки, но поскольку его используют для трансформации строки в массив мы рассмотрим его здесь.

let str = "Строка, текста, пример"; // это строка
let mass = str.split(",");
console.log(mass); // ["Строка", "текста", "пример"]
console.log(mas[1]); // текста

Метод join("разделитель") - объединяет массив в строку, используя указанный в скобках разделитель.

let mass = ["Hello", "foo", "world"];
mass.join(" "); // указываем разделитель  - пробел
console.log(mass); // Hello foo world

slice()

Метод slice(a,b) - примененный к массиву создает новый массив куда копирует элементы с источника, начиная с элемента под номером a, и до элемента b. Если b не указан, то до конца массива. Метод не изменяет исходный массив.

const clients = ["A", "B", "C", "D"];

// Вернет новый массив в котором будут элементы с индексами от 1 до 2
console.log( clients.slice(1, 3) ); // ["B", "C"]

// Вернет новый массив в котором будут элементы с индексами от 1 до (clients.length - 1)
console.log( clients.slice(1) ); // ["B", "C", "D"]

// Вернет копию исходного массива
console.log( clients.slice() ); // ["A", "B", "C", "D"]

// Вернет новый массив состоящих из последних двух элементом исходного
console.log( clients.slice(-2) ); // ["C", "D"]

Деструктуризация массива

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

let mass = [6, 7, 8, 9]; // массив;
// применяет деструктор. Загоним первые три значения массива
// в переменные a, b, c
let [a, b, c] = mass;
console.log(a); // 6
console.log(b); // 7
console.log(c); // 8

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