Nouvelles méthodes de tableau : 1. from(), qui peut convertir un objet de type tableau ou itérable en un véritable tableau ; 2. of(), qui peut convertir un ensemble de valeurs en un tableau, ce qui compense les lacunes. du constructeur de tableau Array() ; 3. find() et findIndex(), renvoient le premier élément du tableau qui remplit les conditions 4. fill() et ainsi de suite ;
Comment démarrer rapidement avec VUE3.0 : Entrez dans
l'environnement d'exploitation de ce didacticiel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.
1. Array.from()
La méthode Array.from est utilisée pour convertir deux types d'objets en tableaux réels :
les objets de type tableau et
les objets itérables (y compris ES6 new La structure de données Set et Map)
signifie que tant que au fur et à mesure que la structure de données de l'interface Iterator est déployée, Array.from peut la convertir en tableau.
Dans le développement réel, il peut généralement être utilisé pour convertir la collection NodeList renvoyée par l'opération DOM, ainsi que les arguments à l'intérieur de la fonction.
Lorsquel'objet
passe un paramètre, il est utilisé pour convertir le tableau de classe en un véritable tableau
afin de supprimer la duplication.
constarr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...Le même effet peut également être obtenu console.log([...new Set(arr)]) //[1,2,3,5]
Pour les navigateurs qui ne déploient pas cette méthode, vous pouvez utiliser Array. méthode prototype.slice au lieu de
coût toArray = (() => {
Tableau.from ? Tableau.from : obj => [].slice.call(obj)
})() peut également recevoir un deuxième paramètre, qui est transmis à une fonction pour obtenir un effet similaire à la méthode map, traitant chaque élément et renvoyant le tableau traité
Array.from([1,2,3 ], item => item *2) //[2,4,6]
La longueur de la chaîne renvoyée
peut être utilisée pour convertir la chaîne en tableau, puis renvoyer la longueur de la chaîne, car elle peut gérer correctement divers caractères Unicode, cela évite Le propre bug de JS consistant à compter les caractères Unicode supérieurs à /uFFFF comme 2 caractères
function countLength(string) {
retourner Array.from(string).length
} 2. Array.of()
La méthode Array.of est utilisée pour convertir un ensemble de valeurs en un tableau. Compensez les lacunes du constructeur de tableaux Array(). Parce que le nombre de paramètres est différent, le comportement de Array() sera différent
//Le code suivant montre la différence Array.of(3);
Tableau.de(3, 11, 8); // [3,11,8]
nouveau tableau (3); // [, , ,]
nouveau tableau (3, 11, 8); // [3, 11, 8]
//La méthode Array.of peut être simulée avec le code suivant.
fonction ArrayOf() {
return [].slice.call(arguments);
} 3. Find() et findIndex() des instances du tableau.
find()
renvoie le premier membre du tableau qui remplit les conditions. Son paramètre est une fonction de rappel. Tous les membres du tableau exécutent cette fonction en séquence jusqu'à ce que le premier remplisse les conditions. est trouvé, puis renvoie le membre. Si aucun membre ne remplit les conditions, renvoie undéfini.
La fonction de rappel de cette méthode reçoit trois paramètres : valeur actuelle, position actuelle,
exemple de tableau d'origine 1
[1,12,4. ,0,5] .find((item,index, arr) => return item < 1) // 0
Exemple 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(élément); // -5
// find prend également en charge ce type de recherche complexe var points = [
{
x : 10,
oui : 20
},
{
x : 20,
y : 30
},
{
x : 30,
y : 40
},
{
x : 40,
oui : 50
},
{
x : 50,
oui : 60
}
];
points.find (fonction matcher (point) {
point de retour.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 } L'écriture et l'utilisation de findIndex()
sont fondamentalement les mêmes que la méthode find(). Elle renvoie simplement la position du premier membre du tableau qui remplit les conditions. n'est aucun, il renvoie -1.
Exemple 1
[1,2,4,15,0].findIndex((item, index,arr) => return item > 10) //3Exemple
2
var points = [
{
x : 10,
oui : 20
},
{
x : 20,
y : 30
},
{
x : 30,
y : 40
},
{
x : 40,
oui : 50
},
{
x : 50,
oui : 60
}
];
points.findIndex (fonction matcher (point) {
point de retour.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex (fonction matcher (point) {
point de retour.x % 6 == 0 && point.y % 7 == 0;
}); //1 4. La méthode fill(
// La méthode fill remplit un tableau avec la valeur donnée.
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//La méthode fill peut également accepter les deuxième et troisième paramètres, qui sont utilisés pour spécifier les positions de début et de fin du remplissage.
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// Notez que si le type rempli est un objet, alors l'objet attribué est la même adresse mémoire, pas l'objet de copie complète.
let arr = nouveau tableau(3).fill({
nom : "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] Les deux méthodes peuvent trouver NaN dans le tableau, mais indexOf() dans ES5 ne peut pas trouver NaN 5. Les trois.
les méthodesentrées(), clés() et valeurs() de l'instance du tableau
sont toutes utilisées pour parcourir le tableau, et renvoient toutes un objet traverseur. La boucle for...of peut être utilisée pour parcourir le tableau
.
keys() est une paire de noms de clés. Le parcours de
valeurs() est un parcours de valeurs de clés
() est un parcours de paires clé-valeur
pour (let index of ["a", "b"].keys. ()) {
console.log(index);
}
// 0 1
for (let elem of ["a", "b"].values()) {
console.log(elem);
}
//ab
for (let [index, elem] of ["a", "b"].entries()) {
console.log(index, élément);
}
// 0 "un"
// 1 "b"
var une = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6. La méthode include() renvoie une valeur booléenne
. , indiquant si un tableau contient une valeur donnée
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
peut également recevoir un deuxième paramètre, indiquant la position de départ de la recherche, la valeur par défaut est 0. Si le deuxième paramètre est un nombre négatif, il indique la position du nombre. Si le deuxième paramètre est supérieur à la longueur du tableau, la méthode include démarre à l'indice 0
pour compenser les défauts de la méthode indexOf qui n'est pas assez sémantique et juge mal NaN
[1, 23, NaN].includes(NaN) // vraie
méthode compatible :
la fonction contient = ( () => {
Tableau.prototype.includes
?(arr , val) => arr.includes(val)
:(arr , val) => arr.some(item => return item === val)
})() 7. Flat() des instances de tableau, flatMap()
// flat()
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
//carte plate()
[2, 3, 4].flatMap((x) => [x, x * 2])
//Une fois la carte exécutée, c'est [[2, 4], [3, 6], [4, 8]]
//Exécutez ensuite la méthode flat() pour obtenir le résultat suivant // [2, 4, 3, 6, 4, 8]
// flatMap() ne peut étendre qu'un seul niveau du tableau.
// Équivalent à .flat()
[1, 2, 3, 4].flatMap(x => [
[x*2]
])
//Une fois la carte exécutée, c'est [[[2]], [[4]], [[6]], [[8]]]
//Ensuite, exécutez la méthode flat() pour obtenir les résultats suivants // [[2], [4], [6], [8]] Copier le code 8. Le copywithin() de l'instance du tableau
copiera le membre à la position spécifiée à l'intérieur du tableau actuel. Copiez vers d'autres positions, puis revenez au tableau actuel, ce qui modifiera le tableau d'origine
pour recevoir trois paramètres :
1. cible (obligatoire) commence à remplacer les données à partir de cette position
2. démarre (facultatif) Commencez à lire les données à partir de cette position, la valeur par défaut est 0. S'il s'agit d'un nombre négatif, cela signifie
arrêter la lecture des données avant d'atteindre le nombre 3 et terminer (facultatif). S'il s'agit d'un nombre négatif, cela signifie que
les trois paramètres doivent être des nombres. Sinon, ils seront automatiquement convertis en valeurs numériques
[1,2,3,4,5].copywithin(0,3); /?[4,5,3 ,4,5] signifie que les membres de l'indice 3 jusqu'à la fin (4,5) sont copiés à la position commençant à l'indice 0 et que les 1 et 2 d'origine sont remplacés.