unshift(값)
배열 앞에 요소를 추가합니다.
요소의 개수가 늘어 납니다.
|
ar.unshift('사과');
ar.unshift('대추');
ar.unshift('딸기');
|
shift()
제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다.
이렇게 하면 두 번째 요소가 첫 번째 요소가 됩니다.
요소의 개수가 줄어 듭니다.
| let data1 = ar.unshift(); let data2 = ar.unshift(); let data3 = ar.unshift(); |
push(값)
끝에 요소를 추가합니다.
요소의 개수가 늘어 납니다.
|
ar.push('배');
ar.push('감');
ar.push('밤');
|
pop()
끝 요소를 추출합니다.
요소의 개수가 줄어 듭니다.
| let data1 = ar.pop(); let data2 = ar.pop(); let data3 = ar.pop(); |
ex04.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
42
43
44
|
<!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>
let ar = [];
document.write(`${typeof(ar)}(${ar.length}개) : ${ar}<br>`);
document.write(`<hr>`);
// unshift(값) : 배열 앞에 요소를 추가합니다.
ar.unshift('사과');
ar.unshift('대추');
ar.unshift('딸기');
document.write(`${ar.length}개 : ${ar}<br>`);
// push(값) : 끝에 요소를 추가합니다.
ar.push('배');
ar.push('감');
ar.push('밤');
document.write(`${ar.length}개 : ${ar}<br>`);
// shift() – 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다. 이렇게 하면 두 번째 요소가 첫 번째 요소가 됩니다.
document.write(`첫번째 요소 : ${ar.shift()}<br>`);
document.write(`첫번째 요소 : ${ar.shift()}<br>`);
document.write(`첫번째 요소 : ${ar.shift()}<br>`);
document.write(`${ar.length}개 : ${ar}<br>`);
// pop() – 끝 요소를 추출합니다.
document.write(`마지막 요소 : ${ar.pop()}<br>`);
document.write(`마지막 요소 : ${ar.pop()}<br>`);
document.write(`마지막 요소 : ${ar.pop()}<br>`);
document.write(`${ar.length}개 : ${ar}<br>`);
// 동시에 여러개 가능
ar.unshift("사과","딸기","대추");
ar.push('배','감','밤');
document.write(`${ar.length}개 : ${ar}<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 배열 concat(), fill(), copyWithin(), Array.isArray() (0) | 2024.10.23 |
|---|---|
| [JavaScript] 배열 toString() 메서드와 Array.join() 메서드 (0) | 2024.10.23 |
| [JavaScript] 배열 요소의 반복(for, for ~ in, for ~ of, forEach) (0) | 2024.10.23 |
| [JavaScript] 배열 요소의 추가/수정/삭제 하기 (2) | 2024.10.23 |
| [JavaScript] 배열 생성하기 (0) | 2024.10.23 |
