Шпаргалка по методам для работы с массивами в JavaScript.

Обозначения:

• ✏️ метод изменяет this - изменяет/модифицирует исходный массив

• 🔒 метод не меняет this - не меняет исходный массив / возвращает новый массив на базе исходного

• callback - функция обратного вызова, которая передается в массиве в качестве аргумента. Используется для обработки очередного элемента массива.

  Стандарт ES3/ES5

  var arr = ['яблоко', 'груша', 'колбаса']
  
  arr.forEach(function(element){
      console.log(element.toUpperCase()); // ['ЯБЛОКО', 'ГРУША', 'КОЛБАСА']
  })

  Стандарт ES6 и новее

  const arr = ['рыба', 'овощи', 'молоко']
  
  arr.forEach(element => console.log(element.toUpperCase())) // ['РЫБА', 'ОВОЩИ', 'МОЛОКО']

Array<T>.prototype.*:

• concat(...items: Array<T[] | T>): T[] 🔒 ^ES3

  Метод возвращает новый массив, который образуется от слияния исходного массива ( this ) и массивов, переданных в метод в качестве параметров. Параметры без массива обрабатываются так, как если бы они были массивами с 1 элементом.

  ['a'].concat('b', ['c', 'd']) //[ 'a', 'b', 'c', 'd' ]

• copyWithin(target: number, start: number, end=this.length): this ✏️ ^ES6

  Метод копирует элементы массива внутри него в позицию, начинающуюся по индексу target. Копия берётся по индексам, задаваемым вторым и третьим аргументами start и end. arr.copyWithin(target, start, end)

  ['a', 'b', 'c', 'd'].copyWithin(0, 2, 4) // [ 'c', 'd', 'c', 'd' ]

• entries(): Iterable<[number, T]> 🔒 ^ES6

  Метод возвращает итератор с парой [индекс, элемент], или [ключ, значение]

  Array.from(['a', 'b'].entries()) // [ [ 0, 'a' ], [ 1, 'b' ] ]

• every(callback: (value: T, index: number, array: Array<T>) => boolean, thisArg?: any): boolean 🔒 ^ES5

  Метод обрабатывает все элементы массива. Возвращает true если коллбэк вернет true для каждого элемента. Останавливается как только какой-либо элемент вернет false.

  [1, 2, 3].every(x => x > 0)   // true
  [1, -2, 3].every(x => x > 0)  // false

• fill(value: T, start=0, end=this.length): this ✏️ ^ES6

  Данный Метод заполняет все элементы массива от начального до конечного значением, переданным в качестве параметра.

  [0, 1, 2].fill('a') // [ 'a', 'a', 'a' ]

• filter(callback: (value: T, index: number, array: Array<T>) => any, thisArg?: any): T[] 🔒 ^ES5

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

  [1, -2, 3].filter(x => x > 0) // [ 1, 3 ]

• find(predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): T | undefined 🔒 ^ES6

  Возвращает первое найденное значение, которое удовлетворяет условию, переданному в callback, в противном же случае, метод вернет undefined

  [1, -2, 3].find(x => x < 0) // -2
  [1, 2, 3].find(x => x < 0)  // undefined

• findIndex(predicate: (value: T, index: number, obj: T[]) => boolean, thisArg?: any): number 🔒 ^ES6

  Результатом выполнения данного метода будет индекс первого элемента в массива, который удовлетворяет условию в callback. Если условие не выполнено, вернется -1

  [1, -2, 3].findIndex(x => x < 0) // 1
  [1, 2, 3].findIndex(x => x < 0)  //-1

• forEach(callback: (value: T, index: number, array: Array<T>) => void, thisArg?: any): void 🔒 ^ES5

  Метод вызовет callback для каждого элемента массива

  ['a', 'b'].forEach((x, i) => console.log(x, i))
  // 'a' 0
  // 'b' 1

• includes(searchElement: T, fromIndex=0): boolean 🔒 ^ES2016

  Метод вернет true или false, в зависимости от того содержится ли искомый элемент в массиве или нет. Элементы проверяется через строгое равенство ===. NaN === NaN

  [0, 1, 2].includes(1)   // true
  [0, 1, 2].includes(5)   // false

• indexOf(searchElement: T, fromIndex=0): number 🔒 ^ES5

  Вернет индекс первого подходящего элемента, равного (строгое равенство) искомому элементу. В противном случае вернет -1. Если указан параметр fromIndex, то поиск начинается с него, если не указан, то от начала массива. arr.indexOf(searchElement, fromIndex)

  ['a', 'b', 'a'].indexOf('a')    // 0
  ['a', 'b', 'a'].indexOf('a', 1) // 2
  ['a', 'b', 'a'].indexOf('c')    // -1

• join(separator = ','): string 🔒 ^ES1

  Данный метод возвращает строку, в которой содержатся все элементы массива, разделенные separator. arr.join(separator)

  ['a', 'b', 'c'].join()      // 'a,b,c'
  ['a', 'b', 'c'].join('##')  // 'a##b##c'

• keys(): Iterable<number> 🔒 ^ES6

  Метод возвращает итератор, содержащий ключи индекса в исходном массиве

  ['a', 'b'].keys()]  // [ 0, 1 ]

• lastIndexOf(searchElement: T, fromIndex=this.length-1): number 🔒 ^ES5

  Вернет индекс последнего подходящего элемента, равного (строгое равенство) искомому элементу. В противном случае вернет -1. Если указан параметр fromIndex, то поиск начинается с него. arr.indexOf(searchElement, fromIndex)

  ['a', 'b', 'a'].lastIndexOf('a')    // 2
  ['a', 'b', 'a'].lastIndexOf('a', 1) // 0
  ['a', 'b', 'a'].lastIndexOf('c')    // -1

