Array method
forEach
MDN - Array.prototype.forEach()
const arr = [1, 2, 3];
arr.forEach(( e, i, arr ) => console.log(e, i, arr))
// 1 0 [ 1, 2, 3 ]
// 2 1 [ 1, 2, 3 ]
// 3 2 [ 1, 2, 3 ]forEach는 파라미터로 콜백함수를 전달함.
map
배열 안의 각 원소를 변환할 때 사용하며, 새로운 배열을 반환.
const arr = ["JS", "CSS", "REACT", "NODE"];
const map = arr.map((item, i) => item)
console.log(map) // [ 'JS', 'CSS', 'REACT', 'NODE' ]filter
주어진 콜백 함수를 통과하는 요소를 모아 새로운 배열을 반환합니다.
const arr = ["JS", "CSS", "REACT", "NODE"];
const newArr = arr.filter(item => item.length > 4);
console.log(newArr) // [ 'REACT' ]indexOf
원하는 항목이 배열의 몇번째 원소인지 찾아주는 함수. 파라미터로 찾고자하는 값을 받는다.
값을 찾으면 해당 가 위치한 index값을 반환하고 값이 없으면 -1을 반환
const arr = ["JS", "CSS", "REACT", "NODE"];
console.log(arr.indexOf("CSS")); // 1findIndex
배열 안의 값이 객체이거나, 배열일 때는 indexOf()로 찾을 수 없습니다.
대신 findIndex()를 사용합니다. findIndex는 파라미터로 콜백함수를 받습니다.
const arr2 = [
{
name: 'kang',
age: 27
},
{
name: "kim",
age: 24
}
]
console.log(arr2.findIndex(item => item.name === "kim")) // 1find
주어진 콜백 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
값이 없으면 undefined를 반환.
const arr2 = [
{
name: 'kang',
age: 27
},
{
name: "kim",
age: 24
}
]
console.log(arr2.find(item => item.name === "kang")) // { name: 'kang', age: 27 }
console.log(arr2.find(item => item.name === "park")) // undefinedsplice
배열의 기존 요소를 삭제, 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start: 배열의 변경이 시작할 인덱스
deleteCount: 배열에서 제거할 요소의 수
item1, item2 ... : 배열에 추가할 요소
const arr = [1, 2, 3, 4, 5];
arr.splice(1, 1) // 1번 인덱스에서 1개 삭제
console.log(arr) // [ 1, 3, 4, 5 ]
arr.splice(1, 0, 2) // 1번 인덱스에서 0개 삭제, 2추가
console.log(arr) // [ 1, 2, 3, 4, 5 ]
arr.splice(5, 0, 6, 7, 8) // 5번 인덱스에서 요소 추가
console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7, 8 ] slice
slice는 배열을 잘라낼 때 사용합니다. 단, splice와는 다르게 새로운 배열 객체를 반환하며
원본 배열은 바뀌지 않습니다.
arr.slice([begin[, end]])
const arr = [1, 2, 3, 4, 5]
const sliceArr = arr.slice(0,3);
console.log(sliceArr) // [ 1, 2, 3]
console.log(arr) // [ 1, 2, 3, 4, 5]shift
배열에서 첫번째 요소를 제거하고, 그 값을 반환합니다.
const arr = [1, 2, 3, 4, 5]
console.log(arr.shift()) // 1
console.log(arr) // [ 2, 3, 4, 5 ]unshift
새로운 요소를 배열의 맨 앞쪽에 추가하고, 배열의 길이를 반환합니다.
const arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(-1, 0)) // 7
console.log(arr) // [ -1, 0, 1, 2, 3, 4, 5 ]pop
배열에서 마지막 요소를 제거하고, 그 값을 반환합니다.
const arr = [1, 2, 3, 4, 5]
console.log(arr.pop()) // 5
console.log(arr) // [ 1, 2, 3, 4 ]push
새로운 요소를 배열 맨 끝쪽에 추가하고, 배열의 길이를 반환합니다.
const arr = [1, 2, 3, 4, 5]
console.log(arr.push(6, 7)) // 7
console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7 ]크롬을 제외한 대부분의 브라우저에서 push() 메소드를 사용해 데이터를 할당하는 방법보다 접근자 []를 사용해 데이터를 할당하는 코드의 실행 속도가 2배 정도 더 빠르다.
출처
concat
인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
const arr = [1, 2, 3, 4, 5]
const arr2 = [6, 7, 8]
const arr3 = arr.concat(arr2)
console.log(arr3) // [ 1, 2, 3, 4, 5, 6, 7, 8 ]join
배열의 모든 원소를 연결해 하나의 문자열을 만듭니다.
const arr = ["JS", "CSS", "HTML"]
console.log(arr.join()) // JS,CSS,HTML
console.log(arr.join('')) // JSCSSHTML
console.log(arr.join('-')) // JS-CSS-HTML문자열 연산 성능 비교
// += 연산자를 이용한 문자열 병합
str = "";
for(var i = 0; i < 100; i++) {
str += "test";
}
// Array.join() 메서드를 이용한 문자열 병합
arr = [];
for(var i = 0; i < 100; i++) {
arr[i] = "test";
}
arr.join("");+= 연산자는 두 문자열을 합친 새로운 문자열을 만들고 새로운 메모리 위치에 저장함과 동시에 기존 문자열(str)에 대한 참조를 변경하는 연산을 반복적으로 실행해야 합니다.
하지만 Array.join() 메서드로 연산하면 비교적 메모리를 효율적으로 접근할 수 있는 배열을 사용합니다.
reduce
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과 값을 반환합니다.
const res = arr.reduce( (acc, cur) => acc + cur)
console.log(res) // 10acc는 누적 값, cur는 현재 값
배열에서 최댓값, 최솟값 찾기
Math.max(val1, val2, val3, ...) // 최댓값
Math.min(val1, val2, val3, ...) // 최솟값
Math.max() 함수는 입력된 숫자 중 가장 큰 수를 반환합니다.
숫자 배열에서 최댓값 찾기
- Function.prototype.apply () 사용
const arr = [5,2,1,3]
console.log(Math.max.apply(null, arr)) // 5- Array.reduce() 함수 사용
const res = arr.reduce( (acc, cur) => Math.max(acc,cur))
console.log(res) // 5- 전개 연산자(spread operator) 사용
const res2 = Math.max(...arr);
console.log(res) // 5