Поиск по сайту:

Как манипулировать массивами JavaScript


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

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

Объявление массива

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

let emptyArray = [];
 
let filledArray = ["hello", 123, {foo: "bar"}, ["x", "y"]];

Доступ к значениям массива

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

let myArray = ["foo", "bar", "example"];
 
// logs "bar"
console.log(myArray[1]);

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

Вы можете изменить значение индекса массива, установив его напрямую:

arr[1] = "test";

Показанный выше myArray теперь будет содержать значения foo, test, example.

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

Вы добавляете новые элементы в массивы с помощью метода push():

["car", "truck"].push("bus");
// car, truck, bus

Это добавляет элемент в конец массива. Если вы хотите, чтобы новый элемент был вставлен в начало массива, вместо этого используйте метод unshift().

["car", "truck"].unshift("bus");
// bus, car, truck

Иногда вам может понадобиться вставить элемент в середине массива. Вы можете использовать метод splice() для добавления элемента по определенному индексу:

["car", "truck"].splice(1, 0, "bus");
// car, bus, truck

Первый аргумент splice() — это индекс для вставки. Далее идет количество элементов, которые необходимо удалить с начала массива. Когда вы добавляете новый элемент, это должно быть 0, чтобы сохранить существующие элементы. Последний аргумент — это добавляемый элемент.

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

Чтобы удалить элемент массива, используйте метод pop(). Он «вытолкнет» последний элемент из массива:

["car", "truck", "bus"].pop();
// car, truck

Чтобы удалить первый элемент массива, используйте метод shift():

["car", "truck", "bus"].shift();
// truck, bus

Если вы хотите удалить определенный элемент, вам нужно снова использовать метод splice(). Сначала вам нужно знать индекс, который вы хотите удалить. Если вы работаете с одним из значений массива, сначала вызовите indexOf(), чтобы получить его индекс. Затем вы можете передать это в splice(), установив для второго аргумента значение 1, чтобы удалить один элемент по заданному индексу.

const arr = ["car", "truck", "bus"];
arr.splice(arr.indexOf("truck"), 1);
// car, bus

Итерация по массивам

Существует несколько способов перебора массива. Традиционный подход заключается в использовании цикла for:

const arr = ["car", "truck", "bus"];
for (let i = 0; i < arr.length; i++) {
    console.log(`Vehicle at position ${i} is ${arr[i]}`);
}

Более короткая альтернатива — использовать метод массива forEach(). Этому надо дать функцию. Функция вызывается один раз для каждого элемента массива. Он получает значение и индекс каждого элемента в качестве своих параметров.

["car", "truck", "bus"].forEach((vehicle, i) => {
    console.log(`Vehicle at position ${i} is ${vehicle}`);
});

С forEach() часто проще работать, чем с циклом for. Однако вы должны быть осторожны при возврате значений. Возврат из функции, переданной в forEach(), не отменит цикл:

const arr = ["car", "truck", "bus"];
 
// logs "car"
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    if (arr[i] === "truck") return;
}
 
// logs "car", "truck", "bus"
arr.forEach((vehicle, i) => {
    console.log(vehicle);
    if (vehicle === "truck") return;
});

С помощью forEach() оператор return возвращает значение из анонимной функции. Цикл создается внешней областью видимости, поэтому он продолжает вызывать функцию заново для оставшихся элементов массива.

Сопоставление массивов

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

const arr = [2, 4, 8, 16];
const mapped = arr.map(v => (v * v));
// mapped contains 4, 16, 64, 256

Ваша функция обратного вызова на самом деле получает три аргумента: значение в текущей позиции, индекс текущей позиции и массив, к которому вызывается map().

[1, 2, 3].map((value, index, arr) => (value * value));

Отображение полезно, когда вам нужно выполнить итерацию по массиву, получить доступ к каждому значению, а затем получить какое-то новое значение из этой итерации. Этот метод также полезен при работе с фреймворками пользовательского интерфейса, такими как React, где вы можете отображать данные, чтобы преобразовать их в узел DOM:

const MyComponent = users => (
    users.map(user => (
        <div>
            <p>{user.Name}</p>
            <p>{user.Email}</p>
        </div>
    ))
);

Рассмотрите возможность использования map() всякий раз, когда вам нужно выполнить какое-либо действие над каждым элементом в массиве, даже если вас не интересует возвращаемое значение вашего обратного вызова.

Фильтрация массивов

Другая распространенная задача — фильтрация массива для исключения определенных элементов. Возможно, вам захочется создать новый пустой массив и использовать цикл for для проверки элементов исходного массива. Более простым подходом было бы использование встроенного в JavaScript метода filter().

Как и map(), filter() принимает функцию обратного вызова, которая вызывается на каждой итерации. Текущее значение, индекс и массив передаются обратному вызову в качестве параметров. Обратный вызов должен возвращать либо true, либо false, чтобы указать, должно ли текущее значение быть включено в новый отфильтрованный массив.

const filtered = [1, 2, 3].filter(v => (v % 2 === 0));
// filtered is [2]

Использование filter() делает фильтрацию быстрой и лаконичной. Вам не нужно создавать цикл for и настраивать новый массив самостоятельно. Метод всегда возвращает новый массив и не будет изменять исходный.

Вспомогательные методы

Вот еще несколько методов, которые могут оказаться полезными.

  • Соединение двух массивов. Используйте метод concat(), чтобы соединить два массива вместе. Он вернет новый массив с аргументом, добавленным к массиву, для которого он был вызван. [\a, \b\, \c\].concat([\x\, \y\, \z\]) возвращает [\a\, \b\, \c\, \x\, \y\, \z\].
  • Преобразование массива в строку. Используйте метод join(), чтобы объединить значения массива в одну строку. Вы можете указать разделитель в качестве первого параметра функции. [\a\, \b\, \c\].join(\ - \) вернет a - b - c.
  • Получение индексов значений. Если вы знаете, что значение существует в массиве, вы можете получить его числовой индекс с помощью indexOf(). Если значение встречается в массиве несколько раз, возвращается индекс первого вхождения. Вы можете получить индекс последнего вхождения, используя lastIndexOf().
  • Определение наличия значения в массиве. Метод includes() принимает значение и позволяет проверить, существует ли оно в массиве. Он возвращает логическое значение, указывающее, было ли найдено значение. [\a\, \b\, \c\].includes(\a\) вернет true.
  • Создание пустого массива заданной длины. Вы можете использовать конструктор Array для инициализации пустого массива заданной длины. const myArr=new Array(10) создаст массив с 10 индексами (0-9), каждый со значением undefined.
  • Проверка соответствия всех элементов массива условию. Иногда может потребоваться проверить, соответствует ли условию каждый элемент массива. Метод every() позволяет это сделать. Он принимает обратный вызов, который работает аналогично методу filter(). Метод вернет true только в том случае, если каждый вызов обратного вызова возвращает true. Если вы хотите узнать, совпадают ли только некоторые элементы массива, используйте вместо этого метод some().

Заключение

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




Все права защищены. © Linux-Console.net • 2019-2024