코딩앙마 자바스크립트 중급 강의 7.배열 메소드

arr.splice(n, m) : 특정 요소 지움

n시작 m개수

let arr = [1,2,3,4,5];
arr.splice(1,2);
console.log(arr); // [1,4,5]

 

arr.splice(n, m, x) : 특정 요소 지우고 추가

let arr = [1,2,3,4,5];
arr.splice(1,3,100,200);
console.log(arr); // [1,100,200,5]

0개를 지우고 추가하면 아무것도 지우지 않고 그 자리에 추가 됨

 

arr.splice() : 삭제된 요소 반환

let arr = [1,2,3,4,5];
let result = arr.splice(1,2);

console.log(arr); // [1,4,5]
console.log(result); // [2,3]

 

 

arr.slice(n, m) : n부터 m까지 반환

let arr = [1,2,3,4,5];
arr.slice(1,4); // [2,3,4]

아무것도 넣지 않으면 복사

let arr2 = arr.slice();
arr.slice(arr2); // [1,2,3,4,5]

 

arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환

let arr = [1,2];
arr.concat([3,4]); // [1,2,3,4]
arr.concat([3,4],[5,6]); // [1,2,3,4,5,6]
arr.concat([3,4],5,6); // [1,2,3,4,5,6]

5와 6을 각각 전달해도 반환하는 값은 같음

 

 

arr.forEach(fn) : 배열 반복

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr)=>{
  // ...
});

보통 1,2번째 인자만 사용

 

 

arr.indexOf / arr.lastIndexOf

배열의 indexOf처럼 찾는 요소의 인덱스를 반환

 

arr.includes() : 요소를 포함하는지 확인

인덱스를 사용할 필요없이 요소를 포함하는지 확인할 때 사용, 불리언 값을 반환

 

arr.find(fn) / arr.findIndex(fn)

indexOf처럼 찾는 의미는 동일하지만 복잡한 연산이 가능하도록 함수를 연결할 수 있음

find : 첫번째 true 값만 반환하고 끝, 만약 없으면 undefined를 반환

findIndex : 찾는 값의 인덱스를 반환, 만약 없으면 -1을 반환

 

arr.filter(fn) : 만족하는 모든 요소를 배열로 반환

 

arr.reverse() : 역순으로 재정렬

최근 가입된 유저부터 보여주거나, 최근 작성된 게시글 순으로 정렬할 때

 

arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

 

arr.join() : 배열의 요소를 문자열로 만듦

()안에 아무것도 넣어주지 않으면 , 로 합해짐

넣어주면 해당 요소를 넣어서 합해짐

let arr = ['안녕', '여러분', '반가워요'];
let result = arr.join();
console.log(result); // 안녕,여러분,반가워요

let arr = ['안녕', '여러분', '반가워요'];
let result = arr.join(' ');
console.log(result); // 안녕 여러분 반가워요

 

arr.split() : 문자열을 나눠서 배열로 만들어줌

const users = "Mike,Tom,Jane";
const result = users.split(',');
console.log(result); // ['Mike', 'Tom', 'Jane']

 

Array.isArray() : 배열인지 아닌지 확인함

불리언 값을 반환

---

arr.sort() : 배열 재정렬

배열 자체가 변경되니 주의

인수로 정렬 로직을 담은 함수를 받음 > 매번 로직을 짜기 힘들어 Lodash 라이브러리를 사용 추천

 

arr.reduce() : 원하는 작업을 하고 최종값을 반환

인수로 함수를 받음

(누적 계산값, 현재값) => { return 계산값 };

초기값을 설정할 수도 있음

arr.reduce((누적 계산값, 현재값) => { return 계산값 }, 초기값)