Share This
Связаться со мной
Крути в низ
Categories
//☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры

☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры

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

metody massivov v javascript dlja novichkov sovety rekomendacii i primery a7a5800 - ☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры

Массивы

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

Например:

Массив отличается от переменной количеством значений, которые в нем хранятся.

         var a = 5; // в переменной хранят одно значение - 5 var a = [13, 4, ”Javascript”]; // переменная a - это массив, в котором можно хранить числа и строки.     

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

Инициализировать массив — значит сказать программе, что перед ней массив и с ним необходимо поработать.

Инициализация пустого массива

         var a = []; // Инициализировать пустой массив      

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

         var a = [1, 2, 3];// Инициализировать массив с числами 1, 2, 3      

Вариант аналогичный var a = [1, 2, 3];

         var a = Array.of(1, 2, 3);// Аналогично инициализации массива var a = [1, 2, 3];      

metody massivov v javascript dlja novichkov sovety rekomendacii i primery e4391d4 - ☕📚 Методы массивов в JavaScript для новичков: советы, рекомендации и примеры

Массив var a = Array.of(1, 2, 3) в консоли браузера Инициализировать массив из шести элементов и заполнить его единицами

         var a = Array(6).fill(1);// инициализировать массив из шести элементов и заполнить его единицами      

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу

Получение длины массива

Длина массива — это количество элементов в нем. Например, в массиве arr=[1, 2, 3] — три элемента, а в массиве arr=[] — ноль элементов.

Длину массива можно узнать через свойство length. Синтаксис такой: arr.length.

Например:

Получение длинны массива с помощью свойства length

         var a = [1, 2, 3];// инициализировали массив a var b = a.length;// задаем переменную b, её значение будет равно длине массива      

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

Метод every() используют для проверки всех элементов массива на соответствие условию.

Например:

Проверка элементов массива на соответствие условию с помощью метода every()

         function isBigEnough(element, index, array) {   return element >= 10; }     var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed равен false, потому что не все аргументы element в массиве больше или равны 10     var passed1 = [12, 54, 18, 130, 44].every(isBigEnough);// passed равен true, потому что в массиве все аргументы element больше 10      

В этом примере функция isBigEnough возвращает true, если все элементы (element) массива больше или равны 10. Если это условие не соблюдается хотя бы в одном элементе массива, функция возвращает false.

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

Метод some() используют для проверки какого-либо одного элемента массива на соответствие условию.

Например:

Проверка элементов массива на соответствие условию с помощью метода some()

         function isBigEnough(element, index, array) {   return element >= 10; } var passed = [2, 5, 8, 1, 4].some(isBigEnough);// passed равен false var passed1 = [12, 5, 8, 1, 4].some(isBigEnough);// passed1 равен true      

В этом примере функция isBigEnough возвращает false, потому что в массиве нет ни одного элемента (element) больше или равного 10. Если в массиве есть хоть один подходящий элемент, функция возвращает false.

Создание массива на основе существующего массива с использованием метода map()

Метод map() создает новый массив c результатом вызова функции на основе существующего массива.

Например:

Создание массива на основе существующего с помощью метода map()

         var numbers = [1, 4, 9];// массив var doubles = numbers.map(function(num) {   return num * 2; });       

В примере с помощью метода map() умножают каждый элемент массива numbers на 2 и получают новый массив doubles с другими значениями.

Фильтрация массива с помощью метода filter()

С помощью метода filter() можно создать новый массив на основе имеющегося, но со значениями, которые соответствуют определенным условиям.

Например:

Фильтрация элементов массива с помощью метода filter() 

         function isBigEnough(element) {   return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);      

В примере метод filter() оставляет в массиве filtered элементы, которые больше или равны 10.

Метод reduce()

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

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

  1. previousValue — предыдущее значение.
  2. currentValue — текущее значение.
  3. index — индекс текущего элемента массива.
  4. array — сам массив.

Например:

Возвращение суммы текущего и последующего элементов с помощью метода reduce()

         var a = [0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {   return currentValue+previousValue; },1);      

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

