Slice from array javascript

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

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.

Источник

JavaScript Array slice()

The slice() method returns selected elements in an array, as a new array.

The slice() method selects from a given start, up to a (not inclusive) given end.

The slice() method does not change the original array.

Syntax

Parameters

Parameter	Description
start	Optional. Start position. Default is 0. Negative numbers select from the end of the array.
end	Optional. End position. Default is last element. Negative numbers select from the end of the array.

Return Value

Related Pages:

Browser Support

slice() is an ECMAScript1 (ES1) feature.

ES1 (JavaScript 1997) is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Array.prototype.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end ( end not included) where start and end represent the index of items in that array. The original array will not be modified.

Try it

Syntax

slice() slice(start) slice(start, end) 

Parameters

Zero-based index at which to start extraction, converted to an integer.

• Negative index counts back from the end of the array — if start < 0 , start + array.length is used.
• If start < -array.length or start is omitted, 0 is used.
• If start >= array.length , nothing is extracted.

Zero-based index at which to end extraction, converted to an integer. slice() extracts up to but not including end .

• Negative index counts back from the end of the array — if end < 0 , end + array.length is used.
• If end < -array.length , 0 is used.
• If end >= array.length or end is omitted, array.length is used, causing all elements until the end to be extracted.
• If end is positioned before or at start after normalization, nothing is extracted.

Return value

A new array containing the extracted elements.

Description

The slice() method is a copying method. It does not alter this but instead returns a shallow copy that contains some of the same elements as the ones from the original array.

The slice() method preserves empty slots. If the sliced portion is sparse, the returned array is sparse as well.

The slice() method is generic. It only expects the this value to have a length property and integer-keyed properties.

Examples

Return a portion of an existing array

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; const citrus = fruits.slice(1, 3); // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] // citrus contains ['Orange','Lemon'] 

Using slice

In the following example, slice creates a new array, newCar , from myCar . Both include a reference to the object myHonda . When the color of myHonda is changed to purple, both arrays reflect the change.

// Using slice, create newCar from myCar. const myHonda =  color: "red", wheels: 4, engine:  cylinders: 4, size: 2.2 >, >; const myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; const newCar = myCar.slice(0, 2); console.log("myCar token punctuation">, myCar); console.log("newCar token punctuation">, newCar); console.log("myCar[0].color token punctuation">, myCar[0].color); console.log("newCar[0].color token punctuation">, newCar[0].color); // Change the color of myHonda. myHonda.color = "purple"; console.log("The new color of my Honda is", myHonda.color); console.log("myCar[0].color token punctuation">, myCar[0].color); console.log("newCar[0].color token punctuation">, newCar[0].color); 

myCar = [ < color: 'red', wheels: 4, engine: < cylinders: 4, size: 2.2 >>, 2, 'cherry condition', 'purchased 1997' ] newCar = [ < color: 'red', wheels: 4, engine: < cylinders: 4, size: 2.2 >>, 2 ] myCar[0].color = red newCar[0].color = red The new color of my Honda is purple myCar[0].color = purple newCar[0].color = purple

Calling slice() on non-array objects

The slice() method reads the length property of this . It then reads the integer-keyed properties from start to end and defines them on a newly created array.

const arrayLike =  length: 3, 0: 2, 1: 3, 2: 4, 3: 33, // ignored by slice() since length is 3 >; console.log(Array.prototype.slice.call(arrayLike, 1, 3)); // [ 3, 4 ] 

Using slice() to convert array-like objects to arrays

The slice() method is often used with bind() and call() to create a utility method that converts an array-like object into an array.

// slice() is called with `this` passed as the first argument const slice = Function.prototype.call.bind(Array.prototype.slice); function list()  return slice(arguments); > const list1 = list(1, 2, 3); // [1, 2, 3] 

Using slice() on sparse arrays

The array returned from slice() may be sparse if the source is sparse.

.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4] 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 27, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник