О массивах в JavaScript

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

Перечислим основные возможности и применения массивов:

• Хранение данных.
• Итерация.
• Манипуляция данными (добавление, удаление, изменение, сортировка и фильтрация).
• Передача данных (могут передаваться в функции в качестве аргументов, что упрощает организацию кода и передачу данных).

Использование массивов в JavaScript является фундаментальным аспектом разработки веб-приложений. Поэтому их особенности подробно изучают на курсе JavaScript Start от компании FoxmindED.

Инициализация массивов

В JavaScript есть несколько способов создания и инициализации массивов:

1. Литерал массива — это наиболее простой и часто используемый способ. Для этого просто указываются элементы массива в квадратных скобках, разделенные запятыми.

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

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

2. Конструктор Array предоставляет альтернативный способ создания массивов с помощью ключевого слова new.

let numbers = new Array(1, 2, 3, 4, 5);

let fruits = new Array('apple', 'banana', 'orange');

3. Помимо этого, конструктор Array может принимать один аргумент — численный, который задает длину массива.

let emptyArray = new Array(5); // Creates an empty array of length 5

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

// Initializing with initial values ​​using an array literal

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

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

// Initialization with initial values ​​using the Array constructor

let numbers = new Array(1, 2, 3, 4, 5);

let fruits = new Array('apple', 'banana', 'orange');

Ассоциативные массивы и объекты

В контексте JS термин «ассоциативный массив» обычно используется взамен понятия «объект». Объекты в JS — это структуры данных, которые содержат пары ключ-значение. По сути, они представляют собой ассоциативные массивы, где ключи являются строками (или символами), а значения могут быть любого типа данных, включая другие объекты, функции, массивы и примитивные значения.

1. Ключи и значения: каждый элемент объекта представляет собой пару ключ-значение, где ключ является идентификатором, по которому можно получить доступ к значению. Например, в объекте {name: ‘John’, age: 30} ключами являются name и age, а их значениями соответственно ‘John’ и 30.
2. Неупорядоченность: объекты не гарантируют порядок своих ключей. Это означает, что порядок, в котором они были определены, может не совпадать с порядком, в котором они будут перечислены при итерации.
3. Динамическая природа: в отличие от массивов, объекты могут динамически добавлять и удалять свои ключи и значения во время выполнения программы.

Примеры создания и использования:

// Creating an object using an object literal

let person = {

    name: 'John',

    age: 30,

    city: 'New York'

};

// Accessing values ​​by keys

console.log(person.name); // Will display 'John'

console.log(person.age); // Will display 30

Многомерные массивы

Многомерные массивы, или массивы массивов, — это структуры данных, в которых элементы состоят из других массивов.

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

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

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

// Creating a two-dimensional array (matrix)

let matrix = [

    [1, 2, 3],

    [4, 5, 6],

    [7, 8, 9]

];

// Accessing elements of a two-dimensional array

console.log(matrix[0][0]); // Will display 1

console.log(matrix[1][2]); // Will display 6

Многомерные массивы широко применяются в программировании для работы с данными различных структур и типов. 

Методы работы

Рассмотрим основные методы и их применение:

1. Методы для добавления элементов:

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

let fruits = ['apple', 'banana'];

fruits.push('orange', 'grape');

console.log(fruits); // ['apple', 'banana', 'orange', 'grape']

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

let fruits = ['apple', 'banana'];

fruits.unshift('orange', 'grape');

console.log(fruits); // ['orange', 'grape', 'apple', 'banana']

2. Методы для удаления элементов:

• pop(): удаляет последний элемент из массива и возвращает его значение.

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

let removedFruit = fruits.pop();

console.log(removedFruit); // 'orange'

console.log(fruits); // ['apple', 'banana']

• shift(): удаляет первый элемент из массива и возвращает его значение.

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

let removedFruit = fruits.shift();

console.log(removedFruit); // 'apple'

console.log(fruits); // ['banana', 'orange']

3. Методы для изменения массива:

• splice(): удаляет или заменяет существующие элементы массива, а также добавляет новые.

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

fruits.splice(1, 1, 'grape', 'kiwi');

console.log(fruits); // ['apple', 'grape', 'kiwi', 'orange']

4. Другие полезные методы:

• slice(): возвращает выбранный участок массива в виде нового, не изменяя исходного.

let fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

let citrus = fruits.slice(2, 4);

console.log(citrus); // ['orange', 'grape']

