오늘은 array에 대해서 배워보겠습니다
| 목차 | |
| 1. | array |
| 2. | 예제 문제 |
| 3. | 느낀 점 |
1. array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>배열 : 자바 스크립트에서 배열은 유동 배열(크기, 데이터의 변경이 자유롭게 사용가능)</h1>
<ul>
<li>const myArray = [1,2,,'a','b',{}];</li>
<li>
배열에 데이터 타입은 제한이 없음.
같은 타입으로 채우는 것이 룰
</li>
<li>
배열의 사용 목적 : 관련있는 데이터를 묶어서 관리하기 위해
</li>
<li>myArray=[] : 초기값으로 빈 배열을 만든 후 데이터를 추가하여 사용</li>
<li>index를 가짐 => 0부터 시작</li>
<li>length => 배열의 총 길이</li>
</ul>
<script>
const array = new Array(1,2,3); // 잘 사용하지 않음
console.log(array);
const myArray = [1,2,3,"a",'a',`a`]; // 일반적인 사용 방법
console.log(myArray);
// 배열의 요소를 출력
console.log(myArray[0]);
console.log(myArray[1]);
console.log(myArray[myArray.length-1]); // 마지막 번지
// 마지막 번지에 값을 추가
myArray[myArray.length] = 6;
console.log(myArray);
myArray[9] = 10;
console.log(myArray);
// console.log(maArray[7]); // undefined -->
// const로 선언한 배열은 배열안의 요소로 변경하는 것은 가능하지만,
// 배열자체가 다른 배열로 바뀌는 것은 안 됨.
// 만약 배열 자체의 교체가 필요한 작업이라면 let을 사용하여 선언해야 함.
// myArray = ['a', 'b', 'c']; // const라서 불가능. -->
console.log(myArray);
console.log("------------");
// myArray의 모든 값을 콘솔에 출력
for(let i = 0; i < myArray.length; i ++){
console.log(myArray[i]);
}
console.log("------------");
// for of 사용
for(let a of myArray){
console.log(a);
}
console.log("------------");
// 여러 가지의 데이터를 담고 있는 유사 배열 : 혼합 배열
let associativeType = [1, true, 'hong', undefined, {k : 'value'}, ['k' , 'v']];
for(let b of associativeType){
console.log(b);
}
</script>
</body>
</html>
▷ 출력
◈ array method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>배열 관련 메서드 : 유사 배열에서는 사용 제한이 되는 메서드들도 있음.</h1>
<ul>
<li>
array.push(value) : 배열의 마지막에 value를 추가하여
=> 배열의 길이를 리턴
</li>
<li>
array.pop() : 배열의 마지막 요소를 제거
=> 배열의 마지막 요소를 리턴
</li>
<li>
array.shift() : 배열의 첫 요소를 제거 후 값을 리턴
= pop()과는 위치가 반대
</li>
<li>
array.unshift(value) : 배열의 첫 요소로 value를 추가하여 => 길이를 리턴
</li>
<li>
join(value) : 배열 사이에 value를 추가하여 문자열로 리턴
</li>
<li>
split() : 특정 값을 기준으로 배열로 나눔.
</li>
</ul>
<script>
const ourClass = [];
ourClass[ourClass.legth] = '홍길동';
ourClass[ourClass.legth] = '김영이';
ourClass[ourClass.legth] = '박철수';
console.log(ourClass);
ourClass.push('이순신');
console.log(ourClass.push('강감찬'));
console.log(ourClass.pop()); // 마지막 요소를 꺼내고 리턴
console.log(ourClass.shift()); // 배열의 첫 요소를 제거
console.log(ourClass.unshift('홍순이'));
let str = ourClass.join(" / ");
console.log(str);
console.log(str.split(" / "));
// ourClass = str.split(" / "); // const라서 불가능.
</script>
</body>
</html>
▷ 출력
◈ sort
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
배열의 정렬은 문자 기반으로 정렬됨.
</h1>
<ul>
<li>array.sort() : 문자를 기준으로 오름차순</li>
<li>array.reverse() : 문자를 기준으로 내림차순</li>
<li>
정렬할 배열의 값이 숫자일 때
콜백함수를 이용하여 내부 연산을 통해 정렬됨
</li>
<li>
[1, 6, 3, 5, 8, 2]
array.sort(function(a,b){
return a-b; // 오름차순
return b-a; // 내림차순
})
</li>
</ul>
<script>
const myArray = ['apple', 'orange', 'banana', 'kiwi'];
console.log(myArray.sort());
console.log(myArray.reverse());
const numArray = [];
// 랜덤으로 1 ~ 10까지의 숫자를 5개 채우기
let i = 1;
while(i <= 5){
let ran = Math.floor(Math.random()*10)+1;
numArray.push(ran);
i++;
}
console.log('--------------');
console.log(numArray);
// numArray를 정렬하여 콘솔에 출력
numArray.sort(function(a,b){
return a - b; // 오름차순
});
console.log(numArray);
// numArray를 내림차순 정렬하여 콘솔에 출력
numArray.sort((a,b) => { // 화살표 함수
return b - a; // 내림차순
});
console.log(numArray);
console.log("-------------------");
const cars = [
{type: 'volvo', year: 2024},
{type: 'banz', year: 2021},
{type: 'bmw', year: 2023},
{type: 'sonata', year: 2022}
];
console.log(cars);
// year을 기준으로 내림차순하여 정렬
cars.sort(function(a, b){
return b.year - a.year;
});
console.log(cars);
// type을 기준으로 오름차순 정렬
// -1 0 +1
cars.sort(function(a,b){
let x = a.type.toLowerCase(); // 소문자로 변경
let y = b.type.toLowerCase();
if(x > y){
return 1;
}
if(x < y){
return -1;
}
return 0;
});
</script>
</body>
</html>
▷ 출력
◈ iteration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
배열의 순환 구조를 이용하여 특정 기능을 수행하는 메서드
</h1>
<ul>
<li>array.forEach(callback function) : 일반 반복문과 유사한 형태</li>
<li>array.map(callback function) : forEach의 결과를 리턴하여 새로운 배열을 생성</li>
<li>
array.filter(callback function) : map처럼 수행하면서 비교 연산을 통해
true 값만 필터링하여 리턴
</li>
</ul>
<script>
const numArr = [3,5,5,4,4,1,2,7,9,6,8];
const strArr = ['a', 'g', 'h', 'b', 'c', 't', 'd'];
console.log("forEach-- value, index, array --");
numArr.forEach(function(v, i, a){
console.log(v, i, a);
});
strArr.forEach(function(v, i, a){
console.log(v, i, a);
})
console.log("-- value, index --")
// index value
numArr.forEach(function(v,i){
console.log(i, v);
});
// value
strArr.forEach(function(v){
console.log(v);
});
// invoke callback function
function printNumber (v, i, a){
console.log(i, v, a);
}
console.log("---------------");
console.log("invoke callback function");
numArr.forEach(printNumber); //callback function을 호출할 때는 ()없애고 호출
console.log("-- map() callback function --");
const newStrArr = strArr.map(function(v, i){
return `${i}, ${v}`;
});
console.log(newStrArr);
const newStrArr2 = strArr.forEach(function(v, i){
return `${i}, ${v}`; // forEach는 return 기능이 없음.
})
// console.log(newStrArr2); // undefined
console.log("-- filter() --");
// 5보다 큰 수만 배열로 리턴
const newNumArr = numArr.filter(function(v){
return v >= 5;
});
console.log(newNumArr);
// 짝수만 배열로 리턴
const newNumArr2 = numArr.filter(function(v){
return v = v % 2 == 0;
});
console.log(newNumArr2);
// filter를 활용한 배열의 중복 제거
// 현재 요소가 이전에 등장하지 않은 경우만 true
console.log(numArr);
const onlyArr = numArr.filter((v,i,s)=>{
return s.indexOf(v) == i;
});
console.log(onlyArr);
</script>
</body>
</html>
▷ 출력
◈ iteration method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
Array Iteration Method : 순환 구조에서 사용하는 메서드
</h1>
<ul>
<li>
array.reduce(callback function(total, value, index, self), [init value]);
누적값을 리턴
</li>
<li>
array.every(callback function(value, index, self));
콜백 리턴 조건에 모든 배열의 값이 만족하면 true / false를 리턴
</li>
<li>
array.some(callback function(value, index, self));
콜백 리턴 조건에 하나의 값이라도 만족하면 true / false를 리턴 ( || )
</li>
<li>
array.indexOf('str', [start index]);
해당 문자열이 배열에 존재하면 index를 리턴
</li>
<li>array.lastIndexOf('str', [start index]); 뒤에서부터 탐색</li>
<li>
array.find(callback function(value, index, self));
리턴 조건에 만족하는 첫 값을 리턴
</li>
<li>
array.findIndex(callback function(value, index, self));
리턴 조건에 만족하는 첫 값의 index을 리턴
</li>
<li>array.form('객체') : 순서가 있거나, 순환 구조를 갖고 있는 객체를 배열로 변환</li>
<li>
array.keys() : 배열이 사용중인 key(index)를 검색하여 새로운 배열로 리턴
</li>
<li>
array.enterties() : index:value의 구조값을 만들어서 새로운 배열로 리턴
</li>
<li>
array.includes("str") : 배열에 str 값이 있으면 true / false
</li>
</ul>
<script>
const fruits = ["apple", "banana", "orange", "apple", "mango"];
let f = fruits.entries();
console.log(f);
for(let a of f){
console.log(a);
}
let find = fruits.indexOf('apple', 1);
console.log(find);
console.log(fruits.includes("banana"));
const arr = [2,4,5,7,9,30,6];
const sum = arr.reduce(function(total, v){
return total + v;
}, 1000);
console.log(sum);
let find1 = arr.find(function(v){
return v >= 10;
});
console.log(find1);
console.log(arr.findIndex((v)=>{
return v >= 10;
}));
let even = arr.every((e)=>{
return e % 2 == 0;
});
console.log(even);
// 콜백 함수의 내용이 return 하나 밖에 없다면 return 생략 가능. { } 같이 제거
let even2 = arr.every((e)=> e % 2 == 0 );
console.log(even2);
// 파라미터가 하나밖에 없을 경우 () 생략가능
let even3 = arr.every(e=>{ return e % 2 == 0 });
console.log(even3);
</script>
</body>
</html>
▷ 출력
▣ 필터링
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const student = [
{name: 'hong', age: 23},
{name: 'kim', age: 25},
{name: 'lee', age: 30},
{name: 'pack', age: 28},
{name: 'choi', age: 22}
];
// 나이가 25세 이상인 데이터만 필터링하여 출력
const Age = student.filter(function(v){
return v.age >= 25;
});
console.log(Age);
// 이름의 길이가 3글자인 학생만 필터링하여 출력
const Name = student.filter(function(v){
return v.name.length == 3;
});
console.log(Name);
</script>
</body>
</html>
▷ 출력
2. 예제 문제
◎ 문제
▶ 1번
<!--
input에 파일명.확장자 형태로 입력을 하여 버튼을 클릭하면
이미지 파일인지 아닌지 검사
이미지 파일이면 '정상 파일입니다.'(green)
이미지 파일이 아니면 '이미지 파일만 가능합니다.'(red)
이미지 파일 jpg(JPG), jpeg(JPEG), png(PNG), gif(GIF) 대소문자 가능.
-->
▷ 출력
▶ 2번
◎ 정답
▶ 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.green{
color: green;
}
.red{
color: red;
}
</style>
</head>
<body>
<!--
input에 파일명.확장자 형태로 입력을 하여 버튼을 클릭하면
이미지 파일인지 아닌지 검사
이미지 파일이면 '정상 파일입니다.'(green)
이미지 파일이 아니면 '이미지 파일만 가능합니다.'(red)
이미지 파일 jpg(JPG), jpeg(JPEG), png(PNG), gif(GIF) 대소문자 가능.
-->
파일명 : <input type="text" id="fileName"><br>
<button type="button" id="btn">확인</button>
<h3 id="result"></h3>
<script>
document.getElementById('btn').addEventListener('click', ()=>{
let fileName = document.getElementById('fileName').value;
let result = document.getElementById('result');
console.log(fileName);
const name = ['.jpg', '.jpeg', '.png', '.gif'];
console.log(name);
let str = '';
if(name.includes(fileName.substring(fileName.lastIndexOf('.')).toLowerCase())){
str += '<span class="green">정상 파일입니다.</span>';
}else{
str += '<span class="red">이미지 파일만 가능합니다.</span>';
}
result.innerHTML = str;
});
</script>
</body>
</html>
▶ 2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="play(1)"><img src="../image/scissors.png" alt=""></button>
<button onclick="play(2)"><img src="../image/rock.png" alt=""></button>
<button onclick="play(3)"><img src="../image/paper.png" alt=""></button>
<h3 id="h3"></h3>
<script>
let h3 = document.getElementById('h3');
// 누적이 되어야하는 점수
let count = 1;
let win = 0;
let drow = 0;
let lose = 0;
// 승패 결정
function play(player){
let com = Math.floor(Math.random()*3)+1;
str = ``; // Html 출력값 초기화
if((player == 1 && com == 3) || (player == 2 && com == 1) || (player == 3 && com == 2)){
win ++;
str += `player : ${change(player)} / com : ${change(com)} => player가 이겼습니다.<br>`
}else if(player == com){
drow ++;
str += `player : ${change(player)} / com : ${change(com)} => player가 비겼습니다.<br>`
}else{
lose ++;
str += `player : ${change(player)} / com : ${change(com)} => player가 졌습니다.<br>`
}
printResult();
count ++;
}
// 숫자 => 문자 출력
function change(n){
if(n == 1){
return `가위`;
}else if(n == 2){
return `바위`;
}else if(n == 3){
return `보`;
}else{
return `오류`;
}
}
// 출력
function printResult(){
str += `현재 전적<br>`;
str += `승 : ${win} / 무 : ${drow} / 패 : ${lose}<br>`;
let check = count - drow;
if(count - drow == 0){ // 0으로 나누기 방지
check = 1;
}
str += `승률 : ${(win / (check)*100).toFixed(2)}%`;
h3.innerHTML = str;
}
</script>
</body>
</html>
3. 느낀 점
array에 활용할 수 있는 용어들이 많았고 콜백 함수를 부르는 과정이 복잡해서 이해하기 어려웠던 것 같다. 그렇기에 array 부분을 예제 문제들을 풀어보면서 복습을 해야 할 것 같다.
'Front-end > Js' 카테고리의 다른 글
| Js 기초(class)- AWS 풀스택 과정 21일차 (0) | 2024.08.12 |
|---|---|
| Js 기초(set, map)- AWS 풀스택 과정 20일차 (0) | 2024.08.09 |
| Js 기초(if, for)- AWS 풀스택 과정 18일차 (0) | 2024.08.07 |
| Js 기초(input, string)- AWS 풀스택 과정 17일차 (0) | 2024.08.06 |
| Js 설정 및 기초(function, event) - AWS 풀스택 과정 16일차 (0) | 2024.08.05 |