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
js
slice()
slice(start)
slice(start, end)
Parameters
start
Optional-
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
orstart
is omitted,0
is used. - If
start >= array.length
, nothing is extracted.
- Negative index counts back from the end of the array — if
end
Optional-
Zero-based index at which to end extraction, converted to an integer.
slice()
extracts up to but not includingend
.- 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
orend
is omitted,array.length
is used, causing all elements until the end to be extracted. - If
end
is positioned before or atstart
after normalization, nothing is extracted.
- Negative index counts back from the end of the array — if
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
js
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.
js
// 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 =", myCar);
console.log("newCar =", newCar);
console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", 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 =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);
This script writes:
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.
js
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.
js
// 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.
js
console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]
Specifications
Specification |
---|
ECMAScript Language Specification # sec-array.prototype.slice |
Browser compatibility
BCD tables only load in the browser