JavaScript 개체 반복 가능한 메서드

JavaScript에서 (new 키워드를 사용하여) 데이터 구조를 인스턴스화할 수 있는 경우 Map Set Array 등의 개체입니다.

const map = new Map();
const set = new Set('Bello');
const array = new Array(3, 5, 'Bello');

const checkMap = typeof map;
const checkSet = typeof set;
const checkArray = typeof array;

console.log(checkMap, checkSet, checkArray); // object object object

기본 데이터 구조는 기본이 아닌 데이터 구조가 될 수도 있습니다.

Primitive data structures are the fundamental data structures like numbers, strings, etc.

Non-primitive data structure contains one or more primitive data (stored in a variable).

아래 예를 참조하십시오.

const numb = new Number(3)
const str = new String('Bello');

const checkNum = typeof numb;
const checkStr = typeof str;

console.log(numb, str); // [Number: 3] [String: 'Bello']
console.log(checkNum, checkStr); // object object

It is not a good practice to convert primitive data types to an object because they can lead to slow execution.

Instantiation should be avoided on primitive data types.

위의 예를 참조하십시오.

const numb = new Number(3)
const str = new String('Bello');

const checkNum = typeof numb;
const checkStr = typeof str;

console.log(numb, str); // [Number: 3] [String: 'Bello']
console.log(checkNum, checkStr); // object object

// numbers has no iterable keys and values
const iterNum = Object.keys(numb);

// strings has no iterable keys and values
const iterStr = Object.keys(str);

console.log(iterNum); // []
console.log(iterStr); // [ '0', '1', '2', '3', '4' ]

위의 예에서 문자열을 객체로 변환하면 반복 가능한 정렬 키(인덱스)가 반환되었습니다.

위의 예는 문자열이 반복 가능하지만 숫자는 그렇지 않음을 보여줍니다.

위에 사용된 구문은 다음과 같습니다.

Object.keys(obj)

위의 예는 아래와 같습니다.

const str = {
  0: 'B',
  1: 'e',
  2: 'l',
  3: 'l',
  4: 'o'
}

Object.keys(str); // [ '0', '1', '2', '3', '4' ]
/* Object.values(str) // [ 'B', 'e', 'l', 'l', 'o' ] */

Primitive data like string and number are convertible to objects, but not all object is iterable. For example, the number to object conversion returned an empty array, []; while a string to object conversion returned iterable ordered keys with their respective values.

위의 구문은 맵과 세트에서처럼 항상 작동하지는 않습니다.

아래의 다른 예를 참조하십시오.

const map = new Map();
const set = new Set('Bello');
const array = new Array(3, 5, 'Bello');

console.log( Object.keys(set) ); // [] => doesn't work on set
console.log( Object.keys(array) ); // [ '0', '1', '2' ] => works on array
console.log( Object.keys(map) ); // [] => doesn't work on map

Object.*는 Map 및 Set 반복 가능을 허용하지 않습니다. 반복 가능하지만 구문이 다릅니다.

map 또는 set objects iterable 구문은 아래에서 재구성됩니다.

map.keys()
set.keys()

위의 동일한 예가 수정되었습니다. 아래를 참조하십시오.

const map = new Map();
const set = new Set('Bello');
const array = new Array(3, 5, 'Bello');

console.log( set.keys() ); // { 'B', 'e', 'l', 'o' }
console.log( Object.keys(array) ); // [ '0', '1', '2' ]
console.log(map.keys()); // [Map Iterator] {  }

The former syntax doesn't return an array, but the latter syntax Object.* returns a real array

keys 메서드는 반복을 위해 개체에 사용되는 유일한 메서드가 아닙니다. 객체에 사용되는 values 및 entries와 같은 다른 메서드가 있습니다.

아래 예를 참조하십시오.

const user = {
  name: "Bello",
  age: 27
};

// loop over keys
console.log( Object.keys(user) ); // [ 'name', 'age' ]
// loop over values;
console.log( Object.values(user) ); // [ 'Bello', 27 ]
// loop over key-value pairs;
console.log( Object.entries(user) ); // [ [ 'name', 'Bello' ], [ 'age', 27 ] ]

Object.*는 실제 배열을 반환하므로 여기에서 항목에 액세스할 수 있습니다.

console.log( Object.keys(user)[0] ); // name
console.log( Object.values(user)[0] ); // Bello
console.log( Object.entries(user)[0][1] ); // Bello

위의 예는 아래와 같습니다.

const user = {
  name: "Bello",
  age: 27
};

for (let key of Object.keys(user)) {
  console.log(key); 
  /*
  name
  age
  */
}

for (let value of Object.values(user)) {
  console.log(value); 

  /*
  Bello
  27
  */
}

for (let entry of Object.entries(user)) {
  console.log(entry); 

  /*
  [ 'name', 'Bello' ]
  [ 'age', 27 ]
  */ 
}

The key value entry are random variable names.

개체 변형

keys values entries 메소드는 객체를 배열로 변환합니다.

메소드fromEntries는 배열을 객체로 변환합니다.

아래 예를 참조하십시오.

const user = {
  name: "Bello",
  age: 27
};

console.log( Object.entries(user) ); 
// [ [ 'name', 'Bello' ], [ 'age', 27 ] ]

const arr = Object.entries(user);
const toObj = Object.fromEntries(arr);

console.log(toObj); // { name: 'Bello', age: 27 }