La boucle for est la plus fréquemment utilisée dans le développement quotidien. Lors de l'interaction avec des données frontales et back-end, les types de données courants sont des tableaux et des objets. Le parcours For est souvent utilisé lors du traitement d'objets et de tableaux, vous devez donc bien les comprendre. cinq types de boucles for. Ils sont:
- pour
- pour... dans
- pour... de
- pour attendre .. de
- pour chaque
- carte
1. Introduction à chacun pour
1、pour
La boucle for est le parcours le plus ancien et le plus couramment utilisé, et peut satisfaire la grande majorité des parcours. Vous pouvez parcourir des tableaux, des objets et des chaînes, exemples :
// 遍历数组
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
for (var i = 0,keys = Object.keys(obj); i< keys.length; i++){
console.log(obj[keys[i]])
}
//遍历字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
console.log(str[i])
}2. for ... in
for ... in est nouveau dans ES5. Il itère les propriétés énumérables d'un objet à l'exception de Symbol dans n'importe quel ordre, y compris les propriétés énumérables héritées.
// 遍历数组
var arr = [1, 2, 3]
for (var i in arr ){
console.log(i);//0 1 2
console.log(arr[i]);//1 2 3
}
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
for (var key in obj){
console.log(key)// job name
console.log(obj[key])// web worker 前端代码女神
}
//遍历字符串
let str = 'abc'
for (var i in str){
console.log(i) // 0 1 2
console.log(str[i]) // a b c
}3. L'instruction for ... of
for ... of crée une boucle d'itération sur les objets itérables (y compris Array, Map, Set, String, TypedArray, arguments objets, etc.), appelle le hook d'itération personnalisé et pour chaque instruction sont exécutés pour différentes valeurs d’attribut.
// 迭代 Array
var arr = [1, 2, 3]
for (var val of arr ){
console.log(val);// 1 2 3
}
//迭代 String
let str = 'abc'
for (var val of str){
console.log(val) // a b c
}
// 迭代 TypedArray - 一个类型化数组，描述了一个底层的二进制数据缓冲区！
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);//0 255
}
// 迭代 Map - 对象保存键值对，能够记住键的原始插入顺序
let map = new Map([['a',1],['b',2]])
for (let key of map) {
console.log('key',key)//['a',1] ['b',2]
}
for (let [key,value] of map) {
console.log(key) // a b
console.log(value) // 1 2
}
// 迭代 Set
let set = new Set([1,2,3,2,1])
for (let val of set) {
console.log(val)// 1 2 3
}4. for wait...of
crée une boucle qui traverse les objets itérables asynchrones et les objets itérables synchrones, y compris les objets String, Array, de type tableau intégrés (arguments ou nodeList), TypedArray, Map, Set et Asynchronous/définis par l'utilisateur. itérateurs synchrones.
Il appelle le hook d'itération personnalisé en utilisant la valeur de chaque propriété différente de l'objet pour appeler l'instruction à exécuter.
Semblable à l'opérateur wait, cette instruction ne peut être utilisée que dans une fonction asynchrone.
async function* asyncGenerator() {
var i = 0;
while (i < 3) {
yield i++;
}
}
(async function () {
for await (num of asyncGenerator()) {
console.log(num);// 0 1 2
}
})();5. forEach
forEach est publié dans la version ES5. Il exécute une fonction de rappel par ordre croissant pour chaque élément contenant une valeur valide dans le tableau. Les éléments qui ont été supprimés ou non initialisés seront ignorés (par exemple, sur un tableau clairsemé). Il est généralement considéré comme une version améliorée de la boucle for ordinaire.
// 遍历数组
var arr = [1, 2, 3]
arr.forEach((item, index) => {
console.log(index);//0 1 2
console.log(item);// 1 2 3
})
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
var keys = Object.keys(obj)
keys.forEach((key) => {
console.log(key)// job name
console.log(obj[key])// web worker 前端代码女神
})6.
Un nouveau tableau peut être renvoyé lors du parcours de la carte. Le résultat du nouveau tableau est la valeur renvoyée après avoir appelé la fonction fournie une fois pour chaque élément du tableau d'origine.
// 遍历数组
var arr = [1, 2, 3]
let newArr = arr.map((item) => item * 2)
console.log(newArr);//[2,4,6]2. La différence entre plusieurs pour
1. Différences dans les scénarios d'utilisation
La boucle for est l'instruction de parcours de boucle la plus ancienne et la plus primitive. Une variable est définie à l'intérieur de for et la boucle est parcourue en fonction des conditions, généralement la longueur du tableau. Lorsque la longueur est dépassée, la boucle s'arrête. Généralement, les tableaux ou des traversées de type tableau sont parcourues.
Lors du parcours de l'objet, puisque l'objet n'a pas de longueur, utilisez Object.keys() pour obtenir toutes les propriétés de l'objet et les renvoyer sous la forme d'un tableau.
for / in est principalement utilisé pour parcourir les propriétés énumérables de l'objet, y compris les propriétés de l'objet prototype, dans n'importe quel ordre. Lors de la traversée de l'objet, la valeur clé de la propriété est obtenue. Ce qui est parcouru est le tableau et l'indice du tableau.En tant que valeur clé.
for / of est utilisé pour parcourir les données d'objets itérables, notamment Array, Map, Set, String, TypedArray, les objets arguments, etc.
for wait...of est utilisé pour parcourir des objets itérables asynchrones. Cette instruction ne peut être utilisée que dans une fonction asynchrone.
forEach est une version améliorée de for. Il est plus simple à utiliser et comporte plus de paramètres, mais son essence est toujours une boucle de tableau. Chaque élément exécute un rappel sans modifier le tableau d'origine.
Map exécute un rappel pour chaque élément du tableau d'origine et renvoie un nouveau tableau sans modifier le tableau d'origine.
2. Différences fonctionnelles :
forEach et map ne prennent pas en charge la sortie des boucles, et d'autres non.
for wait ... of peut prendre en charge les opérations asynchrones, mais d'autres ne le font pas.
Pour parcourir des objets purs, l'énumération for ... in est plus pratique.
Pour le parcours de tableau, si un index n'est pas nécessaire, vous pouvez directement utiliser for...of pour obtenir la valeur, et break ou return sont également pris en charge ; si un index est également nécessaire, forEach est plus approprié, mais return n'est pas pris en charge .
Si un tableau est mappé à un autre tableau, l’utilisation de map est la plus appropriée.
3. Différences de performances
Lorsque l'environnement de test et les conditions des données de test sont cohérents, le classement des performances est :
for > for of > forEach > map > for in.
for a les performances les plus rapides car il n’y a pas d’appels de fonction ni de contexte supplémentaires.
for ... of est une structure de données avec une interface d'itérateur, qui peut être utilisée pour itérer les membres et lire directement les valeurs clés.
forEach est un sucre syntaxique pour for et possède de nombreux paramètres et contextes, il sera donc plus lent.
Étant donné que map renvoie un nouveau tableau de longueur égale, la surcharge de performances provoquée par la création et l'affectation du tableau est relativement importante.
for...in a les pires performances, car il doit énumérer tous les attributs de l'objet, nécessite un processus de conversion et est relativement coûteux.
3. Utilisation de pour
Lors du développement de projets, nous devons choisir un parcours approprié en fonction des besoins réels. Voici quelques suggestions d'utilisation :
Si vous devez mapper les données dans un autre tableau, tel qu'une valeur booléenne correspondante, il est recommandé d'utiliser map, qui ne modifiera pas le tableau d'origine et a une syntaxe simple.
Lorsque vous parcourez le tableau, vous pouvez utiliser for, forEach ou for...of.
Lors du parcours d'objets purs, il est recommandé d'utiliser for ... in.
Si vous devez parcourir des itérateurs, il est recommandé d'utiliser for ... of.
Si vous filtrez des tableaux qui remplissent les conditions d'un tableau, utilisez fillter.