1.Set

💡 set은 배열에 중복되지 않는 값을 저장할 수 있다. 중복되지 않는 유일한 값들 배열에는 중복값이 저장될 수 있는데 set은 중복이 안되는 값을 저장할 수 있다.

const s = new Set();

// 요소를 추가하는 방법

// 메소드 사용해서
s.add("one");
s.add("one");
// 중복값은 허용하지 않는다.
s.add("two");
s.add("three");
console.log(s); //Set(3) {'one', 'two', 'three'}

• set은 중복값을 허용하지 않으므로 console은 위와 같이 찍힌다.

const arr = [1, 2, 3, 4, 5];
// 생성단계에서 생성자 함수에 전달, 배열을
const ss = new Set(arr);
console.log(ss);

//has 값을 가지고 있는지 확인하는 메소드
console.log(ss.has(2));
// 요소를 제거하는 메소드
ss.delete(2);
console.log(ss);

• 배열을 직접적으로 추가할 수 있고, has함수로 요소의 존재유무를 확인 할 수있다.
• delete로 제거할 수 있다.

// 값을 제거 모든 값을 제거하는 메소드
// ss.clear()

// forEach는 이터러블 반복자.
ss.forEach((i) => {
  console.log(i);
});
// SetIterator 객체로 반환
// 이터러블, 이터레이터 반환
const temp = ss.entries();
console.log(temp.next().value); //(2) [1, 1]

• set은 이터러블 하다. 즉 이터레이터를 반환 할 수 있다.

2.Map

💡 Map은 key와 value를 저장. key값을 객체로도 저장할 수 있다. Map:ES6부터 추가됐다. 키와 밸류흫 한쌍으로 저장하고 중복된 키값을 허용하지 않는다. iterator를 통해 Map객체 내부를 순회할 수 있다.

const map = new Map();
//값을 추가
// Map은 값을 추가할 때 키와 같이 한 쌍으로 추가를 해줘야 한다.

//set 메소드를 통해 키와 값을 저장
// 중복되는 키를 허용하지 않는다.
// 마지막으로 저장된 value를 적용
map.set("one", 1);
map.set("one", 2);
map.set("two", 2);
console.log(map);

//키를 왜 지정할까 , key로 저장된 값을 호출하기 위해.

// map은 get이라는 메소드로 값을 호출할 수 있다.

console.log(map.get("one")); //1

• 많이 봐 왔던 HashMap과 많이 비슷하다.

// 사이즈 확인 map에 저장된 요소가 몇개인지?
// map 저장된 요소의 갯수를 확인할 수 있다.
console.log(map.size);

// map애 저장된 키들을 반환해주는 메소드
const keys = map.keys();
console.log(keys);
// map애 저장된 밸류들을 반환해주는 메소드
const values = map.values();
console.log(values);

• key와 value만 따로 뽑아 반환시킬 수 있다.

// entries():[키,값]혀앹의 정보들을 모아서 MapIterator 객체로 변환 반환.
const iter = map.entries();
console.log(iter);

// console.log(iter.next().value);
// console.log(iter.next().value);

// key정보만 출력 for of문으로 작성해보자

for (const i of keys) {
  // 이터레이터 요소가 끝날때까지 반복하면서 요소를 보여준다.
  console.log(i);
}

// 값만 보여주자
for (const i of values) {
  // 이터레이터 요소가 끝날때까지 반복하면서 요소를 보여준다.
  console.log(i);
}

// 키랑 값을 다 출력
for (const [key, value] of map) {
  console.log(`키는${key} 밸류는${value}`);
}

// 키와 값 호출
map.forEach((value, key,) => {
  console.log(`키는${key} 밸류는${value}`);
});

• 마찬가지로 iterator를 반환하기 때문에 entries를 이용해 next로 로 값을 확인 할 수 있다.

3.배열의 다양한 method

• push

  const arr = Array.of(1, 2, 3, 4, 5, 6);
  console.log(arr);
  // 배열에 원본 배열을 수정하는 메소드
  arr.push(2);
  console.log(arr); //[1, 2, 3, 4, 5, 6]

