[Level up] 데이터(4) - 배열(2)

01.Array.prototype.filter()

• 주어진 함수의 필터링을 통과한 모든 요소를 모아 새로운 배열로 반환(원본 데이터 영향 없음)
• filter() 메소드의 콜백에서 true가 반환된 요소들만 반환

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = numbers.map(number => number < 3)
console.log(a) // (4) [true, true, false, false]

const b = numbers.filter(number => number < 3)
console.log(b) // [1, 2]

02.Array.prototype.find() & Array.prototype.findIndex()

• find(): 배열 데이터 내에서 조건에 맞는 특정한 요소를 찾는 메소드
• findIndex(): 배열 데이터 내에서 조건에 맞는 특정한 요소의 인덱스 번호를 반환하는 메소드

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = fruits.find(fruit => /^B/.test(fruit)) 
// /^B/ 정규표현식으로 '대문자 B로 시작하는 문자'라는 의미
console.log(a) // Banana

const b = fruits.findIndex(fruit => /^B/.test(fruit))
console.log(b) // 1

03.Array.prototype.includes()

• 배열 내에 인수로 사용된 데이터가 포함되었는지에 대한 여부를 확인해주는 메소드

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = numbers.includes(3)
console.log(a) // true

const b = fruits.includes('HEROPY')
console.log(b) // 값: false

04.Array.prototype.push() & Array.prototype.unshift()

• 주의! 원본 데이터 수정됨
• push(): 배열 맨 뒤쪽에 인수로 사용된 데이터를 요소로 포함시킴
• unshift(): 배열 맨 앞쪽에 인수로 사용된 데이터를 요소로 포함시킴

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.push(5)
console.log(numbers) // [1, 2, 3, 4, 5]

fruits.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4, 5]

05.Array.prototype.reverse()

• 주의! 원본 데이터 수정됨
• 배열 데이터의 순서를 뒤집어 반환하는 메소드

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.reverse()
fruits.reverse()

console.log(numbers) // [4, 3, 2, 1]
console.log(fruits) // ['Cherry', 'Banana', 'Apple']

07.Array.prototype.splice()

• 주의! 원본 데이터 수정됨
• 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.splice(2, 2) // index[2]부터 아이템 2개 삭제
console.log(numbers) // [1, 2]

numbers.splice(1, 0, 333) // index[1]부터 아이템 삭제 없이 333 추가
console.log(numbers) // [1, 333, 2]

fruits.splice(2, 1, 'Orange')  // index[2]부터 아이템 1개 삭제 후 "Orange" 추가
console.log(fruits) // ['Apple', 'Banana', 'Orange']

• 참고 사이트
  Array mdn 바로가기