고래씌
[JavaScript] 6-1. 배열 본문
1. 배열
- 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 어떤 자료형의 값들이던 전부 하나의 배열공간에 담을 수 있다.(자바의 컬렉션과 유사)
■ 06_배열.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06_배열</title>
<link rel="stylesheet" href="resources/css/common.css">
<script>
// 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트
window.onload = function(){
const buttons = document.getElementsByTagName("button");
for(let button of buttons) {
button.innerText = "확인"
}
}
</script>
</head>
<body>
<h1>배열</h1>
<p>
자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 <br>
어떤 자료형의 값들이던 전부 하나의 배열공간에 담을 수 있다.(자바의 컬렉션과 유사)
</p>
<button id="btn1"></button>
<div id="area1" class="area small"></div>
<script>
function arrayTest1(){
const arr = ["홍길동", '이고래', `푸바오`, 26, true, {name:'아이바오'}, null, undefined, [1,2,3]]; // 배열객체
console.log(arr);
console.log(arr[0]);
console.log(arr[4]);
console.log(arr[arr.length-1][arr[arr.length-1].length-1]); // [1,2,3] 중에서 3의 값을 얻어옴
// for in 문 -> 객체를 반복시킬때 사용하는 것을 권장하는 향상된 반복문
for(let item in arr){ // item -> 현재 키(인덱스) 값이 담김
area1.innerHTML += arr[item] + "<br>";
}
// for of 문 -> 배열을 반복시킬때 사용하는 것을 권장하는 향상된 반복문
}
btn1.onclick = arrayTest1; // 함수호출
</script>
</body>
</html>
▶ 배열객체
|
const arr = ["홍길동", '이고래', `푸바오`, 26, true, {name:'아이바오'}, null, undefined, [1,2,3]]; // 배열객체
|
▶ arr 배열에 담긴 [1,2,3]의 값중에서 3의 값을 얻어오고 싶다면..?
|
console.log(arr[arr.length-1][arr[arr.length-1].length-1]); // [1,2,3] 중에서 3의 값을 얻어옴
|
▶ 향상된 반복문 (for in 문)
|
for(let item in arr){ // item -> 현재 키(인덱스) 값이 담김
area1.innerHTML += arr[item] + "<br>";
}
|
☞ item에는 현재 키(인덱스) 값이 담긴다.
▶ for in 문 => 객체를 반복시킬때 사용하는 것을 권장하는 향상된 반복문
▶ for of 문 => 배열을 반복시킬때 사용하는 것을 권장하는 향상된 반복문
2. 배열의 선언
- 배열의 선언시 배열의 크기를 지정한 채로 선언하거나, 크기를 지정하지 않아도 됨(크기에 제약이 없다.)
■ 06_배열.html
<button onclick="arrayTest2();"></button>
<script>
const arrayTest2 = function(){
const arr1 = new Array(); // 원래 이렇게 썼었다! // 배열의 크기가 0인 빈 배열
const arr2 = new Array(2); // 배열의 크기가 2인 빈 배열
const arr3 = []; // 자바스크립트식 배열 단순문 // 배열의 크기가 0인 빈 배열
console.log(arr1);
console.log(arr2);
console.log(arr3);
// 배열의 값 대입
arr1[0] = "banana";
arr1[1] = "apple";
arr1[10] = "kiwi";
console.log(arr1.length)
// 배열의 크기는 11(2~9 인덱스는 비어있다.)
arr2[0] = 'car';
arr2[1] = 'train';
arr2[2] = 'airplane';
console.log(arr2, arr2.length); // 배열 크기 3 출력
// 배열선언과 동시에 초기화
const arr4 = new Array("홍길동","이고래");
const arr5 = [1,2,3,4,5];
console.log(arr4, arr5);
}
</script>
▶여러가지 방법의 배열선언
const arr1 = new Array(); => 배열의 크기가 0인 빈 배열
const arr2 = new Array(); => 배열의 크기가 2인 빈 배열
const arr3 = []; // 자바스크립트식 배열 단순문. 배열의 크기가 0인 빈 배열
▶ 배열의 값 대입
|
arr1[0] = "banana";
arr1[1] = "apple";
arr1[10] = "kiwi";
console.log(arr1.length)
arr2[0] = 'car';
arr2[1] = 'train';
arr2[2] = 'airplane';
console.log(arr2, arr2.length);
|
console.log(arr1.length)
=> 배열의 크기 11이다. 3개의 값밖에 안들어가 있는데도 배열의 크기는 11이 나온다!
=> 배열의 크기는 11(2~9 인덱스는 비어있다.)
console.log(arr2, arr2.length); => 배열의 크기 3 출력
▶ 배열선언과 동시에 초기화
|
const arr4 = new Array("홍길동","이고래");
const arr5 = [1,2,3,4,5];
console.log(arr4, arr5);
|
3. Array 객체의 메소드
1) indexof(찾고자하는 요소)
: 배열에서 해당 요소가 위치해있는 인덱스를 반환
■ 06_배열.html
<div id="area2" class="area small"></div>
<button onclick="indexOfTest();"></button>
<script>
function indexOfTest(){
const arr = ["사과", "딸기","복숭아","샤인머스켓","바나나"];
const fruit = prompt("찾고자하는 과일명을 입력하시오...");
const index = arr.indexOf(fruit); // 내가 찾고자하는 과일의 인덱스 반환. 배열의 존재하지 않을 경우 -1 반환
// 찾고자 하는 과일이 있을 경우 : 당신이 찾는 과일 xxx는 x번째 인덱스에 있습니다.
// 찾고자 하는 과일이 없을 경우 : 당신이 찾는 과일 xxx는 판매하지 않습니다.
// area2 내부에 출력하기
console.log(index);
area2.innerHTML = index > -1 ? `당신이 찾는 과일 ${fruit}는 ${index}번째 인덱스에 있습니다.` : `당신이 찾는 과일 ${fruit}는 판매하지 않습니다.`;
// includes
const bool = arr.includes(fruit); // arr배열에 fruit 존재하면 true / 존재하지 않으면 false
console.log("1 == 1 ? ", 1 == 1); // true
console.log("1 == 1 ? ", 1 == '1'); // true
console.log("1 === 1 ?", 1 === '1') // false
}
</script>
▶ indexOf
☞ 내가 찾고자하는 배열의 인덱스 반환한다.
☞ 배열이 존재하지 않을 경우 -1 반환
▶ inclues
☞ 배열에 내가 찾고자하는 값이 존재하면 true / 존재하지 않으면 false 반환
▶ 1 == '1' // true
☞ 동등연산자 : 자료형과 무관하게 실제 값만 일치하면 true
▶ 1 === '1' // false
☞ 일치연산자 : 값과 자료형이 둘다 일치해야 true
2) concat(배열, 배열, ...)
: 여러개의 배열을 합치고자 할 때 사용
■ 06_배열.html
<div id="area3" class="area big"></div>
<button id="btn2"></button>
<script>
btn2.onclick = () => {
const arr1 = ['사과', '망고'];
const arr2 = ["자동차","오토바이","자전거"];
area3.innerHTML += `arr1 : ${arr1}<br>`;
area3.innerHTML += `arr2 : ${arr2}<br>`;
area3.innerHTML += `arr1 기준으로 배열을 합친 배열 : ${arr1.concat(arr2)}<br>`; // concat : arr2배열과 합침
area3.innerHTML += `arr1 : ${arr1}<br>`; // 원본배열 출력됨
area3.innerHTML += `arr2 기준으로 배열을 합친 배열 : ${arr2.concat(arr1)}<br>`;
area3.innerHTML += `여러개의 배열을 합친 배열 : ${arr1.concat(arr2, [1,2,3], [4,5,6])}<br>`;
area3.innerHTML += `es6방식 : ${[...arr1, ...arr2]}`;
}
</script>
▶ concat
☞ 여러개의 배열을 합치고자 할 때 사용
☞ ★원본배열에 영향을 끼치지 않는 메소드(concat)★
☞ 깊은 복사를 해서 원본 배열은 바꾸지 않는다.
☞ 두개의 배열을 합쳐서 "새로운 배열"로 반환
▶ es6
|
area3.innerHTML += `es6방식 : ${[...arr1, ...arr2]}`;
|
☞ arr1배열과 arr2 배열이 합쳐진다.
3) reverse()
: 배열에 담긴 값들을 역순으로 바꿔주는 메소드
■ 06_배열.html
<!-- #area4.area.small -->
<div id="area4" class="area small"></div>
<button onclick="reverseTest();"></button>
<script>
function reverseTest(){
const arr = [1,2,3,4,5];
area4.innerHTML += `arr : ${arr}<br>`; // 1,2,3,4,5
area4.innerHTML += `reverse 결과 : ${arr.reverse()}<br>`; // 5,4,3,2,1
area4.innerHTML += `reverse 결과 : ${arr}<br>`; // 5,4,3,2,1
}
</script>
▶ reverse()
☞ ★reverse는 배열의 원본값을 바꾼다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!★
☞ 얕은복사를 해서 원본 배열을 바꾼다.
4) sort()
: 배열안에 담긴 값들을 오름차순으로 정렬시켜주는 메소드
■ 06_배열.html
<h4>4) sort() : 배열안에 담긴 값들을 오름차순으로 정렬시켜주는 메소드</h4>
<div id="area5" class="area big"></div>
<button onclick="sortTest()"></button>
<script>
function sortTest(){
const arr = ["김나래", "김고래", "나고래", "라고래", "다고래"]
area5.innerHTML = `arr : ${arr}<br>`;
area5.innerHTML += `sort결과 : ${arr.sort()}<br>`;
area5.innerHTML += `원본 arr : ${arr}<br>`;
// 원본배열에 영향을 끼치는 함수
area5.innerHTML += `내림차순 : ${arr.sort().reverse()}<br>`;
const iArr = [1,2,15];
area5.innerHTML += `sort결과 : ${iArr.sort()}<br>`; // [1,15,2]
// 1) 정렬기준을 새로 만들기
function compare(a, b){
if(a > b ) return 1;
if(a == b) return 0;
if(a < b) return -1;
}
// 2) sort메소드의 매겨변수로 내가 만든 정렬기준 추가하기
area5.innerHTML += `정렬기준 재정의 후 sort결과 : ${iArr.sort(compare)}<br>`;
// 3) 위 코드를 줄여 쓰는 방법
area5.innerHTML += `정렬기준 재정의 후 sort결과 : ${iArr.sort(
(a,b) => a-b
)}<br>`;
area5.innerHTML += `정렬기준 재정의 후 sort결과 : ${iArr.sort(
function(a,b){return a-b}
)}<br>`;
}
</script>
|
area5.innerHTML = `arr : ${arr}<br>`;
area5.innerHTML += `sort결과 : ${arr.sort()}<br>`;
area5.innerHTML += `원본 arr : ${arr}<br>`;
|
☞ 원본배열에 영향을 끼치는 함수
|
const iArr = [1,2,15];
area5.innerHTML += `sort결과 : ${iArr.sort()}<br>`; // [1,15,2]
|
☞ sort함수 호출시 내부요소를 "문자열"로 취급하여 정렬하기 때문에 문자열 기준으로 오름차순 정렬된다.
☞ 결과가 [1, 15, 2] 출력
☞ 문자열 기준 정렬조건 대신 새로운 정렬기준을 만들고자 한다면 직접 만들어줘야 한다.
① 정렬기준을 새로 만들기
☞ 반환값을 양수, 음수, 0이 나오도록 설정한다.
☞ a > b 양수일시 오름차순, 음수일시 내림차순
② sort메소드의 매개변수로 내가 만든 정렬기준 추가하기
③ 위 코드를 줄여쓰는 방법
5_1) push(추가할 요소)
: 배열의 마지막 위치에 요소를 추가하고 배열의 크기도 반환
5_2) pop()
: 배열의 맨 뒤 요소를 제거하고 제거된 요소를 반환
■ 06_배열.html
<div id="area6" class="area big"></div>
<button onclick="pushPopTest();"></button>
<script>
function pushPopTest(){
const arr = ["서초동","방배동","역삼동","삼성동"];
area6.innerHTML += `arr : ${arr}<br>`;
arr.push("대치동");
area6.innerHTML += `push 후 arr : ${arr}<br>`;
area6.innerHTML += `arr에 push후 배열의 크기 ${arr.push("신사동")}<br>`;
area6.innerHTML += `push 후 arr : ${arr}<br>`;
area6.innerHTML += `arr의 마지막 위치에 있는 요소 제거 : ${arr.pop()}<br>`;
area6.innerHTML += `pop 후 arr : ${arr}<br>`;
arr.pop();
arr.pop();
arr.pop();
area6.innerHTML += `최종 ARR : ${arr}`;
// 배열의 마지막 위치에 값을 추가함
// arr[arr.length] = "신사동"
// arr.length = arr.length-1
// return arr[arr.length-1]
}
</script>
6_1) unshift(추가할요소)
: 배열의 맨 앞에 요소 추가 후 배열의 크기 반환
6_2_ shift()
:배열의 맨 앞에 요소 제거 후 제거된 요소 반환
■ 06_배열.html
<div id="area7" class="area big"></div>
<button onclick="shiftTest();"></button>
<script>
const shiftTest = () => {
const arr = ["야구", "볼링", "테니스", "탁구"];
area7.innerHTML += `arr : ${arr}<br>`;
arr.unshift("농구");
area7.innerHTML += `arr에 unshift함수 호출 후 : ${arr}<br>`;
area7.innerHTML += `arr에 unshift함수 호출 후 배열의 크기 : ${arr.unshift("당구")}<br>`;
area7.innerHTML += `다시 arr : ${arr}<br>`;
area7.innerHTML += `arr에 shift : ${arr.shift()}<br>`;
area7.innerHTML += `최종 arr : ${arr}<br>`;
}
</script>
7_1) slice(시작, 끝)
: 배열 안의 요소들을 단지 추출만 해주는 메소드
7_2) splice(시작, 제거수, 추가값)
: 배열의 요소를 추출해서 제거 및 추가해주는 메소드
■ 06_배열.html
<script>
btn3.onclick = () => {
const arr = ["자바", "오라클", "html", "css", "javascript"];
area8.innerHTML += `arr : ${arr}<br>`;
// slice(시작인덱스, 끝인덱스)
// => 끝인덱스는 포함하지 않음. 시작인덱스 <= x < 끝인덱스
area8.innerHTML += `slice 결과 : ${arr.slice(2,4)}<br>`;
area8.innerHTML += `arr : ${arr}<br>`;
// splice(시작인덱스, 제거수, 추가할 요소)
area8.innerHTML += `splice 결과 : ${arr.splice(2,2,"spring")}<br>`;
area8.innerHTML += `arr : ${arr}<br`;
// 원본배열에 영향을 끼치는 메소드다.
// es6방식 배열요소 제거
const filterArray = arr.filter((value, index) => value != "html");
// 원본배열에 영향을 끼치지 않는다.
}
</script>
▶ slice(시작인덱스, 끝인덱스)
|
area8.innerHTML += `slice 결과 : ${arr.slice(2,4)}<br>`;
area8.innerHTML += `arr : ${arr}<br>`;
|
☞ 끝인덱스는 포함하지 않음.
☞ 시작인덱스 <= x < 끝인덱스
☞ 배열의 값을 복사할 때 깊은복사하여 배열의 값을 반환한다.
☞ 원본배열에 영향을 끼치지 않는다.
▶ splice(시작인덱스, 제거수, 추가할 요소)
|
area8.innerHTML += `splice 결과 : ${arr.splice(2,2,"spring")}<br>`;
area8.innerHTML += `arr : ${arr}<br`;
|
☞ 원본배열에 영향을 끼치는 메소드이다!
▶ es6방식 배열요소 제거
|
const filterArray = arr.filter((value, index) => value != "html");
|
☞ 원본배열에 영향을 끼치지 않는다.
8) join([구문자] / toString()
: 배열에 담긴값들을 하나의 문자열로 합쳐서 반환해주는 메소드
▶ onclick 의 단점
|
<script>
btn4.onclick = () => {
alert("첫번째 click")
}
btn4.onclick = () => {
alert("두번째 click")
}
</script>
|
☞ 원래 있던 작업이 있던 없던 맨 아래에 있는 onclick만 실행된다.(단점)
☞ 첫번째 click은 무시되고 두번째 click만 실행되는 것을 확인할 수 있다.
▶ addEventListener => onclick의 단점을 보완하고 추가로 더 부여함
: 여러개의 이벤트를 부여할 수 있다.
■ 06_배열.html
<script>
let btn = document.getElementById("btn4");
btn.onclick = () =>{
alert("첫 번째 onclick");
}
// 위에랑 다르게 원래 있었던 click을 해치지 않고 추가로 더 부여된다.
btn.addEventListener("click", function(){
const arr = ["나는", "다음주부터", "다이어트를", "시작합니다"];
area9.innerHTML += `arr : ${arr}<br>`;
area9.innerHTML += `toString : ${arr.toString()}<br>`;
// 배열객체를 html요소에 출력할 경우 toString()가 호출된 후 반환된 값 출력
area9.innerHTML += `join : ${arr.join()}<br>`;
// join은 기본적으로 , 를 구분자로해서 문자열로 합친다.
// 단, 구분자를 제시하면 해당 구분자를 기준으로 문자열을 합친다.
area9.innerHTML += `구분자를 제시한 join : ${arr.join(" ")}<br>`;
// 공백으로 구분자를 제시한 결과 공백 기준으로 문자열을 합친 것을 볼 수 있음
})
</script>
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 7. 함수 (0) | 2023.11.10 |
|---|---|
| [JavaScript] 6-2. 배열 반복문 (0) | 2023.11.10 |
| [JavaScript] 계산 실습문제 (0) | 2023.11.09 |
| [JavaScript] 체크박스 실습문제 (0) | 2023.11.09 |
| [JavaScript] 5. 문자열과 숫자 (0) | 2023.11.08 |
