[Javascript] array, date

concat() 합치기

✍

<script type="text/javascript">
	let arrNum = [1, 2, 3];
	let arrStr = ["a", "b", "c"];
	
	let arrNumStr = arrNum.concat(arrStr); // arrNum에 arrStr 합치기 
	document.write("arrNum.concat(arrStr) 실행 후: " + arrNumStr + "<br>");
	
	let arrStrNum = arrStr.concat(arrNum);
	document.write("arrStr.concat(arrNum) 실행 후: " + arrStrNum + "<br>");
</script>

💻

---

join () : 배열의 요소를 모두 합쳐 하나의 문자열로 만드는 함수 

 

✍

document.write("<hr>")
let strJoin = arrNum.join();
document.write("arrNum.join() 실행 후: " + strJoin + "  /strJoin의 타입: " + typeof(strJoin) + "<br>");

💻

---

push(), unshift()

 

push()는 배열의 맨 끝에 데이터를 추가하고

unshift()는 배열의 맨 앞에 데이터를 추가하는 함수이다 

 

✍

let arrNumSize = arrNum.push(4, 5);
document.write("arrNum 배열 요소 : " + arrNum + ", 크기 : " + arrNumSize + "<br>"); // 크기가 변경됨 

let arrNumSize2 = arrNum.unshift(0);
document.write("arrNum 배열 요소 : " + arrNum + ", 크기 : " + arrNumSize2 + "<br>"); // 크기가 변경됨

💻

 

---

pop(), shift()

pop()은 배열의 맨 마지막 요소를 제거, 

shift()는 배열의 맨 처음 요소를 제거하는 함수이다.

 

✍

let popResult = arrNum.pop();
document.write("pop() 호출 후 arrNum 배열 요소 : " + arrNum + ", 리턴값 : " + popResult +  "<br>"); // 크기가 변경됨 

let shiftResult = arrNum.shift();
document.write("shift() 호출 후 arrNum 배열 요소 : " + arrNum + ", 리턴값 : " + shiftResult +  "<br>"); // 크기가 변경됨 
document.write("<hr>");

💻

 

---

splice() 

예를 들어 splice(2) 라면 2번 인덱스 이후의 배열 요소들을 제거하는 함수이다.

즉, 특정 인덱스 번호 이후의 요소들을 제거한다.

 

✍

let nums = [1, 2, 3, 4, 5];
document.write("기존 배열 : " + nums + "<br>");
let spliceResult1 = nums.splice(2);
document.write("삭제된 배열 : " + spliceResult1 + "<br>");

• 2번 인덱스 부터 요소를 제거하였다. 

💻

 

 

✍ 특정 인덱스 범위를 지정하여 제거할 수도 있다 

let subjects = ["JAVA", "JSP", "Spring", "HTML", "CSS"];
document.write("splice(2, 2) 기존 배열 : " + subjects + "<br>");
let spliceResult2 = subjects.splice(2,2);
document.write("splice(2, 2) 삭제된 배열 : " + spliceResult2 + "<br>");

• 2번 인덱스 부터 총 2개의 인덱스 요소를 제거하는 코드이다. 

💻

 

✍ 새로운 인덱스 요소를 추가할 수 있다.

document.write("splice(2, 2, 'Javascript') 기존 배열 : " + subjects + "<br>");
let spliceResult3 = subjects.splice(1, 1, "Javascript"); // 1번 인덱스 부터 1개 삭제하고 새로운 요소 추가
document.write("splice(2, 2, 'Javascript') 삭제된 배열 : " + spliceResult3 + "<br>");

• 1번 인덱스 요소인 JSP를 삭제한 후 그 자리에 새로운 요소를 추가 하는 코드이다. 

💻

---

slice()

특정 인덱스 번호 이후의 요소를 추출하는 함수이다.

 

✍

let colors = ["red", "green", "blue", "white", "black"];
let colors2 = colors.slice(2); 
document.write("colors.slice(2) 기존 배열 : " + colors + "<br>"); // 변동 없음. 
document.write("colors.slice(2) 추출된 배열 : " + colors2 + "<br>"); // 기존 배열 삭제하지 않고 추출

• slice(2) --> 2번 인덱스 부터 요소를 추출한다. 

💻

 

✍ 특정 인덱스 번호 범위를 설정하여 추출할 수 있다. 

let colors3 = colors.slice(2, 4); // 2번에서 4번 앞 까지 추출. 즉. 2번 ~ (4번 -1 = 3번)
document.write("colors.slice(2, 4) 기존 배열 : " + colors + "<br>"); // 변동 없음. 
document.write("colors.slice(2, 4) 추출된 배열 : " + colors3 + "<br>"); // 기존 배열 삭제하지 않고 추출

• slice(2, 4) --> 2번 인덱스 부터 4번 인덱스 "앞" 까지 추출한다는 의미이다. 
• 즉, 2번, 3번 요소가 추출된다. 

 

💻