Вызов функции currentValue previousValue index array значение
первый 1 0 1 [0, 1, 2, 3, 4] 1
второй 2 1 2 [0, 1, 2, 3, 4] 3
третий 3 3 3 [0, 1, 2, 3, 4] 6
четвертый 4 6 4 [0, 1, 2, 3, 4] 10

Перебор массива с помощью метода forEach()

Метод for Each() перебирает все элементы массива и совершает с каждым одно действие.

Например:

Перебор элементов массива методов for Each(). Метод for Each() перебирает все элементы и выводит их по очереди в консоль.

         var a = [1, 2, 3]; a.forEach(el => console.log(el));       

Перебор массива с использованием оператора for…of

Метод for…of перебирает все элементы массива по их значению.

Например:

Перебор элементов массива методом for…of. Метод for…of перебирает все элементы и выводит их по очереди в консоль.

         var a = [1, 2, 3]; for (let v of a) {   console.log(v) };      

Перебор массива с использованием оператора for

Оператор перебора массива for перебирает элементы массива по его индексу.

Например:

Перебор элементов массива методом for.  В данном примере индексу элемента i  присваивают значение 0. После каждой итерации счетчик увеличивает значение на единицу. После каждой итерации в консоль выводится значение a[i]

         var a = [1, 2, 3];// инициализируем массив for (let i = 0; i < a.length; i += 1) {   console.log(a[i]) };      

Метод @@iterator

Метод @@iterator перебирает все элементы массива и проверяет значение элемента массива — value и его наличие в массиве — done. Если элемент есть, то done принимает значение false. Если массив закончился и элементов больше нет, то done примет значение true. А value, в этом случае, примет значение undefined.

Например:

Перебор массива с помощью Symbol.iterator()

         var a = [1, 2, 3] let it = a[Symbol.iterator]() console.log(it.next())  console.log(it.next())  console.log(it.next())  console.log(it.next())       

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

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

Например:

Добавление элемента в конец массива методом push()

         var a = [1,2,3]; a.push(4);      

В примере в конец массива а добавим элемент 4. Получится массив a = [1,2,3,4].

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

Чтобы добавить элемент в конец массива, используют метод unshift().

Например:

Добавление элемента в начало массива методом unshift()

         var a = [1,2,3]; a.unshift(4);      

В примере в начало массива а добавим элемент 4. Получится массив a = [4,1,2,3].

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

Чтобы удалить элемент из конца массива, используют метод pop().

Например:

Удаление элементов массива методом pop()

         var a = [1,2,3]; a.unshift(4);      

В примере в начало массива а добавим элемент 4. Получится массив a = [4,1,2,3].

Удаление элементов массива и вставка вместо них других элементов

Чтобы из массива удалить элементы и вставить на их место другие элементы используют метод splice().

Удаление элементов массива и вставка на их место других элементов методом splice()

         var a = [1, 2, 3, 4, 5, 6]; a.splice(2, 3,'a', 'b');      

В примере удаляем три элемента начиная с индекса 2 и на их место вставляем 'a', 'b'. Получаем массив a=[ 1, 2, 'a', 'b', 6 ].

Объединение нескольких массивов

Объединять массивы и возвращать новый массив можно методом concat().

Объединение массивов методом concat()

         var a = [1, 2]; var b = [3, 4]; var c = a.concat(b);      

В примере массив a и массив b объединили с помощью метода concat() и вернули новый массив c=[1,2,3,4].

Поиск элементов в массиве

Элементы в массиве можно искать с помощью следующих методов:

  1. indexOf()
  2. lastIndexOf()
  3. find()
  4. findIndex()
  5. includes()

Найти элемент в массиве можно по индексу с помощью метода indexOf(). Если по указанному индексу нет элемента, то возвращается -1.

Например:

 Поиск элемента массива методом indexOf()

         var a = [1, 2, 3, 4, 5, 6, 7, 5, 8]; console.log(a.indexOf(5));//6 console.log(a.indexOf(23));//-1      

В примере в массиве a ищут и выводят в консоль элемент с индексом [5] и элемент с индексом [23]. Под индексом [5] нашли элемент 4. А под индексом [23] нет элементов, поэтому получаем -1.

