Skip to content

Instantly share code, notes, and snippets.

@DmitriiNazimov
Last active August 12, 2022 17:17
Show Gist options
  • Save DmitriiNazimov/758ffc46da0655a411cd20c5b727ff2f to your computer and use it in GitHub Desktop.
Save DmitriiNazimov/758ffc46da0655a411cd20c5b727ff2f to your computer and use it in GitHub Desktop.
Нативные методы JS ES6+ для работы со строками и массивами.

Нативные методы JS ES6+ для работы со строками и массивами.

Конспект актуален по состоянию на август 2022 года.

В данном конспекте отсутствует:

  • методы работы с юникодом.
  • устаревшие (deprecated) и эксперементальные методы.

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

Оглавление

  1. Cоздание

  2. Поиск

  3. Извлечение

  4. Проверка по условию

  5. Простое преобразование

  6. Сложное преобразование и перебор

Создание массива/строки

Массив

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

  • Array.from(arrayLike, callback(element, index)) - возвращает новый массив созданный из arrayLike c возможным применением коллбэка к каждому элементу. В качестве arrayLike может быть строка или другой итерируемый обьект (Map, Set).

  • Array.of(someArgs) - возвращает новый массив составленный из переменного количества аргументов, независимо от количества или типа аргументов.

Строка

  • String.split(separator) - создает МАССИВ путем разбиения String на подстроки по разделителю separator.

  • Array.toString() - возвращает строку из элементов массива через запятую. Более элегантно использовать .join().

  • String.raw() - создает строку которая вставляется как Some text ${string} и в ней спецсимволы типа u000A не исполняются. Грубо говоря экранирует спецсимволы.

Поиск по массиву/строке

Массив

  • Array.find(callback(item, index, arr)) | .findLast() - возвращает значение первого/последнего найденного в массиве элемента, которое удовлетворяет условию переданному в callback функции. В противном случае возвращается undefined.

  • Array.findIndex(callback(item, index, arr)) | .findLastIndex() - возвращает индекс первого/последнего элемента в массиве, если элемент удовлетворяет условию проверяющей функции. В противном случае возвращается -1.

.findLastIndex() - новый метод и поэтому не поддерживается в некоторых браузерах. Можно в качестве альтернативы использовать такой лайфхак: array.map((item, i, arr) => arr[i] == item).lastIndexOf(true);

  • Array.includes('sample') - проверяет присутствует ли sample в Array. Возвращает true/false.

  • Array.indexOf('sample') | .lastIndexOf() - возвращает первый/последний индекс, по которому 'sample' может быть найден в массиве, или -1, если он отсутствует.

Строка

  • String.search(regex) - возвращает индекс первого вхождения regex в строку String или -1 если вхождения нет.

  • String.indexOf('sample') | lastIndexOf() - возвращает индекс первого/последнего вхождения указанной подстроки.

  • String.includes('sample') - определяет с учетом регистра присутствует ли 'sample' внутри String. Возвращает true/false.

  • String.startsWith('sample') | endsWith('sample') - определяет есть ли в начале/конце строки String строка 'sample'. Возвращает true/false.

Извлечение из массива/строки

Массив

  • Array.slice(start, end) - возвращает часть массива с индекса start до end. Исходный массив не будет изменен.

  • Array.keys() - возвращает новый массив содержащий ключи Array.

  • Array.values() - возвращает новый массив содержащий значения Array.

  • Array.at(index) - возвращает элемент массива по index. В отличие от квадратных скобок работает с отрицательными числами. Например Array.at(-1) вернет последний элемент массива.

Строка

  • String.slice(indexStart, indexEnd) - извлекает часть строки и возвращает ее как новую строку без изменения исходной строки.

  • String.match(regexp) | matchAll(regexp) - извлекает из строки символы по условию regexp. Возвращает массив извлеченных символов.

  • String.substring(indexStart, end) - возвращает часть string между начальным и конечным индексами? или до конца строки.

  • String.charAt(index) - извлекает 1 символ по номеру его индекса в строке. Возвращает 1 символ.

Проверка по условию | сравнение

