Javascript : Array Method

lunaxislu·2023년 12월 13일

Javascript Method

목록 보기
2/4

Array.indexOf (...)

array.indexOf(요소) => 요소의 인덱스 값을 뱉어냄

// ex)

const arr = [1,2,3,4,5]
arr.indexOf(5) // 4

arr이라는 배열안에 요소 5는 몇 번째 index에 있냐라는 말

작동원리

Q . 무엇을 주는가

  • 문자열(배열)에서 특정 요소를 가진 인덱스 '첫 번째'를 반환함

  • 없으면, -1 을 반환


Array.sort()

Array.sort() - 원본 변형시킨다. ( 정렬 해주는 메소드 )

***작동원리***

무엇을 return 하는가??

  • 양수인지 음수인지를 판별해서 값을 반환함!!!
  1. return a-b가 양수이면 a를 오른쪽
  2. return a-b가 음수이면 b를 오른쪽,

+인지, - 인지에 따라서 배열의 정렬이 오른쪽, 왼쪽으로 간다.


Array.filter()

메소드임

Array.filter((el,index,source),callbackFnc) - filter 메소드는 원본 변형 안건드린다. [ 순서는 안바뀌고 조건식으로 순서대로 나온다.]

작동원리

Q . 무엇을 return 하는가?

A . return 하는 것은 boolean 으로 판별해서 값을 반환함!!!

  • true 이면 뱉고, false 이면 안 뱉음

** 참고

  • 0 은 boolean 값으로 보면 false
  • 1 은 boolean으로 보면 true

String(Array).includes(a)

**작동원리**

Q . 무엇을 return 하는가?

A . boolean 으로 true, false를 return

  • 문자열(배열) 에서 a 를 포함하면 true
    포함하지 않으면 false 를 내뱉어줌

Array.reduce

reduce 메소드로 accumulation에 빈 배열이 먼저 들어가게 설정해서 배열을 새로 만들어 줄 수도 있고

object를 생성해 낼 수도 있으며
map, filter 처럼 사용 할 수 도 있다.

Array.reduce( function(accumlation, currentValue, currendIndex,src), [initialValue])

//accumulation 누적값
//currentValue - 처리할 현재 요소
//currentIndex - 처리할 현재 요소의 인덱스
//src - array 자체

// initialValue - accumulation 인수에 제공되는 제일 첫 번 째 값, 초기값 제공 안하면 배열의 첫 번째 요소(data다, index아니다)를 사용

Case 1

let arr = [10,20,30,40,50];
let sum = arr.reduce((acc,cur,inx,src)=> {
  return acc + cur;
})

누적값: 10 현재값: 20 인덱스: 1 원본배열: 10,20,30,40,50 sum : 30
누적값: 30 현재값: 30 인덱스: 2 원본배열: 10,20,30,40,50 sum : 60
누적값: 60 현재값: 40 인덱스: 3 원본배열: 10,20,30,40,50 sum : 100
누적값: 100 현재값: 50 인덱스: 4 원본배열: 10,20,30,40,50 sum : 150

Case 2

let arr = [10,20,30,40,50];
let sum = arr.reduce((acc,cur,inx,src)=> {
  return acc + cur;
}, 0)

누적값: 0 현재값: 10 인덱스: 0 원본배열: 10,20,30,40,50 sum : 10
누적값: 10 현재값: 20 인덱스: 1 원본배열: 10,20,30,40,50 sum : 30
누적값: 30 현재값: 30 인덱스: 2 원본배열: 10,20,30,40,50 sum : 60
누적값: 60 현재값: 40 인덱스: 3 원본배열: 10,20,30,40,50 sum : 100
누적값: 100 현재값: 50 인덱스: 4 원본배열: 10,20,30,40,50 sum : 150

!!!!!!인덱스는 현재값에 대한 인덱스이다.!!!!!!!!!!

제일 중요!!!

initialValue 는 초기값이다. 초기값을 지정해주면 accumulation에 인자로 들어가서
reduce의 첫 번째 인자로 initialValue가 먼저 지정된다.

사실 Case 2에서 initialValue로 0을 주었는데
초기값을 0을 주면 먼저 arr의 배열의 요소를 순환하는 것이 아닌
먼저 초기값인 0이 'acc'먼저 들어간다

Example initialValue

let arr = [10,20,30,40,50];
        let count = 0;
        let sum = arr.reduce((a,b,c,d)=> {
            return a ;
        }, {})

initialValue에 {}빈 오브젝트가 들어가있고 reduce를 실행해보면
=> acc의 초기값에 빈배열, 빈 오브젝트, 등을 넣어 주면 배열이 오브젝트가 되는 신기한 마술!!


Array.findIndex ()

**작동원리**

Q . 무엇을 어떻게 return 하는가?

`Array.findIndex( a=> return 조건식 ? a : -1 )`

A.

  • 모든 Array의 요소 'a'를 순환하며!

  • 조건식에서 true 이면 -> a의 index !!! 첫 번째!!! 를 반환하고

  • false 이면 -> -1 을 내 뱉는다.

    sample

array.findIndex(a=> {return a.id == productId}) // a.id의 값의 요소와 일치하는 index 값을 내뱉는다. 없으면 -1

Array.find

*작동 원리*

Q . 무엇을 어떻게 return 하는가?

Array.find(a=> return 조건식 ? a : undefined )

A.

  • 모든 Array의 요소 ' a ' 를 순환하며!
  • 조건식에서 true 이면 -> a 라는 요소 ' 첫 번째 ' 를 반환하고
  • false 이면 -> 요소를 반환하지 않고 undefined 를 반환한다.

Array.map

Array.map(el,index,source) // 원본 변형 안한다. 

-el : Array의 각 요소
-index : Array의 각 요소의 인덱스
-source : Array 자체

0개의 댓글