Метод lastIndexOf() возвращает индекс последнего вхождения элементов в массив, если элемента нет, то возвращается -1.

 Поиск элемента массива методом astIndexOf()

         var a = [1, 2, 3, 4, 5, 6, 7, 5, 8]; console.log(a.lastIndexOf(1));  console.log(a.lastIndexOf(23));       

В примере в массиве a ищем индекс элемента 1 — получаем [0]. Элемента 23 в массиве нет, поэтому в консоли получаем -1.

Метод find() ищет элементы в массиве по передаваемой ему функции. Если функция возвращает true, то метод возвращает первый найденный элемент.

Например:

Поиск элемента массива методом find() 

         a.find(x => x.id === my_id);     

В примере функция x ищет элемент id, который должен иметь значение my_id. Если он находит my_id в массиве, то возвращает этот элемент. Если элемента нет, то возвращается undefined.

Метод findIndex() возвращает индекс элемента, если элемента нет, то возвращается undefined.

Например:

Поиск элемента массива методом findIndex()

         a.findIndex(x => x.id === my_id);      

Метод includes() ищет элемент массива и возвращает true, если элемент есть, возвращает false, если элемента нет. Методу можно передавать два значения — сам элемент и индекс.

Например:

Поиск элемента массива методом includes()

         var a = [1, 2, 3, 4, 5, 6, 7, 5, 8]; console.log(a.includes(1, 2));      

В примере метод вернет false, потому что на месте индекса [2] нет элемента 1. Элемент 1 находится под индексом [0].

Получение фрагмента массива

Метод slice() используют для получения фрагментов массива по его индексам.

Например:

Получение фрагментов массива методом slice()

         var a = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a.slice(4));// [ 5, 6, 7, 8, 9 ] console.log(a.slice(3,7)); //[ 4, 5, 6, 7 ]      

В первом выводе из массива a получается фрагмент массива начиная с индекса 4 и до конца [ 5, 6, 7, 8, 9 ]. Во втором случае получим массив с 3 по 7 индекс [ 4, 5, 6, 7 ], при этом последний элемент в массив не входит.

Сортировка массива

Для сортировки массива в алфавитном порядке используют метод sort().

Например:

Сортировка массивов методом sort()

         var a = [1, 2, 3, 10, 11]; var b=[‘b’,’c’,’a’]; a.sort();//[ 1, 10, 11, 2, 3 ] b.sort();//[ "a", "b", "c" ]       

Чтобы числа и цифры в массиве шли по порядку, используют функцию (a, b) => a – b.

Например:

Сортировка массива функцией (a, b) => a – b

         const a = [1, 10, 3, 2, 11] console.log(a.sort((a, b) => a — b)) //[ 1, 2, 3, 10, 11 ] console.log(a.sort((a, b) => b — a)) //[ 11, 10, 3, 2, 1 ]      

Для расположения элементов массива в обратном порядке используют метод reverse().

Например:

Расположение элементов массива в обратном порядке методом reverse()

         var a = [1, 2, 3, 10, 11]; var b=['b','c','a']; a.reverse();//[ 11, 10, 3, 2, 1 ] b.reverse();//[ "a", "c", "b" ]       

Получение строкового представления массива

Для извлечения элементов из массива в виде строки используют метод toString() или a.join().

Например:

Получение строкового представления из массива методом toString() иa.join()

         var a = [1, 10, 3, 2, 11]; var b=['b','c','a']; console.log(a.toString()); //1,10,3,2,11 console.log(b.toString()); //b,c,a console.log(a.join()); //1,10,3,2,11 console.log(a.join(', ')); //1, 10, 3, 2, 11 console.log(b.join()); //1,10,3,2,11 console.log(b.join(', ')); //b, c, a      

Создание копий массивов

Элементы из массива a можно скопировать в массив b с помощью метода Array.of().

Например:

Копирование массива a в массив b методом Array.of()

         var a = [1, 10, 3, 2, 11]; var b = Array.of(...a); console.log(b); // [ 1, 10, 3, 2, 11 ]      

