728x90
반응형
reduce() / reduceRight(), slice(), splice()
reduce() / reduceRight(), slice(), splice() 메서드에 대해 알아 봅시다.
reduce() / reduceRight()
reduce() / reduceRight() 메서드는 배열 요소를 하나로 정리해 줍니다.
번호 | 기본값 | 메서드 | 리턴값 |
---|---|---|---|
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 = "arrNum1.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 = "arrNum2.reduce((p, c) => p + c)";
document.querySelector(".sample07_P2").innerHTML = arrReduce2;
const arrNum3 = [100, 200, 300, 400, 500];
let sum = 0;
for(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.reduceRight((p,c) => p + c);
document.querySelector(".sample07_N5").innerHTML = "5";
document.querySelector(".sample07_Q5").innerHTML = "['javascript', 'react', 'vue']";
document.querySelector(".sample07_M5").innerHTML = "reduceRight((p,c) => p + c)";
document.querySelector(".sample07_P5").innerHTML = arrReduce5;
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;
splice()
배열 요소를 다른 요소로 변경하며, 원본값이 바뀝니다.
번호 | 기본값 | 메서드 | 리턴값 | 결과값 |
---|---|---|---|---|
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 = "arrNum3.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 = "arrNum4.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 = "arrNum5.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 = "arrNum6.splice(0, 4, 'javascript')";
document.querySelector(".sample09_P6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;
'JavaScript' 카테고리의 다른 글
indexOf() / lastIndexOf() / includes(), find() / findIndex() (1) | 2022.09.28 |
---|---|
unshift() / shift(), reverse() / sort(), concat() (1) | 2022.09.28 |
mouseover / mouseenter (2) | 2022.09.05 |
jQuery - 스타일 메서드 (4) | 2022.09.04 |
jQuery - 속성 메서드 (3) | 2022.09.04 |
댓글