• concat

  const result = arr.concat(5); //원본 배열 수정 ㄴㄴ 새로운 배열이 생기고 반환된다.
  console.log(arr);[1, 2, 3, 4, 5, 6, 2]
  console.log(result); [1, 2, 3, 4, 5, 6, 2, 5]

• includes

  const foods = ["apple", "orange"];
  //ES7에 도입 includes =>true 반환
  //banana가 배열에 있으면 true 없으면 false
  console.log(foods.includes("banana")); //false

• splice

  const arr6 = [1, 2, 3, 4];
  const result2 = arr6.splice(1, 2, 20, 30);
  // 1,2인덱스를 제거하고 20,30을 추가
  console.log(arr6); //[1, 20, 30, 4]
  
  // 함수의 반환은 제거한 요소들이 반환된다.
  console.log(result2); //[2, 3]

• slice

  // 매개변수로 전달받은 범위의 아이템을 복사해서 배열을 반환해주는 함수
  // slice 원본 배열은 반환 x
  const arr9 = [1, 2, 3];
  // arr9.slice(0, 1);
  console.log(arr9.slice(0, 2)); //(2) [1, 2]

• fill

  const arr11 = [1, 2, 3, 4, 5];
  // fill 메소드 ES6 인자로 전달받은 값을 배열의 처음주터 끝까지 채워준다.
  // 배열의 갯수를 유지하되 값을 초기화 해야 할 때 사용.
  arr11.fill(1);
  console.log(arr11); //(5) [1, 1, 1, 1, 1]

• flat

  // ES10
  // [1,2,3,4,5,[4,4]]==[1,2,3,4,5,4,4] =>이중배열을 1차원 배열로
  // flat()메소드가 배열의 뎁스를 맞춰준다. 1차 배열로
  const arr12 = [1, [2, 3, 4], [3, 4]].flat(); //한 depth 올려서 맞춰준다.
  const arr13 = [1, [2, [3]], [2, [5]]].flat(2); //매개변수로 뎁스의 개수
  // 배열안에 배열이 있는데 한개의 배열로 작업을 해야겠죵
  // 이걸로 하나의 배열로 변경해주자
  const arr14=[[[[[[[[1]]]]]]]].flat(Infinity) //뎁스가 몇개든 다 꺼내준다.
  console.log(arr12); //(6) [1, 2, 3, 4, 3, 4]
  console.log(arr13); //(5) [1, 2, 3, 2, 5]
  console.log(arr14); //[1]

  • 사실 arr14는 나쁜 의도가 다분하기 때문에 좋지 않다…

4.Object.assign

💡 객체의 원형에 assign메소드는 하나 이상의 객체로 부터 대상 객체로 속성을 복사할 때 사용한다. 두번째 매개변수는 객체의 속성을 복사해서 객체에 속성을 추가한 뒤 첫번째 매개변수의 객체를 반환한다. 다른 객체의 속성을 복사해서 새로운 객체를 생성한다.

예를 들어 다음 코드를 보자

// 전달된 매개변수가 없으면 open에 디폴트로 false값이 들어간다.
// 매개변수의 디폴트 값 생성
function Drawer(el, open = false) {
  this.el = el;
  this.isOpen = open;
  //  객체의 원형에 assign메소드는 하나 이상의 객체로 부터
  // 대상 객체로 속성을 복사할 때 사용한다.
  // 두번째 매개변수는 객체의 속성을 복사해서 객체에
  // 속성을 추가한 뒤 첫번째 매개변수의 객체를 반환한다.
  // 다른 객체의 속성을 복사해서 새로운 객체를 생성한다.
  Object.assign(this.el.style, {
    display: "block",
    position: "fixed",
    top: 0,
    bottom: 0,
    width: "500px",
    padding: "10px",
    backgroundColor: "yellow",
    transition: "1s",
  });
}

• 여기서 동적으로 새로운 객체를 생성하자

const slideMenu=new Drawer(document.querySelector('.drawer'));

• drawer를 클래스로 가지고 있는 요소를 this.el에 주었다.
• 이 때 Object.assign에 의해 el의 style은 두번째 매개변수의 값을 가지게 된다.