[JS] JavaScript 배열(Array) 데이터 정리

 

✏️ JS 배열(Array) - 1

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array | MDN

 

• JS의 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 따라서 밀집도가 보장되지 않습니다.
• 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.

 

// 배열
// 제로베이스.
// 인덱스 : 배열 내 순서
// element(요소), item : 배열 내 요소
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers[1]) // 인덱싱
console.log(fruits[2])

 

Methods

 

• .length() : 배열의 길이.
• .find() : 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
• .concat() : 배열을 병합해서 새로운 배열 반환.

 

// 배열
// 제로베이스.
// 인덱스 : 배열 내 순서
// element(요소), item : 배열 내 요소
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

// .length 배열 길이
console.log(numbers.length) // 4
console.log(fruits.length) // 3
console.log([1, 2].length) // 2
console.log([].length) // 0 => 내용이 비어져 있다.

// .concat() : 두개의 배열데이터를 병합해서 새로운 배열 데이터를 반환
// 원본의 데이터는 손상되지 않음.
console.log(numbers.concat(fruits))
console.log(numbers)
console.log(fruits)

 

• forEach()

// .forEach()
// index = i ,element = item (매개변수)
fruits.forEach(function (fruit, i) {
  // 배열의 길이만큼 콜백함수 반복
  console.log(fruit, i)
})

// forEach

const a = fruits.forEach(function (fruit, index) {
  console.log(`${fruit}-${index}`)
})
console.log(a)

 

• map()

// map
const b = fruits.map((fruit, index) => {
  return `${fruit}-${index}`
})
console.log(b)


// 자주 사용되는 형태
const c = fruits.map(function (fruit, index) {
  return {
    id: index,
    name: fruit
  }
})
console.log(c)

const d = fruits.map((fruit, index) => ({
    id: index,
    name: fruit
}))
console.log(d)

 

 

 

✏️ JS 배열(Array) - 2

 

• indexOf() : 배열 안 항목의 인덱스 찾기
• slice() : 사본을 만드는 방법, 배열 복사하기.

 

map, filter

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

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

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

// map, filter는 원본에 영향을 미치지 않고 새로운 배열 반환

 

find, findIndex

// .find() .findIndex()
const a = fruits.find(fruit => /^B/.test(fruit))
console.log(a) // Banana

const b = fruits.findIndex(fruit => {
  // 정규표현식
  return /^C/.test(fruit)
})
console.log(b) // 2

 

includes()

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

const b = fruits.includes('HEROPY')
console.log(b)

 

push, unshift, pop, shift

// .push() .unshift()
// 원본 수정됨 주의!
// 뒤쪽에 삽입
numbers.push(5)
console.log(numbers) // [1, 2, 3, 4, 5]
// 맨 앞에 삽입
numbers.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4, 5]

// pop : 배열 끝에서부터 항목 제거하기.
// shift : 배열 앞에서부터 항목 제거하기.

 

reverse

// .reverse()
// 원본 수정됨 주의!
// 역순으로 뒤집음.
numbers.reverse()
fruits.reverse()

console.log(numbers)
console.log(fruits)

 

splice

// .splice()
// 원본 수정됨 주의!
// 1. 몇번째 아이템을 지우는 용도
// (아이템번호, 지울 아이템 개수)
numbers.splice(2, 1)
console.log(numbers) // [1, 2, 4]
// 여러개를 지울 때는 splice(pos, n) pos~n 인덱스의 항목을 제거.

// 2. 해당 자리의 데이터를 바꾸는 용도
// numbers.splice(2, 0) => 지우는 개수 0개
// numbers.splice(2, 0, 999) => 해당 아이템번호를 세번째 인수로 변환