반응형
9.3 배열 요소 추출/검색
자바스크립트 배열에서 특정 요소의 위치를 파악하는 데는 indexOf() 메서드를 사용하고 특정 요소의 존재 여부를 확인하기 위해서는 includes() 메서드가 사용된다. 배열에서 특정 요소를 추출하거나 검색한느 데에는 splice()와 find() 메서드가 용된다. 그리고 forEach() 메서드를 이용하면 배열의 요소를 순회하면서 요소를 처리할 수 있다. 또한 map() 메서드는 배열 요소 각각에 함수를 적용해서 새로운 배열을 만드는데 사용된다.
9.3.1 indexOf() 메서드
indexOf() 메서드는 배열에서 특정 문자열의 위치, 즉 인덱스 값을 반환한다.
| 예제 9-11. indexOf() 메서드 사용 예 | array_index_of.html | 코드 원문 |
<p id="show"></p>
<script>
const fruits = ["사과", "오렌지", "수박", "감", "수박", "딸기", "키위"];
let index1 = fruits.indexOf("수박");
let index2 = fruits.indexOf("수박", 3);
let index3 = fruits.indexOf("바나나");
let text ="";
text += index1 + "<br>";
text += index2 + "<br>";
text += index3;
document.getElementById("show").innerHTML = text;
</script>| 예제 9-11. indexOf() 메서드 사용 예 | array_index_of.html | 코드 분석 |
<p id="show"></p>
<script>
const fruits = ["사과", "오렌지", "수박", "감", "수박", "딸기", "키위"];
let index1 = fruits.indexOf("수박");
/* indexOf 메서드를 사용해서 배열 fruits에서 '수박'이 처음 발생하는 위치인
인덱스 2를 반환한다. */
let index2 = fruits.indexOf("수박", 3);
/* indexOf 메서드를 사용해서 배열 fruits에서 인덱스 3의 위치에서부터
문자열 '수박'을 검색한다. */
let index3 = fruits.indexOf("바나나");
/* indexOf 메서드를 사용해서 배열 fruits에서 문자열 '바나나'를 검색한다.
해당 요소가 존재하지 않기 때문에 -1를 반환한다. */
let text ="";
text += index1 + "<br>";
text += index2 + "<br>";
text += index3;
document.getElementById("show").innerHTML = text;
</script>
9.3.2 includes() 메서드
includes() 메서드는 배열에서 특정 요소의 존재 여부를 파악하는데 사용된다.
| 예제 9-12. includes() 메서드 사용 예 | array_includes.html | 코드 원문 |
<p id="show"></p>
<script>
const fruits = ["사과", "오렌지", "수박", "감", "키위"];
let result1 = fruits.includes("키위");
let result2 = fruits.includes("파인애플");
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>| 예제 9-12. includes() 메서드 사용 예 | array_includes.html | 코드 원문 |
<p id="show"></p>
<script>
const fruits = ["사과", "오렌지", "수박", "감", "키위"];
let result1 = fruits.includes("키위");
/* includes() 메서드를 사용해서 "키위"가 있는지 판별 있으므로
true를 반환한다. */
let result2 = fruits.includes("파인애플");
/* includes() 메서드를 사용해서 "파인애플"이 있는지 판별 없으므로
false를 반환한다. */
let text = "";
text += result1 + "<br>";
text += result2;
document.getElementById("show").innerHTML = text;
</script>
9.3.3 slice() 메서드
slice() 메서드는 배열에서 인덱스를 이용해서 특정 요소를 추출하는 데 사용된다.
| 예제 9-13. slice() 메서드 사용 예 | array_slice.html | 코드 원문 |
<p id="show"></p>
<script>
const animals = ["사자", "호랑이", "사슴", "펭귄", "여우", "앵무새"];
let arr1 = animals.slice(1, 3);
let arr2 = animals.slice(2,);
let arr3 = animals.slice(-3, -1);
let text = "";
text += arr1 + "<br>";
text += arr2 + "<br>";
text += arr3;
document.getElementById("show").innerHTML = text;
</script>| 예제 9-13. slice() 메서드 사용 예 | array_slice.html | 코드 분석 |
<p id="show"></p>
<script>
const animals = ["사자", "호랑이", "사슴", "펭귄", "여우", "앵무새"];
// 배열 animals 선언
let arr1 = animals.slice(1, 3);
/* 메서드 slice()를 사용해서 인덱스 1부터 3까지의 요소 1에서 2까지의
요소를 추출한 새로운 배열을 반환하고 배열 arr1에 저장 */
let arr2 = animals.slice(2,);
/* 메서드 slice()를 사용해서 인덱스 2부터 끝까지의 요소인 '사슴', '펭귄',
'여우', '앵무새'로구성된 새로운 배열을 반환하고 배열 arr2에 저장 */
let arr3 = animals.slice(-3, -1);
/* 메서드 slice()를 사용해서 인덱스 끝에서 3번째 요소부터 2번째 요소인
'펭귄', '여우'를 요소로 하는 새로운 배열을 반환하고 배열 arr3에 저장*/
let text = "";
text += arr1 + "<br>";
text += arr2 + "<br>";
text += arr3;
document.getElementById("show").innerHTML = text;
</script>
9.3.4 find() 메서드
find() 메서드는 사용법이 앞에서 설명한 다른 메서드보다 조금 복잡하다. find() 메서드는 배열에서 특정 요소를 찾는 조건을 콜백 함수(callback function)를 통해 전달해서 조건에 해당하는 첫번째 요소값을 반환한다.
다음은 배열의 요소 중 처음으로 90 이상이 되는 수를 찾는 프로그램이다.
| 예제 9-14. find() 메서드의 기본 형 | array_find1.html | 코드 원문 |
<p id="show"></p>
<script>
const scores = [78, 84, 98, 100, 67, 87];
arr = scores.find(function(score) {
return score>=90;
});
document.getElementById("show").innerHTML = arr;
</script>| 예제 9-14. find() 메서드의 기본 형 | array_find1.html | 코드 원문 |
<p id="show"></p>
<script>
const scores = [78, 84, 98, 100, 67, 87];
arr = scores.find(function(score) {
/* 메서드 find()를 이용해서배열 scores에서 90이 넘는 값을 찾는다. */
return score>=90;
});
document.getElementById("show").innerHTML = arr;
</script>
9.3.5 forEach() 메서드
forEach() 메서드는 배열 각 요소에 대해서 매겨변수로 설정된 함수를 실행한다. 다음은 forEach() 메서드를 이용해서 배열의 요소 값과 인덱스를 출력하는 예이다.
| 예제 9-15. forEach() 메서드로 배열의 요소 값과 인덱스 출력하기 | array_for_each1.html | 코드 원문 |
<p id="show"></p>
<script>
const animals = ["사자", "호랑이", "사슴", "펭귄"];
let text = "";
animals.forEach(func);
function func(item, index) {
text += index +":" + item + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 9-15. forEach() 메서드로 배열의 요소 값과 인덱스 출력하기 | array_for_each1.html | 코드 원문 |
<p id="show"></p>
<script>
const animals = ["사자", "호랑이", "사슴", "펭귄"];
// 배열 animals를 선언한다.
let text = "";
animals.forEach(func);
// 메서드 forEach()를 선언한다. 콜백되서 반복된다.
function func(item, index) {
text += index +":" + item + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>
9.3.6 map() 메서드
map() 메서드는 배열 각 요소에 대해 매개변수로 설정된 함수를 실행해서 얻어진 요소들로 구성된 새로운 배열을 반환한다.
| 예제 9-16. map() 메서드 사용 예 | array_map.html | 코드 원문 |
<p id="show"></p>
<script>
const numbers = [1,2,3,4,5];
let arr = numbers.map(function(num){
return num * num;
})
document.getElementById("show").innerHTML = arr;
</script>| 예제 9-16. map() 메서드 사용 예 | array_map.html | 코드 분석 |
<p id="show"></p>
<script>
const numbers = [1,2,3,4,5];
// 배열 numbers 선언
let arr = numbers.map(function(num){
/* map() 메서드를 이용해서 numbers에서 새로운 배열을 생성하고
배열 arr에 저장 */
return num * num;
})
document.getElementById("show").innerHTML = arr;
</script>
9.4 배열 병합/복사/정렬
자바스크립트에서 두 개 이상의 배열을 서로 병합하는 데에는 concat() 메서드를 사용한다. 그리고 배열에서 요소들을 다른 위치에 복사하는 데는 copyWithin() 메서드를 사용한다.
9.4.1 concat() 메서드
다음은 concat() 메서드를 사용해서 두 개의 배열을 서로 연결하는 예이다.
| 예제 9-17. concat() 메서드 사용 예 | array_concat.html | 코드 원문 |
<p id="show"></p>
<script>
const animals1 = ["사자", "호랑이", "사슴", "펭귄"];
const animals2 = ["개미", "메뚜기", "풍뎅이"];
let arr = animals1.concat(animals2);
let text = "";
text += arr + "<br>";
text += animals1;
document.getElementById("show").innerHTML = text;
</script>| 예제 9-17. concat() 메서드 사용 예 | array_concat.html | 코드 원문 |
<p id="show"></p>
<script>
const animals1 = ["사자", "호랑이", "사슴", "펭귄"];
// 배열 animals 선언
const animals2 = ["개미", "메뚜기", "풍뎅이"];
let arr = animals1.concat(animals2);
/* 메서드 concat를 사용해서 배열 animals1에 animals2를 병합해서
만든 배열을 반환해서 배열 arr를 선언한다. */
let text = "";
text += arr + "<br>";
text += animals1;
document.getElementById("show").innerHTML = text;
</script>
9.4.2. copyWithin() 메서드
copyWithin() 메서드는 배열에서 특정 요소들을 배열 내 다른 위치에 복사하는데 사용한다.
| 예제 9-18. copyWithin() 메서드 사용 예1 | array_copyㅇ_within1.html | 코드 원문 |
<p id="show"></p>
<script>
const numbers = [1,2,3,4,5,6,6,7,8,9,10];
let arr = numbers.copyWithin(4, 0);
// 메서드 copyWithin를 사용해서 인덱스 4에서 끝까지 요소를 복사한다.
let text = "";
text += arr + "<br>";
text += numbers;
document.getElementById("show").innerHTML = text;
</script>| 예제 9-18. copyWithin() 메서드 사용 예1 | array_copyㅇ_within1.html | 코드 원문 |
<p id="show"></p>
<script>
const numbers = [1,2,3,4,5,6,6,7,8,9,10];
let arr = numbers.copyWithin(4, 0);
let text = "";
text += arr + "<br>";
text += numbers;
document.getElementById("show").innerHTML = text;
</script>numbers.copyWithin(4, 0)에서 4는 배열 요소의 복사가 시작되는 위치, 즉 인덱스를 의미한다. 그리고 0은 인덱스 0부터 끝까지의 요소를 다른 위치에 복사한다는 의미이다. 따라서 numbers.copyWithin(4, 0)은 1, 2, 3, 4, 5, ...10의 요소를 인덱스 4 위치에 복사하기 때문에 배열 arr은 1,2,3,4,1,2,3,4,5,6 의 요소 값을 가진다.
copyWithin() 메서드에서는 원래의 배열에 대해 덮어쓰기로 복사 작업이 진행된다. 따라서 배열 numbers의 값도 배열 arr과 동일하다.
또한 copyWithin() 메서드는 다음 예제에서와 같이 일부 요소들만을 배열의 다른 위치에 복사할 수 있다.
| 예제 9-19. copyWithin() 메서드 사용 예 2 | array_copy_within2.html | 코드 원문 |
<p id="show"></p>
<script>
const numbers = [1,2,3,4,5,6,7,8,9,10];
let arr = numbers.copyWithin(5, 0, 3);
document.getElementById("show").innerHTML = arr;
</script>| 예제 9-19. copyWithin() 메서드 사용 예 2 | array_copy_within2.html | 코드 분석 |
<p id="show"></p>
<script>
const numbers = [1,2,3,4,5,6,7,8,9,10];
let arr = numbers.copyWithin(5, 0, 3);
/* 메서드 copyWithin 사용해서 인덱스 5 위치에 인덱스 0에서부터
3개의 요소를 복사한다. */
document.getElementById("show").innerHTML = arr;
</script>number.copyWith(5, 0, 3)에서 5는 배열 요소의 복사가 시작되는 인덱스를 의미한다. 그리고 0과 3은 각각 배열의 시작 인덱스와 끝 인덱스를 나타낸다. 여기서 끝 인덱스를 나타내는 3에서 3은 포함되지 않기 때문에 실제 끝 인덱스는 2가 된다.
따라서 number.copyWithin(5, 0, 3)는 인덱스 5의 위치에 인덱스 0에서 2까지의 요소인 1, 2, 3을 복사한다. 배열 arr은 1,2,3,4,5,1,2,3,9,10의 요소 값을 가진다.
9.4.3 sort()/reverse() 메서드
sort() 메서드는 배열에서 요소들을 오름차순, 즉 가나다 순으로 정렬할 때 사용한다. 반대로 내림차순으로 요소들을 정렬할 때는 reverse() 메서드를 사용한다.
| 예제 9-20. sort() 메서드 사용 예 | array_sort.html | 코드 원문 |
<p id="show"></p>
<script>
const animals = ["코끼리", "사자", "호랑이", "사슴", "펭귄", "풍뎅이"];
let text = "";
animals.sort();
text += animals + "<br>";
animals.reverse();
text += animals;
document.getElementById("show").innerHTML = text;
</script>| 예제 9-20. sort() 메서드 사용 예 | array_sort.html | 코드 원문 |
<p id="show"></p>
<script>
const animals = ["코끼리", "사자", "호랑이", "사슴", "펭귄", "풍뎅이"];
let text = "";
animals.sort();
// sort() 메서드를 사용해서 배열 animals의 요소들을 오름차순으로 정렬한다.
text += animals + "<br>";
animals.reverse();
// reverse() 메서드를 사용해서 배열 reverse()이 요소들을 내림차순으로 정렬한다.
text += animals;
document.getElementById("show").innerHTML = text;
</script>
9.5 2차원 배열
자바스크립트에서 2차원 배열은 다음과 같이 배열의 각 요소가 배열인 경우를 의미한다.
| const scores = [[85, 97], [79, 88], [90, 76], [80, 78]]; |
9.5.1 2차원 배열 생성
다음 코드에서는 4행 2열의 2차원 배열을 생성한다.
| 예제 9-21. 2차원 배열 생성 예 | array_2d1.html | 코드 원문 |
<p id="show"></p>
<script>
const arr = [[1,2], [3,4], [4,5], [5,6], [7,8]];
let text = "";
text += arr[2][0] + "<br>";
text += arr[2][1];
document.getElementById("show").innerHTML = text;
</script>| 예제 9-21. 2차원 배열 생성 예 | array_2d1.html | 코드 원문 |
<p id="show"></p>
<script>
const arr = [[1,2], [3,4], [4,5], [5,6], [7,8]];
let text = "";
text += arr[2][0] + "<br>";
// 3행 1열 값을 변수 text에 저장한다.
text += arr[2][1];
// 3행 2열 값을 변수 text에 저장한다.
document.getElementById("show").innerHTML = text;
</script>
다음은 new 연산자와 Array() 메서드를 이용해서 5행 3열의 빈 2차원 배열을 생성하는 예시이다.
| 예제 9-22. 2차원 배열 생성 예 | array_2d2.html | 코드 원문 |
<p id="show"></p>
<script>
const arr = new Array(5);
for (var i=0; i<arr.length; i++) {
arr[i] = new Array(3);
}
document.getElementById("show").innerHTML = arr;
</script>| 예제 9-22. 2차원 배열 생성 예 | array_2d2.html | 코드 원문 |
<p id="show"></p>
<script>
const arr = new Array(5);
// 5개의 요소를 가지는 배열을 생성한다.
for (var i=0; i<arr.length; i++) {
arr[i] = new Array(3);
// 5개의 요소에 각각 3개의 요소를 가지게 한다.
}
document.getElementById("show").innerHTML = arr;
</script>
9.5.2 2차원 배열에 값 입력
다음 예제에서는 4행 3열의 빈 요소로 구성된 2차원 배열을 생성한 다음 For 문을 이용하여 2차원 배열의 각 요소에 값을 입력합니다.
| 예제 9-23. 2차원 배열에 값 입력 | array_2d_insert.html | 코드 원문 |
<p id="show"></p>
<script>
const arr = new Array(4);
for (var i=0; i<arr.length; i++) {
arr[i] = new Array(3);
}
let num = 1;
for (var i=0; i<4; i++) {
for (var j=0; j<3; j++){
arr[i][j] = num;
num++;
}
}
let text = "";
for (var i=0; i<4; i++) {
for (var j=0; j<3; j++) {
text += arr[i][j] + " ";
}
text += "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 9-23. 2차원 배열에 값 입력 | array_2d_insert.html | 코드 분석 |
<p id="show"></p>
<script>
const arr = new Array(4);
// 4개의 요소를 가진 배열 arr를 선언한다.
for (var i=0; i<arr.length; i++) {
arr[i] = new Array(3);
/* arr[i]의 각각의 요소에 배열 3개씩 할당한다.
배열 arr은 4행 3열로 구성된 2차원 배열이 된다. */
}
let num = 1;
for (var i=0; i<4; i++) {
for (var j=0; j<3; j++){
arr[i][j] = num;
num++;
}
}
let text = "";
for (var i=0; i<4; i++) {
for (var j=0; j<3; j++) {
text += arr[i][j] + " ";
}
text += "<br>";
}
document.getElementById("show").innerHTML = text;
</script>
9.5.3 2차원 배열의 합계와 평균
다음은 2차원 배열을 이용하여 3명 학생 4과목 성적의 합계와 평균을 구하는 예제이다.
| 예제 9-24. 2차원 배열의 합계와 평균 | array__2d_avg.html | 코드 원문 |
<p id="show"></p>
<script>
const scores = [[83, 90, 70, 87],[87,93,62,83],[98,90,77,97]];
let sum, avg;
text = "";
for(var i=0; i<4; i++) {
sum = 0;
for (var j=0; j<4; j++) {
sum += scores[i][i];
}
avg = sum/4;
text += i + "번째 학생의 합계 :" + sum + ", 평균: " + avg +"<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 9-24. 2차원 배열의 합계와 평균 | array__2d_avg.html | 코드 원문 |
<p id="show"></p>
<script>
const scores = [[83, 90, 70, 87],[87,93,62,83],[98,90,77,97]];
// 2차원 배열 scores 선언
let sum, avg;
text = "";
for(var i=0; i<4; i++) {
sum = 0;
for (var j=0; j<4; j++) {
sum += scores[i][i];
}
avg = sum/4;
text += i + "번째 학생의 합계 :" + sum + ", 평균: " + avg +"<br>";
}
document.getElementById("show").innerHTML = text;
</script>
반응형
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.2~10.3 (0) | 2023.10.15 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.1 (0) | 2023.10.15 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.1 ~ 9.2 (0) | 2023.10.14 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.4 ~ 8.5 (0) | 2023.10.13 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.3 (0) | 2023.10.13 |