Полное руководство по использованию массивов в JavaScript

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

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

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

Примеры вещей, которые можно хранить с массивами, включают:

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

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

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

Для объявления массивов мы используем ключевое слово let или const - вот так:

let arr = [1,2,3];
const arr2 = [1,2,3];

Мы используем let для переменных и const для массивов, которые не меняются.

Кроме того, мы можем сначала объявить массивы, а затем вставить значения, например:

let arr = []
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

Это то же самое, что и let arr = [1,2,3], поскольку у нас одинаковые записи и одинаковый порядок в обоих arr массивах.

Мы можем объявлять массивы с разными типами значений в одном массиве, например:

let arr = [1, 'chicken', {foo: 'bar'}];

Как видите, не имеет значения, какие данные мы помещаем в массив. Однако мы должны быть осторожны, чтобы избежать ошибок типа данных, когда мы просматриваем или манипулируем массивами, проверяя тип и содержимое объектов, а также является ли какая-либо запись null или undefined.

Другой способ создать массив - это ключевое слово new, например:

let names = new Array('Bob','Jane', 'John');

Доступ к данным массива

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

arr[1]

Если arr назначен [1, ‘chicken’, {foo: ‘bar’}];, тогда arr[1] будет 'chicken'.

Получить размер массива

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

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

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

let multiArray = [[1,2,3], [4,5,6]];

or:

let multiArray = new Array([1,2,3], [4,5,6]);

Мы также можем написать:

let multiArray = [];
multiArray[0] = [];
multiArray[0][0] = 1;
multiArray[0][1] = 2;
multiArray[0][2] = 3;
multiArray[1] = [];
multiArray[1][0] = 4;
multiArray[1][1] = 5;
multiArray[1][2] = 6;

Все три части кода эквивалентны.

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

multiArray[0][1]

Обход массивов

Мы можем перемещаться по значениям массивов с помощью циклов. Циклы - это фрагменты кода, которые повторяются до тех пор, пока не будет выполнено конечное условие. В JavaScript у нас есть цикл for, цикл while и цикл do...while.

Для петли

С помощью цикла for, учитывая, что у нас есть массив name, мы можем пройти цикл, выполнив:

let names = new Array('Bob','Jane', 'John');
for (let i = 0; i < names.length; i++){
  console.log(names[i]);
}

Цикл for обычно записывается с начальным условием в качестве первого оператора, затем с конечным условием во втором операторе и условием изменения индекса в третьем операторе. Операторы разделяются точкой с запятой. Поскольку в JavaScript массивы начинаются с нулевого индекса, мы завершаем цикл, когда индекс массива становится на единицу меньше длины массива.

Пока цикл

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

Например, приведенный ниже цикл будет выполняться, если номер индекса i меньше трех:

const array = [1,2,3];let i = 0;
while(i < array.length){
  console.log(i);
}

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

Сделать цикл

do...while цикл всегда будет выполнять первую итерацию.

const array = [1,2,3];let i = 0;
do{
  console.log(i);
}
while(i < array.length)

В приведенном выше примере он будет регистрировать как минимум 0, но в этом случае он также будет регистрировать 1 и 2, поскольку эти два числа меньше трех.

С помощью вышеуказанных циклов вы можете вызвать break, чтобы остановить цикл, или return, прежде чем цикл будет полностью завершен.

//do while loop
const array = [1,2,3];let i = 0;do{
  console.log(i);  if (i == 1}{    break;  }}
