[Résolu] Instruction for...of versus méthode forEach

Ce n'est pas facile d'appréhender le javascript et ses subtilités quand même...

Par exemple, cette boucle for...of :

for (const tabSummarySibling of tabList.children) {
  tabSummarySibling.disabled = false
  tabSummarySibling.classList.remove('current')
  tabSummarySibling.setAttribute('aria-selected', 'false')
}

N'est pas équivalente à cette méthode forEach() :

tabList.children.forEach(tabSummarySibling => {
  tabSummarySibling.disabled = false
  tabSummarySibling.classList.remove('current')
  tabSummarySibling.setAttribute('aria-selected', 'false')
})

Comment cela se fait-il ?

Pour avoir une idée du contexte - et un exemple de code en ligne - cette question fait suite à ce topic : Créer des onglets imbriqués dans un panneau avec des onglets parents
Modifié par Olivier C (15 Apr 2022 - 14:11)

Salut

Foreach est une callback.. pas for c'est ça la vrai différence

Et du coup ça fait quoi ? la méthode forEach créerait une sorte de contexte pour chaque item ? et cela ne serait pas pour une boucle à itération simple ?

J'ai du mal avec tous ces concepts...
Modifié par Olivier C (16 Apr 2022 - 12:58)

Bon, cela ne résout pas mon problème en cours, mais j'ai trouvé l'équivalent :

;[...tabList.children].forEach(tabSummarySibling => {
  tabSummarySibling.disabled = false
  tabSummarySibling.classList.remove('current')
  tabSummarySibling.setAttribute('aria-selected', 'false')
})

Pour la postérité...

Il s'agissait donc de convertir les données en quelque chose de lisible pour la méthode forEach, donc des données en tableau et pas en objet.
Sujet résolu.

Hello,

Je passe en coup de vent.

JENCAL a écrit :
Salut

Foreach est une callback.. pas for c'est ça la vrai différence

Non pas vraiment (Les joies de l'asynchrone !). Quand tu utilises async/await tu risques d'avoir des comportements inadéquats. Tout dépend si tu souhaites parser ta liste en parallèle ou à la queuleuleu.

niuxe a écrit :
Tout dépend si tu souhaites parser ta liste en parallèle ou à la queuleuleu.

Ah oui, effectivement, j'avais vu passer cette option. Merci pour l'intervention.

un petit exemple avec node afin de comprendre le comportement :

let sleep = ()=>{
    return new Promise((resolve, reject) =>{
        setTimeout(()=> resolve(), 1000 )
    })
};

(async ()=>{
    console.log('start');
    
    let colors = [
        'blue',
        'green',
        'red'
    ];
    for(let color of colors){
        await sleep();
        console.log(color);
    }

    console.log('end');
})();

let sleep = ()=>{
    return new Promise((resolve, reject) =>{
        setTimeout(()=> resolve(), 1000 )
    })
};

(async ()=>{
    console.log('start');
    
    let colors = [
        'blue',
        'green',
        'red'
    ];
    colors.forEach(async color =>{
        await sleep();
        console.log(color);
    });

    console.log('end');
})();

map, find, filter, reduce ont des comportements différents puisqu'ils return un tableau promise dans ce contexte. Ce sont des solutions intermédiaires à for/of , for/in, for, while mais avec un comportement différent.

let sleep = ()=>{
    return new Promise((resolve, reject) =>{
        setTimeout(()=> resolve(), 1000 )
    })
};

(async ()=>{
    console.log('start');
    
    let colors = [
        'blue',
        'green',
        'red'
    ];
    let result = colors.map(async color =>{
        await sleep();
        console.log(color);
    });

    await Promise.all(result);

    console.log('end');
})();

Modifié par niuxe (19 Apr 2022 - 13:34)

Ah la vache ! Je viens de tester ton code et il est vrais que le résultat d'un forEach est loin de donner celui d'une simple itération :

// avec for...of :
"start"
"blue"
"green"
"red"
"end"

// avec forEach :
"start"
"end"
"blue"
"green"
"red"

Merci pour ce retour.