Array.splice и Array.slice в JavaScript

Привет, Хабр! Представляю вашему вниманию перевод статьи “Array.splice and Array.slice in JavaScript” автора Kunal Tandon.

Вы просто обязаны использовать вышеупомянутые функции, доступные в прототипе JavaScript Array. Но они выглядят так похоже, что иногда можно запутаться между ними.

Ключевые различия


Array.splice изменяет исходный массив и возвращает массив, содержащий удаленные элементы.

Array.slice не изменяет исходный массив. Он просто возвращает новый массив элементов, который является подмножеством исходного массива.

Array.splice


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

При использовании splice функции обновляется исходный массив.

Рассмотрим следующий массив:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

Array.spliceс синтаксис


arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Удаление элементов


Чтобы удалить элементы из массива, мы пишем:

var deleItems = arr.splice (3, 2);

Это удалит два элемента, начиная с индекса 3, и вернет удаленный массив. В результате получаем:

deleItems // [3, 4]
arr // [0, 1, 2, 5, 6, 7, 8]

Добавление новых элементов


Чтобы добавить новые элементы в массив, мы пишем:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var arr2 = arr.splice (2, 0, 100, 101);

Начиная со второго элемента массива будут добавлены числа 100 и 101. Окончательные значения будут следующими:

arr2 // [], так как мы не удалили элемент из массив
аarr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8]

Изменение существующего элемента


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

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

Чтобы заменить 3 на 100, мы пишем:

var arr2 = arr.splice (3, 1, 100); 
// что означает - в индексе 3 удалить 1 элемент и вставить 100

Мы получаем следующие значения для arr и arr2 после выполнения приведенного выше фрагмента кода:

arr2 // [3] так как мы удалили элемент 3 из массив arr
arr // [0, 1, 2, 100, 4, 5, 6, 7, 8]
// 3 заменяется на 100 в массиве arr 

Array.slice


В то время как splice может также вставлять и обновлять элементы массива, функция slice используется только для удаления элементов из массива.
Мы можем только удалить элементы из массива, используя функцию slice

Array.slice синтакси

arr.slice (startIndex, endIndex);

startIndex — начальный индекс элемента для нового массива, который мы должны получить в новом массиве
startIndex.endIndex (необязательно) — конечный индекс, до которого должно быть выполнено нарезание, не включая этот элемент.

Рассмотрим следующий массив:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

Чтобы получить часть массива из значений [2, 3, 4, 5], пишем:

var slicedArr = arr.slice (2, 6);

Обратите внимание, что здесь мы указали вторым аргументом 6, а не 5. После выполнения приведенного выше кода, мы получаем следующий массив:

arr // [0, 1, 2, 3, 4, 5, 6, 7, 8]
slicedArr // [2, 3, 4, 5]

Переменная arr остается неизменной после выполнения оператора slice, тогда как оператор splice обновлял исходный массив.

Итак, если мы хотим обновить исходный массив, мы используем функцию splice, но если нам нужна только часть массива, мы используем slice.
  • –7
  • 7.2k
  • 9
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 9

    +3

    Array.splice это Array.splice — статический метод класса Array. Если нужно кратко записать метод экземпляра (Array.prototype.splice), то обычно используется запись Array#splice.

      0
      Спасибо. Буду знать.
        –1
        Ну так исправьте ошибку в статье)
          0
          Я еще раз обдумал Ваше замечания и решил, что все таки автор в этой записи «Array.splice» имеет ввиду не статический метод экземпляра Array, а подразумевает гипотетический массив Array. Не буду менять написание автора.
          И как мне кажется статья рассчитана для начинающих программистов, которые могут не знать что такое метод экземпляра, и их такая запись «Array#splice» может запутать.
            +1
            Однозначно путает использование написание в виде статического метода.

            Что-то непонятное всегда путает меньше, чем что-то неправильное
      0
      Это удалит один элемент

      Поправьте, удалит 2 элемента

        0
        Это удалит один элемент, начиная с индекса 3, и вернет удаленный массив.

        А в коде написано 2.


        Array.splicec синиаксис

        Лишняя с?

          0

          var deleItems = arr.splice (3, 2);


          Это удалит один элемент, начиная с индекса 3, и вернет удаленный массив.


          Но почему же удалит один элемент?

            +1
            MDN-ом уже никто не пользуется?

            Only users with full accounts can post comments. Log in, please.