С помощью метода copyWithin() можно копировать элементы в определенное место массива. Методу необходимо передать аргументы: первый аргумент — индекс целевой позиции, то есть то место в новом массиве, куда необходимо вставить данные. Второй аргумент — начальный индекс позиции источника элементов.

Например:

Копирование элементов из массива в определенное место массива

         var a = [1, 2, 3, 4, 5]; a.copyWithin(0, 2);// 0 — начальный индекс позиции нового массива, куда необходимо вставить элементы массива a с индексом 2 console.log(a); //[ 3, 4, 5, 4, 5 ]. На место элементов 1,2,3, вставили элементы 3,4,5, а остальные элементы оставили как были в исходном массиве.       

Методы pop/push, shift/unshift

Метод pop() удаляет элемент из конца массива. А метод push() добавляет элемент в конце массива.

Например:

Удаление элементам из массива методом pop() и добавление элемента в конец массива методом push()

         var dishes = ["Кастрюля", "Сковородка", "Половник"]; alert (dishes.pop());//Половник dishes.push('Половник');//Снова добавляем слово "Половник" в конец массива alert(dishes);//Кастрюля,Сковородка,Половник      

Метод shift() удаляет из начала массива один или несколько элементов. Метод unshift() добавляет в начало массива один или несколько элементов.

Например:

Добавление в массив методом unshift() и удаление из массива методом shift()

         var dishes = ["Кастрюля", "Сковородка"]; dishes.unshift('Половник');//Вставляем в начало массива слово 'Половник' console.log( dishes ); // выводим массив[ "Половник", "Кастрюля", "Сковородка" ] dishes.shift();//Удаляем слово из начала массива console.log( dishes );//[ "Кастрюля", "Сковородка" ]     

Немного о «length»

Свойство length — это наибольший индекс массива плюс один. С помощью этого свойства можно уменьшить длину массива.

Например:

Уменьшаем массив arr до двух элементов. Уменьшение массива происходит безвозвратно. Если снова обратиться к индексу [3], то получим undefined

         var arr = [1, 2, 3, 4, 5]; arr.length = 2; // укорачиваем до двух элементов console.log( arr ); // Array [ 1, 2 ] arr.length = 5; // возвращаем length  console.log(arr);//[ 1, 2, <3 empty slots> ] console.log( arr[3] ); // undefined: как видим, значения не восстановились      

Если мы можем уменьшить количество элементов в массиве, то можем и полностью очистить массив с помощью свойства arr.length=0.

Например:

Очищением массива с помощью свойства arr.length=0

         var arr = [1, 2, 3, 4, 5]; arr.length = 0;  console.log( arr ); // Array []      

Метод new Array()

Массив можно задать методом new Array().

Например:

Инициализация массива методом new Array()

         var arr = new Array("Кастрюля", "Сковородка", "Ложка"); console.log(arr);//Array(3) [ "Кастрюля", "Сковородка", "Ложка" ]      

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

Например:

         let arr = new Array(2); console.log(arr[0]);//undefined      

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

         var arr = [];     

Метод toString

Метод toString возвращает список элементов массива, разделенных запятыми.

Возвращение списка элементов, разделенных запятыми

         var dishes = ["Кастрюля", "Сковородка"]; alert( dishes ); // Кастрюля,Сковородка alert( String(dishes) === "Кастрюля", "Сковородка" ); // true      

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

Если в массив a мы поместим массив a1,a2…an, то получим многомерный массив. Он может выглядеть так:

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

         var a = [[1,2,3],[4,5,6],[7,8,9]];      

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

Например:

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

         var a = [[1,2,3],[4,5,6],[7,8,9]]; var b = a[0][2];//[0] — первый элемент массива с индексом 0, [2] — третий элемент первого элемента массива console.log(b);//3       

***

В это статье мы научились:

  1. Инициализировать массив.
  2. Объединять и копировать массивы.
  3. Определять длину массива.
  4. Добавлять или удалять элемент из массива.
  5. Перебирать все элементы массива или определенный диапазон элементов.
  6. Работать с многомерными массивами.

Материалы по теме

  • ☕ Распространенные алгоритмы и структуры данных в JavaScript: основные понятия и работа с массивами
  • Функциональный JavaScript: 6 образцов кода без цикла for

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close