728x90
반응형
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']
728x90
반응형
'JS, TS' 카테고리의 다른 글
[JS] 모듈 (0) | 2024.01.12 |
---|---|
[JS] 표준내장객체 3 (정적 메소드, 객체, JSON) (0) | 2024.01.12 |
[JS] 표준내장객체 1 (문자, 숫자, 수학, 날짜) (0) | 2024.01.12 |
[JS] 클래스 (0) | 2024.01.12 |
[JS] 함수 (1) | 2024.01.11 |