JavaScript — Массив

Массив

Массив — MDN

В JavaScript массивы не являются примитивами, а представляют собой объекты Array со следующими основными характеристиками:

• Массивы JavaScript изменяемы по размеру и могут содержать смесь различных типов данных. (Если вы хотите, чтобы массив содержал только один тип переменных, используйте вместо этого типизированные массивы. — Int8Array, Uint8Array и т.д.).

• Массивы JavaScript не являются ассоциативными массивами (структура данных с парами ключ-значение, как карта), поэтому доступ к ним должен осуществляться с использованием целых чисел в качестве индексов.

• Массивы JavaScript начинаются с индекса 0

• Операции копирования массивов JavaScript создают неглубокие копии

1. Операции копирования массивов

• синтаксис разворачивания

const fruits = ["Strawberry", "Mango"];
const fruitsCopy = [...fruits];

• метод from( )

const fruits = ["Strawberry", "Mango"];
const fruitsCopy = Array.from(fruits);

• метод slice( )

const fruits = ["Strawberry", "Mango"];
const fruitsCopy = fruits.slice();

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

2. Мелкое копирование и глубокое копирование

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

let arr = [[1, 2, 3], 4, 5, 6];
let arrCopy = [...arr];
// or arr.from() or arr.slice()

arrCopy[0][2] = 4;
console.log(arr); // [[1, 2, 4], 4, 5, 6]
// original array has been modified. This is because the reference of arr[0] and arrCopy[0] is the same. So no matter which of them has been changed, the other one will also be changed.

Проблема мелкой копии

• Глубокая копияГлубокая копия объекта — это копия, свойства которой не имеют общих ссылок со свойствами исходного объекта, с которого была сделана копия. В результате, когда вы изменяете исходный объект или копию, вы можете быть уверены, что это не приведет к изменению другого объекта. Одним из способов создания глубокой копии объекта JavaScript является использование JSON.stringify() для преобразования объекта в строку JSON, а затем JSON.parse() для преобразования строки обратно в совершенно новый объект JavaScript.

const fruits = ["Strawberry", "Mango"];
const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));

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

• concat( )Метод concat() используется для объединения двух или более массивов. Этот метод не изменяет существующие массивы, а возвращает новый массив.

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let arr3 = arr1.concat(arr2);
  console.log(arr3); // [1,2,3,4,5,6]

• every( )Метод every() проверяет, все ли элементы в массиве проходят тест, реализованный предоставленной функцией. Он возвращает булево значение.

  function func(value) {
    return value < 4;
  }

  let arr = [1, 2, 3];
  console.log(arr.every(func)); //true

• fill( )
  Метод fill() изменяет все элементы массива на статическое значение, от начального индекса (по умолчанию 0) до конечного индекса (по умолчанию array.length). Возвращает модифицированный массив. Синтаксис:

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

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

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

• filter( )Метод filter() создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

  function func(value) {
    return value <= 2;
  }

  let arr = [1, 2, 3];
  let filteredArr = arr.filter(func);
  console.log(filteredArr); //[1,2]

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

  let arr = [1, 2, 3];
  const found = arr.find((element) => element > 2);
  console.log(found); // 3

• findIndex( )Метод findIndex() возвращает индекс первого элемента массива, удовлетворяющего заданной функции проверки. В противном случае возвращается -1, что указывает на то, что ни один элемент не прошел проверку.

  let arr = [1, 2, 3];
  const foundIndex = arr.findIndex((element) => element > 2);
  console.log(foundIndex); // 2

• flat( )
  Метод flat() создает новый массив со всеми элементами подмассива, конкатенированными в него рекурсивно до указанной глубины.

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

• forEach( )

  Метод forEach() выполняет указанную функцию один раз для каждого элемента массива.

  let arr = [1, 2, 3];
  arr.forEach((element) => console.log(element * element)); // 1,4,9

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

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

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

  const elements = ["Fire", "Air", "Water"];
  console.log(elements.join());
  // expected output: "Fire,Air,Water"
  console.log(elements.join(""));
  // expected output: "FireAirWater"
  console.log(elements.join("-"));
  // expected output: "Fire-Air-Water"

• map( )Метод map() создает новый массив, заполненный результатами вызова заданной функции для каждого элемента вызываемого массива.

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

• flatMap( )Метод flatMap() возвращает новый массив, сформированный путем применения заданной функции обратного вызова к каждому элементу массива, а затем сглаживания результата на один уровень. Он идентичен map(), за которым следует flat() глубиной 1, но немного более эффективен, чем вызов этих двух методов по отдельности.

  let arr = [1, 2, 3];
  let newArr = arr.flatMap((element) => [element * 2]);
  console.log(newArr); // [2,4,6]
  let newArr = arr.flatMap((element) => [[element * 2]]);
  console.log(newArr); // [[2],[4],[6]]

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

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

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

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

