자바스크립트 배열에 관련된 메소드 정리

indexOf

• 특정 문자 위치 찾기
  • 문법 : arr.indexOf(인덱스 찾고 싶은 문자, 검색을 시작할 인덱스)
• 반환값 : 존재하는 위치인덱스 값, 존재하지 않으면 -1을 반환
• 배열과 문자열 모두 사용가능
• 특정문자의 제일 앞 위치를 알려줌
• num번째 이후의 특정문자 위치를 알려줌
• 정규표현식 사용 불가

//안에 들어있는지 찾는 함수
s.indexOf('특정문자') : 특정문자의 제일 앞 위치를 알려줌
s.indexOf('특정문자', num) : num번째 이후의 특정문자 위치를 알려줌
ex)
let arr = ['만두', '만듀', '만쥬', '만듀']
arr.indexOf('만듀')  //  1
arr.indexOf('민주')  //  -1

let text = "hi hello"
text.indexOf('h') // 0
text.indexOf('h',1)  // 3

push

• 배열 끝에 요소를 추가함, 여러 개 추가도 가능
  • 문법 : arr.push(배열 끝에 추가하고 싶은 요소들)
• 반환값 : 변경된 배열의 크기
• 원본 배열을 변경

let arr = [1,2,3,4]
arr.push(5,6)
console.log(...arr) // 1 2 3 4 5 6

pop

• 배열에서 마지막 요소를 제거
  • 문법 : arr.pop()
• 반환값 : 제거된 요소를 반환
• 원본 배열을 변경

let arr = [1,2,3,4,5]
arr.pop()
console.log(...arr) // 1 2 3 4

unshift

• 배열 앞에 요소를 추가함, 여러 개 추가도 가능
  • 문법 : arr.unshift(배열 앞에 추가하고 싶은 요소들)
• 반환값 : 변경된 배열의 크기
• 원본 배열을 변경

let arr = [1,2,3,4]
arr.unshift(10,20)
console.log(...arr)  // 10 20 1 2 3 4

shift

• 배열에서 첫 번째 요소를 제거
  • 문법 : arr.shift()
• 반환값 : 제거된 요소를 반환
• 원본 배열을 변경

let arr = [1,2,3,4]
arr.shift()
console.log(...arr)  //2 3 4

concat

• 배열 끝에 요소나 배열을 추가
  • 문법 : arr.concat(배열 끝에 추가하고 싶은 요소들 또는 배열)
• 반환값 : 요소나 배열을 추가해 만들어진 새로운 배열을 반환
• 원본 배열은 변경되지 않음

let a = ['만두', '만듀', '만쥬']
let b = ['민주', '강민주']
a.concat(b)  //  (5) ['만두', '만듀', '만쥬', '민주', '강민주']
console.log(a)  //  (3) ['만두', '만듀', '만쥬']

splice

• 배열에 지정한 부분을 없애고 원하는 값을 넣음
  • 문법 : arr.splice(요소 제거하기 시작할 인덱스, 제거할 요소 개수, 제거한 위치에 삽입할 요소들)
• 반환값 : 삭제되는 요소들을 반환함
• 원본 배열을 변경

arr.splice(start, deleteCount, item1, item2, ...)
let arr = [10,20,30];
arr.splice(1,0,100); // 1번째에 0개를 지우고 100을 넣어라
console.log(...arr); // 10, 100, 20, 30

let arr = [10,20,30];
arr.splice(1,1,100,200); // 1번째에 1개를 지우고 100과 200을 넣어라
console.log(...arr); // 10, 100, 200, 30

// 만들고 싶은 값: [10, 1, 2, 3, 20, 30, 40, 1, 2, 3, 100]
let arr = [10,20,30,40];
let x = [1,2,3];
arr.splice(1,0,...x);
arr.splice(7,0,...x);
arr.push(100);

let arr = [10,20,30,40];
arr.splice(1);      //1번째부터 끝까지 다 지워라
arr.splice(1, 2);   //1번째부터 2개를 지워라(삽입값은 없음)

slice

• 구간 안의 요소들을 복사해 새로운 배열로 변환함
  • 문법 : arr.slice(복사 시작할 인덱스, 복사 종료할 인덱스)
• 반환값 : 복사된 새로운 배열이 반환
• 원본 배열은 변경되지 않음
• 인덱스를 음수로도 전달할 수 있음( 뒤에서 몇번째를 의미 )

const arr = [1, 2, 3, 4];
arr.slice(1, 2); // [2]
arr.slice(1, 3); // [2, 3]
arr.slice(1); // [2, 3, 4]
arr.slice(-1); // [4]
arr.slice(-2); // [3, 4]

join

• 배열의 모든 요소를 구분자로 연결한 문자열을 만듬
  • 문법 : arr.join(구분자)
• 반환값 : 만들어진 문자열을 반환

let arr = ['hello', 'world', 'minju']
arr.join('!')    //hello!world!minju

let arr = ['010', '1234', '5678']
arr.join('-')    //010-1234-5678

reverse

• 배열 안 요소들을 뒤집음
  • 문법 : arr.reverse()
• 반환값 : 뒤집어진 배열을 반환함
• 원본 배열을 변경

let arr = [1, 2, 3]

arr.reverse()  //  (3) [3, 2, 1]

fill

• 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채움
  • 문법 : arr.fill(요소, 요소 채우기를 시작할 인덱스, 요소 채우기를 멈출 인덱스)
• 반환값 : 변환되는 배열을 반환함
• 원본 배열을 변경
• 모든 요소를 하나의 값만으로 채움

let arr = [1,2,3,4,5,6,7,8,9]
arr.fill(1)  // (9) [1, 1, 1, 1, 1, 1, 1, 1, 1]
arr.fill(0,3,5)  //  (9) [1, 1, 1, 0, 0, 1, 1, 1, 1]
//아래와 같이 많이 쓰임
let arr = Array(5).fill(0)
console.log(arr)  //  (5) [0, 0, 0, 0, 0]

includes

• 배열 내에 특정 요소가 포함되어 있는지 확인
  • 문법 : arr.includes(특정요소, 시작할 인덱스)
• 반환값 : 포함되어 있으면 true 없으면 false를 반환

let arr = [1, 2, 3, 1]
arr.includes(1);  //   true
arr.includes(2,2);  //  false <- 2번 인덱스 이후에 2가 존재하지 않음

flat

• 인수로 전달한 깊이만큼 배열을 평탄화함
  • 문법 : arr.flat(요소)
• 반환값 : 평탄화된 배열을 반환함
• 요소를 생략할 시 기본값은 1
• 요소에 infinity를 전달하면 완전하게 평탄화됨

[1, [2, 3, 4]].flat(); //  [1, 2, 3, 4]
[1, [2, [3, [4]]]].flat(); //  [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(2); //  [1, 2, 3, [4]]
[1, [2, [3, [4]]]].flat(Infinity); //  [1, 2, 3, 4]