배열과 메소드
배열에는 요소를 추가하고 제거하는 다양한 메소드가 있습니다.
- arr.push(...items) : 맨 끝에 요소 추가
- arr.pop() : 맨 끝 요소 제거
- arr.shift() : 맨 앞 요소 제거
- arr.unshift(...items) : 맨 앞에 요소 추가
splice에 대해서 알아보자.
배열에서 요소를 하나만 지우고 싶을 때 사용하는 메소드
배열 또한 객체에 속하기 때문에 Property를 지울 때 사용하는 delete 연산자를 사용할 수 있습니다.
ex)
let arr = ["I", "go", "Home"];
delete arr[1];
console.log(arr); // I, Home 출력주의 사항은 arr[1]은 여전히 비어 있는 상태이기 때문에 arr.length 를 사용할경우 3개가 출력됨을 확인할 수 있습니다.
따라서 공간을 비우는 것이 아니라, 삭제를 원할 때 arr.length를 2개로 만들기 위해서는 splice를 사용해야 합니다.
splice의 특징은 요소의 추가, 삭제, 교체 모두 가능합니다.
splice 문법은
arr.splice(시작 값, 몇개의 요소를 삭제할지, 요소 추가 교체)로 구성됩니다.
// 요소 추가 값은 필수가 아닙니다.
arr.splice(시작 값, 몇개의 요소를 삭제할지) 로 작성해도 됩니다.ex) arr.splice를 통한 배열 삭제
let arr = ["I", "Study", "Home"];
arr.splice(1, 1);
console.log(arr); // I, Home 출력합니다.
// arr.splice(1, 1)을 통해 arr[1]부터 arr[1]까지 삭제한 것입니다.ex) arr.splice를 통한 배열 대체 (추가)
let arr = ["I", "Study", "Home"];
arr.splice(1, 1, "Dance", "School");
console.log(arr);
// arr[1] 부터 arr[1]까지 삭제 후 Dance와 School을 추가합니다.ex) arr.slice를 통한 배열 여러개 삭제
let arr = ["I", "Study", "Home"];
arr.splice(0, 2);
console.log(arr); // arr[0] 부터 arr[2] 전까지 삭제 따라서 Home을 출력
// slice 사용시 주의 사항은 마지막 수 이전까지만 삭제한다는 것입니다.
// Javascript 만든 사람이 그렇게 설계를 해놨습니다.
arr.splice 사용시 주의사항은 0,1,2 일 때 2값 이전까지만 삭제합니다.
요소를 삭제하지 않고, 새로운 값 추가하기
let arr = ["I", "Study", "Home"];
arr.splice(2, 0, "With", "Friend");
console.log(arr);
// arr[2] 부터 0개의 요소를 삭제하고 "With" 와 "Friend"를 추가합니다.
// 주의 사항은 arr[2] 이전에 들어옵니다.
// I Study With Friend Home주의 해야 합니다. arr.splice(2, 0, "추가 될 자료") 입력시 arr[2] 이전에 추가됩니다.
slice에 대해서 알아보자.
ex) slice 문법의 예
arr.slice([start], [end]);slice 문법을 통해 arr의 복사본을 만들 수 있습니다.
기존 배열을 건드리지 않으면서 배열을 조작할 수 있는 새로운 배열을 만들 때 자주 사용됩니다.
let arr = ["t", "e", "s", "t"];
console.log(arr.slice(1,3));
// 주의 사항은 3이전의 수까지만 반화합니다.
// 따라서 출력은 e,s 만 출력됩니다.
console.log(arr.slice(-2));
// 반대로 음수를 입력할 경우 뒤에서부터 복사해옵니다.
// -2까지 출력할 때 뒤에서 1,2 번째 까지 출력하기 때문에
// 결과는 s,t 를 반환합니다.concat에 대해서 알아보자.
기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때 사용됩니다.
ex) concat 기본 문법
arr.concat(arg1, arg2...);인수에는 배열이나 값이 올 수 있고, 인수 갯수는 제한이 없습니다.
arr에 속한 모든 요소와 arg1 와 arg2 등에 속한 모든 요소를 한곳에 모아 새로운 배열을 반환합니다.
ex) 사용 예시
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 출력유사 배열 객체로 보이지만 객체가 인자로 넘어오는 것이 아니라 통으로 복사해 더해집니다.
배열 탐색에 대해서 알아보자. (indexOf, lastIndexOf, includes)
indexOf를 통해 배열 요소의 위치를 알 수 있고, includes를 통해 존재 여부를 확인할 수 있습니다.
ex) arr.indexOf 기본 문법
arr.indexOf(item, from)indexOf는 from 부터 시작해 item(요소)를 찾습니다. 해당 요소를 찾으면 인덱스를 반환하고, 찾지 못하면 -1을 반환합니다.
ex) arr.lastIndexOf 기본 문법
arr.lastIndexOf(item, from);indexOf와 비슷하지만 검색을 끝에서부터 시작합니다.
ex) arr.include 기본 문법
arr.includes(item, from) 인덱스 from 부터 시작해 item(요소)가 있는지 검색하고 있을 경우 true를 반환합니다.
let arr = [1,0,false];
console.log(arr.indexOf(0)); // 1 출력
console.log(arr.indexOf(false)); // 2 출력
console.log(arr.indexOf("Hello")); // -1 출력
console.log(arr.includes(1)); // true 출력
배열 요소의 위치를 알고 싶은게 아니라, 요소가 배열에 존재하는지 여부를 확인하고 싶을 때는 includes를 사용하는 것이 맞습니다.
find와 findIndex
객체로 이루어진 배열이 있을 때 find와 findIndex를 사용합니다.
ex) find 기본 문법
let result = arr.find(function(item, index, array){
// true가 반환 될 경우 반복이 멈춥니다.
// 조건에 맞는 요소가 없을 경우 undefined를 반환합니다.
}- item : 함수를 호출할 요소
- index : 요소의 인덱스
- array : 배열 자기 자신
ex) 실제 예시
let users = [
{id: 1, name: "KJ"},
{id: 2, name: "SJ"},
{id: 3, name: "SH"}
]
let user = users.find(item => item.id == 1);
console.log(user.name); // KJ 출력filter
find 메소드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾습니다.
조건 충족하는 요소가 여러 개 일 때 arr.filter(fn)을 사용합니다.
filter와 find문법은 비슷하지만 조건에 맞는 요소 전체를 담은 배열을 반환합니다.
ex) filter 문법
let result = arr.filter(function(item, index, array){
// 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
//조건을 충족하는 요소가 없으면 빈 배열을 반환합니다.
}ex) 실제 예시
let users = [
{id: 1, name: "KJ"},
{id: 2, name: "SJ"},
{id: 3, name: "SH"}
]
let filterUser = users.filter(item => item.id < 3);
console.log(filterUser.length); // 2 출력
console.log(filterUser);
// {id: 1, name: "KJ"}, {id: 2, name: "SJ"}
```
