컴퓨터/JavaScript
[JavaScript] 배열
peridott
2024. 7. 4. 15:40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열</title>
<style>
.area{
border: 1px solid;
padding: 5px;
}
</style>
</head>
<body>
<h1>배열</h1>
<p>
- 변수 선언시 별도의 자료형 지정하지 않은<br>
- 어떤 자료형의 값들이든 다 하나의 배열 공간에 담을 수 있음.<br> <!-- 숫자,문자 제약 없음. 자바는 스트링만, 인트만 넣을 수 있었음 -->
크기에 제약도 없다.(자바의 컬렉션과 유사)<br>
- 존재하지 않는 인덱스를 참조해도 오류나지 않음. undefined이 리턴 됨.
</p>
<button onclick="arrayTest();">배열 확인</button>
<div class="area" id="area1"></div>
<script>
function arrayTest() {
let arr = ['홍길동', "서울", 20, true, [1,2,3]];
console.log(arr);
console.log(arr[2]);
console.log(arr[4]);
console.log(arr[4][1]); // 2차원 배열, 2번째 배열에서 2번째 배열과 2를 출력한다.
console.log(arr[5]); // undefined
const area1 = document.getElementById('area1');
for(let i=0; i<arr.length; i++) {
area1.innerHTML += arr[i] + '<br>';
}
}
</script>
<hr>
<h3>* 배열의 선언</h3>
<button onclick="arrayTest2();">배열 선언 확인</button>
<script>
function arrayTest2() {
let arr1 = new Array();
let arr2 = new Array(3);
let arr3 = [];
console.log(arr1);
console.log(arr2);
console.log(arr3);
// 배열에 값 대입
arr1[0] = '바나나';
arr1[1] = '사과';
arr1[2] = '키위';
console.log(arr1);
arr2[0] = '자동차';
arr2[1] = '오토바이';
arr2[2] = '기차';
arr2[3] = '제트키'; // length가 3이었지만 자기 맘대로 더 넣을 수 있다.
console.log(arr2);
// 배열 선언과 동시에 초기화
let arr4 = new Array('홍길동', '임꺽정', '신사임당');
let arr5 = ['java', 'html', 'css'];
console.log(arr4);
console.log(arr5);
}
</script>
<hr>
<h3>* 배열관련 메소드</h3>
<h4>1) 배열.indexOf(찾고자하는요소) : 배열에서 해당 요소가 위치의 인덱스를 반환</h4>
<button onclick="indexOfTest();">indexOf</button>
<div class="area" id="area2"></div>
<script>
function indexOfTest() {
const area2 = document.getElementById('area2');
let arr = ['사과', '딸기', '복숭아', '수박', '참외']
let fruit = prompt("찾고자하는 과일명 입력");
let index = arr.indexOf(fruit);
console.log(index);
// 당신이 찾는 과일 ???는 ?번째 인덱스에 있습니다.
// 당신이 찾는 과일 ???는 판매하지 않습니다.
area2.innerHTML = `당신이 찾는 과일 ${fruit}은(는)`
if(index == -1) {
area2.innerHTML += `판매하지 않습니다.`;
} else {
area2.innerHTML += `${index}번째 인덱스에 있습니다.`;
}
// 자바스크립트에서의 두 값이 동일한지 비교하는 연산자
console.log(1 == 1); // true
console.log(1 == '1'); // true => 동등연산자(자료형과 무관하게 실제값만 일치해도 true)
console.log(1 === '1'); // false => 엄격동등비교(값, 자료형 둘다 일치해야만 true)
}
</script>
<hr>
<h4>2) 배열.concat(배열, 배열, ...) : 배열 여러개를 결합하고자 할 때 사용</h4>
<button onclick="concatTest();">concat</button>
<div class="area" id="area3"></div>
<script>
function concatTest() {
const area3 = document.querySelector('#area3');
const arr1 = ['사과', '딸기']
const arr2 = ['자동차', '비행기', '오토바이'];
area3.innerHTML += `arr1 : ${arr1} <br>`;
area3.innerHTML += `arr2 : ${arr2} <br>`;
area3.innerHTML += `arr1 기준으로 배열 합침 : ${arr1.concat(arr2)} <br>`;
area3.innerHTML += `원본 arr1 : ${arr1} <br>`; // 원본은 바뀌지 않음
area3.innerHTML += `arr2 기준으로 배열 합침 : ${arr2.concat(arr1, [1,2,3])} <br>`;
}
</script>
<hr>
<h4>3) 배열.reverse() : 배열에 담긴 값들을 역순으로 바꿔주는 메소드</h4>
<button onclick="reverseTest();">reverse</button>
<div class="area" id="area4"></div>
<script>
function reverseTest() {
const area4 = document.querySelector('#area4');
let arr = [1,2,3,4,5,];
area4.innerHTML += `arr : ${arr}<br>`;
area4.innerHTML += `reverse결과 : ${arr.reverse()}<br>`;
area4.innerHTML += `원본 arr : ${arr}<br>`; // 원본 배열에 영향을 끼치는 메소드
}
</script>
<hr>
<h4>4) 배열.sort() : 배열에 남긴 값들을 오름차순으로 정렬시켜주는 메소드</h4>
<button onclick="sortTest();">sort</button>
<div class="area" id="area5"></div>
<script>
function sortTest() {
const area5 = document.getElementById('area5');
let arr = ['박길동', '김길동', '홍길동', '나길동', '강길동']
area5.innerHTML += `arr : ${arr}<br>`;
area5.innerHTML += `sort결과 : ${arr.sort()}<br>`;
area5.innerHTML += `원본 arr : ${arr}<br>`; // 원본 배열에 영향을 끼치는 메소드
// 내림차순으로 정렬하고 싶다면 => 오름차순 정렬 후 역순으로 뒤집
area5.innerHTML += `내림차순 정렬 : ${arr.sort().reverse()}<br>`;
}
</script>
<hr>
<h4>
5.1) 배열.push(추가할요소) : 배열의 맨 뒤에 요소를 추가시키고 배열의 크기를 반환<br>
5.2) 배열.pop() : 배열의 맨 뒤에 요소를 제거하고 제거된 요소를 반환
</h4>
<button onclick="pushPopTest()">PUSH_POP</button>
<div class="area" id="area6"></div>
<script>
function pushPopTest() {
const area6 = document.getElementById('area6');
const arr = ['서초동', '방배동', '역삼동', '삼성동', '대치동'];
area6.innerHTML += `<b>arr</b> : ${arr}<br>`;
area6.innerHTML += `<b>arr 맨 뒤에 추가(push)</b> : ${arr.push('구로동')}<br>`;
area6.innerHTML += `<b>원본 arr</b> : ${arr}<br>`;
arr.push('잠실본동');
area6.innerHTML += `<b>arr 맨 뒤에 추가한 후</b> : ${arr}<br>`;
area6.innerHTML += '------------------------------------------------<br>'
area6.innerHTML += `<b>arr의 맨뒤 요소 제거(pop)</b> : ${arr.pop()}<br>`;
area6.innerHTML += `<b>원본 arr</b> : ${arr}<br>`;
arr.pop();
arr.pop();
area6.innerHTML += `<b>최종 arr</b> : ${arr}<br>`;
}
</script>
<hr>
<h4>
6.1) 배열.unshift(추가할요소) : 배열의 맨 앞에 요소 추가한 후 배열의 크기 반환<br>
6.2) 배열.shift() : 배열의 맨 앞에 요소 제거하고 제거된 요소 반환
</h4>
<button onclick="unshiftTest();">SHIFT_UNSHIFT</button>
<div class="area" id="area7"></div>
<script>
function unshiftTest() {
const area7 = document.getElementById('area7');
const arr = ['테니스', '볼링', '야구', '당구'];
area7.innerHTML += `<b>arr</b> : ${arr}<br>`;
arr.unshift('농구');
area7.innerHTML += `<b>arr에 농구를 unshift한 후</b> : ${arr}<br>`;
arr.shift();
area7.innerHTML += `<b>arr에 shift한 후</b> : ${arr}<br>`;
}
</script>
<hr>
<h4>
7.1) 배열.slice(시작인덱스, 끝인덱스) : 배열에서 시작인덱스부터 끝인덱스까지 추출해주는 메소드<br>
7.2) 배열.splice(시작인덱스, 제거수, 추가할 값, ...) : 배열의 요소 추출하여 제거 및 추가
</h4>
<button onclick="sliceTest();">SLICE</button>
<div class="area" id="area8"></div>
<script>
function sliceTest() {
const area8 = document.getElementById('area8');
let arr = ['java', 'oracle', 'html', 'css', 'javascript'];
area8.innerHTML += `<b>arr</b> : ${arr}<br>`;
area8.innerHTML += `<b>slice(2,4)</b> : ${arr.slice(2,4)}<br>`;
area8.innerHTML += `<b>slice(3)</b> : ${arr.slice(3)}<br>`;
area8.innerHTML += `<b>splice(2,4,'jQuery', 'JSP')</b> : ${arr.splice(2,4,'jQuery', 'JSP')}<br>`;
area8.innerHTML += `<b>arr</b> : ${arr}<br>`;
}
</script>
<hr>
<h4>
8) 배열.toString() / 배열.join([구분자]) : 배열에 각각 인덱스에 담긴 값들을 하나의 '문자열'로 합쳐서 반환<br>
</h4>
<button onclick="toStringJoinTest();">toString</button>
<div class="area" id="area9"></div>
<script>
function toStringJoinTest() {
const area9 = document.getElementById('area9');
const arr = ['나는', '오늘', '맛있는', '점심했어'];
area9.innerHTML += `<b>arr</b> : ${arr}<br>`;
area9.innerHTML += `<b>toString()</b> : ${arr.toString()}<br>`;
area9.innerHTML += `<b>join</b> : ${arr.join()}<br>`;
area9.innerHTML += `<b>구분자를 제시한 join</b> : ${arr.join(' ')}<br>`;
}
</script>
<hr>
<h4>9) 반복처리(forans, for..in문, for..of문, forEach)</h4>
<button onclick="forEach();">forEach</button>
<div class="area" id="area10"></div>
<script>
function forEach() {
const area10 = document.getElementById('area10');
const arr = ['가', '나', '다'];
area10.innerHTML += `<b>for</b> : `;
for(let i=0; i<arr.length; i++) {
area10.innerHTML += `${arr[i]}, `;
}
area10.innerHTML += `<br>`;
// 배열에 대해 인덱스 속성 가져오기
area10.innerHTML += `<b>for in</b> : `;
for(let i in arr) {
area10.innerHTML += `${i} : ${arr[i]}, `;
}
area10.innerHTML += `<br>`;
// 배열의 요소 가져오기
area10.innerHTML += `<b>for of</b> : `;
for(let ch of arr) { // ch는 변수
area10.innerHTML += `${ch}, `;
}
area10.innerHTML += `<br>`;
// forEach메소드 : 각 요소별로 전달한 함수(콜백함수 : 매개변수자리에 function이 들어가는 것)를 실행
area10.innerHTML += `<b>forEach</b> : `;
arr.forEach(function(elem, index, arr) {
area10.innerHTML += `${elem}, ${index}, ${arr}<br>`;
});
// arr.forEach(function(elem, index) {
// area10.innerHTML += `${elem}, ${index}<br>`;
// });
// arr.forEach(function(elem) {
// area10.innerHTML += `${elem}<br>`;
// });
// arr.forEach(function(elem, index) {
// area10.innerHTML += `${index}<br>`;
// });
}
</script>
<hr>
<h4>
10.1) map : 배열의 각 요소별로 작업한 후 요소를 담은 배열 반환<br>
10.2) filter : 각 요소별 콜백함수를 실행하여 true인 요소만 새 배열에 담아서 반환<br>
10.3) reduce : 모든 요소를 대상으로 특정 작업 후 하나의 값(객체)로 반환<br>
- 최대 / 최솟값, 누적합 등에 적합<br>
- reduce(콜백함수, 초기값) : 초기값을 생략하면 배열의 첫번째 요소가 초기값이 된다.
</h4>
<button onclick="map();">MAP</button> 
<button onclick="filter();">FILTER</button> 
<button onclick="reduce();">REDUCE</button> 
<div class="area" id="area11">
<ul></ul>
</div>
<script>
const area1 = document.querySelector('#area11>ul'); // 전역변수
function map() {
let arr = [1, 2, 3]; // [1, 4, 9]
let result = arr.map(function(value, index, arr) { // 변수명, 인덱스, 배열
console.log(value, index, arr);
return value * value;
});
console.log(arr);
console.log(result);
let names = ['김말똥', '이순신', '김나무'];
let nameList = names.map(function(name) {
return `<li>${name}</li>`;
});
console.log(nameList);
// 일반 for문
// for(let i=0; i<nameList.length; i++) {
// area11.innerHTML += nameList[i];
// }
// for in(index번호)
// for(let x in nameList) {
// area11.innerHTML += nameList[x];
// }
// for of(요소값)
// for(let y of nameList) {
// area11.innerHTML += y;
// }
// forEach
nameList.forEach(function(elem/*, index */) {
area11.innerHTML += elem;
// area11.innerHTML += nameList[index];
});
}
function filter() {
let nums = [1,2,3,4,5,6,7,8,9,10];
let even = nums.filter(function(n, index, arr) {
return n % 2 == 0;
});
area11.innerHTML += `<li>${even}</li>`;
// 1) 1~100까지 배열에 담기
// 2) 31미만의 숫자중 3의 배수만 가져오는 filter
let arr = [];
for(let i=0; i<100; i++) {
arr.push(i+1);
}
let filter3 = arr.filter(function(n) {
return n <= 30 && n % 3 == 0;
});
area11.innerHTML += `<li>${filter3}</li>`;
}
function reduce() {
let arr = [1,2,3,4,5,6,7,8,9,10];
let sum = arr.reduce(function(pv, elem, index, arr) { // 이전값, 현재값, 인덱스, 배열
console.log(pv, elem);
return pv + elem;
}, 0); // 초기값
console.log('sum : ', sum);
area11.innerHTML += `<li>1~10까지의 합 : ${sum}</li>`;
let nums = [1,5,8,9,10,2,7,3,4];
let max = nums.reduce(function(previous, current) {
return previous > current ? previous : current; // 삼항연산자
});
area11.innerHTML += `<li>nums에서 가장 큰 값 : ${max}</li>`;
}
</script>
</body>
</html>