Массив

  • Array.every(callback(item, index, arr) | .some()) - проверяет, удовлетворяют ли все/некоторые элементы массива условию, заданному в передаваемой функции. Возвращает true/false.

  • Array.isArray(someVar) - определяет, является ли переданное значение массивом. Возвращает true/false.

Строка

Простое преобразование (без коллбэка)

Массив

  • Array.push(someArgs) | .unshift() - добавляет один или несколько элементов в конец/начало массива и возвращает новую длину массива. Push - в конец. Unshift - в начало.

  • Array.pop() | .shift() - удаляет последний/первый элемент из массива и возвращает этот элемент. Этот метод изменяет длину массива (поэтому он помещен в блок преобразования, а не извлечения). Pop - последний. Shift - первый.

  • Уникализировать массив: let unique = [...new Set(myArray)];

  • Array.reverse() - возвращает перевернутый массив.

  • Array.concat(anotherArr) - возвращает новый массив, состоящий из массива, на котором он был вызван, соединённого с другими массивами.

  • Array.entries() - возвращает новый объект итератора массива Array, содержащий пары ключ/значение для каждого индекса в массиве.

  • Array.flat(depth) - возвращает новый массив в который добавляются вложенные в Array подмассивы. Depth - регулирует глубину вложенности. [1,2,3,[4,5]].flat() //[1,2,3,4,5]

  • Array.copyWithin(target, start, end) - копирует последовательность элементов массива внутри него в позицию, начинающуюся по индексу target. [1, 2, 3, 4, 5].copyWithin(0, 3); // [4, 5, 3, 4, 5] Вставляет с элемента ноль элементы с 3 до последнего.

  • Array.fill(value, start, end) - заполняет все элементы массива от начального до конечного индексов одним значением. Возвращает измененный массив.

Строка

  • String.replace(regexp, newSubstr) | replaceAll(regexp, newSubstr) - возвращает новую строку, в которой заменяет в строке String одно вхождение найденное по regexp на newSubstr.

  • String.toLowerCase() | toUpperCase() - возвращает новую строку преобразованную в нижний/верхний регистр.

  • String.trim() | trimEnd() | trimStart() - удаляет пробелы с обоих концов строки и возвращает новую строку без изменения исходной строки.

  • String.concat() - обьединяет строки и возвращает новую объединенную строку.

  • String.padEnd(length, 'sample') - добавляет в конец текущей строки подстроку "sample", чтобы результирующая строка достигла заданной длины length.

  • String.padStart(length, 'sample') - добавляет в начало текущей строки подстроку "sample", чтобы результирующая строка достигла заданной длины length.

  • String.repeat(5) - возвращает новую строку, указанное количество раз копируется эта же строка.

Сложное преобразование и перебор (с коллбэком)

Массив

  • Array.forEach(callback(item, index, arr)) - выполняет коллбэк один раз для каждого элемента массива. Ничего не возвращает, просто перебирает массив и применяет коллбэк.

  • Array.map(callback(item, index, arr)) - возвращает новый массив состоящий из элементов Array, к каждому из которых применили callback().

  • Array.sort(callback(a, b)) - возвращает тот же массив, но отсортированный.

  • Array.filter(callback(item, index, array)) - создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

  • Array.reduce(callback(previous, current)) | .reduceRight() - перебирает Array применяя коллбэк на каждой итерации и передает полученный результат в следующую итерацию. Т.е. результат работы коллбэка аккумулируется. Возвращает аккумулированное значение. .reduceRight() - идет в обратном направлении (справа-налево).

  • Array.splice(start, deleteCount, newItem) - изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя новые элементы. Возвращает массив, содержащий удаленные элементы. Смысл этого метода в изменении Array, а не в том чтобы получить удаленные элементы (для этого есть slice()).

  • Array.flatMap(callback(item, index, arr)) - возвращает новый массив, сформированный путем применения коллбэка к каждому элементу массива, а затем выравнивания результата на один уровень. Он идентичен map() за которым следует flat() глубины 1. Этот метод эффективнее последовательного вызова map().flat().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment