<Zhenya>
← Блог

Шпаргалка по built-in методам

Методы массивов, объектов и функций, которые полезно знать

JavascriptCheatsheetInterview

Array

Добавление и удаление элементов

.push(element: T) - добавляет в конец массива новый элемент, возвращает новый length

const arr = ['a', 'b']
arr.push('c') // 3
arr // ['a', 'b', 'c']

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

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

.unshift(element: T) - добавляет в начало массива новый элемент, возвращает новый length

const arr = ['a', 'b']
arr.unshift('c') // 3
arr // ['с', 'a', 'b']

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

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

.concat(T | T[] | ...T[]) - создает новый массив, включающий в себя переданные значение/массивы. Не мутирует исходный массив.

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

.slice(begin: number, end: number) принимает два индекса - начальный и конечный и возвращает обрезанную копию.

  • Если передать только begin - обрежется с begin по последний индекс включительно.
  • Если передать только отрицательный begin - можно вырезать N последних элементов массива.
  • Если передать отрицательный end - обрежется с begin по по последний индекс минус end.
['a', 'b', 'c', 'd'].slice(1) // ['b', 'c', 'd'] - обрезать с индекса 1 по конец массива
['a', 'b', 'c', 'd'].slice(-2) // ['b', 'c', 'd'] - вырезать последние два элемента массива
['a', 'b', 'c', 'd'].slice(1, 3) // ['b', 'c'] - обрезать с индекса 1 по индекс 3, т.е. элементы с индексами 1, 2
['a', 'b', 'c', 'd'].slice(0, -1) // ['a', 'b', 'c'] - обрезать, убрав последний элемент

.splice(start: number, deleteCount: number, ...items: T[]): T[] принимает индекс и количество элементов после этого индекса, которые нужно удалить. Если передать items - они будут добавлены после индекса start. Мутирует исходный массив и возвращает удаленные элементы.

const arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2, 'e', 'f'); // удалить 2 элемента, начиная с индекса 1, т.е. ['b', 'c']. Добавить 'e', 'f' к индексу 1.
arr // ['a', 'e', 'f', 'd']

.toSpliced(start: number, deleteCount: number, ...items: T[]): T[] - тоже самое, что и splice, но вместо мутации будет создан новый массив. Возвращает новый измененный массив.

const arr = ['a', 'b', 'c', 'd'];
arr.toSpliced(1, 2, 'e', 'f'); // ['a', 'e', 'f', 'd']
arr // ['a', 'b', 'c', 'd']

Поиск в массиве

.find((i: T) => boolean) - находит и возвращает первый элемент массива, соответствующий заданному условию.

[
  { age: 10, name: 'Mike' },
  { age: 19, name: 'Timofey' },
  { age: 18, name: 'Alexander' }
].find(i => i.age >= 18); // { age: 19, name: 'Timofey' }

.findLast((i: T) => boolean) - тоже самое, но начинает обходить массив с конца:

[
  { age: 10, name: 'Mike' },
  { age: 19, name: 'Timofey' },
  { age: 18, name: 'Alexander' }
].findLast(i => i.age >= 18); // { age: 18, name: 'Alexander' }

.some(cb: (value: T) => boolean) - принимает в коллбеке условие, возвращает true, если хотя бы один элемент соответствует

['Mike', 'Timofey', 'Alexander'].some(name => name.length > 5); // true

.every(cb: (value: T, index: number, array: T[]) => boolean); - принимает в коллбеке условие, возвращает true, если все элементы соответствуют

['Mike', 'Timofey', 'Alexander'].every(name => name.length > 5); // false

.includes(value: unknown) - принимает значение, возвращает true, если в массиве есть такой элемент

['Mike', 'Timofey', 'Alexander'].includes('Timofey'); // true
['Mike', 'Timofey', 'Alexander'].includes('Mark'); // false

Обход и изменение массива

.forEach(cb: (value: T, index: number, array: T[]) => void): void - принимает коллбек, который выполнится для каждого элемента массива

.map<U>(cb: (value: T, index: number, array: T[]) => U): U[] - принимает коллбек, который определяет, как будет меняться каждый элемент массива. Не мутирует исходный массив.

['heh', 'huh'].map(i => i.toUpperCase()); // ['HEH', 'HUH']

