Maison > interface Web > Questions et réponses frontales > Quelles sont les nouvelles méthodes de parcours dans es6 ?

Quelles sont les nouvelles méthodes de parcours dans es6 ?

青灯夜游
Libérer: 2022-03-23 16:38:23
original
2161 Les gens l'ont consulté

Les nouvelles méthodes de traversée sont : 1. findIndex(), qui peut parcourir le tableau et trouver les éléments correspondants ; 2. find(), qui peut parcourir le tableau et trouver le premier élément correspondant ; correspondre aux clés Traverser les paires de valeurs ; 4. clés(), parcourir les noms de clés ; 5. valeurs(), parcourir les valeurs des clés.

Quelles sont les nouvelles méthodes de parcours dans es6 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

10 méthodes de parcours couramment utilisées dans ES5 :

1. Instruction de boucle for originale

2. Méthode intégrée d'objet tableau Array.prototype.forEach

3.

4. Méthode intégrée d'objet tableau Array.prototype.filter

5. Méthode intégrée d'objet tableau Array.prototype.reduce

6. Méthode intégrée d'objet tableau Array.prototype.some

7. .prototype.every méthode intégrée d'objet tableau

8. Méthode intégrée d'objet tableau Array.prototype.indexOf

9. .in instruction de boucle

es6 new Ajout d'une méthode de traversée

for...in循环语句

es6新增的遍历方法

findIndex(callback [, thisArg])查找数组中匹配的元素

找到一个就返回匹配的元素的下标,没找到就返回-1。
let arr = [1, 2, 3, 4, 5, 6]// 此时我们找大于2的数
let newArr = arr.findIndex(val => {return val > 2})
console.log(newArr) // 2
Copier après la connexion

find(fn(callback [, thisArg])

查找数组中匹配的元素,找到一个就返回匹配的元素,没找到就返回undefined。

注:下面的例子相对于需求是一个错误的示范,因为我们要找出大于2的数,当找到匹配到3时,满足条件,函数就会停止。

例:

let arr = [1, 2, 3, 4, 5, 6]
// 此时我们找大于2的数
let newArr = arr.find(val => {
    return val > 2
})
console.log(newArr) // 3
Copier après la connexion

entries() , keys() 和 values()

ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组和对象。它们都返回一个遍历器对象,可以用for...offindIndex(callback [, thisArg]) pour trouver les éléments correspondants dans le tableau

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
Copier après la connexion

find(fn(callback [, thisArg]) pour trouver les éléments correspondants dans le tableau, recherchez Si un est trouvé, il renverra undéfini

Remarque : L'exemple suivant est une mauvaise démonstration par rapport aux exigences, car nous voulons trouver un nombre supérieur à. 2. Lorsqu'une correspondance de 3 est trouvée, la condition est remplie et la fonction s'arrête 🎜🎜Exemple : 🎜
let letter = ['a', 'b', 'c'];  
let entries = letter.entries();  
console.log(entries.next().value); // [0, 'a']  
console.log(entries.next().value); // [1, 'b']  
console.log(entries.next().value); // [2, 'c']
Copier après la connexion
🎜🎜entries(), keys() et values()🎜🎜🎜ES6 propose trois nouvelles méthodes : les entrées. (), clés() et valeurs() - pour les tableaux et objets Traverse. Ils renvoient tous deux un objet traverseur, qui peut être parcouru à l'aide d'une boucle for...of. () parcourt le nom de la clé et values() parcourt le nom de la clé. Pour le parcours clé-valeur, inputs() parcourt les paires clé-valeur 🎜rrreee🎜Si vous n'utilisez pas de boucle for...of, vous pouvez le faire manuellement. appelez la méthode suivante de l'objet traverseur à parcourir 🎜rrreee🎜[Recommandation associée : 🎜 tutoriel vidéo javascript🎜, 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal