01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
length 속성은 배열 내 요소의 수를 알고 싶을 때 사용할 수 있습니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
//01
const arrNum = [100, 200, 300, 400, 500];
document.querySelector(".sample01_N1").innerHTML = "1";
document.querySelector(".sample01_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample01_M1").innerHTML = "length";
document.querySelector(".sample01_P1").innerHTML = arrNum.length;
//02
const arrTxt = ['a', 'b', 'c', 'd', 'f'];
document.querySelector(".sample01_N2").innerHTML = "2";
document.querySelector(".sample01_Q2").innerHTML = "['a', 'b', 'c', 'd', 'f']";
document.querySelector(".sample01_M2").innerHTML = "length";
document.querySelector(".sample01_P2").innerHTML = arrTxt.length;
//03
const arr = [1, 2, ['a', 'b']] ;
document.querySelector(".sample01_N3").innerHTML = "3";
document.querySelector(".sample01_Q3").innerHTML = "[1, 2, ['a', 'b']]";
document.querySelector(".sample01_M3").innerHTML = "length";
document.querySelector(".sample01_P3").innerHTML = arr.length;
02. 배열 속성 : 배열 메서드 : join() : 배열 요소 문자열을 결합 : 반환(문자열)
join 함수는 매개변수로 들어온 리스트에 있는 요소 하나하나를 합쳐서 하나의 문자열로 반환하는 함수입니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200, 300, 400, 500];
const text1 = arrNum.join('');
const text2 = arrNum.join(' ');
const text3 = arrNum.join('★');
const text4 = arrNum.join('-');
document.querySelector(".sample02_N1").innerHTML = "1";
document.querySelector(".sample02_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M1").innerHTML = "join('')"; //원래 join아니고 배열이면 ,도 같이 나오는데 join은 안 나옴!
document.querySelector(".sample02_P1").innerHTML = text1;
document.querySelector(".sample02_N2").innerHTML = "2";
document.querySelector(".sample02_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M2").innerHTML = "join(' ')"; //띄어쓰기
document.querySelector(".sample02_P2").innerHTML = text2;
document.querySelector(".sample02_N3").innerHTML = "3";
document.querySelector(".sample02_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M3").innerHTML = "join('★')";
document.querySelector(".sample02_P3").innerHTML = text3;
document.querySelector(".sample02_N4").innerHTML = "4";
document.querySelector(".sample02_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample02_M4").innerHTML = "join('-')";
document.querySelector(".sample02_P4").innerHTML = text4;
03. 배열 메서드 : push() / pop()
push() 메서드는 배열 마지막 요소에 값을 추가 하여 숫자를 반환하고 pop()메서드는 배열 마지막 요소를 삭제하고 삭제된 요소를 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
//01
const arrNum = [100, 200, 300, 400, 500];
const arrPush = arrNum.push(600);
document.querySelector(".sample03_N1").innerHTML = "1";
document.querySelector(".sample03_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M1").innerHTML = "push(600)";
document.querySelector(".sample03_P1").innerHTML = arrPush; //6
document.querySelector(".sample03_A1").innerHTML = arrNum; //100,200,300,400,500,600
//02
const arrNum2 = [100, 200, 300, 400, 500];
const arrPush2 = arrNum2.pop();
document.querySelector(".sample03_N2").innerHTML = "2";
document.querySelector(".sample03_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample03_M2").innerHTML = "pop()";
document.querySelector(".sample03_P2").innerHTML = arrPush2; //500
document.querySelector(".sample03_A2").innerHTML = arrNum2; //100,200,300,400
04. 배열 메서드 : unshift() / shift()
unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.
shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 배열의 길이는 변합니다.
| 번호 | 기본값 | 메서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
const arrNum1 = [100, 200 ,300 ,400, 500];
const arrNumUnshift = arrNum1.unshift(600);
document.querySelector(".sample04_N1").innerHTML = "1";
document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample04_M1").innerHTML = "unshift()";
document.querySelector(".sample04_P1").innerHTML = arrNumUnshift;
document.querySelector(".sample04_A1").innerHTML = arrNum1;
const arrNum2 = [100, 200 ,300 ,400, 500];
const arrNumShift = arrNum2.shift();
document.querySelector(".sample04_N2").innerHTML = "2";
document.querySelector(".sample04_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample04_M2").innerHTML = "shift()";
document.querySelector(".sample04_P2").innerHTML = arrNumShift;
document.querySelector(".sample04_A2").innerHTML = arrNum2;
05. 배열 메서드 : reverse() / sort()
reverse()메서드는 문자열의 순서가 아닌 배열의 순서 인덱스 순서를 기준으로 위치를 뒤바꿉니다. 따라서 내림차 순으로 정렬하고자 한다면 먼저 sort()메서드로 오름차순
정렬을 해준 뒤 reverse()메서드를 사용해야 합니다.
sort() 메서드는 오름차순 기준으로 정렬을 수행하며, 수행 시 알파벳의 경우 a에 가까울수록 배열의 앞에 숫자의 경우 0에 가까울수록 배열의 앞에 위치하게 됩니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum1 = [100, 200 ,300 ,400, 500];
const arrNumReverse = arrNum1.reverse();
document.querySelector(".sample05_N1").innerHTML = "1";
document.querySelector(".sample05_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample05_M1").innerHTML = "reverse()";
document.querySelector(".sample05_P1").innerHTML = arrNumReverse;
const arrNum2 = [100, 200 ,300 ,400, 500];
const arrNumSort2 = arrNum2.sort();
document.querySelector(".sample05_N2").innerHTML = "2";
document.querySelector(".sample05_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample05_M2").innerHTML = "sort()";
document.querySelector(".sample05_P2").innerHTML = arrNumSort2;
const arrNum3 = [100, 200 ,300 ,400, 500];
const arrNumSort3 = arrNum3.sort(function(a,b){return b - a});
document.querySelector(".sample05_N3").innerHTML = "3";
document.querySelector(".sample05_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample05_M3").innerHTML = "sort(function(a,b){return b-a})";
document.querySelector(".sample05_P3").innerHTML = arrNumSort3;
const arrNum4 = [400, 500, 300, 200, 100];
const arrNumSort4 = arrNum4.sort(function(a,b){return a - b});
document.querySelector(".sample05_N4").innerHTML = "4";
document.querySelector(".sample05_Q4").innerHTML = "[500, 400, 300, 200, 100]";
document.querySelector(".sample05_M4").innerHTML = "sort(function(a,b){return a-b})";
document.querySelector(".sample05_P4").innerHTML = arrNumSort4;
const arrNum5 = ['c', 'b', 'e', 'w', 'h'];
const arrNumSort5 = arrNum5.sort(function(a,b){return a.localeCompare(b)});
document.querySelector(".sample05_N5").innerHTML = "5";
document.querySelector(".sample05_Q5").innerHTML = "['c', 'b', 'e', 'w', 'h']";
document.querySelector(".sample05_M5").innerHTML = "a.localeCompare(b)";
document.querySelector(".sample05_P5").innerHTML = arrNumSort5;
const arrNum6 = ['c', 'b', 'e', 'w', 'h'];
const arrNumSort6 = arrNum5.sort(function(a,b){return b.localeCompare(a)});
document.querySelector(".sample05_N6").innerHTML = "6";
document.querySelector(".sample05_Q6").innerHTML = "['c', 'b', 'e', 'w', 'h']";
document.querySelector(".sample05_M6").innerHTML = "b.localeCompare(a)";
document.querySelector(".sample05_P6").innerHTML = arrNumSort6;
06. 배열 메서드 : concat() : 펼침연산자
concat()메서드는 파라미터로 받은 배열이나 값들을 기존의 배열에 합쳐서, 새로운 배열을 만들어서 리턴합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum1 = [100, 200 ,300];
const arrNum2 = [400, 500 ,600];
const arrConcat = arrNum1.concat(arrNum2);
document.querySelector(".sample06_N1").innerHTML = "1";
document.querySelector(".sample06_Q1").innerHTML = "[100, 200, 300],[400, 500 ,600]";
document.querySelector(".sample06_M1").innerHTML = "arrNum1.concat(arrNum2)";
document.querySelector(".sample06_P1").innerHTML = arrConcat;
const arrSpread = [...arrNum1, ...arrNum2];
document.querySelector(".sample06_N2").innerHTML = "2";
document.querySelector(".sample06_Q2").innerHTML = "[100, 200, 300],[400, 500 ,600]";
document.querySelector(".sample06_M2").innerHTML = "[...arrNum1, ...arrNum2]";
document.querySelector(".sample06_P2").innerHTML = arrSpread;
07. 배열 메서드 : reduce() : reduceRight()
reduce()메서드는 배열(arr)의 각 element들에 대해서 파라미터로 입력받은 callback 함수를 실행하여, 하나의 리턴값을 반환하는 함수입니다.
reduce() 함수를 사용하면, 배열을 순차적으로 순회하면서 배열의 누적값을 구하는데 유용합니다.
reduceRight() 함수는 reduce() 함수와 기능은 동일하고, 배열의 오른쪽부터 연산을 수행합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum1 = [100, 200 ,300 ,400, 500];
const arrReduce1 = arrNum1.reduce(element => element);
document.querySelector(".sample07_N1").innerHTML = "1";
document.querySelector(".sample07_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M1").innerHTML = "reduce(element => element)";
document.querySelector(".sample07_P1").innerHTML = arrReduce1;
const arrNum2= [100, 200 ,300 ,400, 500];
const arrReduce2 = arrNum2.reduce((p, c) => p + c);
document.querySelector(".sample07_N2").innerHTML = "2";
document.querySelector(".sample07_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M2").innerHTML = "reduce((p, c) => p + c)";
document.querySelector(".sample07_P2").innerHTML = arrReduce2;
const arrNum3= [100, 200 ,300 ,400, 500];
let sum = 0;
for(let i=0; i<arrNum3.length; i++){
sum += arrNum3[i]
}
document.querySelector(".sample07_N3").innerHTML = "3";
document.querySelector(".sample07_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample07_M3").innerHTML = "for()";
document.querySelector(".sample07_P3").innerHTML = sum;
const arrNum4 = [[100, 200], [300, 400]];
const arrReduce4 = arrNum4.reduce((p, c) => p.concat(c));
document.querySelector(".sample07_N4").innerHTML = "4";
document.querySelector(".sample07_Q4").innerHTML = "[[100, 200], [300, 400]]";
document.querySelector(".sample07_M4").innerHTML = "reduce((p, c) => p.concat(c))";
document.querySelector(".sample07_P4").innerHTML = arrReduce4;
const arrNum5 = ["javascript", "react", "vue"];
const arrReduce5 = arrNum5.reduce((p, c) => p + c);
document.querySelector(".sample07_N5").innerHTML = "5";
document.querySelector(".sample07_Q5").innerHTML = "['javascript', 'react', 'vue']";
document.querySelector(".sample07_M5").innerHTML = "reduce((p, c) => p + c)";
document.querySelector(".sample07_P5").innerHTML = arrReduce5;
08. 배열 메서드 : slice()
slice() 메서드는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스, 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200 ,300 ,400, 500];
const result = arrNum.slice(2);
document.querySelector(".sample08_N1").innerHTML = "1";
document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M1").innerHTML = "arrNum.slice(2)";
document.querySelector(".sample08_P1").innerHTML = result;
const result2 = arrNum.slice(2, 3);
document.querySelector(".sample08_N2").innerHTML = "2";
document.querySelector(".sample08_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M2").innerHTML = "arrNum.slice(2, 3)";
document.querySelector(".sample08_P2").innerHTML = result2;
const result3 = arrNum.slice(2, 4);
document.querySelector(".sample08_N3").innerHTML = "3";
document.querySelector(".sample08_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M3").innerHTML = "arrNum.slice(2, 4)";
document.querySelector(".sample08_P3").innerHTML = result3;
const result4 = arrNum.slice(2, 5);
document.querySelector(".sample08_N4").innerHTML = "4";
document.querySelector(".sample08_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M4").innerHTML = "arrNum.slice(2, 5)";
document.querySelector(".sample08_P4").innerHTML = result4;
const result5 = arrNum.slice(-2);
document.querySelector(".sample08_N5").innerHTML = "5";
document.querySelector(".sample08_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M5").innerHTML = "arrNum.slice(-2)";
document.querySelector(".sample08_P5").innerHTML = result5;
const result6 = arrNum.slice(-2, 5);
document.querySelector(".sample08_N6").innerHTML = "6";
document.querySelector(".sample08_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M6").innerHTML = "arrNum.slice(-2, 5)";
document.querySelector(".sample08_P6").innerHTML = result6;
09. 배열 메서드 : splice()
splice() 메서드는 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있습니다. 첫번째 인자로 시작 인덱스, 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
arrNum = [100, 200 ,300 ,400, 500];
const result = arrNum.splice(2);
document.querySelector(".sample09_N1").innerHTML = "1";
document.querySelector(".sample09_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M1").innerHTML = "arrNum.splice(2)";
document.querySelector(".sample09_P1").innerHTML = result;
document.querySelector(".sample09_A1").innerHTML = arrNum;
arrNum2 = [100, 200 ,300 ,400, 500];
const result2 = arrNum2.splice(2, 3);
document.querySelector(".sample09_N2").innerHTML = "2";
document.querySelector(".sample09_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M2").innerHTML = "arrNum.splice(2, 3)";
document.querySelector(".sample09_P2").innerHTML = result2;
document.querySelector(".sample09_A2").innerHTML = arrNum2;
arrNum3 = [100, 200 ,300 ,400, 500];
const result3 = arrNum3.splice(2, 3, 'javascript');
document.querySelector(".sample09_N3").innerHTML = "3";
document.querySelector(".sample09_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M3").innerHTML = "arrNum.splice(2, 3, 'javascript')";
document.querySelector(".sample09_P3").innerHTML = result3;
document.querySelector(".sample09_A3").innerHTML = arrNum3;
arrNum4 = [100, 200 ,300 ,400, 500];
const result4 = arrNum4.splice(1, 1, 'javascript');
document.querySelector(".sample09_N4").innerHTML = "4";
document.querySelector(".sample09_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M4").innerHTML = "arrNum.splice(1, 1, 'javascript')";
document.querySelector(".sample09_P4").innerHTML = result4;
document.querySelector(".sample09_A4").innerHTML = arrNum4;
arrNum5 = [100, 200 ,300 ,400, 500];
const result5 = arrNum5.splice(1, 0, 'javascript');
document.querySelector(".sample09_N5").innerHTML = "5";
document.querySelector(".sample09_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M5").innerHTML = "arrNum.splice(1, 0, 'javascript')";
document.querySelector(".sample09_P5").innerHTML = result5;
document.querySelector(".sample09_A5").innerHTML = arrNum5;
arrNum6 = [100, 200 ,300 ,400, 500];
const result6 = arrNum6.splice(0, 4, 'javascript');
document.querySelector(".sample09_N6").innerHTML = "6";
document.querySelector(".sample09_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample09_M6").innerHTML = "arrNum.splice(0, 4, 'javascript')";
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;
10. 배열 메서드 : indexOf() / lastIndexOf() / includes()
indexOf()메서드는 앞에서부터 검색할 값을 찾기 시작하는 속성입니다. 시작할 위치가 생략이 될 경우에는 시작위치의 값을 0으로 인식하여 처음부터 검색을 시작하며 일치하는
결과값이 없을 경우에는 -1로 결과를 리턴합니다.
lastIndexOf()메서드는 끝에서부터 검색할 값을 찾기 시작합니다. 시작위치가 생략이 될 경우에도 맨 끝에서부터 검색을 시작합니다.
includes()메서드는 메서드는 배열이 항목 사이에 특정 값을 포함하는지 여부를 확인하여 불린(true, false)으로 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200, 300, 400, 500];
const arrIndex = arrNum.indexOf(200);
document.querySelector(".sample10_N1").innerHTML = "1";
document.querySelector(".sample10_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M1").innerHTML = "arrNum.indexOf(200)";
document.querySelector(".sample10_P1").innerHTML = arrIndex;
const arrNum2 = [100, 200, 300, 400, 500];
const arrIndex2 = arrNum2.indexOf(300);
document.querySelector(".sample10_N2").innerHTML = "2";
document.querySelector(".sample10_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M2").innerHTML = "arrNum.indexOf(200)";
document.querySelector(".sample10_P2").innerHTML = arrIndex2;
const arrNum3 = [100, 200, 300, 400, 500];
const arrIndex3 = arrNum3.indexOf(600);
document.querySelector(".sample10_N3").innerHTML = "3";
document.querySelector(".sample10_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M3").innerHTML = "arrNum3.indexOf(600)";
document.querySelector(".sample10_P3").innerHTML = arrIndex3;
const arrNum4 = [100, 200, 300, 400, 200];
const arrIndex4 = arrNum4.lastIndexOf(200);
document.querySelector(".sample10_N4").innerHTML = "4";
document.querySelector(".sample10_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M4").innerHTML = "arrNum4.lastindexOf(200)";
document.querySelector(".sample10_P4").innerHTML = arrIndex4;
const arrNum5 = [100, 200, 300, 400, 200];
const arrIndex5 = arrNum5.includes(200);
document.querySelector(".sample10_N5").innerHTML = "5";
document.querySelector(".sample10_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M5").innerHTML = "arrNum5.includes(200)";
document.querySelector(".sample10_P5").innerHTML = arrIndex5;
const arrNum6 = [100, 200, 300, 400, 200];
const arrIndex6 = arrNum6.includes(600);
document.querySelector(".sample10_N6").innerHTML = "6";
document.querySelector(".sample10_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M6").innerHTML = "arrNum6.includes(600)";
document.querySelector(".sample10_P6").innerHTML = arrIndex6;
11. 배열 메서드 : find() / findIndex()
find()메서드는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환합니다. 만약 조건을 일치하는 경우가 없다면, undefined를 반환합니다.
findIndex()메서드는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 인덱스를 반환합니다. 조건을 일치하는 경우가 없다면, -1을 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200, 300, 400, 500];
// const result = arrNum.find(function (element){
// return element === 300;
// });
// const result = arrNum.find((element) => {
// return element === 300;
// });
// const result = arrNum.find(element => {
// return element === 300;
// });
const result = arrNum.find(e => e === 300);
document.querySelector(".sample11_N1").innerHTML = "1";
document.querySelector(".sample11_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M1").innerHTML = "find(e => e === 300)";
document.querySelector(".sample11_P1").innerHTML = result;
const result2 = arrNum.find(e => e === 600);
document.querySelector(".sample11_N2").innerHTML = "2";
document.querySelector(".sample11_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M2").innerHTML = "find(e => e === 600)";
document.querySelector(".sample11_P2").innerHTML = result2;
const arrText = ['javascript', 'jquery', 'react'];
const result3 = arrText.find(el => el ==="javascript");
document.querySelector(".sample11_N3").innerHTML = "3";
document.querySelector(".sample11_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M3").innerHTML = "find(e => e === 'javascript')";
document.querySelector(".sample11_P3").innerHTML = result3;
const result4 = arrText.findIndex(el => el ==="javascript");
document.querySelector(".sample11_N4").innerHTML = "4";
document.querySelector(".sample11_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M4").innerHTML = "findIndex(e => e === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4;
const result5 = arrText.findIndex(el => el ==="html");
document.querySelector(".sample11_N5").innerHTML = "5";
document.querySelector(".sample11_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M5").innerHTML = "findIndex(e => e === 'html')";
document.querySelector(".sample11_P5").innerHTML = result5;
12. 배열 메서드 : filter()
filter() : 조건에 만족하는 배열 요소를 검색할 때 : 반환(배열)
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.filter(el => el === 300);
document.querySelector(".sample12_N1").innerHTML = "1";
document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M1").innerHTML = "filter(el => el === 300)";
document.querySelector(".sample12_P1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.filter(el => el === 600);
document.querySelector(".sample12_N2").innerHTML = "2";
document.querySelector(".sample12_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M2").innerHTML = "filter(el => el === 600)";
document.querySelector(".sample12_P2").innerHTML = result2;
//필터와 파인드의 차이점 (? 찾아보기)
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.filter(el => el >= 300);
document.querySelector(".sample12_N3").innerHTML = "3";
document.querySelector(".sample12_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample12_M3").innerHTML = "filter(el => el >= 300)";
document.querySelector(".sample12_P3").innerHTML = result3;
13. 배열 메서드 : map()
map()메서드는 배열의 모든 값들을 순환 후 새로운 배열을 반환하기 위해 사용됩니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.map(el => el);
document.querySelector(".sample13_N1").innerHTML = "1";
document.querySelector(".sample13_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M1").innerHTML = "arrNum.map(el => el)";
document.querySelector(".sample13_P1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map(el => el + "J");
document.querySelector(".sample13_N2").innerHTML = "2";
document.querySelector(".sample13_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M2").innerHTML = "arrNum.map(el => el + 'J')";
document.querySelector(".sample13_P2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum2.map(el => el + 100);
document.querySelector(".sample13_N3").innerHTML = "3";
document.querySelector(".sample13_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M3").innerHTML = "arrNum.map(el => el + 100))";
document.querySelector(".sample13_P3").innerHTML = result3;
//제일 많이 사용
const arrNum4 = [{a:100}, { a:200}, {a:300}];
const result4 = arrNum4.map(el => el.a);
document.querySelector(".sample13_N4").innerHTML = "4";
document.querySelector(".sample13_Q4").innerHTML = "[{a:100}, { a:200}, {a:300}]";
document.querySelector(".sample13_M4").innerHTML = "arrNum.map(el => el.a)";
document.querySelector(".sample13_P4").innerHTML = result4;
14. 배열 메서드 : Array.from()
Array.from()메서드는 유사 배열 객체나 반복 가능한 객체를 복사하여 새로운 배열 객체를 만듭니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
const text = "javascript";
const result = Array.from(text);
document.querySelector(".sample14_N1").innerHTML = "1";
document.querySelector(".sample14_Q1").innerHTML = "javascript";
document.querySelector(".sample14_M1").innerHTML = "Array.from(text)";
document.querySelector(".sample14_P1").innerHTML = result;
const text2 = "javascript";
const result2 = Array.from(text2, el => el + "10");
document.querySelector(".sample14_N2").innerHTML = "2";
document.querySelector(".sample14_Q2").innerHTML = "javascript";
document.querySelector(".sample14_M2").innerHTML = "Array.from(text2, el => el + '10')";
document.querySelector(".sample14_P2").innerHTML = result2;
console.log(result2)
const text3 = "javascript";
const result3 = [...text3].map(el => el);
document.querySelector(".sample14_N3").innerHTML = "3";
document.querySelector(".sample14_Q3").innerHTML = "javascript";
document.querySelector(".sample14_M3").innerHTML = "[...text3].map(el => el)";
document.querySelector(".sample14_P3").innerHTML = result3;