[Javascript] Array 객체

▷ 배열 요소 변경

- 배열의 요소를 변경할 때, 변경하고자 하는 배열 index로 접근해 새로운 요소를 할당

let fruits = ["Banana","Orange","Apple","Mango"];
fruits[0] = "Kiwi";

fruits배열의 0번째 요소인 "Banana"에 접근해 "Kiwi"로 값 변경

---

1. toString() : 배열 안의 모든 문자를 쉼표를 이용해 모두 결합해서 문자열로 반환

 

2. join("") : 파라미터로 지정한 문자를 이용해 모두 결합해서 문자열로 반환

let fruits = ["Banana","Orange","Apple","Mango"];
fruits.join("*");

아무거나 넣어도 된다..

 

3. pop() : 배열에서 맨 끝 요소를 제거

4. push("") : 배열에서 맨 끝 요소 추가

5. shift() : 배열에서 맨 앞 요소를 제거

6. unshift("") : 배열에서 맨 앞 요소를 추가

let fruits = ["🍓","🍋","🍏","🍑","🥝"];

fruits.pop();
console.log(fruits);

fruits.push("🍐");
console.log(fruits);

fruits.shift();
console.log(fruits); 

fruits.unshift("🍇");
console.log(fruits);

☞ pop을 사용해 맨 끝에 키위를 지우고, push를 사용해 맨 끝에 배를 추가, shift를 사용해 맨 앞에 딸기를 지우고, unshift를 사용해 맨 앞에 포도를 추가했다.

 

 

7. splice() : 새로운 요소를 파라미터에 지정한 위치에 삭제 / 추가 

• 첫 번째 파라미터 - 새로운 요소를 추가할 index번호
• 두 번째 파라미터 - 첫 번째 해당 index번호부터 새로운 요소 추가하기 전에 삭제할 요소의 개수
• 나머지 파라미터 - 추가할 새로운 요소 

let fruits = ["Banana","Orange","Apple","Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

"Apple"이 있는 index번호 자리에 0개를 삭제하고 "Lemon","Kiwi"를 추가함

 

8. slice() :  배열에서 잘라내서 쓰고 싶은 요소를 파라미터로 index번호를 지정하여 반환

• 첫 번째 파라미터 - 시작 index번호 (시작 index번호만 쓰면 시작 index에서 마지막 배열 요소까지 반환)
• 두 번째 파라미터 - 종료 index번호 (종료 index에 해당하는 요소는 반환X)

let fruits = ["Banana","Orange","Lemon","Apple","Mango"];
let arr1 = fruits.slice(3);
let arr2 = fruits.slice(1,3);

☞ arr1에는 배열의 3번 index인 "Apple" 부터 배열의 마지막 요소인 "Mango'까지 반환함

☞ arr2에는 배열의 1번 index인 "Orange" 부터 배열의 3번 index인 "Apple"전("Lemon")까지 반환함

 

9. concat() : 2개 이상의 배열을 하나의 배열로 결합

 

10. sort() : 배열에 문자형 데이터가 있는 경우 오름차순으로 정렬

(숫자형 데이터가 있더라도 문자형으로 인식해서 정렬해줌)

let arr1 = [1,21,15,20,25,30];
arr1.sort(); // 1, 15, 20, 21, 25, 30 순으로 정렬됨

// 숫자형일 때 앞자리 수만 보고 정렬하기 때문에 비교할 수 있는 두 매개변수를 넣어야 함
let arr2 = [1,21,15,20,25,30,115,225];
arr2.sort(function(a,b) {
	return a - b; // b - a로 하면 역순으로 정렬됨 !
});

 

11. reverse() : 정렬된 배열을 역순으로 정렬

 

12. find(함수) : 배열에서 해당하는 하나의 값을 찾을 시 반환하고 종료 

let scores = [85, 90, 75, 65, 80, 95];

☞ 12 ~ 15번 까지 적용될 배열

let result1 = scores.find(function(i){
	return i > 80;
})
console.log(result1);

해당하는 하나의 값만 출력됨

 

13. filter(함수) : 특정 조건을 만족하는 배열의 요소만을 찾아 새로운 배열로 반환

let result2 = scores.filter(function(i){
	return i > 80;
})
console.log(result2);

☞ 조건을 만족하는 요소들만 걸러 배열로 반환됨

 

 

14. map(함수) : 배열에서 배열 요소의 값을 변형해 새로운 배열로 반환

let result3 = scores.map(function(i){
	return i + 10;
})
console.log(result3);

☞ 기존 요소에 10을 더한 값의 요소들이 배열로 반환됨

 

 

15. reduce() : 배열에 담긴 요소들을 하나씩 돌면서 콜백 함수의 실행 값을 누적하여 결괏값을 반환

let result4 = scores.reduce(function(total,current){
	return total + current;
}, 0) // 시작 값 = 0 (다른 값 줘도됨!) 
console.log(result4);

// 계산 방법
// 시작 값 0 + 현재 배열 요소 85 = 85
// 85 + 90 = 175
// 175 + 75 = 250
// 250 + 65 = 315
// 315 + 80 = 395
// 395 + 95 = 490

// 콘솔에 490이 출력됨

두둥