• reduce( )Метод reduce() выполняет функцию reducer над каждым элементом массива и возвращает выходное значение singel.Синтаксис метода reduce() следующий:

  reduce(function (accumulator, currentValue, currentIndex, array) {
    // callback - The function to execute on each array element(except the first element if no `initialValue` is provided). It takes in:
    // accumulator - It accumulates the callback's return values.
    // currentValue - The current element being passed from the array.
    // currentIndex is the index of the current value within the array.
    // array is a reference to the array reduce works on
    // initialValue(optional) - A value that will be passed to `callback()` on first call. If not provided, the first element acts as the `accumulator` on the first call and `callback()` won't execute on it.
  }, initialValue);

Примечание:

• Вызов reduce() на пустом массиве без initialValue вызовет TyepError.
• Почти всегда безопаснее предоставлять initialValue.

###

Примеры для подробного объяснения reduce().

  // If there is no callback, reduce method return the value of initialValue.
  let value = [].reduce(() => {}, 2);
  console.log(value); // 2
  // If there is no initialValue, the first element of the array will be taken as the accumulator and callback function starts at the second element.
  value = [1, 0].reduce((accumulator, currentValue, currentIndex, arr) => {
    console.log(
      `callback: ${accumulator}, ${currentValue}, ${currentIndex}. arr: ${arr}`
    ); // callback: 1, 0, 1. arr: 1,0
    return accumulator + currentValue + currentIndex;
  });
  console.log(value); // 2

Array.reduce( ) — programiz
Array.reduce( ) — блог Оливера Джампертца

• reverse( )Метод reverse() инвертирует массив на месте (В информатике алгоритм на месте — это алгоритм, который преобразует входные данные без использования вспомогательной структуры данных).

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

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

  let arr = [1, 2, 3];
  let firstElement = arr.shift();
  console.log(`firstElement: ${firstElement}, arr: ${arr}`); // firstElement: 1, arr: 2,3

• some( )Метод some() проверяет, проходит ли хотя бы один элемент в массиве тест, реализуемый предоставленной функцией. Он возвращает true, если в массиве найден элемент, для которого предоставленная функция возвращает true; в противном случае он возвращает false. При этом массив не модифицируется.

  let arr = [1, 2, 3];
  console.log(arr.some((element) => element % 2 === 0)); // true

• сортировать( )
  Метод sort() сортирует элементы массива по местам и возвращает отсортированный массив.

  • сортировать от min до max(По умолчанию)

  let arr = [1, 2, 3];
  console.log(arr.sort()); // [1,2,3]
  console.log(arr.sort((a, b) => a - b)); // [1,2,3]
  

  • сортировать от max к min

  let arr = [1, 2, 3];
  console.log(arr.sort((a, b) => b - a)); // [3,2,1]
  

• unshift( )

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

  let arr = [4, 5];
  let length = arr.unshift(1, 2, 3);
  console.log(`length: ${length}, arr: ${arr}`); // length: 5, arr: [1,2,3,4,5]

• splice( )
  Метод splice() изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя на их место новые. Он возвращает массив, содержащий удаленные элементы.
  Синтаксис: splice(start, deleteCount, item1, item2, itemN)

  • start — индекс, с которого следует начать изменение массива. Если он больше длины массива, то start будет установлен на длину массива. В этом случае ни один элемент не будет удален, но метод будет вести себя как функция добавления, добавляя столько элементов, сколько указано. Если значение отрицательное, то он начнет с конца массива на столько элементов. (В этом случае начало -1, что означает, что -n — это индекс n последнего элемента, и поэтому эквивалентно индексу array.length - n). Если start равен отрицательной бесконечности, то он будет начинаться с индекса 0.

  // start > array.length: act like an adding method
  arr = [1, 2, 3];
  let value = arr.splice(4, 0, "changed"); // deleteCount must have a value
  console.log(value, arr); // [] [1,2,3,'changed']

  // start < 0: start = array.length - start
  arr = [1, 2, 3];
  arr.splice(-2, 1, "changed");
  console.log(arr); // [1, 'changed', 3] (start = 1)
  arr.splice(Number.NEGATIVE_INFINITY, 1, "changed"); // [ 'changed', 'changed', 3 ]

• deleteCount — целое число, указывающее количество элементов в массиве, которые нужно удалить из start. Если deleteCount опущено, или если его значение равно или больше array.length - start, то все элементы от start до конца массива будут удалены. Однако его нельзя опускать, если есть какой-либо параметр item1. Если deleteCount равно 0 или отрицательно, ни один элемент не будет удален. В этом случае следует указать хотя бы один новый элемент.

  // deleteCount is omitted or its value >= array.length - start
  // all the elements from start to the end of the array will be deleted
  let arr = [1, 2, 3];
  arr.splice(1); // [1]
  arr.splice(2); // [1,2]
  arr.splice(3); // [1,2,3]
  arr.splice(1, 4); // [1]

  // deleteCount <= 0
  arr = [1, 2, 3];
  arr.splice(1, 0, 1.5); // [ 1, 1.5, 2, 3 ]
  arr.splice(1, -1, 1.5); // [ 1, 1.5, 2, 3 ]

• item1, item2, … — Элементы для добавления в массив, начиная с start. Если вы не укажете никаких элементов, splice() будет только удалять элементы из массива.

  // If you don't specify any elements, splice() will only remove
  let arr = [1, 2, 3];
  arr.splice(1, 1); // [1,3]