• map<U>(callback: (value: T, index: number, array: ReadonlyArray<T>) => U, thisArg?: any): U[] 🔒 ^ES5

  Метод вернет новый массив, в котором к каждому элементу будет применен результат вызова callback

  [1, 2, 3].map(x => x * 2)        // [ 2, 4, 6 ]
  ['a', 'b', 'c'].map((x, i) => i) // [ 0, 1, 2 ]

• pop(): T | undefined ✏️ ^ES3

  Удаляет из массива последний элемент, и затем возвращает его. То есть, метод по сути работает как стек (stack - структура данных).

  const arr = ['a', 'b', 'c'];
  arr.pop()         // 'c'
  console.log(arr)  // [ 'a', 'b' ]

• push(...items: T[]): number ✏️ ^ES3

  Метод добавит элемент/элементы в конец массива. То есть, он обрабатывает конец массива как стек. Возвращает длину массива после изменения.

  const arr = ['a', 'b'];
  arr.push('c', 'd')  // 4
  console.log(arr)    // [ 'a', 'b', 'c', 'd' ]

• reduce<U>(callback: (state: U, element: T, index: number, array: T[]) => U, firstState?: U): U 🔒 ^ES5

  Данный метод по сути обрабатывает каждый элемент массива, с сохранением промежуточного состояния. Метод начинает работу с элемента с индексом 0, идя вперед. Если не указано firstState, отсчет идет с 0 индекса. Последнее значение является результатом вызова метода.

  [1, 2, 3].reduce((state, x) => state + String(x), '')   // '123'
  [1, 2, 3].reduce((state, x) => state + x, 0)            // 6

• reduceRight<U>(callback: (state: U, element: T, index: number, array: T[]) => U, firstState?: U): U 🔒 ^ES5

  Метод работает аналогично .reduce(), но отсчет элементов идет начиная с конца массива.

  [1, 2, 3].reduceRight((state, x) => state + String(x), '') // '321'

• reverse(): this ✏️ ^ES1

  Переписывает массив, меняя индексы элементов местами, т.е. последний = первый, второй = предпоследний и т.д.

  const arr = ['a', 'b', 'c'];
  arr.reverse()     // [ 'c', 'b', 'a' ]
  console.log(arr)  // [ 'c', 'b', 'a' ]

• shift(): T | undefined ✏️ ^ES3

  Удаляет и затем возвращает первый элемент массива. Противоположен методу .unshift().

  const arr = ['a', 'b', 'c'];
  arr.shift()       // 'a'
  console.log(arr)  // [ 'b', 'c' ]

• slice(start=0, end=this.length): T[] 🔒 ^ES3

  Возвращает новый массив, который содержит элементы исходного, начиная со start по (не вкл.) end. arr.slice(start,end)

  ['a', 'b', 'c', 'd'].slice(1, 3)  // [ 'b', 'c' ]
  ['a', 'b'].slice()                // копия [ 'a', 'b' ]

• some(callback: (value: T, index: number, array: Array<T>) => boolean, thisArg?: any): boolean 🔒 ^ES5

  Метод вернет true если хотя бы один элемент удовлетворит условию в callback. Останавливается, как только возвращается true

  [1, 2, 3].some(x => x < 0)    // false
  [1, -2, 3].some(x => x < 0)   // true

• sort(compareFn?: (a: T, b: T) => number): this ✏️ ^ES1

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

    * Отрицательное, если `a < b`
    * Ноль, если `a === b`
    * Положительное, если`a > b`
  

  Примечание: в движке V8, в качестве алгоритма сортировки используется 2 метода. Для больших массивов - быстрая сортировка, для небольших - сортировка вставками

  [3, 1, 2].sort((a, b) => a - b)                               // [ 1, 2, 3 ]
  ['b', 'a', 'c'].sort((a, b) => a < b ? -1 : a > b ? +1 : 0)   // [ 'a', 'b', 'c' ]

• splice(start: number, deleteCount=this.length-start, ...items: T[]): T[] ✏️ ^ES3

  Начиная с индекса start он удаляет определенное кол-во элементов deleteCount, и вставляет items. Возвращает измененный исходный массив array.splice(start, deleteCount,[item1])

  const arr = ['a', 'b', 'c', 'd'];
  arr.splice(1, 2, 'x', 'y')    // [ 'b', 'c' ]
  console.log(arr)              // [ 'a', 'x', 'y', 'd' ]

• toString(): string 🔒 ^ES1

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

  [1, 2, 3].toString()        // '1,2,3'
  ['a', 'b', 'c'].toString()  // 'a,b,c'
  [].toString()               //''

• unshift(...items: T[]): number ✏️ ^ES3

  Вставляет элемент/элементы в начало массива и возвращает его длину после каких-либо действий с ним.

  const arr = ['c', 'd'];
  arr.unshift('e', 'f')     // 4
  console.log(arr)          //[ 'e', 'f', 'c', 'd' ]

• Детальное описание методов для работы с массивами в ECMAScript можно найти тут: https://exploringjs.com
• Методы работы с массивами в ES6 “Array operations and holes”.

• https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es6.d.ts
• MDN - Mozilla Development Network
• Специализации языка ECMAScript (JavaScript)
• Оригинальный текст - https://gist.github.com/rauschma/f7b96b8b7274f2e2d8dab899803346c3

переведено для maxpfrontend VK / Telegram