자바스크립트 배열 메서드정리

배열관련 메서드정리

push() 메서드

- 배열의 맨뒤로 요소를 집어넣음

const arr = ["짱구","짱아","유리","맹구"]

arr.push("훈이") //["짱구","짱아","유리","맹구","훈이"]

pop() 메서드

- 배열의 맨뒤의 요소부터 삭제하고 삭제된 요소를 출력.

const arr = ["짱구","짱아","유리","맹구"]

arr.pop()  //'맹구' 요소삭제

console.log(arr) // ["짱구","짱아","유리]

arr.pop() //'유리' 요소삭제

console.log(arr) // ["짱구","짱아"]

arr.pop() //'짱아' 요소삭제

console.log(arr) // ["짱구"]

arr.pop() //'짱구' 요소삭제

console.log(arr) // []

arr.pop() //undefined

slice() 메서드

- slice() 메서드는 지정된 범위 안의 요소들만 잘라내고 잘라낸 요소를 출력한다.

const arr = ["짱구","짱아","유리","맹구"]

arr.slice(0,3)  // ['짱구', '짱아', '유리']요소삭제 

console.log(arr) //["맹구"] 3번째인덱스인 맹구는 삭제되지않음.

arr.slice(0,2)  //['짱구', '짱아']요소 삭제 0번째 인덱스 부터 2번째인덱스까지 삭제

console.log(arr) //["유리","맹구"] 2번째인덱스인 "유리"부터는 삭제되지않음.

toString() 메서드

- 배열을 문자열로 형변환 해주는 메서드이다.

arr.toString()  // '짱구,짱아,유리,맹구'

shift() 메서드

- 배열의 맨 앞글자 부터 삭제하는 메서드이다. 삭제한 요소를 출력한다.

const arr =  ["짱구","짱아","유리","맹구"]

arr.shift() //'짱구'

console.log(arr) //[ "짱아", "유리", "맹구" ]


arr.shift() //'짱아'

console.log(arr) // [ "유리", "맹구" ]

includes() 메서드

- 배열안에 특정 요소가 포함되어 있는지 확인하는 메서드 true or false로 값을 반환한다.

const arr =["짱구","짱아","유리","맹구"]

arr.includes("짱구") //true

arr.includes("훈이") //false

reverse() 메서드

- 배열의 순서를 거꾸로 바꿔주는 메서드이다.

const arr = ["짱구","짱아","유리","맹구" ]

arr.reverse() //[ "맹구","유리","짱아","짱구" ]

sort() 메서드

- 배열안의 요소들을 오름 차순, 내림 차순으로 정렬해주는 메서드이다

const arr1 = ["짱구","짱아","유리","맹구"]

arr1.sort() //['맹구', '유리', '짱구', '짱아']

 

- Number 요소들은 유니티코드 기준으로 정렬되기 때문에 1 , 10 ,11, 2..같은 방식으로 정렬되므로 인자를 전달해줘야한다.

const arr2 = [1,2,5,6,7,10,11]

arr2.sort() //[1, 10, 11, 2, 5, 6, 7]

arr2.sort((a,b) => a-b) //[1, 2, 5, 6, 7, 10, 11]

- 객체에 sort() 메서드 적용하기

const arr = [
  {name: '신발', price: 3000}, 
  {name: '가방', price: 1000},
  {name: '양말', price: 500}
];

arr.sort((a,b) => a.price - b.price)

console.log(JSON.stringify(arr[0])); 
console.log(JSON.stringify(arr[1]));
console.log(JSON.stringify(arr[2]));

// price요소의 value 값을 오름차순으로 정렬
// {"name":"orange","price":500}
// {"name":"apple","price":1000}
// {"name":"banana","price":3000}

배열관련 메서드를 정리했다. 리액트에서도 자주 나오는 메서드라서 외우진 못하더라도 이해하고 있으면 나중에 공부 할때 도움이 될 것 같다.