728x90
배열 Method[unshift(), shift(), reverse(), sort()]
배열은 다양한 메서드를 제공합니다. 오늘은 unshift(), shift(), reverse(), sort()메서드에 대해 알아보겠습니다.
1. unshift() / shift()
unshift()메서드는 배열 처음 요소에 추가하여 숫자로 반환하고, shift() 메서드는 배열 처음 요소 삭제해 삭제한 요소를 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 | 결과값 |
|---|---|---|---|---|
* script
// 01.unshift()
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(600)";
document.querySelector(".sample04_P1").innerHTML = arrNumUnshift; //6
document.querySelector(".sample04_A1").innerHTML = arrNum1; //600, 100, 200, 300, 400, 500
//02. shift()
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; // 100
document.querySelector(".sample04_A2").innerHTML = arrNum2; // 200, 300, 400, 500
2. reverse() / sort()
reverse()메서드는 배열 요소의 순서를 반대로 정렬하여 배열로 반환하고, sort() 메서드는 배열 요소를 정렬하여 배열로 반환합니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
* script
//01. reverse()
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;
//02. sort()
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 b.localeCompare(a) })";
document.querySelector(".sample05_P6").innerHTML = arrNumSort6;
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]slice(), splice(), indexOf(), lastIndexOf(), includes() (1) | 2022.09.27 |
|---|---|
| [javascript]concat(), reduce(), reduceRight() (1) | 2022.09.27 |
| [javascript]startsWith() / endsWith() (1) | 2022.09.27 |
| [javascript]클래스 (3) | 2022.09.20 |
| [javascript]콜백함수 (2) | 2022.09.20 |
댓글