배열 메서드 총정리
배열 메서드를 총정리 하는 시간을 가지겠습니다.
01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
배열의 길이를 구하기 위해서 length 속성을 사용한다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | length | 5 |
| 2 | ['a''b''c''d''f'] | length | 5 |
| 3 | [1, 2, ['a', 'b']] | length | 3 |
{
//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() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | join('') | 100200300400500 |
| 2 | [100, 200, 300, 400, 500] | join(' ') | 100200300400500 |
| 3 | [100, 200, 300, 400, 500] | join('★') | 100★200★300★400★500 |
| 4 | [100, 200, 300, 400, 500] | join('-') | 100-200-300-400-500 |
{
const arrNum = [100, 200, 300, 400, 500];
const text1 = arrNum.join('');
const text2 = arrNum.join('');
const text3 = arrNum.join('★');
const text4 = arrNum.join('-');
//01
document.querySelector(".sample02_N1").innerHTML = "1";
document.querySelector(".sample02_Q1").innerHTML = "[100, 200 ,300, 400, 500]";
document.querySelector(".sample02_M1").innerHTML = "join('')";
document.querySelector(".sample02_P1").innerHTML = text1;
//02
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;
//03
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;
//04
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() 메서드는 배열 마지막 요소를 삭제합니다.
| 번호 | 기본값 | 매서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | push(600) | 6 | 100,200,300,400,500,600 |
| 2 | [100, 200, 300, 400, 500] | pop() | 500 | 100,200,300,400 |
{
//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() 배열 처음 요소에 삭제
| 번호 | 기본값 | 매서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum1.unshift(600) | 6 | 600,100,200,300,400,500 |
| 2 | [100, 200, 300, 400, 500] | arrNum1.shift() | 100 | 200,300,400,500 |
{
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() 메서드는 배열 요소를 정렬
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | reverse(); | 500,400,300,200,100 |
| 2 | [100, 200, 300, 400, 500] | sort() | 100,200,300,400,500 |
| 3 | [100, 200, 300, 400, 500] | sort(function(a, b) {return b - a} | 500,400,300,200,100 |
| 4 | [500, 400, 300, 200, 100] | sort(function(a, b) {return a - b} | 100,200,300,400,500 |
| 5 | ['c', 'b', 'e', 'w', 'h'] | sort(function(a, b) {return a.localeCompare(b);} | b,c,e,h,w |
| 6 | ['c', 'b', 'e', 'w', 'h'] | sort(function(a, b) {return b.localeCompare(a);} | w,h,e,c,b |
{
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 = [500, 400, 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 = "sort(function(a, b) {return a.localeCompare(b);}";
document.querySelector(".sample05_P5").innerHTML = arrNumSort5;
const arrNum6 = ['c', 'b', 'e', 'w', 'h'];
const arrNumSort6 = arrNum6.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 = "sort(function(a, b) {return return b.localeCompare(a);}";
document.querySelector(".sample05_P6").innerHTML = arrNumSort6;
}
06. 배열 메서드 : concat() : 펼침연산자 : 배열요소 결합
concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300], [400,500,600] | arrNum1.concat(arrNum2) | 100,200,300,400,500,600 |
| 2 | [[100, 200, 300], [400, 500, 600] | [...arrNum1, ...arrNum2] | 100,200,300,400,500,600 |
{
const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const arrNumConcat = 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 = arrNumConcat;
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() 메서드는 열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
reduceRight() 메서드는 누적기에 대해 함수를 적용하고 배열의 각 값 (오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여야합니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum1.reduce(element => element) | 100 |
| 2 | [100, 200, 300, 400, 500] | arrNum2.reduce((p, c) => p + c) | 1500 |
| 3 | [100, 200, 300, 400, 500] | for() | 1500 |
| 4 | [[100, 200], [300, 400]] | arrNum4.reduce((p, c) => p.concat(c)) | 100,200,300,400 |
| 5 | ["javascript", "react", "vue"] | arrNum5.reduceRight((p, c) => p + c); | vuereactjavascript |
{
const arrNum1 = [100, 200, 300, 400, 500];
const arrReduce = 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 = "arrNum1.reduce(element => element)";
document.querySelector(".sample07_P1").innerHTML = arrReduce;
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 = "arrNum2.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 = "arrNum4.reduce((p, c) => p.concat(c))";
document.querySelector(".sample07_P4").innerHTML = arrReduce4;
const arrNum5 = ["javascript", "react", 'vue'];
const arrReduce5 = arrNum5.reduceRight((p, c) => p + c);
document.querySelector(".sample07_N5").innerHTML = "5";
document.querySelector(".sample07_Q5").innerHTML = '["javascript", "react", "vue"]';
document.querySelector(".sample07_M5").innerHTML = "arrNum5.reduceRight((p, c) => p + c);";
document.querySelector(".sample07_P5").innerHTML = arrReduce5;
}
08. 배열 메서드 : slice()
slice() 메서드는 어떤 배열의 begin부터 end까지에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum.slice(2) | 300,400,500 |
| 2 | [100, 200, 300, 400, 500] | arrNum2.slice(2, 3) | 300 |
| 3 | [100, 200, 300, 400, 500] | arrNum2.slice(2, 4) | 300,400 |
| 4 | [100, 200, 300, 400, 500] | arrNum2.slice(2, 5) | 300,400,500 |
| 5 | [100, 200, 300, 400, 500] | arrNum2.slice(-2) | 400,500 |
| 6 | [100, 200, 300, 400, 500] | arrNum2.slice(-2, 5) | 400,500 |
{
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 arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.slice(2, 3);
document.querySelector(".sample08_N2").innerHTML = "2";
document.querySelector(".sample08_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M2").innerHTML = "arrNum2.slice(2, 3)";
document.querySelector(".sample08_P2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.slice(2, 4);
document.querySelector(".sample08_N3").innerHTML = "3";
document.querySelector(".sample08_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M3").innerHTML = "arrNum2.slice(2, 4)";
document.querySelector(".sample08_P3").innerHTML = result3;
const arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.slice(2, 5);
document.querySelector(".sample08_N4").innerHTML = "4";
document.querySelector(".sample08_Q4").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M4").innerHTML = "arrNum2.slice(2, 5)";
document.querySelector(".sample08_P4").innerHTML = result4;
const arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.slice(-2);
document.querySelector(".sample08_N5").innerHTML = "5";
document.querySelector(".sample08_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M5").innerHTML = "arrNum2.slice(-2)";
document.querySelector(".sample08_P5").innerHTML = result5;
const arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.slice(-2, 5);
document.querySelector(".sample08_N6").innerHTML = "6";
document.querySelector(".sample08_Q6").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample08_M6").innerHTML = "arrNum2.slice(-2, 5)";
document.querySelector(".sample08_P6").innerHTML = result6;
}
09. 배열 메서드 : splice()
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
| 번호 | 기본값 | 매서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum.splice(2) | 300,400,500 | 100,200 |
| 2 | [100, 200, 300, 400, 500] | arrNum.splice(2, 3) | 300,400,500 | 100,200 |
| 3 | [100, 200, 300, 400, 500] | arrNum.splice(2, 3, 'javascript') | 300,400,500 | 100,200,javascript |
| 4 | [100, 200, 300, 400, 500] | arrNum.splice(1, 1, 'javascript') | 200 | 100,javascript,300,400,500 |
| 5 | [100, 200, 300, 400, 500] | arrNum.splice(1, 0, 'javascript') | 100,javascript,200,300,400,500 | |
| 6 | [100, 200, 300, 400, 500] | arrNum.splice(0, 4, 'javascript') | 100,200,300,400 | javascript,500 |
{
const 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;
const 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;
const 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;
const 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;
const 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;
const 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() 메서드는 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.
lastIndexOf() 메서드는 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 -1을 반환합니다.
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum.indexOf(200) | 1 |
| 2 | [100, 200, 300, 400, 500] | aarrNum2.indexOf(300) | 2 |
| 3 | [100, 200, 300, 400, 500] | arrNum3.indexOf(600) | -1 |
| 4 | [100, 200, 300, 400, 500] | arrNum.lastIndexOf(200) | 4 |
| 5 | [100, 200, 300, 400, 500] | arrNum.includes(200) | true |
| 6 | [100, 200, 300, 400, 500] | arrNum6.includes(600) | 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 = "arrNum2.indexOf(300)";
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 = "arrNum.lastIndexOf(200)";
document.querySelector(".sample10_P4").innerHTML = arrIndex4;
const arrNum5 = [100, 200, 300, 400, 500];
const arrIncludes = arrNum5.includes(200);
document.querySelector(".sample10_N5").innerHTML = "5";
document.querySelector(".sample10_Q5").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample10_M5").innerHTML = "arrNum.includes(200)";
document.querySelector(".sample10_P5").innerHTML = arrIncludes;
const arrNum6 = [100, 200, 300, 400, 500];
const arrIncludes2 = 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 = arrIncludes2;
}
11. 배열 메서드 : find() / findIndex()
메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
findIndex()메서드는 제공된 테스트 기능을 충족하는 배열의 첫 번째 요소 인덱스를 반환합니다. 테스트 기능을 만족하는 요소가 없으면 -1이 반환됩니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum.find(function(element) {return element === 300}) | 300 |
| 2 | [100, 200, 300, 400, 500] | arrNum2.find(function(element) {return element === 600}) | undefined |
| 3 | ['javascript', 'jquery', 'react'] | arrText3.find(el => el === 'javascript') | javascript |
| 4 | ['javascript', 'jquery', 'react'] | arrNum4.findIndex(element => element === 'javascript') | 0 |
| 5 | ['javascript', 'jquery', 'react'] | arrNum5.findIndex(element => element === 'html') | -1 |
{
const arrNum = [100, 200, 300, 400, 500];
const result = arrNum.find(element => element === 300);
document.querySelector(".sample11_N1").innerHTML = "1";
document.querySelector(".sample11_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M1").innerHTML = "arrNum.find(function(element) {return element === 300})";
document.querySelector(".sample11_P1").innerHTML = result;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.find(element => element === 600);
document.querySelector(".sample11_N2").innerHTML = "2";
document.querySelector(".sample11_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample11_M2").innerHTML = "arrNum2.find(function(element) {return element === 600})";
document.querySelector(".sample11_P2").innerHTML = result2;
const arrText3 = ['javascript', 'jquery', 'react'];
const result3 = arrText3.find(el => el === 'javascript');
document.querySelector(".sample11_N3").innerHTML = "3";
document.querySelector(".sample11_Q3").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M3").innerHTML = "arrText3.find(el => el === 'javascript')";
document.querySelector(".sample11_P3").innerHTML = result3;
const arrNum4 = ['javascript', 'jquery', 'react'];
const result4 = arrNum4.findIndex(element => element === 'javascript');
document.querySelector(".sample11_N4").innerHTML = "4";
document.querySelector(".sample11_Q4").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M4").innerHTML = "arrNum4.findIndex(element => element === 'javascript')";
document.querySelector(".sample11_P4").innerHTML = result4;
const arrNum5 = ['javascript', 'jquery', 'react'];
const result5 = arrNum5.findIndex(element => element === "html");
document.querySelector(".sample11_N5").innerHTML = "5";
document.querySelector(".sample11_Q5").innerHTML = "['javascript', 'jquery', 'react']";
document.querySelector(".sample11_M5").innerHTML = "arrNum5.findIndex(element => element === 'html')";
document.querySelector(".sample11_P5").innerHTML = result5;
}
12. 배열 메서드 : filter()
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum.filter(el => el === 300) | 300 |
| 2 | [100, 200, 300, 400, 500] | arrNum.filter(el => el === 600) | |
| 3 | [100, 200, 300, 400, 500] | arrNum.filter(el => el >= 300) | javascript |
{
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.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 = "arrNum.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 = "arrNum.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 = "arrNum.filter(el => el >= 300)";
document.querySelector(".sample12_P3").innerHTML = result3;
}
13. 배열 메서드 : map()
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | [100, 200, 300, 400, 500] | arrNum.map(el => el) | 100,200,300,400,500 |
| 2 | [100, 200, 300, 400, 500] | arrNum2.map((el) => el + 'J') | 100J,200J,300J,400J,500J |
| 3 | [100, 200, 300, 400, 500] | arrNum3.map((el) => el + 100) | 200,300,400,500,600 |
| 4 | [{a : 100}, {a : 200}, {a : 300}] | arrNum4.map((el) => el.a) | 100,200,300 |
{
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 = "arrNum2.map((el) => el + 'J')";
document.querySelector(".sample13_P2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.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 = "arrNum3.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 = "arrNum4.map((el) => el.a)";
document.querySelector(".sample13_P4").innerHTML = result4;
}
14. 배열 메서드 : Array.from()
Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운Array 객체를 만듭니다.
| 번호 | 기본값 | 매서드 | 리턴값 |
|---|---|---|---|
| 1 | 'javascript' | Array.from(text) | j,a,v,a,s,c,r,i,p,t |
| 2 | 'javascript' | Array.from(text, el => el + '10') | j10,a10,v10,a10,s10,c10,r10,i10,p10,t10 |
| 3 | 'javascript' | [...text3].map(el => el) | j,a,v,a,s,c,r,i,p,t |
{
const text = 'javascript';
const result = Array.from(text);
// console.log(result);
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(text, el => el + "10");
document.querySelector(".sample14_N2").innerHTML = "2";
document.querySelector(".sample14_Q2").innerHTML = "'javascript'";
document.querySelector(".sample14_M2").innerHTML = "Array.from(text, el => el + '10')";
document.querySelector(".sample14_P2").innerHTML = 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;
}
'Javascript' 카테고리의 다른 글
| startsWith() / endsWith() (0) | 2022.10.10 |
|---|---|
| 함수 유형 03 (0) | 2022.10.10 |
| 펼침 연산자 / 객체 구조, 비구조 할당 (0) | 2022.10.10 |
| mouseenter / movesover의 차이점 (5) | 2022.09.05 |
| 요소 크기 속성 / 메서드 (9) | 2022.09.01 |
댓글