본문 바로가기

Front End/Javascript

[JavaScript] 배열 slice(), splice()

slice()

배열의 일부분을 잘라서 배열로 반환합니다. 
array.slice(start, end)

       let ar1 = zodiac.slice(0, 4);
       let ar2 = zodiac.slice(4, 8);
       let ar3 = zodiac.slice(8);
       document.write(`${ar1.length}개 : ${ar1}<br>`);
       document.write(`${ar2.length}개 : ${ar2}<br>`);
       document.write(`${ar3.length}개 : ${ar3}<br><hr>`);

 

splice()

배열에 요소를 변경, 추가 또는 삭제 합니다.
배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);

       // 삭제 : 5번째부터 4개 삭제
       zodiac.splice(4, 4);
       
       // 삽입 :5번째에 0개 지우고 목록 추가
       zodiac.splice(4, 0, "용","뱀","말","양");
       
       // 치환 : 네번째 1개 고양이로 변경  
       zodiac.splice(3, 1, "고양이");

       //  네번째 3개를 지우고 변경 삽입
       zodiac.splice(3, 3, "변경");

 

 

ex08.html 파일을 다음과 같이 만듭니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript Array</title>
    <script>
       const zodiac = "쥐,소,호랑이,토끼,용,뱀,말,양,원숭이,닭,개,돼지".split(",");
       document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
       
       // slice() : 배열의 일부분을 잘라서 배열로 반환합니다. array.slice(start, end)
       let ar1 = zodiac.slice(04);
       let ar2 = zodiac.slice(48);
       let ar3 = zodiac.slice(8);
       document.write(`${ar1.length}개 : ${ar1}<br>`);
       document.write(`${ar2.length}개 : ${ar2}<br>`);
       document.write(`${ar3.length}개 : ${ar3}<br><hr>`);
       
       // splice() : 배열에 요소를 추가 또는 삭제 합니다.
       // 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]);
       document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
       // 삭제 : 5번째부터 4개 삭제
       zodiac.splice(44);
       document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
       // 삽입 :5번째에 0개 지우고 목록 추가
       zodiac.splice(40"용","뱀","말","양");
       document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
       // 치환 : 네번째 1개 고양이로 변경  
       zodiac.splice(31"고양이");
       document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
       zodiac.splice(33"변경"); //  네번째 3개를 지우고 변경 삽입 
       document.write(`띠(${zodiac.length}개) : ${zodiac}<br>`);
    </script>
</head>
 
<body>
 
</body>
 
</html>
cs

 

 

실행 결과 입니다.