배열과 메서드 1
요소 추가 및 제거 메서드
shift, unshift / pop, push 이외 메서드
- splice
: 배열에 요소 추가, 삭제, 교체 모두가 가능하다
➡️ arr.splice(index[, deleteCount, elem1, …, elemN])
- index는 조작을 가할 첫번째 요소를 가리키는 index
- deleteCount는 삭제할 요소의 개수
- elem1, …, elemN은 배열에 추가할 요소
// 요소 삭제 예시
let arr = [ “I”, “study”, “JS” ];
arr.splice(1, 1);
console.log(arr); // [ “I”, “JS” ]
// 요소 삭제와 교체 예시
let arr = [ “I”, “study”, “JS”, “right”, “now” ];
arr.splice(0, 3, “Let’s”, “dance”);
console.log(arr);// [ “Let’s”, “dance”, “right”, “now” ]
// splice는 삭제된 요소로 구성된 배열을 반환한다
let arr = [ “I”, “study”, “JS”, “right”, “now” ];
let removed = arr.splice(0, 2);
console.log(removed); // [ “I”, “study” ]
// deleteCount를 0으로 설정하면 제거되지 않고 새로운 요소를 추가할 수 있다
let arr = [ “I”, “study”, “”JS ];
arr.splice(2, 0, "complex", "language");
console.log(arr); // [ “I”, "study", "complex", "language", "JavaScript" ]
*음수 index도 사용 가능하다 : 요소를 배열 끝에서 부터 센다
let arr = [1, 2, 5];
arr.splice(-1, 0, 3, 4);
console.log(arr); // [1, 2, 3, 4, 5]
- slice
➡️ arr.slice([start], [end])
- start index 부터 (end를 제외한) end index 까지 요소를 복사한 새로운 배열 반환
- 음수 index를 사용할 수 있는데 사용하면 배열 끝에서 부터 요소 개수를 의미한다
- 기존 배열을 건들이지 않고 배열을 조작해 새로운 배열을 만들고자 할 때 사용한다
let arr = [ “t”, “e”, “s”, “t” ];
console.log(arr.slice(1, 3); // e, s
console.log(arr.slice(-2); // s, t
- concat
: 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용한다
➡️ arr.concat(arg1, arg2…)
- arr 에 속한 모든 요소와 arg1, agr2… 에 속한 모든 요소를 한테 모은 새로운 배열이 반환
- argN 이 배열일 경우 배열의 모든 요소가 복사된다
let arr = [1, 2];
console.log(arr.concat([3, 4])); // [ 1,2,3,4 ]
console.log(arr.concat([3, 4], [5, 6])); // [ 1,2,3,4,5,6 ]
console.log(arr.concat([3, 4], 5, 6)); // [ 1,2,3,4,5,6 ]
// 객체가 인자로 넘어오면 통으로 복사된다
let arr = [1, 2];
let arrayLike = {
0: “something”,
length: 1
};
console.log(arr.concat(arrayLike)); // 1, 2, [object Object]
// Symbol.isConcatSpreadable가 있다면 객체의 프로퍼티 값이 더해진다(분해)
let arr = [1, 2];
let arrayLike = {
0: “something”,
1: “else”,
[Symbol.isConcatSpreadable]: true,
length: 2
};
console.log(arr.concat(arrayLike)); // 1, 2, something, else
forEach로 반복작업하기
: 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해준다
➡️ arr.forEach(function(item, index, array) { … } );
// alert 창을 통해 출력해주는 코드
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
// index 정보까지 더해서 출력해준다
["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
alert(`${item} is at index ${index} in ${array}`);
});
배열 탐색하기
- indexOf, lastIndexOf, includes
➡️ arr.indexOf(item, from) : index from 부터 시작해 item을 찾는다, 해당 요소를 찾으면 index를 반환하고 못찾으면 -1을 반환한다
➡️arr.lastIndexOf(item, from) : 위와 동일하지만 검색을 끝에서부터 시작한다
➡️arr.includes(item, from) : index from 부터 시작해 item이 있는지 검색하는데 발견하면 true를 반환한다, NaN도 제대로 처리한다
let arr = [ 1, 0, false ];
console.log(arr.indexOf(0)); // 1
console.log(arr.indexOf(false)); // 2
console.log(arr.indexOf(null)); // -1
console.log(arr.includes(1)); // true, 배열 내 존재하는지 여부만 알고 싶을 때 사용
- find and findIndex
➡️ arr.find(function(item, index, array)) { … } : 특정 조건에 부합하는 객체를 배열 내에서 찾을 때 사용한다
- item : 함수를 호출할 요소
- index : 요소의 인덱스
- array : 배열 자기 자신
let result = arr.find(function(item, index, array) {
// true가 반환되면 반복이 멈추고 해당 요소를 반환
// 조건에 해당하는 요소가 없으면 undefined 반환
});
// 객체로 구성된 배열에서 조건에 만족하는 값 찾기
let users = [
{id: 1, name: “kim”},
{id: 2, name: “shim”},
{id: 3, name: “kiki”}
];
let user = users.find(item => item.id == 1);
console.log(user.name); // kim
➡️ arr.findIndex 는 arr.find와 동일하지만 조건에 맞는 요소를 반환하는 대신 그 요소의 index를 반환하는 점이 다르다
- filter
: 조건을 만족하는 요소가 여러 개일 때 사용한다, find와 유사하지만 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점이 다르다
➡️ arr.filter(function(item, index, array) {
// 조건을 충족하는 요소는 results에 순차적으로 더해진다
// 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환된다
});
let users = [
{id: 1, name: “kim”},
{id: 2, name: “shim”},
{id: 3, name: “kiki”}
];
let someUsers = users.filter(item => item.id < 3)
console.log(someUsers.length); // 2
• 메서드를 잘 활용해서 알고리즘을 풀자