Qual é a diferença entre os ciclos for...in e for...of?

O ciclo for...in itera sobre as chaves (propriedades) das propriedades enumeráveis do objeto, incluindo as propriedades da sua cadeia de protótipos.

O ciclo for...of itera sobre os valores de objetos iteráveis (Array, Map, Set, String, arguments, etc.). Ele não itera sobre as propriedades do protótipo.

	for...in	for...of
Itera sobre	Chaves (propriedades) de objetos	Valores de objetos iteráveis
Usado com	Objetos	Arrays, strings, Map, Set e outros objetos iteráveis
Prototipo	Itera sobre as propriedades do protótipo	Não itera sobre as propriedades do protótipo
Ordem de percurso	Não garantido para chaves não inteiras	Garantido para arrays (por índice)

Exemplo for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Irá mostrar: "a 1", "b 2"
}

Exemplo for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Irá mostrar: 1, 2, 3
}

De modo geral, para percorrer arrays e estruturas semelhantes, é preferível usar for...of, e para percorrer propriedades de objetos, for...in (frequentemente em combinação com hasOwnProperty para excluir propriedades do protótipo).