js에서 배열방에 사용할 수 있는 다양한 메소드를 알아보자.
splice는 특정 번호의 방, R 부터 N개의 데이터를 지우고 R번호 부터 데이터를 집어 넣을 수 있다.
slice는 N1번 부터 N2번 까지의 데이터를 반환한다.
split은 java에서 사용하던 split과 똑같이 요소를 특정 단어로 나눠준다.
sort는 정렬기능
reverse는 역정렬
delete는 삭제하여 empty로 비워둠
concat, 배열 합치기
valueOf 배열의 값 반환
join, 배열의 값을 반환할 때 구분자를 추가하여 반환
정렬의 경우 5~10개 까지는 안정적으로 작동한다.
splice의 경우 무슨말인지 모를 수 있는데 예제를 실행하여 결과를 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>배열 함수</title>
<link rel="icon" href="img/favicon.ico">
<style>
/*css 주석*/
</style>
<!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
</head>
<body>
<button onclick="spliceDel()">spliceDel</button>
<button onclick="spliceAdd()">spliceAdd</button>
<button onclick="sliceEx()">sliceEx</button>
<button onclick="splitEx()">splitEx</button>
<br/><br/><br/>
<button onclick="sortEx()">sortEx</button>
<button onclick="reverseEx()">reverseEx</button>
<button onclick="numberSort()">numberSort</button>
<br/><br/><br/>
<button onclick="delEx()">delEx</button>
<button onclick="concatEx()">concatEx</button>
</body>
<script>
var arr = ["마", "가", "다", "바", "나", "라"]
/////////////////////////////////////////////// 정말 자주 쓰이는
// splice를 이용한 요소 삭제
function spliceDel(){
console.log(arr);
arr.splice(2, 2); // 2번 인덱스 포함 2개 삭제
console.log(arr);
}
// splice를 이용한 요소 추가
function spliceAdd(){
console.log(arr);
// 2번 인덱스부터 지울 갯수 0개, 추가할 값...
arr.splice(2, 0, "C", "D");
// arr.splice(2, 2, "C", "D"); 지울 갯수를 지정하여 교체형식 지우고 추가 형식도 가능
console.log(arr);
}
//범위 자르기(원본데이터는 보존된다.)
function sliceEx(){
numArr = [0,1,2,3,4,5];
console.log(numArr);
//1번인덱스 부터 보여주고, 3번부터 버림
var newArr = numArr.slice(1,3);
console.log(newArr);
console.log(numArr);
}
//특정한 구분자로 자르기
function splitEx(){
var txt = "D:/img/girlgroup/twice.jpg";
var depth = txt.split("/");
console.log(depth);
//twice.jpg 출력 하기
console.log(depth[3]);
console.log(depth[depth.length-1]);
}
/////////////////////////////////////////////// 자주 쓰이는
// 배열 정렬(문자열)
function sortEx(){
arr.sort();
console.log(arr);
}
// 배열 역정렬(문자열)
function reverseEx(){
arr.reverse();
console.log(arr);
}
// 숫자 정렬(커스터마이징)
var num = [3, 2, 4, 1, 5];
function numberSort(){
// a-b의 값이 -1이라면 바꾼다
num.sort(function(a, b){return a-b});
// 역정렬은 return b-a로 주면 된다.
console.log(num);
}
/////////////////////////////////////////////// 잘 안쓰는
// delete, 특정 인덱스를 삭제, 공간을 empty로 비워둠
function delEx(){
delete arr[2];
console.log(arr);
arr[2] = "new";
console.log(arr);
}
// empty로 비워두면 접근 시 오류가 나기 때문에 쓰는걸 권장하지 않음, 주의가 필요
// concat, 두개의 배열을 합쳐서 새로운 배열 생성
function concatEx(){
var arr1 = [1, 2, 3, 4, 5];
var arr2 = ['a', 'b', 'c', 'd', 'e'];
// arr.concat(arr1, arr2);
var newArr = arr1.concat(arr2);
console.log(newArr);
}
// 쓸 일이 있어 보이지만 구지 쓰지 않는 기능
/////////////////////////////////////////////// 진짜 안쓰는
// valueOf
console.log(arr.valueOf()); // = console.log(arr);
// 과거 콘솔이 없던 시절에 쓰던 기능
//join
console.log(arr.join("@")); // 항목 별 구분자 추가
</script>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-08.for each문, 반복문 한꺼번에 (0) | 2018.10.19 |
|---|---|
| [JS]04-07.Shallow Copy 현상, 배열 대입 이상 (0) | 2018.10.19 |
| [JS]04-05.2차원 배열 생성, 값 조회, 추가 (0) | 2018.10.19 |
| [JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift (0) | 2018.10.18 |
| [JS]04-03.함수 생성 및 사용, 배열 생성 및 사용 (0) | 2018.10.18 |