while(i < array.length)//while loop
i = 0;while(i < array.length){  if (i == 1{    break;  }
  console.log(i);
}//for loop
for (let j = 0; j < array.length; j++){  if (j == 1){
    break;
  }
  console.log(j);
}

В приведенных выше примерах вы не увидите двух зарегистрированных.

Пример возврата из цикла:

const loop = ()=>{
  const array = [1,2,3];  
  for (let j = 0; j < array.length; j++){       
    if (j == 1){
      return j;
    }
    console.log(j);
  }
}
loop() //returns 1

Вы также можете пропустить итерации с помощью оператора continue:

const array = [1,2,3];
for (let j = 0; j < array.length; j++){  if (j == 1){
    continue;
  }
  console.log(j) // 1 will be skipped;
}

Свойства массива

Поскольку массив - это объект JavaScript. Это его собственные свойства. Как и любой объект в JavaScript, он имеет свойство prototype, которое позволяет разработчикам добавлять методы и свойства объекта массива. Свойство constructor - это ссылка на функцию, созданную прототипом объекта массива. length возвращает размер массива.

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

Чтобы упростить управление массивами, стандартная библиотека JavaScript содержит множество методов массива, которые упрощают управление массивами. Существуют методы поиска и фильтрации элементов, а также, например, добавления и удаления элементов в массиве. Также есть функции для объединения нескольких массивов в один.

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

Array.forEach

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

Пример:

const array = [1,2,3];
  array.forEach(a =>{  console.log(a);
})

В приведенном выше примере будут зарегистрированы все числа в массиве.

Array.find

Array.find вернет элемент в массиве с заданным условием. Например, если вы хотите получить определенные числа из массива, вы делаете это:

const array = [1,2,3];
const num = array.find(a => a == 2); // returns 2

find возвращает единственный результат.

Array.findIndex

Array.findIndex вернет индекс элемента в массиве с заданным условием. Требуется функция обратного вызова, которая возвращает заданное условие. Например, если вы хотите получить индекс определенного числа из массива, вы делаете это:

const array = [1,2,3];
const num = array.findIndex(a => a == 2); // returns 1

Array.filter

Array.filter вернет массив элементов, соответствующих заданному условию. Требуется функция обратного вызова, которая возвращает заданное условие. filter возвращает новый массив.

Например, если вы хотите получить индекс определенного числа из массива, вы делаете:

const array = [1,2,3];
const numArray = array.filter(a => a == 2); // returns [2]

Array.includes

Array.includes проверяет, существует ли элемент в массиве. Требуется число или строка, которые функция может сравнивать.

const array = [1,2,3];
const includesTwo = array.includes(2); // returns true

Array.some

Array.someпроверяет, соответствуют ли некоторые элементы заданному условию. Требуется функция обратного вызова, которая возвращает логическое значение для условия.

const array = [1,2,3];
const includesTwo = array.some(a => a == 2); // returns true
const includesFive = array.some(a => a == 5); // returns false

Array.every

Array.every проверяет, соответствует ли каждый элемент заданному условию. Требуется функция обратного вызова, которая возвращает логическое значение для условия.

const array = [1,2,3];
const everyElementIsTwo = array.every(a => a == 2); // returns false
const everyElementIsNumber = array.every(a => typeof a == 'number'); // returns true since every item in the array is a number

Array.isArray

Array.isArray проверяет, является ли данный объект массивом. Это удобный способ проверить, является ли элемент массивом.

const array = [1,2,3];const notArray = {};
let objIsArray = Array.isArray(array); // true
objIsArray = Array.isArray(notArray); // false

Array.from (новый набор (массив))

Set - это объект, в котором не может быть повторяющихся записей. Вы можете создать новый Set из массива, а затем преобразовать его обратно в массив.

const array = [1,2,2,3];
const arrayWithDups = Array.from(new Set(array)); //returns new array without duplicates, [1,2,3]

Array.slice (startIndex, endIndex)

Возвращает новый массив от startIndex до endIndex — 1.

Пример:

const arr = [1,2,3,4,5];
const newArr = arr.slice(0,2);
console.log(newArr); // returns [1,2]

Array.splice (индекс, numberOfItems)

Удалите элемент массива на месте с заданным index, а затем numberOfItems после него.

Например:

const arr = [1,2,3,4,5];
arr.splice(0,2);
console.log(arr); // returns [3, 4, 5] since we specified that we remove item located at index 0 and 2 items after that.

Array.sort (функция сортировки)

Array.sort сортирует массив на месте в соответствии с условием, которое вы возвращаете insortFunction.

sortFunction должен быть в таком формате:

const sortFunction = (a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

По умолчанию, если sortFunction не указан, элементы массива будут преобразованы в строку и будут отсортированы в соответствии со значением Unicode строки.

Array.fill (newElement, startIndex, endIndex)

Array.fill добавит или заменит элемент на элемент, указанный от startIndex до endIndex. Если startIndex не определен, он будет начинаться с 0. Если endIndex не определен, он изменит значения до конца массива.

Например:

let array = [1, 2, 3, 4, 5];console.log(array.fill(0, 2, 4));
// array is now [1, 2, 0, 0, 0]console.log(array.fill(5, 1));
// array is now [1, 5, 5, 5, 5]console.log(array.fill(6));
// array is now [6, 6, 6, 6, 6]

Рекурсивно сгладить массив

Array.flat не справляется с рекурсивно сглаженными массивами. Глубина ограничена, и она не сглаживает все виды вложенных структур массивов. Лучший способ сделать это - написать для этого рекурсивную функцию.

let arr1 = [1, 2, [3, 4], 5];
let arr2 = [1, 2, [3, 4], [5, [6,[7,]]]];const flatten = (items) => {
  const flat = [];  items.forEach(item => {
    if (Array.isArray(item)) {
      flat.push(...flatten(item));
    } else {
      flat.push(item);
    }
  });  return flat;
}console.log(flatten(arr1));
console.log(flatten(arr2));

Array.join (разделитель)

Array.join вернет строку путем объединения записей после их преобразования в строку с separator между каждой записью. Лучше всего работает со строковыми и числовыми массивами.

Пример:

const arr = [1,2,3];
console.log(arr.join(',')) // get '1,2,3'const arr = ['1',2,3];
console.log(arr.join(',')) // get '1,2,3'

Array.indexOf (elementToFind)

Array.indexOf вернет первый индекс elementToFind в массиве. Лучше всего работает со строковыми и числовыми массивами. Если вы хотите найти объект, не являющийся строкой или числом, используйте Array.findIndex. Возвращает -1, если элемент не найден.

Пример:

const arr = [1,2,3];
console.log(arr.indexOf(1)); // returns 0const arr2 = [1,1,2,3];
console.log(arr2.indexOf(1)) // still 0

Array.lastIndexOf ()

Array.lastIndexOf вернет последний индекс elementToFind в массиве. Лучше всего работает со строковыми и числовыми массивами. Возвращает -1, если элемент не найден. Функция также принимает начальный индекс, чтобы начать поиск в обратном направлении в качестве второго параметра.

Пример:

const arr = [1,2,3];
console.log(arr.indexOf(1)); // returns 0const arr2 = [1,1,2,3];
console.log(arr2.indexOf(1)) // returns 1const arr3 = [3,1,2,3]
console.log(arr3.lastIndexOf(3, 2)) // returns 0, start searching backwards from index 2

Array.push (новыйЭлемент)

Array.push добавляет новый элемент в массив.

Пример:

let arr = [1,2,3];
arr.push(4);
console.log(arr) // [1,2,3,4]

Array.pop ()

Array.pop удаляет последний элемент массива.

Пример:

let arr = [1,2,3,4];
arr.pop();
console.log(arr) // [1,2,3]

Array.map (mapFunction)

Array.map возвращает новый массив, который преобразует элемент существующего массива, вызывая mapFunction. mapFunction принимает один аргумент - элемент массива.

Пример:

let arr = [1,2,3,4];
const newArr = arr.map(a=>a*2)
console.log(newArr) // [2,4,6,8]

Array.reduce (уменьшитьФункция)

Array.reduce объединяет элементы массива, чтобы вернуть значение, вызывая reduceFunction для всех элементов, чтобы объединить их. reduceFunction принимает два аргумента: текущий и следующий элемент в массиве.

Пример:

const arr = [1,2,3,4];
const sum = arr.reduce((a,b)=>a+b);
console.log(sum); // returns 10

Array.reverse ()

Array.reverse возвращает новый массив с элементами существующего массива в обратном порядке.

Пример:

const arr = [1,2,3,4];
console.log(arr.reverse()) // [4,3,2,1]

Теперь, когда мы узнали о массивах, мы можем делать гораздо больше в наших программах на JavaScript. Впереди нас ждет большой мир!