[자바스크립트] - Array 배열 매서드 ☆

* 콘솔창에서 화살표를 누르면 인덱스 번호와 lenght 데이터 총 갯수를 확인할 수 있다.  

 

* index로 잘라내는 애들은 전부다 그 앞에 있는 번호까지만 잘라낸다

---

배열의 다양한 메서드
 
배열 객체에 들어 있는 데이터의 순서를 바꾸거나 배열끼리 합치거나 혹은 배열의 특정 구간만큼을 잘라내고 싶을 때 사용하는 메서드들이 있다. 
또한 배열 객체에 새 데이터를 넣거나 삭제할 수도 있다. 

.join(연결문자)	배열객체의 데이터를 연결문자를 기준으로 1개의 문자형 데이터로 반환 / 변수.join('-');
.reverse()	배열객체의 데이터 순서를 거꾸로 바꾼 후 반환 / 변수.reverse();
.sort()	배열객체의 데이터를 오름차순으로 정렬
.slice(index1, index2)	배열객체의 데이터 중 인덱스1~2만큼의 구간만큼 잘라서 배열객체로 가져옴. 뒤쪽 순번의 앞순번까지 가져온다. 그래서 뒤에 인덱스는 원하는 순번+1해서 적어줘야한다.
.splice(시작index, 삭제할 데이터 갯수, 데이터1, 데이터2..)	시작 index에서 몇번째까지 자를 건지 숫자를 쓰고 그 구간을 삭제하고 거기에 데이터1~데이터2를 넣겠다
.concat()	2개의 배열객체를 하나의 배열로 합친다.

.pop	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
.push(새 데이터)	배열의 마지막 인덱스에 새 데이터를 저장함. 마지막에 끼워넣기
.shift()	배열에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제한다.
.unshift(새 데이터)	배열의 첫번째 인덱스에 새 데이터를 저장함. 첫번째에 끼워넣기
length	배열에 저장된 총 데이터의 갯수를 반환함

 

---

 [ 종류 ]

        
1. .join(연결문자)  - 회원정보 전화번호 하이픈- 으로 저장할때 등 많이 쓴다.
: 배열객체의 데이터를 연결 문자를 기준으로 1개의 문자형 데이터로 반환한다. 

var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];

var result = arr_1.join("-");
console.log(result);

" " 안에 들어가 있는 것으로 배열들의 사이사이를 연결해준다. 결과는 문자형 데이터

---

 

2. .reverse()  - 게시글에서 최신글이 먼저 보여지게할 때 등 많이 쓴다. 
: 배열객체의 데이터 순서를 거꾸로 바꾼 후 반환함. 

var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];

arr_2.reverse();
console.log(arr_2);

*만약 arr_2를 직접 변경하고 싶을 땐 변수 새로 선언하지 않고 위의 예시처럼 arr_2.reverse에 직접 적용한다. 

그럼 arr_2는 변화하게 된다. 

- 안전한 방법은 새로운 변수를 만들어서 적용하는 게 원본 유지하면서 안전하다. 

---

3. .sort()  - 상품 가격순으로 정렬할 때 등
: 배열객체의 데이터를 오름차순으로 정렬함. 

 var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];


arr_1.sort();
console.log(arr_1);

---

4. .slice(index1, index2) 
 : 배열객체의 데이터 중 원하는 인덱스번호 구간만큼 잘라서 배열객체로 가져온다.

하지만 index1부터 index2까지 모든 데이터를 반환하는 것이 아니라, index2번의 앞 데이터까지만 잘라서 배열객체로 가져온다. 즉 .slice(0, 5) 라고 쓰면 0번부터 5번까지를 다 가져오는 것이 아니라 0~4번 인덱스의 데이터까지만
잘라서 배열객체로 가져온다. 그래서 뒤쪽 index 순번에서 +1을 해준 값으로 써줘야한다. 

var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];


result = arr_1.slice(1, 3);
console.log(result);

뒤쪽 인덱스 번호 앞까지만 잘라서 나오니깐 강남이 아니라 방배까지 잘라서 가져오게 된다. 

*원본이 손실되지 않는다. 

---

5. .splice(시작index, 삭제할 데이터 갯수, 데이터1, 데이터2..)
: 배열객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 집어넣는다.

시작 index에서 몇번째까지 자를 건지 숫자를 쓰고 그 구간을 삭제하고 거기에 데이터1~데이터2를 넣겠다는 이야기

var greenArr = ["교대", "방배", "강남"];
var yellowArr = ["미금", "정자", "수서"];

greenArr.splice(2, 1, "서초", "역삼"); 
console.log(greenArr);

greenArr의 2번 인덱스(강남)부터 1개의 데이터를 삭제하고 '서초' '역삼'데이터를 밀어넣겠다.

---

6. .concat()
: 2개의 배열객체를 하나의 배열로 합친다. 
ex) var arr1 = [1,2], arr2 = [3,4];
arr1.concat(arr2)  -> arr1 = [1,2,3,4]가 된다. 

 var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];

result = arr_1.concat(arr_2);
console.log(result);

변수 result 안에 두개의 배열이 합쳐진다. 

---

7. .pop
: 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다.

※ 원본 배열을 직접 변형시킨다. 새 변수를 만들어서 적용해도 원본을 변형시켜버린다. 

8. .push(새 데이터)
: 배열의 마지막 인덱스에 새 데이터를 저장함. 마지막에 끼워넣기

※ 원본 배열을 직접 변형시킨다. 새 변수를 만들어서 적용해도 원본을 변형시켜버린다. 

9. .shift()
: 배열에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제한다.

※ 원본 배열을 직접 변형시킨다. 새 변수를 만들어서 적용해도 원본을 변형시켜버린다. 

10. .unshift(새 데이터)
: 배열의 첫번째 인덱스에 새 데이터를 저장함. 

※ 원본 배열을 직접 변형시킨다. 새 변수를 만들어서 적용해도 원본을 변형시켜버린다. 

 var greenArr = ["교대", "방배", "강남"];
var yellowArr = ["미금", "정자", "수서"];

greenArr.splice(2, 1, "서초", "역삼"); 
console.log(greenArr);

var data1 = yellowArr.pop(); //수서
var data2 = yellowArr.shift(); //미금

yellowArr.push(data2); //정자 미금
yellowArr.unshift(data1); //수서 정자 미금

console.log(yellowArr); //정자

 

---

11. .length
: 배열에 저장된 총 데이터의 갯수를 반환함. 모든 데이터를 반환하는 게 아니라 몇 개 들어있는 지 그 숫자를 반환하는 것.

반복문 돌리거나 할 때 많이 사용한다.