В стандарте ECMAScript 2023 (14-е издание) появились новые методы прототипа Array.
Общим направлением этих четырёх новых методов является стремление не изменять исходный массив, а возвращать новый массив, как это делается в методах map и filter. Но эта статья не о плюсах иммутабельности.
toReversed
Метод toReversed похож на метод reverse, но с одним важным отличием. Метод toReversed переворачивает элементы массива без мутации исходного массива.
Допустим, имеется такой массив:
const fruits = ['apple', 'orange', 'banana']Теперь перевернём массив с помощью reverse:
const result = fruits.reverse()
console.log(result)
// ['banana', 'orange', 'apple']
console.log(fruits)
// ["banana", "orange", "apple"]Оригинальный массив изменился.
Теперь перевернём массив с помощью toReversed:
const result = fruits.toReversed()
console.log(result)
// ['banana', 'orange', 'apple']
console.log(fruits)
// ["apple", "orange", "banana"] Перевернуть строку можно следующим образом:
const value = "Hello World"
Array.prototype.toReversed.call(value)
// ['d', 'l', 'r', 'o', 'W', ' ', 'o', 'l', 'l', 'e', 'H']toSorted
toSorted является аналогом метода sort.
В отличие от sort, метод toSorted не будет мутировать исходный массив.
Рассмотрим пример работы метода sort ниже. Как видим, исходный массив мутировал.
const list = [1, 5, 6, 3, 7, 8, 3, 7]
const result = list.sort()
console.log(result)
// [1, 3, 3, 5, 6, 7, 7, 8]
console.log(list)
// [1, 3, 3, 5, 6, 7, 7, 8]Теперь посмотрим на работу toSorted. Исходный массив не изменился.
const list = [1, 5, 6, 3, 7, 8, 3, 7]
// Sort in ascending order
const result = list.toSorted()
console.log(result)
// [1, 3, 3, 5, 6, 7, 7, 8]
console.log(list)
// [1, 5, 6, 3, 7, 8, 3, 7]Сортировка строки:
const value = 'Hello World'
Array.prototype.toSorted.call(value)
// [' ', 'H', 'W', 'd', 'e', 'l', 'l', 'l', 'o', 'o', 'r']toSpliced
toSpliced — аналог метода splice. Метод toSpliced не будет мутировать массив, в отличие от splice.
Синтаксис toSpliced идентичен синтаксису .splice, как показано ниже:
toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2, itemN)Вставка нового элемента в массив с помощью splice:
const months = ["Feb", "Mar", "Apr", "May"]
// Insert item "Jan" at index 0 and delete 0 items
months.splice(0, 0, "Jan")
console.log(months)
// ['Jan', 'Feb', 'Mar', 'Apr', 'May']А вот этот же код, но переписанный на использование toSpliced:
const months = ["Feb", "Mar", "Apr", "May"]
// Вставляем "Jan" по индексу 0 и удаляем 0 элементов
const updatedMonths = months.toSpliced(0, 0, "Jan")
console.log(updatedMonths)
// ['Jan', 'Feb', 'Mar', 'Apr', 'May']
console.log(months)
// ['Feb', 'Mar', 'Apr', 'May']Как с помощью метода toSpliced вставить и удалить символы в строке:
const value = 'дядя Миша'
// Начиная с индекса 6 удаляем 1 элемент ("и") и вставляем новый ("а")
console.log(Array.prototype.toSpliced.call(value, 6, 1, 'a'))
// ['д', 'я', 'д', 'я', ' ', 'М', 'a', 'ш', 'а']with
Сначала рассмотрим обозначение скобок для изменения значения определенного индекса массива:
const favorites = ["Dogs", "Cats"]
favorites[0] = "Lions"
console.log(favorites)
// ['Lions', 'Cats']При использовании скобок исходный массив всегда изменяется. Метод with позволяет достичь того же результата при вставке элемента по определённому индексу, но не изменяет массив. Вместо этого он возвращает новый массив с заменённым элементом.
Давайте перепишем пример с использованием with:
const favorites = ["Dogs", "Cats"]
const result = favorites.with(0, "Lions")
console.log(result)
// ['Lions', 'Cats']
console.log(favorites)
// ["Dogs", "Cats"]Пример со строкой:
const value = 'Bat'
console.log(Array.prototype.with.call(value, 0, 'C'))
// ['C', 'a', 't']Заключение
Пишите декларативный и чистый код. Если будете в ресурсе, и не воспринимаете мою просьбу как манипуляцию, и не видите в этом абъюзивного контроля, и это не триггерит ваши детские травмы от гиперопекающих родителей.