Array.isArray : 인수가 배열이면 true 아니면 false 반환
ex) Array.isArray([1,2]) //true
Array.isArray({}) //false
Array.prototype.indexOf : 인수로 전달된 요소를 검색해서 인덱스 반환
ex) const arr = [1,2,3,4]
arr.indexOf(3) // 2
arr.indexOf(5) // -1
Array.prototype.push : 전달받은 인수를 원본 배열의 마지막 요소로 추가 (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.push(5,6) // [1,2,3,4,5,6]
Array.prototype.pop : 원본 배열의 마지막 요소를 제거하고 반환 (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.pop() // [1,2,3]
Array.prototype.unshift : 전달받은 인수를 원본 배열의 처음 요소로 추가 (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.unshift(3,4) // [3,4,1,2,3,4]
Array.prototype.shift : 원본 배열의 첫번째 요소를 제거하고 반환 (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.shift() // [2,3,4]
Array.prototype.concat : 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열 반환 (원본 배열 변경 안됨)
ex) const arr1 = [1,2]
const arr2 = [3,4]
arr1.concat(arr2) // [1,2,3,4]
Array.prototype.splice : 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용, 매개변수 3개[start,end,item] (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.splice(1) // [1]
arr.splice(1,2) // [1,4] (인덱스 1부터 2까지 제거)
arr.splice(1,2,100) // [1,100,4] (인덱스 1부터 2까지 제거 후 100 추가)
Array.prototype.slice : 인수로 전달된 범위의 요소들을 복사해서 배열로 반환(얕은 복사), 매개변수 2개[start,end] (원본 배열 직접 변경 안됨)
ex) const arr = [1,2,3,4]
arr.slice(1) // [2,3,4] (인덱스 1부터 복사)
arr.slice(1,2) // [2,3] (인덱스 1부터 2까지 복사)
arr.slice() // [1,2,3,4]
Array.prototype.join : 배열의 모든 요소를 문자열로 변환 (기본 구분자 콤마('))
ex) const arr = [1,2,3,4]
arr.join() // '1,2,3,4'
arr.join('') // '1234'
arr.join(':') // '1:2:3:4'
Array.prototype.reverse : 배열의 순서를 반대로 (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.reverse() // [4,3,2,1]
Array.prototype.fill : 인수로 전달받은 값을 배열의 처음부터 끝까지 채움 (원본 배열 직접 변경됨)
ex) const arr = [1,2,3,4]
arr.fill(7) // [7,7,7,7]
arr.fill(7,2) // [1,2,7,7]
arr.fill(7,1,3) // [1,7,7,4] (7을 인덱스 1부터 2까지[3미포함] 채운다)
Array.prototype.includes : [ES7] 특정 원소가 포함되어 있는지 확인하여 true, false 반환
ex) const arr = [1,2,3,4]
arr.includes(1) // true
arr.includes(7) // false
arr.includes(2,3) // false (2가 포함되어있는지 인덱스 3부터 찾는다)
Array.prototype.flat : [ES10] 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화
ex) const arr = [1,2,[3,[4]]]
arr.flat() // [1,2,3,[4]]
arr.flat(2) // [1,2,3,4]
arr.flat(infinity) // [1,2,3,4] (모든 배열 평탄화)
Array.prototype.sort : 배열 정렬(기본 오름차순)
ex) const arr1 = ['b','a','d','c'] // 숫자는 비교 함수를 인수로 전달 해야함
arr1.sort() // ['a','b','c','d']
const arr2 = [100,2,1,200] // 숫자는 비교 함수를 인수로 전달 해야함
arr2.sort((a,b)=>a-b) // [1,2,100,200] (반환 값이 0보다 작으면 앞의 값 반환)
arr2.sort((a,b)=>b-a) // [200,100,2,1]
Array.prototype.forEach : 배열의 반복문 실행, 리턴값은 항상 undefined이다 (for문에 비해 성능은 안좋지만 가독성이 더 좋기 때문에 높은 성능이 필요한 경우가 아니라면 forEach 사용 권장)
ex) [1,2,3].forEach((item,index,arr)=>{
console.log('인덱스:'+index+', 값:'+item+', this:'+arr)
})
/*
인덱스:0, 값:1, this:[1,2,3]
인덱스:1, 값:2, this:[1,2,3]
인덱스:2, 값:3, this:[1,2,3]
*/
Array.prototype.map: 배열의 반복문 실행 후 새로운 배열 반환
ex) [1,2,3].map((item,index,arr)=>{
return item*2
})
// [2,4,6]
Array.prototype.filter : 콜백 함수의 반환값이 true인 요소만 새로운 배열로 반환
ex) [1,2,3,4].filter((item,index,arr)=>{
return item>2
})
// [3,4]
Array.prototype.reduce : 콜백 함수를 반복하면서 하나의 결과값만 반환, 첫번째 인수는 콜백함수, 두번째 인수는 초기값(초기값은 전달하는 것이 안전)
ex) [1,2,3,4].reduce((start,end,index,arr)=>{
return start+end
},0)
// 10
Array.prototype.some : 콜백 함수의 반환값이 하나라도 참이면 true, 아니면 false 반환 (빈 배열은 항상 false)
ex) [1,2,3,4].some(item=>item>2) // true
[1,2,3,4].some(item=>item<0) // false
Array.prototype.every : 콜백 함수의 반환값이 모두 참이면 true, 아니면 false 반환
ex) [1,2,3,4].every(item=>item>0) // true
[1,2,3,4].every(item=>item>2) // false
Array.prototype.find : [ES6] 콜백 함수를 호출해서 반환값이 ture인 첫번째 요소 반환
ex)const arr = [{id:1,name:'woo'},{id:2,name:'choi'},{id:3,name:'na'}]
arr.find(item=>item.id===2) // {id:2,name:'choi'}
Array.prototype.findIndex : [ES6] 콜백 함수를 호출해서 반환값이 ture인 첫번째 요소의 인덱스 반환
ex)const arr = [{id:1,name:'woo'},{id:2,name:'choi'},{id:3,name:'na'}]
arr.findIndex(item=>item.id===2) // 1
Array.prototype.flatMap : [ES10]map 메서드와 flat 메서드 순차 실행
ex)const arr = ['hello','world']
arr.map(x=>x.split('')).flat() // ['h','e','l','l','o','w','o','r','l','d']
arr.flatMap(x=>x.split('')) // ['h','e','l','l','o','w','o','r','l','d']
'개발 > Javascript' 카테고리의 다른 글
라이브러리 없이 만드는 간단한 로딩바(loadingbar) (0) | 2024.03.25 |
---|---|
String 메서드 모음 (0) | 2023.09.13 |
체크박스 전체 선택 코드 (0) | 2023.06.18 |
html에서 style, script 위치 (0) | 2022.01.18 |
데이터 타입 (0) | 2021.08.28 |