개발 공부중

[javaScript] 배열 메소드 정리 본문

JavaScript

[javaScript] 배열 메소드 정리

개발자 leelee 2023. 2. 13. 02:44
  • push() : 뒤에 삽입
  • pop() : 뒤에 삭제
  • unshift() : 앞에 삽입
  • shift() : 앞에 삭제
  • arr.splice(시작, 개수) : 시작부분부터 개수개까지 요소 지움
  • arr.splice(시작, 개수, 추가) : 시작부분부터 개수개까지 요소 지우고 추가
  • arr.slice(n,m) : n부터 m까지 반환
  • arr.forEach((fn)) : 배열 반복
let arr = ['kim', 'lee', 'park'];

arr.forEach((name, index) => {
	console.log(`${index +1}. ${name}`);
});

const array =['사과','배','귤','바나나']
console.log('#for in 반복문')
for(const i in array){
  console.log(i);
}

console.log('#for of 반복문')
for(const i of array){
  console.log(i);
}

//위 예제를 forEach 문으로 바꾸면 코드가 훨씬 간결해진다
array.forEach(function(value, index, array){
  console.log(value);
  console.log(index);
  console.log(array);
})

 

  • arr.indexOf(탐색할 객체) : 첫번째 위치 찾기
  • arr.indexOf(시작인덱스, 탐색할 객체) : 시작인덱스부터 탐색할 객체 위치 찾기
  • arr.find(fn) / arr.findIndex(fn) : 첫번째 true 값만 반환하고 끝, 만약 없으면 undefined를 반환
let userList = [
  {name: 'kim', age: 34},
  {name: 'lee', age: 10},
  {name: 'park', age: 31},
  {name: 'choi', age: 11},
]

const result = userList.find((user)=> {
  if(user.age<19){
    return true;
  }
  return false;
});

console.log(result);

  • arr.filter : true 값들 반환
let userList = [
  {name: 'kim', age: 34},
  {name: 'lee', age: 10},
  {name: 'park', age: 31},
  {name: 'choi', age: 11},
]

const result = userList.filter((user)=> {
    return user.age<19 ==0;
});

console.log(result);

  • arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
let userList = [
  {name: 'kim', age: 34},
  {name: 'lee', age: 10},
  {name: 'park', age: 31},
  {name: 'choi', age: 11},
]

let newUserList = userList.map((user, index)=> {
    return Object.assign({},user,{
    id : index +1,
    isAdult : user.age > 19,
    });
});

console.log(newUserList);

결과값

  • arr.join() : 합치기
let arr = ['안녕','하세요','테스트'];

let result = arr.join("!");
console.log(result);

  • arr.split(”기준”) : 기준 대로 나누기
let arr = '안녕?하세요?테스트';

let result = arr.split("?");
console.log(result);

let arr2 = '안녕 하세요 테스트';
let result2 = arr2.split("");
console.log(result2);

console.log(result);
console.log(result2);

  • arr.sort() : 배열 재정렬
    • 주의할 점은 유니코드 순서에 따라서 값을 정렬함으로 원하는 값이 안 나올 수 있음
    • 순서대로 정렬하기 위해서는 파라미터를 활용해야함
    • 정렬을 위해 Lodash 라이브러리를 사용하기도 함
let arr = [27, 8, 5, 13];

arr.sort((a,b)=>{
  return a - b; //오름차순 정렬
})

console.log(arr);

  • arr.reduce() : 배열의 모든 수 합치기/특정 결과만 배열로 뽑기
//배열의 모든 수 합치기
//forEach 문을 이용

let arr = [1,2,3,4,5];

//for, for of, forEach

let result = 0;
arr.forEach((num)=>{
  result += num;
})
console.log(result) //15

/*****
arr.reduce()
인수로 함수를 받음
(누적 계산값, 현재값) => {return 계산값};
******/

let arr = [1,2,3,4,5];

const result = arr.reduce((prev, cur)=>{
  return prev + cur;
},0)

console.log(result); //15
//특정 결과값 가져오기
let userList = [
  {name: "a", num: 1},
  {name: "b", num: 2},
  {name: "c", num: 3},
  {name: "d", num: 4},
  {name: "e", num: 5},
  {name: "f", num: 6},
]
let result = userList.reduce((prev, cur)=>{
  if(cur.num > 3){
    prev.push(cur.name);
  }
  return prev;
},[]);

console.log(result);

Comments