23.04.26 자바스크립트 배열객체 메서드, 내장객체 Map( ), Set( )

배열을 변형하는 메서드 함수

 

   배열을 변형하는 메서드 함수

   1.map( ) : 배열 요소에 동일 함수를 적용하고자 할때

   2.filter( ) : 배열 요소에 특정한 조건식을 부여해서 해당 값을 추출하고자 할때

   3.reduce( ) : 배열 요소에 특정 콜백함수를 실행해서 최종적인 결과값을 만들어 낼 때

   누산기 기능 = reduce

 

1.map( ) : 배열 요소에 동일한 함수를 적용하고자 할때

 

   .map(함수(값))

   .map(함수(값,인덱스값))

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

  

   let newNumbers = numbers.map(number => number * 2); //

   newNumbers

   (5) [2, 4, 6, 8, 10]

   let newNumbers2 = numbers.map((number,index) => index + (number * 3));

   // 1,2,3,4,5 / 0,1,2,3,4 => 0 + (1*3), 1 + (2*3),...

   newNumbers2

   (5) [3, 7, 11, 15, 19]

 

 

 

2.filter( ) : 배열요소에 특정한 조건식을 부여해서 해당 값을 추출하고자 할때.

 

   .filter(함수(값))

   .filter(함수(값, 인덱스))

   let scores = [90, 35, 64, 88, 45, 92];

   let highScore2 = scores.filter((score, index) => {

   if(score >= 85) {

      console.log(`index : ${index}, score : ${score}`);

      return score;

      }

   });

   index : 0, score : 90

   index : 3, score : 88

   index : 5, score : 92

   let highScore3 = scores.filter(score => score >= 85); //간단하게 작성

   highScore3

   (3) [90, 88, 92]

 

 

3.reduce( ) : 

 

   .reduce(함수(누산기, 현재값, 인덱스, 원래배열), 초기값)

   필수입력사항 : 누산기, 현재값

   비필수 입력사항 & 입력권장 : 초기값

   누산기 : 현재값들의 최종 결과값

 

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

   let result = numbers.reduce((total, current) => total + current, 0);

   //초기값을 0으로 설정해서 리셋을 하는것이 좋다.

   result;

   15

 

---

Map( ) / Set( )

 

   Map & Set : 객체와 배열의 좋은 점만 추출한 자료형태.

   객체의 단점 : 객체의 프로퍼티에는 순서가 존재하지 않는다

     => for문을 사용하여 특정 구간을 반복하는데 어려움, 객체는 프로퍼티의 개수를 알려주는 속성 값이 없다.

   배열의 단점 : 프로퍼티(키와벨류값)을 상세히 저장할 수 없다. 온리 값만 저장 가능.

 

 

Map( )

 

   let myCup = new Map([

      ["color", "white"],

      ["haveHandle", "true"],

      ["meterial", "ceramic"],

      ["capacity", "300ml"]

   ]);

 

   콘솔 결과값

   0: {"color" => "white"}

   1: {"haveHandle" => "true"}

   2: {"meterial" => "ceramic"}

   3: {"capacity" => "300ml"}

   size: 4

   [[Prototype]]: Map

 

   추가적으로 데이터를 만들어내는것도 수월함

   myCup.set("type", "mini")

 

   콘솔결과

   0: {"color" => "white"}

   1: {"haveHandle" => "true"}

   2: {"meterial" => "ceramic"}

   3: {"capacity" => "300ml"}

   4: {"type" => "mini"} /새롭게 추가됨

 

   추가할 데이터가 100개라면? 체이닝기법 사용 가능

   myCup.set("purpose", "daily").set("size", "medium");

   Map 데이터 자료형에서 사용할 수 있는 프로퍼티와 메서드

   size : 맵요소의 개수를 알려주는 프로퍼티 //length 와 동일

   set(키, 값) 을 추가해주는 메서드

   get(키) 해당 맴의 키 값을 반환하는 메서드

   has(zl) 해당 키가 맵에 있는지 여부에 타라 참, 거짓을 반환해주는 메서드

   delete(키) 해당 키가 존재하는 프로퍼티를 삭제

   clear(키) 맴의 모든 요소를 삭제

   keys( ) 각 요소의 키만 모아서 반환

   values( ) 각 요소의 값만 모아서 반환

   entries( ) 각 요소의 키와 값을 반환

 

   myCup.keys( );

   MapIterator {'color', 'haveHandle', 'meterial', 'capacity', 'type', …}

 

   Iterator 순서대로 처리 가능 -> for 문 사용가능

   for(let key of myCup.keys()){

      console.log(key)

   };

   for(let entry of myCup.entries()){

      console.log(entry)

   };

 

 

Set( )

   //Set : 값이 중복되면 안될때. 엄격한 데이터 관리. //키값만

   //Map 단점 보완: Map 데이터는 데이터 안에 들어가는 요소가 중복이 되더라도 문제 되지 않음.

   let numberSet1 = new Set( );

   numberSet1.add("one").add("two");

   numberSet1.add("three").add("four");

 

---

Set( ) 예제

const result = document.querySelector("#result");
//출력공간 정의
const member1 = ["HTML", "CSS"];
const member2 = ["CSS", "Javascript", "React"];
const member3 = ["Javascript", "Typescript"];

//취합하기
const subjects = [...member1, ...member2, ...member3];

//중복되는 값은 제외하기.
const resultList = new Set();
subjects.forEach(subject => {
  resultList.add(subject);
});

result.innerHTML = `
  <ul>
  ${[...resultList] //원본데이터는 건드리지 않겠다.
    .map(subject => `<li>${subject}</li>`)
    .join("") //배열을 문자로 전환할때.
  }
  </ul>
`