.slice()

Возвращает новый массив, копируя часть исходного массива.

Время чтения: меньше 5 мин

Кратко

Скопировано

Метод slice() возвращает новый массив, копируя указанный диапазон элементов исходного массива. Начало и конец диапазона определяются индексами элементов. Исходный массив при этом не изменяется.

Пример

Скопировано

Скопируем элементы массива animals, начиная с элемента с индексом 2, в новый массив:

        
          
          const animals = [  'ехидна', 'динго', 'коала', 'кенгуру', 'вомбат', 'утконос']const newAnimals = animals.slice(2)console.log(newAnimals)// ['коала', 'кенгуру', 'вомбат', 'утконос']
          const animals = [
  'ехидна', 'динго', 'коала', 'кенгуру', 'вомбат', 'утконос'
]
const newAnimals = animals.slice(2)

console.log(newAnimals)
// ['коала', 'кенгуру', 'вомбат', 'утконос']

        
        
          
        
      

Скопируем 3 последних элемента массива animals в новый массив:

        
          
          const animals = [  'ехидна', 'динго', 'коала', 'кенгуру', 'вомбат', 'утконос']const newAnimals = animals.slice(-3)console.log(newAnimals)// [кенгуру', 'вомбат', 'утконос']
          const animals = [
  'ехидна', 'динго', 'коала', 'кенгуру', 'вомбат', 'утконос'
]
const newAnimals = animals.slice(-3)

console.log(newAnimals)
// [кенгуру', 'вомбат', 'утконос']

        
        
          
        
      

Скопируем элементы массива months, начиная с элемента с индексом 2 и до элемента с индексом 5 (элемент с индексом 5 не входит в число копируемых):

        
          
          const months = [  'янв', 'фев', 'март', 'апр', 'май', 'июнь', 'июл']const springMonths = months.slice(2, 5)console.log(springMonths)// ['март', 'апр', 'май']
          const months = [
  'янв', 'фев', 'март', 'апр', 'май', 'июнь', 'июл'
]
const springMonths = months.slice(2, 5)

console.log(springMonths)
// ['март', 'апр', 'май']

        
        
          
        
      

Как пишется

Скопировано

Array.slice принимает два необязательных аргумента:

  • индекс начала, позиция элемента, начиная с которого будут копироваться элементы;
  • индекс конца, позиция элемента следующего за последним копируемым элементом в исходном массиве.

Если индекс отрицательный, то отсчёт элементов ведётся от конца массива.

Если индекс начала не указан или определяется как start <= -array.length, то началом диапазона копирования будет 0-й элемент.

Если индекс начала больше или равен длине массива, slice() вернёт пустой массив.

Если индекс конца не указан или определяется как end >= array.length, то концом диапазона копирования будет последний элемент.

Если метод slice() вызван без аргументов, будет создана копия всего исходного массива.

Array.slice возвращает новый массив.

Как понять

Скопировано

Метод slice() может применяться когда необходимо скопировать часть элементов исходного массива в новый массив.

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

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

Напишем функцию создания массива, содержащего все элементы исходного, кроме первого и последнего:

        
          
          const getShrinkArray = array => array.slice(1, -1)const numbers = [0, 1, 2, 3, 4, 5]const newNumbers = getShrinkArray(numbers)console.log(newNumbers)// [1, 2, 3, 4]console.log(getShrinkArray(newNumbers))// [2, 3]
          const getShrinkArray = array => array.slice(1, -1)
const numbers = [0, 1, 2, 3, 4, 5]
const newNumbers = getShrinkArray(numbers)

console.log(newNumbers)
// [1, 2, 3, 4]

console.log(getShrinkArray(newNumbers))
// [2, 3]

        
        
          
        
      

Подсказки

Скопировано

💡 Если массив имеет незаполненные элементы, то при выполнении slice() массив сохранит для таких элементов отсутствие значения и не изменит их на undefined.

Создадим массив, который имеет незаполненные элементы:

        
          
          const elements = ['Ti', 'V', , , 'Fe', 'Co']console.log(elements)// ['Ti', 'V', <2 empty items>, 'Fe', 'Co']console.log(elements.slice(1, -1))// ['V', <2 empty items>, 'Fe']
          const elements = ['Ti', 'V', , , 'Fe', 'Co']
console.log(elements)
// ['Ti', 'V', <2 empty items>, 'Fe', 'Co']

console.log(elements.slice(1, -1))
// ['V', <2 empty items>, 'Fe']

        
        
          
        
      

💡 Если исходный массив имеет элемент, который является объектом, то возвращаемый в результате работы метода slice() массив будет содержать для такого элемента ссылку (поверхностную копию (shallow copy) элемента), а не новый объект. Таким образом, изменения объекта в исходном массиве будут видны в созданном массиве и наоборот:

        
          
          const cities = [  {city: 'Глазго'}, {city: 'Ливерпуль'}, {city: 'Лондон'}]// Скопируем все элементы, кроме первого, в новый массивconst newCities = cities.slice(1)console.log(newCities)// [{city: 'Ливерпуль'}, {city: 'Лондон'}]// Изменим элемент исходного массиваcities[1].established = 1207console.log(cities)// [//  {city: 'Глазго'}, {city: 'Ливерпуль', established: 1207}, {city: 'Лондон'}// ]// Изменения также видны в созданном массивеconsole.log(newCities)// [{city: 'Ливерпуль', established: 1207}, {city: 'Лондон'}]
          const cities = [
  {city: 'Глазго'}, {city: 'Ливерпуль'}, {city: 'Лондон'}
]

// Скопируем все элементы, кроме первого, в новый массив
const newCities = cities.slice(1)
console.log(newCities)
// [{city: 'Ливерпуль'}, {city: 'Лондон'}]

// Изменим элемент исходного массива
cities[1].established = 1207

console.log(cities)
// [
//  {city: 'Глазго'}, {city: 'Ливерпуль', established: 1207}, {city: 'Лондон'}
// ]

// Изменения также видны в созданном массиве
console.log(newCities)
// [{city: 'Ливерпуль', established: 1207}, {city: 'Лондон'}]