.reverse() - переворачивает массив. Изменяет исходный массив и возвращает ссылку на изменённый массив.

const arr = [1, 2];
arr.reverse(); // [2, 1]
arr // [2, 1]

.toReversed() - тоже самое, что и reverse, но без мутации исходного массива. Возвращает новый массив.

const arr = [1, 2];
arr.toReversed(); // [2, 1]
arr // [1, 2]

.with(index: number, value: any) - создает копию массива с замененным элементом по выбранному индексу

['a', 'b', 'c'].with(2, 'd'); // ['a', 'b', 'd']

.filter(cb: (value: T, index: number, array: T[]) => boolean)): T[] - возвращает массив, где все элементы соответствуют переданному условию в коллбеке

['Mike', 'Timofey', 'Alexander'].map(name => name.length > 5); // ['Timofey', 'Alexander']

.reduce<A>((acc: A, curr: T, array: T[]) => A, initAcc: A): A - обходит массив и аккумулирует значение. Значение аккумулятора задается в коллбеке.

const employers = [
  { age: 10, name: 'Mike' }, // Сын маминой подруги
  { age: 19, name: 'Timofey' },
  { age: 18, name: 'Alexander' }
]


const totalAge = employers.reduce((acc, curr) => {
  return acc + curr.age;
}, 0); // 47


const averageAge = totalAge / employers.length; // 16.66

Метод reduce очень полезен для агрегации:

const employers = [
  { age: 10, name: 'Mike', position: 'son' },
  { age: 19, name: 'Timofey', position: 'frontend' },
  { age: 18, name: 'Alexander', position: 'frontend' }
]


const employersByPosition = employers.reduce((acc, curr) => {
  acc[curr.position] = (acc[curr.position] || []).concat(curr)
  return acc;
}, {}); // { son: [{ name: 'Mike',... }], frontend: [{ name: 'Timofey', ...}, { name: 'Alexander',...}] }
  • Если не передать initAcc - итерация будет со 2-го элемента.

.reduceRight - тоже самое, что и обычный reduce, но справа налево.

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

.sort(compareFn: (a, b) ⇒ number) - принимает коллбеком функцию, в которой принимаются два аргумента - элементы массива, а return должен определить их порядок. Мутирует исходный массив и возвращает ссылку на него.

  • number < 0 - a идет первым
  • number === 0 - без изменений
  • number > 0 - b идет первым

Если коллбек не передан - сортирует в лексическом порядке по возрастанию, подойдет только для строк.

[4, 2, 3, 1].sort((a, b) => a - b); // [1, 2, 3, 4]
[4, 2, 3, 1].sort((a, b) => b - a); // [4, 3, 2, 1]
['b', 'c', 'a'].sort(); // ['a', 'b', 'c']

.toSorted(compareFn: (a, b) ⇒ number) - тоже самое, что и метод .sort, но вместо мутации исходного массива создает новый отсортированный массив

const arr = [4, 2, 3, 1];
const sortedArray = arr.toSorted((a, b) => a - b);


arr // [4, 2, 3, 1];
sortedArray // [1, 2, 3, 4]

Полезные методы

.at(index: number) - возвращает элемент массива по указанному индексу.

Основная фишка - можно легко достать последний элемент, передав -1

[1, 2, 3 ].at(0) // 1
[1, 2, 3 ].at(-1) // 3

Array.from<T>(iterable: Iterable<T> | ArrayLike<T>): T[] - позволяет создать массив из Iterable или ArrayLike сущностей.

  • Очень полезен, чтобы получить массив Element:
const linkElements = document.querySelectorAll('.myClass');
const arrLinks = Array.from(linkElements); // Element[]
  • Можно сразу же сделать .map
const linkElements = document.getElementsByTagName('a');
const arrLinks = Array.from(linkElements, element => element.href); // string[]
  • Часто используется, чтобы превратить Set в массив
const mySet = newSet([1, 2]);
mySet.add(3);
Array.from(mySet) // [1, 2, 3]
  • Или чтобы превратить Map в массив
const myMap = new Map();
myMap.set('a', 1).set('b', 2);


const array = Array.from(myMap, ([name, value]) => ({ name, value }));
  • Можно использовать, чтобы создать пустой массив
