Qual é a diferença entre as instruções (for… in) e (for… of) em JavaScript?

Eu sei o que éfor... in loop (repete a tecla), mas ouviu pela primeira vez sobrefor... of(itera sobre o valor). Estou confuso comfor... of ciclo. Não recebi um adjetivo. Este é o código abaixo:

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
   console.log(i); // logs "3", "5", "7"
    //it is does not log "3", "5", "7","hello"
}

O que eu tenho é,for... of itera sobre os valores da propriedade. por que não registrar (retornar)"3", "5", "7","hello" ao invés de"3", "5", "7" ? masfor... in o loop itera sobre cada tecla ("0", "1", "2", "foo"). aquifor... in loop também iterarfoo chave. mas por ... não iterarte sobre o valor defoo propriedade ie"hello".Por que é assim?

Em resumo:

aqui eu consolefor... of ciclo. deve ser log"3", "5", "7","hello" mas aqui registra"3", "5", "7". Por quê ?

Exemplo de Link

questionAnswers(10)

yourAnswerToTheQuestion