FE (Front End) (구)/javascript

JS(JavaScript) new Set, Array.from 배열 만들기

B_Tae 2022. 5. 23. 21:40

new Set

new Set을 간단하게 정리해보면 중복이 불가능한 데이터 집합이라 할 수 있다.

Set의 사용법은 다양하다.

Set 객체 사용

let mySet = new Set
//add
mySet.add(1); // Set { 1 } 
mySet.add('1'); // Set { 1, '1' } 
mySet.add('hello'); // Set { 1, '1', 'hello' }

//has
mySet.has(1); // true 
mySet.has('a'); // false 
mySet.has('hello'); // true

//delete
mySet.delete('hello'); // Set { 1, '1' } 
mySet.delete(1); // Set { '1' }

//clear
mySet.clear() // Set { }

//size
// Set { 1, '1', 'hello' }
mySet.size // 3

외에도 배열을 합치는 방법으로도 사용되고 이용만 잘한다면 두 배열의 합집합, 차집합을 구할 수 있다.

//중복 없이 배열 합치기
let a =  [1,2,3]  
let b =  [3,4,5]  
let ab = Array.from(new  Set([...a,  ...b])) // {1,2,3,4,5} 중복 삭제

has, delete 등을 사용하면 배열을 합치는 과정에 다양한 방법을 사용할 수 있다.

Array.from

Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다.
여기서 유사 배열이란?
인덱스가 키값이고 길이를 갖는 객체를 의미


기본 예제

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

다양한 예제

  1. 문자열에서 배열 만들기
Array.from('foo');
// ["f", "o", "o"]
  1. Set에서 배열 만들기
const s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]
  1. Map에서 배열 만들기
const m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];
  1. 배열 형태를 가진 객체에서 배열 만들기
function f(...arguments) {
  return Array.from(arguments);
}

f(1, 2, 3);

// [1, 2, 3]
  1. 화살표 함수 사용
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
  1. 길이로 배열 만들기
const arr = Array.from({length: 5}, (v, i) => i);
//[0,1,2,3,4] 참고로 v는 undefined 
//길이로만 사용하는 배열을 빠르게 만들 때 유용하다.

new Set
Array.from