JavaScript의 arrayBuffer.slice() 메서드는 기존 ArrayBuffer 객체의 일부를 복사하여 새로운 ArrayBuffer를 반환합니다. 복사 범위는 시작 인덱스(begin)부터 종료 인덱스(end)까지이며, 이때 begin은 포함되고 end는 제외됩니다.
기본 문법
arrayBuffer.slice(begin, end)
- begin: 복사를 시작할 인덱스 (포함). 음수 값을 지정하면 버퍼 끝에서부터 계산됩니다.
- end: 복사를 종료할 인덱스 (제외). 생략하면 버퍼의 끝까지 복사됩니다.
arrayBuffer.slice() 예제 코드
다음은 arrayBuffer.slice() 메서드를 활용한 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript arrayBuffer.slice() 예제</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: black;
}
</style>
</head>
<body>
<h1>JavaScript arrayBuffer.slice() 메서드</h1>
<div class="sample">원본 배열 버퍼:</div>
<div class="result">슬라이스된 배열 버퍼:</div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 배열 버퍼를 슬라이스하여 복사본을 만듭니다
</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
int32View[0] = 11;
int32View[1] = 22;
int32View[2] = 33;
int32View.forEach((item) => {
sampleEle.innerHTML += item + " , ";
});
const slicedBuffer = new Int32Array(buffer.slice(0, 8));
document.querySelector(".Btn").addEventListener("click", () => {
slicedBuffer.forEach((item) => {
resultEle.innerHTML += item + " , ";
});
});
</script>
</body>
</html>실행 결과
페이지를 실행하면 원본 배열 버퍼에 저장된 값들이 먼저 화면에 표시됩니다.
그다음 '클릭하세요' 버튼을 누르면 다음과 같이 슬라이스된 배열 버퍼의 내용이 표시됩니다.
코드 설명
- 16바이트 크기의
ArrayBuffer를 생성한 뒤,Int32Array뷰로 감싸 각 요소에 접근할 수 있도록 합니다. (Int32Array는 요소당 4바이트를 사용하므로 총 4개의 요소를 담을 수 있습니다.) - 첫 세 요소에 각각 11, 22, 33을 할당하고 화면에 출력합니다.
buffer.slice(0, 8)을 호출하면 0번째 바이트부터 8번째 바이트 직전까지, 즉 앞의 두 요소(11, 22)가 포함된 새로운 ArrayBuffer가 생성됩니다.- 버튼을 클릭하면 슬라이스된 버퍼의 내용이 화면에 출력됩니다.
정리
arrayBuffer.slice() 메서드는 원본 버퍼를 변경하지 않고 특정 구간만 복사한 새로운 ArrayBuffer를 만들 때 유용합니다. begin과 end 인덱스를 조절해 필요한 데이터 구간만 손쉽게 추출할 수 있다는 점을 기억하세요.