라라리라
2023.08.26 / Step 1 [DOM_기초문법_배열] - 코딩 38 일차 본문
_0001_배열_생성_출력.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 생성</title>
</head>
<body>
<script>
/*
[개념]
class Array {
}
배열 객체(Array Object) 생성
아래 세 가지 방법은 모두 같은 결과의 배열을 만들어 준다.
(1) let 변수 = [값1, 값2, 값3, ...];
(2) let 변수 = new Array(값1, 값2, 값3, ...);
(3) let 변수 = new Array();
변수[0] = 값1;
변수[1] = 값2;
변수[2] = 값3;
...
*/
// 배열 생성
let arr1 = [1, "a", true];
document.write(arr1 + "<br>");
let arr2 = Array(1, "a", true);
document.write(arr2 + "<br>");
let arr3 = new Array();
arr3[0] = 1;
arr3[1] = "a";
arr3[2] = true;
document.write(arr3 + "<br>");
// 배열 출력(1)
for(let i=0; i<arr3.length; i++) {
document.write(arr3[i] + " ");
}
document.write("<br>");
// 배열 출력(2) : 향상된 for문
for(i in arr3) { //암기!! == for(let i = 0; i < arr3.length; i++){}
document.write(arr3[i] + " ");
}
</script>
</body>
</html>
_0002_배열_확인_isArray.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 확인 - isArray()</title>
</head>
<body>
<script>
/*
[개념] 배열 타입
(1) 자바스크립트 배열은 객체(object) 타입이다.
(2) Array.isArray() 를 통해 해당 변수가 배열인지 여부를 확인할 수 있다.
*/
let arr = [1, "a", true];
document.write(typeof arr, "<br>"); // object
document.write(Array.isArray(arr) + "<br>"); // true
document.write(Array.isArray(123)); // false
</script>
</body>
</html>
_0003_배열_인덱스검색_indexOf.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 인덱스 검색 - indexOf()</title>
</head>
<body>
<script>
/*
[개념] 배열 인덱스 검색
(1) indexOf()
(2) 인자로 주어진 값을 검색해 첫 번째 인덱스를 반환한다.
(3) 존재하지 않으면 -1을 반환한다.
*/
let arr = ["미금", "당곡", "정자", "수서", "양재", "당곡"];
/*
[문제]
arr배열에서 양재의 인덱스를 출력하시오.
*/
let idx = arr.indexOf("강남");
if(idx != -1) {
document.write(idx);
} else {
document.write("없는 단어입니다.<br>")
}
let index = arr.indexOf("정자");
document.write(index + "<br>"); // 2
index = arr.indexOf("당곡");
document.write(index + "<br>"); // 1
// 두번째 당곡 글자의 위치
index = arr.indexOf("당곡", 2);
document.write(index + "<br>"); // 5
index = arr.indexOf("강남");
document.write(index); // -1
</script>
</body>
</html>
_0004_배열_삭제_맨뒤에_pop.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 삭제 - pop()</title>
</head>
<body>
<script>
/*
[개념] 배열 맨뒤에 요소 삭제
(1) pop()
(2) 배열의 가장 마지막 요소를 제거한다.
(3) 배열의 길이는(length)는 1씩 줄어든다.
(4) 제거한 요소를 반환한다.
*/
let arr = ["미금", "정자", "수서", "양재", "당곡"];
// 방법1) pop() 메서드 이용해 삭제
// arr.pop();
document.write(arr.pop() + "<br>"); // 당곡
document.write(arr + "<br>"); // 미금,정자,수서,양재
// 방법2) 새로운 배열을 만들어 삭제
let temp = arr;
arr = [];
for(let i=0; i<temp.length - 1; i++) {
arr.push(temp[i]);
}
document.write(arr); // 미금,정자,수서
</script>
</body>
</html>
_0004_배열_삭제_맨앞에_shift.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 삭제 - shift()</title>
</head>
<body>
<script>
/*
[개념] 배열 맨앞에 요소 삭제
(1) shift()
(2) 배열의 가장 첫번째 요소를 제거한다.
(3) 배열의 길이는(length)는 1씩 줄어든다.
(4) 제거한 요소를 반환한다.
*/
let arr = ["미금", "정자", "수서", "양재", "당곡"];
// 방법1) shift() 메서드 이용해 삭제
// arr.shift();
document.write(arr.shift() + "<br>"); // 미금
document.write(arr + "<br>"); // 정자,수서,양재,당곡
// 방법2) 새로운 배열을 만들어 삭제
let temp = arr;
arr = [];
for(let i=1; i<temp.length; i++) {
arr.push(temp[i]);
}
document.write(arr); // 수서,양재,당곡
</script>
</body>
</html>
_0004_배열_추가_맨뒤에_push.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 추가 - push()</title>
</head>
<body>
<script>
/*
[개념] 배열 맨뒤에 요소 추가
(1) push()
(2) 배열의 제일 끝에 새로운 요소를 추가한다.
(3) 추가하면 배열의 길이는(length)는 증가한다.
(4) 변경된 배열의 길이를 반환한다.
*/
let arr = ["미금", "정자", "수서"];
// 방법1) push() 메서드 이용해 추가
arr.push("양재");
// document.write(arr.push("양재") + "<br>"); // 4
document.write(arr + "<br>"); // 미금,정자,수서,양재
// 방법2) 인덱스를 지정하여 추가
arr[arr.length] = "당곡";
document.write(arr + "<br>"); // 미금,정자,수서,양재,당곡
</script>
</body>
</html>
_0004_배열_추가_맨앞에_unshift.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 추가 - unshift()</title>
</head>
<body>
<script>
/*
[개념] 배열 맨앞에 요소 추가
(1) unshift()
(2) 배열의 가장 앞에 새로운 요소를 추가한다.
(3) 추가하면 배열의 길이는(length)는 증가한다.
(4) 변경된 배열의 길이를 반환한다.
*/
let arr = ["미금", "정자", "수서"];
// 방법1) unshift() 메서드 이용해 추가
arr.unshift("양재");
// document.write(arr.unshift("양재") + "<br>"); // 4
document.write(arr + "<br>"); // 양재,미금,정자,수서
// 방법2) 인덱스를 지정하여 추가
arr.push(0);
for(let i=arr.length-1; i>0; i--) {
arr[i] = arr[i - 1];
}
arr[0] = "당곡";
document.write(arr + "<br>"); // 당곡,양재,미금,정자,수서
</script>
</body>
</html>
_0005_배열_삭제_splice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 삭제 - splice()</title>
</head>
<body>
<script>
/*
[개념] 배열 삭제
1) splice(시작위치, 삭제할 요소의 개수) : 시작위치부터 개수만큼 삭제
2) splice(시작위치) : 시작위치부터 이후 모두 삭제
*/
// 삭제
let arr = ["미금", "정자", "수서", "양재", "당곡"];
document.write(arr + "<br>");
arr.splice(3, 2); // 3번부터 2개 삭제
document.write(arr + "<br>"); // 미금,정자,수서
// 가장 많이 이용하는 것은 값 1개 삭제이며,
// 아래와 같은 형태로 사용한다.
// [문제] 수서만 삭제하시오.
let idx = arr.indexOf("수서");
arr.splice(idx, 1);
for(i in arr){
document.write(arr[i] + " ");
}
document.write("<br>");
</script>
</body>
</html>
_0006_배열_추출_slice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 추출 - slice()</title>
</head>
<body>
<script>
/*
[개념] 배열 추출
(1) slice(시작위치, 마지막위치)
(2) 원본 배열은 유지하고 시작위치 부터 마지막 위치 미만까지의
(3) 새로운 배열을 반환한다.
*/
let arr = ["미금", "정자", "수서", "양재", "당곡"];
let rs = arr.slice(); // 0번부터 끝까지 추출
document.write(rs + "<br>"); // 미금,정자,수서,양재,당곡
rs = arr.slice(1); // 1번부터 끝까지 추출
document.write(rs + "<br>"); // 정자,수서,양재,당곡
rs = arr.slice(1, 4); // 1번부터 4번미만까지 추출
document.write(rs + "<br>"); // 정자,수서,양재
document.write(arr); // 미금,정자,수서,양재,당곡
</script>
</body>
</html>
_0007_배열_연결_join.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 연결 - join()</title>
</head>
<body>
<script>
/*
[개념] 배열 연결
(1) join()
(2) 배열의 모든 요소를 하나의 문자열로 연결해 반환한다.
*/
let arr = ["미금", "정자", "수서", "양재", "당곡"];
let rs = arr.join();
document.write(rs + " : " + typeof rs + "<br>"); // 미금,정자,수서,양재,당곡 : string
rs = arr.join("");
document.write(rs + "<br>"); // 미금정자수서양재당곡
rs = arr.join("-");
document.write(rs + "<br>"); // 미금-정자-수서-양재-당곡
</script>
</body>
</html>
_0008_배열_합치기_concat.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 합치기 - concat()</title>
</head>
<body>
<script>
/*
[개념] 배열 합치기
(1) concat()
(2) 인자로 주어진 배열을
기존 배열에 합쳐서 새 배열을 반환한다.
*/
let x = [1, 2, 3];
let y = [4, 5, 6];
let rs = x.concat(y);
document.write(rs + "<br>"); // 1,2,3,4,5,6
</script>
</body>
</html>
_0009_배열_정렬_문자_sort.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 문자 정렬 - sort()</title>
</head>
<body>
<script>
/*
[개념] 배열 문자열 정렬
(1) sort()
(2) 문자열의 유니코드 값에 따라 오름차순으로 정렬한다.
(3) 내림차순으로 정렬하려면 익명함수로 제공해야한다.
*/
let str1 = "a";
let str2 = "b";
// charCodeAt(인덱스) 은 문자열을 아스키 코드로 변환해준다.
document.write(str1.charCodeAt(0) + ", " + str2.charCodeAt(0) + "<br>");
// 문자열을 대소비교할 경우, 아스키코드값으로 변환해 대소비교가 가능하다.
document.write((str1 < str2) + "<br>"); // true
document.write((str1 > str2) + "<br>"); // false
//arr = ["미금", "당곡", "정자", "수서", "양재"];
let arr = [140, 13, 27];
// 1 0 4 2 3
// 문자열[오름차순 정렬]
//arr.sort();
// 문자열[내림차순 정렬]
//arr.reverse();
//document.write(arr + "<br>"); // 당곡,미금,수서,양재,정자
// [오름차순 정렬] 숫자정렬 방법(1)
/* arr.sort(function(a, b){
if(a < b) return -1;
if(a > b) return 1;
if(a == b) return 0;
});
*/
//[내림차순 정렬] 숫자정렬 방법(2)
function sortNumber(a, b) {
if(a > b) return -1;
if(a < b) return 1;
if(a == b) return 0;
}
arr.sort(sortNumber);
// 반전시키기
// arr.reverse();
document.write(arr + "<br>"); // 정자,양재,수서,미금,당곡
</script>
</body>
</html>
_0009_배열_정렬_숫자1_sort.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 숫자 정렬 - sort()</title>
</head>
<body>
<script>
/*
[개념] 배열 숫자 정렬
(1) sort() 는 모두 문자열로 판단해 정렬하기 때문에
(2) 숫자의 경우 제대로 정렬이 되지 않는다.
(3) 숫자형식으로 정렬하려면 익명함수로 제공해야한다.
*/
let arr = [6, 7, 2, 1, 9, 77];
arr.sort();
document.write(arr + "<br>"); // 1,2,6,7,77,9
// [오름차순 정렬]
/*
arr.sort(function(a, b) {
return a - b;
});
*/
// [내림차순 정렬]
arr.sort(function(a, b) {
return b - a;
});
document.write(arr + "<br>"); // 77,9,7,6,2,1
</script>
</body>
</html>
_0009_배열_정렬_숫자2_sort구현.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 숫자 정렬 - sort() 구현하기</title>
</head>
<body>
<script>
/*
[개념] sort() 구현하기
*/
let arr = [6, 7, 2, 1, 9, 77];
// [오름차순 정렬]
/*
function check(a, b){
return a - b;
}
*/
// [내림차순 정렬]
function check(a, b){
return b - a;
}
function mySort(arr) {
for(let i=0; i<arr.length; i++) {
for(let j=i; j<arr.length; j++) {
if(check(arr[i], arr[j]) > 0) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
}
mySort(arr);
document.write(arr + "<br>"); // 77,9,7,6,2,1
</script>
</body>
</html>
_0010_배열_반전_reverse.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 반전 - reverse()</title>
</head>
<body>
<script>
/*
[개념] 배열 반전
(1) reverse()
(2) 배열의 순서를 반전한다.
*/
let arr = ["a", "c", "b", "d"];
// [오름차순 정렬]
arr.sort();
document.write(arr + "<br>"); // a,b,c,d
// [내림차순 정렬]
arr.reverse();
document.write(arr + "<br>"); // d,c,b,a
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차 (0) | 2023.08.31 |
|---|---|
| 2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차 (0) | 2023.08.30 |
| 2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차 (0) | 2023.08.29 |
| 2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차 (0) | 2023.08.28 |
| 2023.08.27 / Step 1 [DOM_기초문법_문자열] - 코딩 39 일차 (0) | 2023.08.27 |