개발 노트

배열 메서드[join,map,filter,reduce] 본문

Javascript

배열 메서드[join,map,filter,reduce]

Meter216 2022. 12. 8. 19:01

join

map

filter

Object.keys

reduce


 

**배열메서드는 기본적으로 원본 배열을 바꾸는 것이 아니라 바꾼 배열을 새로 변수로 받아야한다. 

 

.join()

 

배열의 모든 요소들을 연결하는 메서드 연결하면서 string으로 만들어준다.

hoin뒤에 인자값에 넣는 값으로 요소 와 요소 사이에 구분자를 넣어준다.

const arr = ["reply", "content-type", "body"]

let text = arr.join("\r\n")

text = 
reply
content-type
body

**string 상태가 된다.

 

.map

 

배열의 요소를 바꿔주는 메서드 

value 값을 다 한 번 씩 돌려서 return 값으로 바꿀 요소의 값을 넣어주면 된다.

const obj = {
    reply: true,
    "content-type": "string",
    body: "hello world"
}

const arr2 = arr.map((value) => `${value}:${obj[value]}`)

arr2 = [reply:true, content-type:string, body:helloworld]

 

.filter()

 

배열에서 특정 값만 뽑아내서 리턴값으로 새로운 배열을 만들어내는 메서드

하나의 요소가 있을 때마다 콜백함수가 한 번 씩 실행된다.

value를 매개변수에 넣어두면 [0] 번으로 한 번 돌리고, [1] 한 번 돌리고, 배열의 요소만큼 돌린다.

콜백 함수에 return이 존재해야하고  리턴값은 항상 true or false 여야 한다. true 일 때 배열을 빼서 새로 만든다.

arr = [reply, content-type, body, content-length]
const arr2 = arr.filter((value)=> value !== "body")

arr2 = [reply, content-type, content-length]

Object.keys

 

const  keys = Object.keys(obj)

obj안에 있는 key값, 속성값만 추출해서 새로 배열을 만든다 키 값만 뽑아 배열에 담아준다. 리턴값이 배열이다.

변수에 저장해주어야 한다.

const obj = {
    reply: true,
    "content-type": "string",
    body: "hello world"
}

const keys = Object.keys(obj)

keys = ["reply", "content-type", "body"]

.reduce

1.callback함수와 초기값(처음 돌 때 이전값으로 받는 값)을 인자값으로 받는다.

2.callback함수에 요소들을 4개를 지정 할 수 있다.

 1. acc  = 이전요소

 2. val  = 현재요소

 3. idx = 배열의실제 인덱스값

 4. 전체배열  **쓸일이 잘 없다.

3.return 값을 다시 이전값으로 받는다.

const header = headers.reduce((acc, value, index)=>{
        const [key, val] = value.split(":") //value : reply:true
        acc[key] = val
        return acc
    }, {})

//const [key, val] 선언부분에 배열을 쓰면 배열의 값을 뽑아오겠다는 의미다.
//key=arr[0]값을 뽑아오고 val=arr[1]번 값을 뽑아와서 사용한다.

'Javascript' 카테고리의 다른 글

React  (0) 2023.02.23
Promise  (0) 2022.12.21
무한루프 slide , pre next 버튼 만들어보기  (0) 2022.12.05
Javascrip // 15~16일차 게시판, 배열함수(forEach, filter)  (0) 2022.11.18
Javascript // 14일차 [댓글수정]  (0) 2022.11.18