[JS] 표준내장객체 2 (배열)

1. 배열

 

// at()
// 대상 배열 인덱싱
// 음수 값을 사용하면 뒤에서부터 인덱싱함

const arr = ['a', 'b', 'c']

console.log(arr[0]) // a
console.log(arr.at(0)) // a

console.log(arr[arr.length-1]) // c
console.log(arr.at(-1)) // c


// concat()
// 대상 배열과 주어진 배열을 병합해 새로운 배열 반환

const arr1 = ['A', 'B', 'C']
const arr2 = ['D', 'E', 'F']
const arr3 = arr1.concat(arr2)
// 전개연산자
const arr4 = [...arr1, ...arr2]

console.log(arr1)
console.log(arr2)
console.log(arr3) // ['A', 'B', 'C', 'D', 'E', 'F']
console.log(arr4) // ['A', 'B', 'C', 'D', 'E', 'F']


// every()
// 대상 배열의 모든 요소가 콜백 테스트에서 참을 반환하는지 확인

const arr5 = [1,2,3,4]
const isValid = arr5.every(item=>item<5)

console.log(isValid) // true


// filter()
// 주어진 콜백 테스트를 통과(참을 반환)하는 모든 요소를 새로운 배열로 반환
// 모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환

const numbers = [1,20,7,9,104,9,0,58]
const filteredNumbers = numbers.filter(number => number<30)

console.log(filteredNumbers) // [1, 20, 7, 9, 9, 0]

// find()
// 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소 반환
const foundItem = numbers.find(item=>item>10)
console.log(foundItem) // 20


const users = [
{name:'new', age : 20},
{name: 'Amy', age:20}
]
const foundUser = users.find(user=>user.name==='Amy');
console.log(foundUser); // {name: 'Amy', age: 20}

// findIndex()
// 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환
const index = numbers.findIndex(item => item>50)
console.log(index) // 4

// flat()
// 대상 배열의 모든 하위 배열을 지정한 깊이까지 이어붙인 새로운 배열을 생성
// 깊이의 기본값은 1

const arrNumbers = [1,2,[2, 3,4, [7,8, [9,0]]]]
console.log(arrNumbers.flat()) // [1, 2, 2, 3, 4, Array(3)]
console.log(arrNumbers.flat(2)) // [1, 2, 2, 3, 4, 7, 8, Array(2)]

// forEach()
// 대상 배열의 길이만큼 주어진 콜백 실행

// 무조건 3번 실행
arr.forEach(item => console.log(item))


for (let i=0; i<arr.length; i++){
    console.log(arr[i])
}

// includes()
// 대상 배열이 특정 요소를 포함하고 있는지 확인
console.log(arr.includes('a')) // true

// 예제
// 객체, 배열, 함수는 참조형이라, 메모리 주소때문에 데이터 값이 같아도 다른 데이터임
console.log(users.includes({name:'new', age : 20})) // false

const neo = users[0]
console.log(users.includes(neo)) // true

 

 

// join()
// 대상 배열의 모든 요소를 구분자로 연결한 문자로 반환

const arr = ['Apple', 'Banana', 'Cherry']

console.log(arr.join(',')) // Apple,Banana,Cherry
console.log(arr.join(', ')) // Apple, Banana, Cherry
console.log(arr.join('/')) // Apple/Banana/Cherry

// map()
// 대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환

const numbers = [1,2,3,4]
const newNumbers = numbers.map(item=> item*2)

console.log(newNumbers) // [2, 4, 6, 8]

// 예제
const users = [
    {name:'Neo', age:85},
    {name:'Amy', age:22},
    {name:'Lewis', age:11}
]
const newUsers = users.map(user => {
    return {
        // 전개연사자를 사용한 매개변수 user
        ...user,
        isValid:true,
        email:null
    }
})

console.log(newUsers) // [{…}, {…}, {…}] 출력 참고


// pop()
// 대상 배열에서 마지막 요소를 제거하고 그 요소를 반환
// 대상 배열 원본이 변경됨
console.log(arr.pop()) // Cherry
console.log(arr) //  ['Apple', 'Banana']


// push()
// 대상 배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이 반환
// 대상 배열 원본이 변경됨

const newLength = arr.push('Orange')
console.log(newLength) // 3
console.log(arr) //  ['Apple', 'Banana', 'Orange']

arr.push('mango', 'melon')
console.log(arr) // ['Apple', 'Banana', 'Orange', 'mango', 'melon']


// reduce()
// 대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환
// 각 콜백의 반환 값은 다음 콜백으로 전달

const numbers2 = [1,2,3]
const sum = numbers2.reduce((accumulator, currentValue)=>{
    return accumulator + currentValue
}, 0) // accumulator 초기값 0, currentValue는 배열 첫번째 아이템 1

console.log(sum) // 6

 

 

// reverse()
// 대상 배열의 순서 반전
// 대상 배열 원본이 변경
const arr = ['a', 'b', 'c']
const reversed = arr.reverse()

console.log(reversed) // ['c', 'b', 'a']
console.log(arr) // ['c', 'b', 'a']


// shift()
// 대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환
// 대상 배열 원본이 변경
// pop()은 마지막 요소 제거였음
console.log(arr.shift()) // c
console.log(arr) // ['b', 'a']


// slice()
// 대상 배열의 일부를 추출하여 새로운 배열 반환
// 두 번째 인수 직전까지 추출, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출
const arr2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g']

console.log(arr2.slice(0,3)) //  ['a', 'b', 'c']
console.log(arr2.slice(4, -1)) //  ['e', 'f']
console.log(arr2.slice(4)) // ['e', 'f', 'g']
console.log(arr2) //  ['a', 'b', 'c', 'd', 'e', 'f', 'g']


// some()
// 대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인
// 하나 이상의 요소만 통과하면 true
// every()는 모든 요소가 통과해야 함
const arr3 = [1,2,3,4]
const isValid = arr3.some(item => item > 3)

console.log(isValid) // true


// sort()
// 대상 배열을 콜백의 반환 값(음수, 양수, 0)에 따라 정렬
// 콜백을 제공하지 않으면, 요소를 '문자열'로 변환하고 유니코드 포인트 순서로 정렬
// -> 콜백 제공안하면 임의의 방식으로 정렬한다는 의미
// 대상 배열 원본이 변경됨
const numbers = [4,17,2,101,3,0,-1]

numbers.sort()
console.log(numbers) // [-1, 0, 101, 17, 2, 3, 4]

// 배열 요소를 a,b에 하나씩 넣음
// 4, 17을 a,b에 넣고 a-b 계산으로 낮은 순서대로 정렬
numbers.sort((a,b)=>a-b)
console.log(numbers) // [-1, 0, 2, 3, 4, 17, 101]

// b-a 가 큰값부터 정렬
numbers.sort((a,b)=>b-a)
console.log(numbers) // [101, 17, 4, 3, 2, 0, -1]


// splice()
// 대상 배열에 요소를 추가, 삭제, 교체
// 대상 배열 원본 변경됨
// splice(인덱스, 삭제하려는 아이템 개수, 추가하려는 문자)
arr.splice(2,0,'x')
console.log(arr) // ['b', 'a', 'x']

// 추가하지 않고 삭제만 진행
arr.splice(1, 1)
console.log(arr) // ['b', 'x']


// unshift()
// 새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환
// 대상 배열 원본이 변경됨
console.log(arr.unshift('x')) // 3
console.log(arr) //  ['x', 'b', 'x']