JS) 배열을 객체로 , 객체를 배열로, / 2차원 배열이나 객체 배열에서 내가 원하는 값만 1차원 배열로

1. 객체를 배열로  -  [ ]를 씌운다.  

기존 { } 코드에 배열을 씌운다

let array =  { id: 1, content: 'Javascript', completed: false };

const newArray = [ array ];

//console.log(newArray);
[ { id: 1, content: 'Javascript', completed: false } ]

 

2.  객체를 배열로  -  Object.entries()

자바스크립트에서 사용되는 참조값  object(객체)와 array(배열) 이 있는데 Object 객체에서 제공하는 메소드를 이용하여 서로 형변환이 가능하다.

 

Object.entries는 object를 인자로 받아 [key, value] 형태의 배열을 값으로 갖는 2차원 배열을 반환한다.

객체의 키나 값만 배열로 가져오고 싶다면 Object.keys(), Object.values() 메소드를 사용한다.

const obj = { name: 'hong', age: 26, birth: '1225', address: 'seoul' };

const arr = Object.entries(obj);  // [['name', 'hong'], ['age', 26], ['birth', '1225'], ['address', 'seoul']];
const keys = Object.keys(obj);  // ['name', 'age', 'birth', 'address']
const values = Object.values(obj);  // ['hong', 26, '1225', 'seoul']

 

3.  (이차원) 배열을 객체로  -  Object.fromEntries()  

2차원 배열을 Object.fromEntries()의 인자로 전달하면 객체로 변환할 수 있다.

const arr = [['name', 'hoong'], ['age', 26], ['birth', '1225'], ['address', 'seoul']];

const obj = Object.fromEntries(arr);  

// console.log(obj);
{ name: 'hong', age: 26, birth: '1225', address: 'seoul' }

 

4.  (일차원) 배열을 객체로  -  Object.assign()

Object.assign()의 첫 번째 인자로 빈 객체({}),

두 번째 인자로 1차원 배열을 전달하면 인덱스 값을 key로 갖는 객체를 얻을 수 있다.

const arr = ['apple', 'orange', 'banana'];
const obj = Object.assign({}, arr);  

// console.log(obj);
{ '0': 'apple', '1': 'orange', '2': 'banana' }

---

5. array와 object의 일부 값만 가져오는 방법.

object의 일부 키만 갖는 새로운 객체를 만드는 방법은 rest parameter를 이용하면 된다.

const obj = { name: 'hong', age: 26, birth: '1225', address: 'seoul' };

// 객체에서 age만 제외하고 가져오기 
const { age, ...rest } = obj;

//console.log(obj);
{ name: 'hong', age: 26, birth: '1225', address: 'seoul' }

혹은 lodash에서 제공하는 omit 함수를 사용하면 간단하게 특정 키 값을 제외한 객체를 얻을 수 있다.

import { omit } from 'lodash';

const obj = { name: 'hong', age: 26, birth: '1225', address: 'seoul' };
const newObj = omit(obj, ['age', 'birth']);  // age, birth 키를 제외한 객체 반환

array는 자바스크립트의 map 고차함수를 이용하면 된다.

객체를 값으로 갖는 배열의 경우에는 위와 같이 rest parameter를 이용하여 일부 키 값만 갖는 객체 배열을 얻을 수 있다.

const arr = [
  { name: 'apple', price: 200, id: 'Item_001' },
  { name: 'banana', price: 500, id: 'Item_002' },
  { name: 'orange', price: 700, id: 'Item_003' },
  { name: 'cherry', price: 1000, id: 'Item_004' },
];

// price만 제외한 객체를 값으로 갖는 배열 반환
const newArr = arr.map(({ price, ...rest }) => rest);

//console.log(newArr);
[
  { name: 'apple', id: 'Item_001' },
  { name: 'banana', id: 'Item_002' },
  { name: 'orange', id: 'Item_003' },
  { name: 'cherry', id: 'Item_004' }
]

배열을 값으로 갖는 배열(2차원 배열)의 경우에는 배열 디스트럭쳐링을 이용하여 값 배열의 일부만 갖는 새로운 배열을 얻을 수 있다.

const arr = [
  ['apple', 200, 'Item_001'],
  ['banana', 500, 'Item_002'],
  ['orange', 700, 'Item_003'],
  ['cherry', 1000, 'Item_004'],
];

// 값 배열의 두 번째 요소를 제외한 새로운 배열 반환
const newArr = arr.map(([v1, , v3]) => [v1, v3]);

//console.log(newArr);
[
  [ 'apple', 'Item_001' ],
  [ 'banana', 'Item_002' ],
  [ 'orange', 'Item_003' ],
  [ 'cherry', 'Item_004' ]
]

 

 

 

참고

블로그 - 

https://guiyomi.tistory.com/126