javascript - property - Cómo recorrer un conjunto que contiene objetos y acceder a sus propiedades

object.keys map

Question

Quiero pasar por los objetos contenidos en una matriz y cambiar las propiedades de cada uno. Si hago esto:

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

La consola debería mostrar todos los objetos en la matriz, ¿verdad? Pero, de hecho, solo muestra el primer objeto. si el registro de la consola fuera del bucle, todos los objetos aparecen, por lo que definitivamente hay más allí.

De todos modos, aquí está el siguiente problema. ¿Cómo accedo, por ejemplo, Object1.x en la matriz, usando el bucle?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

Esto devuelve "indefinido". De nuevo, el registro de la consola fuera del ciclo me dice que todos los objetos tienen valores para "x". ¿Cómo accedo estas propiedades en el ciclo?

Se me recomendó en otro lugar que use matrices separadas para cada una de las propiedades, pero quiero asegurarme de haber agotado esta avenida primero.

¡Gracias!

Answer 1

Algunos casos de uso de bucle a través de una matriz en la forma de programación funcional en JavaScript:

1. Simplemente recorra una matriz

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Nota: Array.prototype.forEach () no es una forma funcional estrictamente hablando, ya que la función que toma como parámetro de entrada no debe devolver un valor, que por lo tanto no puede considerarse como una función pura.

2. Compruebe si alguno de los elementos en una matriz pasa una prueba

const people = [
    {name: ''John'', age: 23}, 
    {name: ''Andrew'', age: 3}, 
    {name: ''Peter'', age: 8}, 
    {name: ''Hanna'', age: 14}, 
    {name: ''Adam'', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Transformar a una nueva matriz

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Nota: El método map () crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz llamante.

4. Resume una propiedad en particular y calcule su promedio

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Crea una nueva matriz basada en la original pero sin modificarla

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Cuente el número de cada categoría

const people = [
    {name: ''John'', group: ''A''}, 
    {name: ''Andrew'', group: ''C''}, 
    {name: ''Peter'', group: ''A''}, 
    {name: ''James'', group: ''B''}, 
    {name: ''Hanna'', group: ''A''}, 
    {name: ''Adam'', group: ''B''}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === ''A'') {
        return {...groups, A: A + 1};
    } else if (person.group === ''B'') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Recuperar un subconjunto de una matriz según criterios particulares

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Nota: El método filter () crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada.

8. Ordenar una matriz

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

Referencias

• Array.prototype.some()
• Array.forEach()
• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.sort()
• Spread sintaxis

Answer 2

Aquí hay otra forma de iterar a través de una matriz de objetos (para esto, debe incluir la biblioteca jQuery en su documento).

$.each(array, function(element) {
  // do some operations with each element... 
});

Answer 3

Aquí hay un ejemplo de cómo puedes hacerlo :)

var students = [
  { 
    name : "Mike",
    track: "track-a",
    achievements: 23,
    points : 400,
  },

  { 
    name : "james",
    track: "track-a",
    achievements: 2,
    points : 21,
  },  
]

  students.forEach(myFunction);

function myFunction (item, index) {

  for( var key in item ) {
    console.log(item[key])
  }
}

Answer 4

Array iteración de objeto, usando jQuery, (use el segundo parámetro para imprimir la cadena).

$.each(array, function(index, item) {
       console.log(index, item);
});

Answer 5

En ECMAScript 2015 también conocido como ES6, puede usar un ciclo for..of para recorrer una matriz de objetos.

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

En el momento de publicar esta respuesta, la compatibilidad es bastante inexistente para Internet Explorer, pero a través del uso de un transpiler como Traceur o Babel, puede usar nuevas características de Javascript como esta sin tener que preocuparse por qué navegadores soportan qué.

Answer 6

Es realmente simple usar el método forEach desde ES5 +. Puede cambiar directamente cada propiedad de cada objeto en su matriz.

myArray.forEach(function (arrayElem){ 
  arrayElem = newPropertyValue;
});

Si desea acceder a una propiedad específica en cada objeto:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });

Answer 7

Esto funcionaría Looping thorough array (yourArray). A continuación, recorra las propiedades directas de cada objeto (eachObj).

yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

Answer 8

Looping a través de una matriz de objetos es una funcionalidad bastante fundamental. Esto es lo que funciona para mí.

var person = [];
person[0] = {
    firstName : "John",
    lastName : "Doe",
    age : 60
};
var i, item;
for (i = 0; i < person.length; i++) {
    for (item in person[i]) {
        document.write(item + ": " + person[i][item] + "<br>");
    }
}

Answer 9

Use forEach es una función de matriz incorporada. Array.forEach() :

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});

Answer 10

myArray[jx] es lógicamente incorrecto.

Use (myArray[j].x); en lugar

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

Answer 11

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}