Ambos for…in e Object.keys() podem ser usados ​​para iterar sobre as propriedades do objeto, mas há uma diferença entre eles.

para… em

O loop irá iterar sobre todas as propriedades enumeráveis ​​do próprio objeto e as propriedades do objeto herdadas de sua cadeia de protótipos (as propriedades dos protótipos mais próximos têm precedência sobre as dos protótipos mais distantes do objeto em sua cadeia de protótipos).

Um for...inloop apenas itera sobre propriedades enumeráveis ​​e não simbólicas . Objetos criados a partir de construtores integrados como Arraye Objectherdaram propriedades não enumeráveis ​​de Array.prototypee Object.prototype, como Arrayo método de indexOf()ou Objecto método de toString(), que não serão visitados no for...inloop .

O for...inloop abaixo itera sobre todas as propriedades enumeráveis ​​e não simbólicas do objeto e registra uma sequência de nomes de propriedade e seus valores.

const obj = { a: 1, b: 2, c: 3 };
for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}
// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Object.keys()retorna uma matriz cujos elementos são strings correspondentes aos nomes de propriedade com chave de string enumeráveis ​​encontrados diretamente em object. Isso é o mesmo que iterar com um for...inloop, exceto que um for...inloop também enumera propriedades na cadeia de protótipos. A ordem da matriz retornada por Object.keys()é a mesma fornecida por um for...inloop.

Object.keys() abaixo itera sobre todas as propriedades enumeráveis ​​e não simbólicas do objeto e registra uma sequência de nomes de propriedade e seus valores.

const obj = { a: 1, b: 2, c: 3 };
for (let prop of Object.keys(obj)) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Conclusão

Ambos for…in e Object.keys() são usados ​​para iterar sobre as chaves/propriedades do objeto, a única diferença é que for…in também itera sobre as propriedades enumeráveis ​​do objeto herdadas de sua cadeia de protótipos, enquanto Object.keys() não. .

Estarei postando mais tópicos relacionados ao desenvolvimento de javascript e front-end, você pode me ajudar com a inscrição.

Referências