Comment parcourir un tableau contenant des objets et d'accéder à leurs propriétés

Certains cas d'utilisation d'une boucle dans un tableau dans le de la programmation fonctionnelle façon en JavaScript:

1. Juste une boucle dans un tableau

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
});

Note: Tableau.le prototype.forEach() n'est pas une manière fonctionnelle à proprement parler, que la fonction prend comme paramètre d'entrée n'est pas censé renvoyer une valeur, qui ne peut donc pas être considérée comme une pure fonction.

2. Vérifier si l'un des éléments dans un tableau à passer un test

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. De se transformer en un nouveau tableau

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

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

Remarque: La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction sur chaque élément de l'appel de la matrice.

4. Résumer une propriété particulière, et calculer sa moyenne

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. Créer un nouveau tableau à partir de l'original, mais sans le modifier

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. Compter le nombre de chaque catégorie

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. Extraire un sous-ensemble d'un tableau basé sur des critères spécifiques

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

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

Remarque: La méthode filter() crée un nouveau tableau avec tous les éléments qui passent le test mis en œuvre par la fonction fournie.

8. Le tri d'un tableau

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);

9. Trouver un élément dans un tableau

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

Le Tableau.le prototype.méthode find() retourne la valeur du premier élément du tableau qui satisfait à la condition de test de la fonction.

Références

• Tableau.le prototype.certains()
• Tableau.le prototype.forEach()
• Tableau.le prototype.map()
• Tableau.le prototype.filtre()
• Tableau.le prototype.sort()
• La propagation de la syntaxe
• Tableau.le prototype.find()

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

Une boucle dans un tableau d'objets est une question assez fondamentale de la fonctionnalité. C'est ce qui fonctionne pour moi.

JS:

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>");
  }
}

C'est vraiment simple à l'aide de la méthode forEach depuis ES5+. Vous pouvez modifier directement chacune des propriétés de chaque objet dans votre tableau.

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

Si vous souhaitez accéder à une propriété spécifique sur chaque objet:

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

Ce serait le travail. Boucle complète array(yourArray) . Puis la boucle directe des propriétés de chaque objet (eachObj) .

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

Accepté réponse utilise une fonction normale. Alors les poster le même code avec une légère modification à l'aide de la flèche de la fonction forEach

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

Également en $.chaque, vous pouvez utiliser la flèche de la fonction comme ci-dessous

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

JS:

const jobs = [
    {
        name: "sipher",
        family: "sipherplus",
        job: "Devops"
    },
    {
        name: "john",
        family: "Doe",
        job: "Devops"
    },
    {
        name: "jim",
        family: "smith",
        job: "Devops"
    }
];

const txt = 
   ` <ul>
        ${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
    </ul>`
;

document.body.innerHTML = txt;

Être prudent sur le dos des Tiques (`)