Array.from(new Array(3)) // [undefined, undefined, undefined]

.flat(depth: number) - создает новый массив, убирая вложенность на заданную depth.

[1, [2, 3]].flat(); // [1, 2, 3]
[1, [2, 3, [4, 5]]].flat(); // [1, 2, 3, [4, 5]]
[1, [2, 3, [4, 5]]].flat(2); // [1, 2, 3, 4, 5]

Object

Управление свойствами

Object.create(prototype, descriptor) - метод создания объекта, который дает нам больше контроля над свойствами и методами, позволяя задать для каждого:

  • writeable - можно ли перезаписывать
  • enumerable - является ли перечисляемым, будет ли доступен for...in
  • configurable - можно ли удалять или менять при помощи defineProperty
  • set - функция для записи значения
  • get - функция для чтения значения
const tom = Object.create(Object.prototype, {  
  name: {    
    value: "Tim",
    enumerable: true, // доступно для перебора
    writable: false  // не доступно для записи
  },  
  age: { 
    value: 20,
    enumerable: true, // доступно для перебора
    writable: true // доступно для записи
  },  
  print: {    
    value: function() { console.log(`Name: ${this.name}  Age: ${this.age}`);},
    enumerable: false, // не доступно для перебора
    writable: false, // не доступно для записи
  }  
});

Object.defineProperty(obj, prop, descriptor) - позволяет настроить выбранное свойство объекта. Не сработает, если configurable = false

Object.preventExtensions(obj) - запрещает добавление свойств

Object.seal(obj) - запрещает добавление и удаление свойств, все текущие свойства делает configurable: false.

Object.freeze(obj) - запрещает добавление, удаление и изменение свойств,все текущие свойства делает configurable: false, writable: false.

Хелперы для свойств

Object.assign(dest, [src1, src2, src3...]) - копирует все перечисляемые enumerable: true свойства из одного или более объектов в целевой объект. Копирование неглубокое, для объектов, массивов, функций будет скопирована ссылка.

Object.hasOwn(obj, prop) - проверяет, является ли свойство собственным(не унаследованным). Чтобы проверить унаследованное свойство можно воспользоваться in.

const person = {
  name: "Zhenya"
}


Object.hasOwn(person, "name"); // true
Object.hasOwn(person, "toString"); // false

Object.isExtensible(obj) - проверяет, был ли вызван preventExtensions

Object.isSealed(obj) - проверяет, был ли вызван seal

Object.isFrozen(obj) - проверяет, был ли вызван freeze

Ключи и значения

Object.entries(obj) - вернет перечисляемые свойства в виде массива

Object.entries({
  name: 'Zhenya',
  age: 27,
}) // [['name', 'Zhenya'], ['age', 27]]

Object.fromEntries(arrayOrMap) - обратно превратит массив в объект

Object.fromEntries([['name', 'Zhenya'], ['age', 27]]) // { name: 'Zhenya', age: 27 }

Object.keys(obj) - по простому - получить массив ключей. Вернет только собственные(без прототипа) и перечисляемые(for...in) свойства.

Object.keys({
  name: 'Zhenya',
  age: 27,
}) // ['name', 'age']

Object.values(obj) - вернет массив значений

Object.values({
  name: 'Zhenya',
  age: 27,
}) // ['Zhenya', 27]

Function

Function.prototype.call(thisArg, ...args) - вызывает функцию с указанным значением this и аргументами.

function multiply(a, b) {
  this.logger(a * b);
  return aa * b
}


multiply.call({ logger: console.log }, 2, 2); // 4


// Мы не можем указать контекст для стрелочной функции
const addArrowFn = (a, b) => {
  this.logger(a + b);
  return a + b;
}


multiply.call({ logger: console.log }, 2, 2); // TypeError: this.logger is not a function

Function.prototype.apply(thisArg, [argsArray]) - тоже самое, что и call, но аргументы передаются в виде массива

multiply.apply({ logger: console.log }, [2, 3]); // 6

Function.prototype.bind(thisArg, ...args) - создает новую функцию, привязывая ей переданный this

const multiplyTwo = add.bind({ logger: console.log }, 2);


multiplyTwo(4); // 8