[JSInfo] 배열의 메소드

cptkuk91·2021년 10월 25일
0

JSInfo

목록 보기
15/26

배열과 메소드

배열에는 요소를 추가하고 제거하는 다양한 메소드가 있습니다.

  • 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"}
```![](https://media.vlpt.us/images/cptkuk91/post/72016fc5-e4d8-4acb-aef0-75e263bfd0f3/clout.jpeg)








profile
Hello World

0개의 댓글