HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
slice()
begin
end
const animals = ["ant", "bison", "camel", "duck", "elephant"]; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // Expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // Expected output: Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2)); // Expected output: Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // Expected output: Array ["camel", "duck"] console.log(animals.slice()); // Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
arr.slice([begin[, end]])
0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다. begin이 undefined인 경우에는, 0번 인덱스부터 slice 합니다. begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다.
slice(-2)
undefined
slice
추출을 종료 할 0 기준 인덱스입니다. slice 는 end 인덱스를 제외하고 추출합니다. 예를 들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다. end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출합니다.
slice(1,4)
slice(2,-1)
arr.length
만약 end 값이 배열의 길이보다 크다면, slice()는 배열의 끝까지(arr.length) 추출합니다.
추출한 요소를 포함한 새로운 배열.
slice()는 원본을 대체하지 않습니다. 원본 배열에서 요소의 얕은 복사본을 반환합니다. 원본 배열의 요소는 다음과 같이 반환 된 배열에 복사됩니다:
String
Number
새 요소를 두 배열 중 하나에 추가해도 다른 배열은 영향을 받지 않습니다.
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; let citrus = fruits.slice(1, 3); // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] // citrus contains ['Orange','Lemon']
다음 예제에서 slice()는 myCar에서 newCar라는 새 배열을 만듭니다. 두 가지 모두 myHonda 객체에 대한 참조를 포함합니다. myHonda의 색상이 자주색으로 변경되면 두 배열 모두 변경 사항을 반영합니다.
myCar
newCar
myHonda
// Using slice, create newCar from myCar. let myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } }; let myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; let newCar = myCar.slice(0, 2); // Display the values of myCar, newCar, and the color of myHonda // referenced from both arrays. console.log("myCar = " + JSON.stringify(myCar)); console.log("newCar = " + JSON.stringify(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); // Display the color of myHonda referenced from both arrays. console.log("myCar[0].color = " + myCar[0].color); console.log("newCar[0].color = " + 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
slice() 메서드를 호출하여 배열형 객체와 콜렉션을 새로운 Array로 변환할 수 있습니다. 단순히 Function.prototype.bind()를 사용해 객체에 slice()를 바인딩 하면 됩니다. 대표적인 "배열형 객체"의 예시는 함수 내의 arguments입니다.
Array
Function.prototype.bind()
arguments
function list() { return Array.prototype.slice.call(arguments); } let list1 = list(1, 2, 3); // [1, 2, 3]
Function.prototype.call() 메서드를 사용해서도 바인딩을 할 수 있으며, Array.prototype.slice.call 대신 더 짧게 [].slice.call로 작성할 수도 있습니다.
Function.prototype.call()
Array.prototype.slice.call
[].slice.call
아무튼, 다음과 같이 bind()를 사용해 줄일 수 있습니다.
bind()
let unboundSlice = Array.prototype.slice; let slice = Function.prototype.call.bind(unboundSlice); function list() { return slice(arguments); } let list1 = list(1, 2, 3); // [1, 2, 3]
Enable JavaScript to view this browser compatibility table.
Array.prototype.splice()