![[JS] 자바스크립트 필수 배열 메소드 총정리 - Javascript Array method](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbc3y2Z%2FbtrQq3T9LYt%2FEh4qSfQz65ZgAnLLUl8Ii1%2Fimg.png)
728x90
sort()
배열을 오름차순, 내림차순으로 정렬한다.
예시)
const arr = [5, 3, 2, 4, 6, 1];
const res;
res = arr.sort(); // sort((a, b) => a - b)과 동일
console.log(res);
// [1, 2, 3, 4, 5, 6]
res = arr.sort((a, b) => b - a);
console.log(res);
// [6, 5, 4, 3, 2, 1]join()
배열을 문자열로 변환한다.
배열.join(); // 구분자를 넣지 않으면 컴마가 포함되어 문자열로 합쳐진다.
배열.join('.'); // 구분자를 넣어주면 아이템 사이에 구분자를 넣어서 문장여로 합쳐진다.
예시)
const fruits = ['apple', 'banana', 'orange'];
let res;
res = fruits.join();
console.log(res);
// 'apple,banana,orange'
res = fruits.join(' ');
console.log(res);
// 'apple banana orange'split()
문자열을 배열로 변환한다.
문자열.split();// 구분자를 넣지 않으면 문자열 한 덩이라가 배열의 아이템 1개로 들어간다.
문자열.split('.'); // 구분자를 기준으로 쪼개서저 배열로 변환된다.
문자열.split('')////separator로 ""(length가 0인 문자열)을 전달하면,
//문자열을 각각의 문자별로 잘라서, 한 글자씩(공백 포함) 배열에 저장하여 리턴
예시)
const fruits = '🍎, 🥝, 🍌, 🍒';
const arr = fruits.split(',');
console.log(arr);
// ["🍎", " 🥝", " 🍌", " 🍒"]reverse()
배열의 아이템 순서를 뒤집는다.
배열.reverse();
예시)
const array = [1, 2, 3, 4, 5];
const res = array.reverse();
console.log(res);
// [5, 4, 3, 2, 1]
console.log(array); // 원래 배열도 변경이 되어있다.
// [5, 4, 3, 2, 1]splice()
인덱스로 배열의 아이템을 삭제한다.
인덱스로 배열의 아이템을 여러개 삭제한다.
인덱스로 배열의 아이템을 삭제하고 해당 인덱스에 새로운 아이템을 추가한다.
❗️단, 반환값은 삭제한 요소 배열이다.
배열.splice(인덱스, 삭제할갯수, 추가할 아이템...);
예시)
const array = [1, 2, 3, 4, 5];
let res = array.splice(1, 3);
console.log(res);
// [2, 3, 4]
console.log(array);
// [1, 5]slice()
배열의 특정한 부분을 리턴한다.
배열.slice(시작인덱스, 끝 인덱스);// 끝인덱스의 앞까지만 포함한다.
예시)
const array = [1, 2, 3, 4, 5];
let res;
res = array.slice(2); // 2부터 쭉
console.log(res);
// [3, 4, 5]
res = array.slice(1, 3);
console.log(res);
// [2, 3]slice vs splice
slice
배열의 특정한 부분을 리턴한다. 인덱싱은 (시작, 끝+1)
원래 배열은 변화없음
splice
배열의 특정한 부분을 리턴한다. + 원래 배열에서 특정한 부분이 삭제된다. + 삭제하면서 아이템을 추가할 수 있다. 인덱싱은 (시작, 갯수)
원래배열 변화있음
find()
배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.
콜백 함수의 반환된 값이 true이면 그 즉시 멈추고 해당 요소를 리턴한다.
배열.find();
예시)
students 배열에서 90점인 학생 찾기
const res = students.find((student) => student.score === 90);
console.log(res);
// Student {name: "C", age: 30, enrolled: true, score: 90}filter()
배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.
콜백 함수의 반환된 값이 true인 요소들을 모아 새로운 배열을 만들어서 리턴한다.
배열.filter();
예시)
//등록된 학생들만으로 이루어진 배열을 만들어라.
const res = students.filter((student) => student.enrolled);
console.log(res);
// (3) [Student, Student, Student]
// 0: Student {name: "A", age: 29, enrolled: true, score: 45}
// 1: Student {name: "C", age: 30, enrolled: true, score: 90}
// 2: Student {name: "E", age: 18, enrolled: true, score: 88}
//문자의 길이가 5보다 큰 과일들만 배열에 담는다.
const fruits = ['Apple', 'Banana', 'Lemon', 'Watermelon'];
const fruitsFilter = fruits.filter(word => word.length > 5);
console.log(fruitsFilter);
// [ 'Banana', 'Watermelon' ]map()
배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.
콜백함수의 반환된 값들을 모두 요소로 담아서 새로운 배열을 리턴한다.
배열.map();
예시)
//학생들의 점수 배열을 만들어라
const res = students.map((student) => student.score);
console.log(res);
// [45, 80, 90, 66, 88]const numbers = [1, 2, 3, 4, 5];
const numbersMap = numbers.map(val => val * 2);
console.log(numbersMap);
// [ 2, 4, 6, 8, 10 ]reduce()/reduceRight()
reduce
원하는 시작점부터 모든 배열의 요소들을 돌면서 어떤 값을 누적할 때 사용한다.(앞 요소부터)
reduceRight
배열의 제일 뒤(오른쪽)부터 시작하여 모든 배열의 요소를 돌면선 어떤 값을 누적한다.
배열.reduce(콜백함수, 누적값의 초기값);
배열.reduceRight(콜백함수, 누적값의 초기값)
예시)
//모든 학생들의 평균 점수를 구하라.
const res = students.reduce((prev, curr) => {
// prev는 이전의 콜백함수의 리턴값이 저장된다.
// curr은 배열의 아이템을 순차적으로 전달 받는다.
return prev + curr.score;
}, 0);
console.log(res / students.length);
// 73.8
const res = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(res / students.length);
// 73.8const numbers = [1, 2, 3, 4];
const numbersSum = numbers.reduce((acc, cur) => {
console.log(acc, cur);
return acc + cur;
});
console.log(numbersSum);
// 1 2
// 3 3
// 6 4
// 10
728x90