자바스크립트 배열 메서드
배열 메서드
자바스크립트에서 자주 사용되는 배열 메서드들에 대해 간단히 정리해봤습니다.
splice()
배열의 특정 원소를 지울 수 있습니다.
arr.splice(n,m) : n 번째 인덱스부터 m개를 지워라!
let arr = [0, 1, 2, 3, 4, 5];
arr.splice(1, 2); // 1번 인덱스부터 2개 지워라
console.log(arr); // [0, 3, 4, 5];arr.splice(n,m,x) : 특정 원소를 지우고 추가할 수 있습니다. x자리에 추가할 요소를 넣으면 됩니다.
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200);
console.log(arr); // [1, 100, 200, 5]만약 m이 0이라면 어떻게 될까요?
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");
console.log(arr); // ["나는", "대한민국","소방관","철수", "입니다"]특정 원소를 지우지 않고 추가만 합니다.
splice()는 삭제된 요소를 반환합니다.
let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 2);
console.log(arr); // [1,4,5]
console.log(result); // [2,3]slice()
arr.slice(n,m) : n 번째 인덱스부터 m 번째 인덱스 전까지 반환합니다. 문자열 slice와 같습니다.
그런데 만약 slice안에 비어 있으면 배열이 복사됩니다.
let arr = [1, 2, 3, 4, 5];
arr.slice();
console.log(arr); // [1, 2, 3, 4, 5]splice와 slice 차이
splice()는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 즉 원본 배열 자체를 수정합니다. 반면에, slice()는 원본 배열을 수정하지 않고 새로운 배열을 만드는 것 입니다.
forEach()
배열의 원소들을 순회할 때 사용합니다.
arr.forEach(function) : forEach는 함수를 인자로 받습니다.
let uesrs = ['kim', 'lee', 'park']
users.forEach((item,index,arr)=>{
...
});
// item은 배열의 원소
// index는 0,1,2 ...
// arr은 해당 배열입니다. 여기선 users
// 보통 item,index까지 사용합니다.indexOf() / lastIndexOf()
특정 원소의 인덱스를 반환합니다.
let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7, 여기서 두 번째 파라미터는 시작위치 인덱스를 의미합니다.
// 끝에서부터 찾고 싶으면
arr.lastIndexOf(3); // 7filter()
만족하는 모든 요소를 배열로 반환합니다.
filter도 함수를 인수를 받습니다.
let arr = [1, 2, 3, 4, 5, 6];
// 짝수 찾기
const result = arr.filter((item) => {
return item % 2 === 0;
});
console.log(result); // [2, 4, 6]reverse()
배열을 역순으로 재정렬합니다.
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]map()
함수를 인수로 받아 특정 기능을 시행하고 새로운 배열을 반환합니다.
// 예제
let userList = [
{ name: "choi", age: 20 },
{ name: "kim", age: 15 },
{ name: "park", age: 32 },
];
let newUserList = userList.map((user, index) => {
return Object.assign({}, user, {
id: index + 1,
isAdult: user.age > 19,
});
});
console.log(newUserList);
console.log(userList);newUserList는 기존 배열인 userList에서 id값과 isAdult 프로퍼티를 포함한 새로운 배열입니다.
join()
배열의 원소들을 합쳐서 문자열을 만듭니다.
let arr = ["Hello", "My", "is", "dmchoi"];
let result = arr.join();
console.log(result); // Hello,My,is,dmchoi.
let result = arr.join("");
console.log(result); // HelloMyisdmchoisplit()
문자열을 쪼개서 배열로 반환해줍니다.
let str = "Nice to meet you";
let result = str.split(" ");
console.log(result); // [ 'Nice', 'to', 'meet', 'you' ]
str.split("");
console.log(result);
// [
// 'N', 'i', 'c', 'e',
// ' ', 't', 'o', ' ',
// 'm', 'e', 'e', 't',
// ' ', 'y', 'o', 'u'
// ]sort()
배열을 정렬해줍니다. 배열 자체가 재정렬됩니다.
let arr = [27, 8, 5, 13];
arr.sort();
console.log(arr); // [13, 27, 5, 8]뭔가 이상하죠? 기대한 결과값은 [5, 8, 13, 27] 이었는데
sort는 배열 원소들을 문자열로 취급하기 때문에 그렇습니다.
제대로된 정렬을 하고싶다면 값을 비교하는 함수를 인수로 전달하면 됩니다.
arr.sort(fn);
function fn(a, b) {
return a - b;
}
// 아래와 동일합니다.
arr.sort((a, b) => {
return a - b;
});두 수를 비교해서 양수인지, 음수인지, 0 인지를 판단하고 작은 수는 앞으로, 큰 수는 뒤로 보냅니다.
reduce()
reduce도 함수를 인수로 받습니다
(누적계산값, 현재값) => { return 계산값 }
let arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, cur) => {
return prev + cur;
}, 0);
// 1부터 5까지 누적 계산값을 반환합니다.
console.log(result); // 15
// 여기서 0은 초기값, 안써주면 배열의 첫 번째 원소로 설정됨