Object 관련된 메소드 정리 ( + 배열에 객체 넣기)

KHW·2021년 6월 2일
0

Javascript 지식쌓기

목록 보기
43/95
post-custom-banner

1. Object 형태

1) 그냥 넣기

let result = { 'a' : 0 , 'b' : 10 , 'c' : 20}

2) map을 사용

const result = {};			//빈 형태
//사용법
let num = [3, 2, 2, 4, 5, 6, 2, 1, 6];
num.map((val) => {
  result[val] = (result[val] || 0) + 1;
});

// num => { '1': 1, '2': 3, '3': 1, '4': 1, '5': 1, '6': 2 }

3) 프로퍼티마다 각각 넣기

const result = {};
result['1']= 100
result['a'] = 10;
console.log(result) // {1: 100, a: 10}
  • 주의 : object[1]이나 object['1']이나 같은 것으로 처리한다.

2. Object 접근하기

let result = { 'a' : 0 , 'b' : 10 , 'c' : 20}
result['a']	//0
result['b']	//10
result['c']	//20

3. 메소드 사용하기

1) Object.keys(obj이름) : key값을 배열 형태로 처리

let result = { 'a' : 0 , 'b' : 10 , 'c' : 20}
console.log(Object.keys(result));	//["a", "b", "c"]

2) Object.values(obj이름) : values값을 배열 형태로 처리

let result = { 'a' : 0 , 'b' : 10 , 'c' : 20}
console.log(Object.values(result));	//[0, 10, 20]

3) Object.entries(obj이름) : [keys,values] 형태의 2차원 배열형태로 반환

let result = { a: 0, b: 10, c: 20 };
console.log(Object.entries(result)); //[ [ 'a', 0 ], [ 'b', 10 ], [ 'c', 20 ] ]

4) Object.fromEntries(2차원 배열형태) : entries를 통해 반환한 2차원 배열을 Object로 변경

const entries = [
  ["foo", "bar"],
  ["baz", 42],
];
const obj = Object.fromEntries(entries);

console.log(obj);		//{ foo: 'bar', baz: 42 }
console.log(Object.entries(Object.fromEntries(entries)));	//[ [ 'foo', 'bar' ], [ 'baz', 42 ] ]

4. 객체 순회하기

기본적으로 함수에서 사용했던 map같은 함수를 바로 사용할 수 없다.

1) for in

const result = { 1: 1, 2: 3, 3: 1, 4: 1, 5: 1, 6: 2 };

for (let keys in result) {
  console.log(keys, result[keys]);
}

2) entries 사용 후 map 사용

const result = { 1: 1, 2: 3, 3: 1, 4: 1, 5: 1, 6: 2 };

Object.entries(result).map((x) => {
  console.log(x[0], x[1]);
});

위는 같은 결과이다.


5. 배열에 객체 넣기

let genres = ["classic", "pop", "classic", "classic", "pop"],
  plays = [500, 600, 150, 800, 2500];

console.log(genres.map((t, i) => ({ genre: t, count: plays[i], index: i })));

/*
[
  { genre: 'classic', count: 500, index: 0 },
  { genre: 'pop', count: 600, index: 1 },
  { genre: 'classic', count: 150, index: 2 },
  { genre: 'classic', count: 800, index: 3 },
  { genre: 'pop', count: 2500, index: 4 }
]
*/

Process finished with exit code 0

필요에 따라 정렬을 위해 sort,filter를 쓰며 다룰수있다.


1) count에 따른 오름차순 정리

  genres
    .map((t, i) => ({ genre: t, count: plays[i], index: i }))
    .sort((a, b) => a.count - b.count)

/*
[
  { genre: 'classic', count: 150, index: 2 },
  { genre: 'classic', count: 500, index: 0 },
  { genre: 'pop', count: 600, index: 1 },
  { genre: 'classic', count: 800, index: 3 },
  { genre: 'pop', count: 2500, index: 4 }
]
*/

2) count에 따른 내림차순 정리

  genres
    .map((t, i) => ({ genre: t, count: plays[i], index: i }))
    .sort((a, b) => b.count - a.count);

/*
[
  { genre: 'pop', count: 2500, index: 4 },
  { genre: 'classic', count: 800, index: 3 },
  { genre: 'pop', count: 600, index: 1 },
  { genre: 'classic', count: 500, index: 0 },
  { genre: 'classic', count: 150, index: 2 }
]
*/

3) genre가 pop인 것만

  genres
    .map((t, i) => ({ genre: t, count: plays[i], index: i }))
    .filter((val) => val.genre == "pop")
/*
[
  { genre: 'pop', count: 600, index: 1 },
  { genre: 'pop', count: 2500, index: 4 }
]
*/

4) count가 700 이상인 것만

  genres
    .map((t, i) => ({ genre: t, count: plays[i], index: i }))
    .filter((val) => val.count > 700)

/*
[
  { genre: 'classic', count: 800, index: 3 },
  { genre: 'pop', count: 2500, index: 4 }
]
*/
profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자
post-custom-banner

0개의 댓글