Эти методы обеспечивают гибкость при добавлении, удалении и изменении элементов массива, что делает их основным инструментом при работе с данными в веб-разработке.

Вложенные запросы и операции

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

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

Пример с использованием метода filter():

let data = [

    {name: ‘John’, age: 30, hobbies: [‘reading’, ‘running’]},

    {name: ‘Alice’, age: 25, hobbies: [‘painting’, ‘swimming’]},

    {name: ‘Bob’, age: 35, hobbies: [‘running’, ‘cooking’]}

];

// Filtering people who have a hobby «running»

let runners = data.filter(person => person.hobbies.includes(‘running’));

console.log(runners);

• Сортировка — упорядочивает элементы массива в соответствии с определенным критерием.

Пример с использованием метода reduce():

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

let sortedNumbers = numbers.reduce((accumulator, currentValue) => {

    // Insert the current value into the sorted array

    let index = 0;

    while (index < accumulator.length && currentValue > accumulator[index]) {

        index++;

    }

    accumulator.splice(index, 0, currentValue);

    return accumulator;

}, []);

console.log(sortedNumbers); // Выведет: [1, 2, 3, 4, 5]

• Преобразование — изменяет каждый элемент массива на основе определенной функции.

Пример с использованием метода map():

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

let sortedNumbers = numbers.reduce((acc, val) => acc.concat(val), []).sort((a, b) => a - b);

console.log(sortedNumbers); // Выведет: [1, 2, 3, 4, 5]

Оптимизация запросов

Рассмотрим популярные подходы к оптимизации, которые могут помочь улучшить производительность при работе с массивами в JavaScript:

1. Предварительная обработка данных

• При манипуляциях с массивами часто бывает полезно создавать новые массивы вместо изменения существующих. Это позволяет избежать побочных эффектов и делает код более предсказуемым.
• Используйте методы массивов, такие как map, filter, reduce вместо обычных циклов for, так как они могут быть оптимизированы для лучшей производительности.
• Старайтесь использовать алгоритмы с наименьшей сложностью времени выполнения (например, линейную сложность) для обработки массивов, чтобы избежать излишних затрат ресурсов.

2. Использование кэширования

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

Пример:

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

let numbers = [5, 12, 8, 20, 7, 15];

// Bad way (not optimized)

let sum = 0;

for (let i = 0; i < numbers.length; i++) {

    if (numbers[i] > 10) {

        sum += numbers[i];

    }

}

// Good way (optimized)

let filteredNumbers = numbers.filter(num => num > 10);

let sum = filteredNumbers.reduce((acc, num) => acc + num, 0);

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

Разность массивов

Разность массивов – это набор элементов, которые присутствуют только в одном из двух массивов. Существует несколько способов это вычислить:

1. С помощью циклов:

function difference(arr1, arr2) {

  const result = [];

  for (let i = 0; i < arr1.length; i++) {

    if (!arr2.includes(arr1[i])) {

      result.push(arr1[i]);

    }

  }

  return result;

}

const fruits1 = ["apple", "banana", "orange"];

const fruits2 = ["banana", "pear", "kiwi"];

const differenceFruits1 = difference(fruits1, fruits2); // ["apple", "orange"]

2. С помощью методов filter и includes:

function difference(arr1, arr2) {

  return arr1.filter(el => !arr2.includes(el));

}

const differenceFruits2 = difference(fruits1, fruits2); // ["apple", "orange"]

3. С помощью полифилла Set:

function difference(arr1, arr2) {

  const set2 = new Set(arr2);

  return arr1.filter(el => !set2.has(el));

}

const differenceFruits3 = difference(fruits1, fruits2); // ["apple", "orange"]

//

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

Использование массивов с ключами

Массивы с ключами представляют структуру данных, где доступ к элементам осуществляется не по числовым индексам, а по уникальным строковым или символьным ключам. Это позволяет создавать удобные структуры данных для доступа и управления элементами. Например:

• Использование объекта:

let data = {

    'name': 'John',

    'age': 30,

    'city': 'New York'

};

console.log(data['name']); // 'John'

console.log(data['age']); // 30

• Использование Map:

let data = new Map();

data.set('name', 'John');

data.set('age', 30);

data.set('city', 'New York');

console.log(data.get('name')); // 'John'

console.log(data.get('age')); // 30

Это позволяет создавать структуры данных с удобным доступом к элементам по ключам.

Заключение

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