JS--método transversal--la diferencia entre for...in y for...of

URL original: JS--método transversal--la diferencia entre for...in y for...of - Se busca programador

Introducción

ilustrar

        Este artículo presenta la diferencia entre el uso de JavaScript para... en y el uso para... de recorrido.

URL del sitio web oficial

para... en - JavaScript | MDN

para... de - JavaScript | MDN

la diferencia

artículo	para en	para de
efecto	Iterar sobre todas las propiedades enumerables. (incluyendo atributos numéricos)	iterar sobre todos los valores
Uso recomendado	Iterar sobre las propiedades del objeto	iterar sobre la matriz
iterar sobre elementos	llave	valor
defecto	Atravesar matrices tipo matriz : las matrices tipo matriz se parecen mucho a las matrices en el sentido de que también tienen propiedades de longitud e índice, pero también pueden tener otras propiedades y métodos no numéricos, que normalmente no necesitamos. El bucle for..in los listará a todos. Estas propiedades "adicionales" son problemáticas si necesitamos tratar con objetos similares a matrices. Atravesar una matriz : atravesar una matriz es de 10 a 100 veces más lento que iterar a través de un objeto. (for..in está optimizado para atravesar objetos). El orden de recorrido puede no ser el orden de la matriz	no puedo obtener la clave No se pueden atravesar objetos (se puede resolver con Object.keys())
ventaja		Orden de salida garantizado Rico en características
Traversable	Objetos, objetos tipo matriz (con índice y longitud), matrices	Objetos iterables (con el método Symbol.iterator), por ejemplo: Array, Map, Set, String, TypedArray，generador de argumentos 对象
Versión	ES5	ES6

por... en ejemplo

Iterar sobre las propiedades del objeto

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}

iterar sobre la matriz

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) {
  alert( arr[key] ); // Apple, Orange, Pear
}

por... de ejemplo

let fruits = ["Apple", "Orange", "Plum"];

// 遍历数组元素
for (let fruit of fruits) {
  alert( fruit );
}

igual a:

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}