Quelle est la nouvelle méthode de tableau dans es6 ?

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, qui complète le tableau. constructeur Array() Insuffisance ; 3. find() et findIndex(), renvoient le premier élément du tableau qui remplit les conditions ; 4. fill() et ainsi de suite.

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

Nouvelle méthode de tableau ES6

1. Array.from()

La méthode Array.from est utilisée pour convertir deux types d'objets en tableaux réels :

• Objets de type tableau (tableau - comme objet)

• Objets itérables (y compris les nouvelles structures de données Set et Map d'ES6)

signifie que tant que la structure de données de l'interface Iterator est déployée, Array.from peut la convertir Convertir en tableau

En développement réel, il peut généralement être utilisé pour convertir la collection NodeList renvoyée par l'opération DOM et l'objet arguments à l'intérieur de la fonction

Lors du passage d'un paramètre, il est utilisé pour convertir le tableau de classe en un véritable tableau

• Array en Re
  

const arr = [1,2,3,3,3,2,5];
console.log(Array.from(new Set(arr))); //[1,2,3,5]
//...也可实现相同的效果
console.log([...new Set(arr)]) //[1,2,3,5]

Pour les navigateurs qui ne déploient pas cette méthode, vous pouvez utiliser la méthode Array.prototype.slice à la place

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()

Vous pouvez également recevoir le deuxième paramètre, qui est passé dans une fonction pour implémenter une méthode map similaire pour effectuer, traite chaque élément et renvoie le tableau traité

Array.from([1,2,3] , item => item *2)    //[2,4,6]

• Renvoie la longueur de la chaîne

peut être utilisé pour convertir la chaîne en tableau, puis renvoyer la longueur de la chaîne, car elle peut être traité correctement Divers caractères Unicode, évitant ainsi le propre bug de JS consistant à compter les caractères Unicode plus grands que /uFFFF comme 2 caractères

function countLength(string) {
    return Array.from(string).length
}

2, la méthode Array.of()

Array.of est utilisée pour convertir un ensemble de valeurs , Convertir en 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

//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]

new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]

// Array.of方法可以用下面的代码模拟实现。

function ArrayOf() {
  return [].slice.call(arguments);
}

3. Find() et findIndex() des instances de tableau

find()

Renvoie la première qui remplit les conditions Le membre du tableau, son paramètre est une fonction de rappel, tous les membres du tableau exécutent cette fonction dans l'ordre jusqu'à ce que le premier membre qui remplisse la condition soit trouvé, puis renvoie ce membre, s'il n'y a aucun membre qui remplit la condition, il renvoie undefined

Cette méthode La fonction de rappel reçoit trois paramètres : valeur actuelle, position actuelle, tableau d'origine

Exemple 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(item); // -5
// find 也支持这种复杂的查找
var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.find(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 }

findIndex()

L'écriture et l'utilisation sont fondamentalement les mêmes que celles de find (), sauf qu'elle renvoie le premier La position d'un membre du tableau qui remplit les conditions, s'il n'y en a pas, -1 est renvoyé , remplir un tableau

la méthode fill peut également accepter les deuxième et troisième paramètres, utilisés pour spécifier la position de départ et la position de fin de remplissage

[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10)   //3

Les deux méthodes peuvent trouver NaN dans le tableau, et dans ES5 indexOf() ne peut pas trouver NaN

5. Les trois méthodes d'entrées(), clés() et valeurs( )

• des instances de tableau sont toutes utilisées pour parcourir le tableau, et toutes renvoient un objet traverseur, qui peut être utilisé. La différence entre for...of loop traversal
• est :

keys() est pour traverser les noms de clés

values() est pour parcourir les valeurs clés

entries() est pour les paires clé-valeur Traverse

var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.findIndex(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
  return point.x % 6 == 0 && point.y % 7 == 0;
}); //1

• 6 La méthode include() renvoie une valeur booléenne
.

• Cette méthode renvoie une valeur booléenne indiquant si un tableau contient une valeur donnée

// fill方法使用给定值， 填充一个数组。
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
let arr = new Array(3).fill({
  name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

• et 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, il commence à l'indice 0
  includes, la méthode compense les défauts de la méthode indexOf qui n'est pas assez sémantique et juge mal NaN

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"
var a = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ]

Méthodes compatibles :

[1, 2, 3].includes(2) // true
[(1, 2, 3)].includes(4) // false

7. Instance de tableau flat(), flatMap()

flat() est utilisé pour "aplatir" des tableaux imbriqués en tableaux unidimensionnels. Cette méthode renvoie un nouveau tableau et n'a aucun effet sur les données d'origine. Le paramètre passé représente le nombre de couches à aplatir. La valeur par défaut est qu'un seul calque flatMap() ne peut étendre qu'un seul calque du tableau. La méthode exécute une fonction sur chaque membre du tableau d'origine (équivalent à l'exécution de Array.prototype.map()), puis exécute la méthode flat() sur le tableau composé de la valeur de retour. Cette méthode renvoie un nouveau tableau sans modifier le tableau d'origine

[1,23,NaN].includes(NaN)   //true

8. Le copywithin() de l'instance de tableau

copie les membres à la position spécifiée vers d'autres positions dans le tableau actuel, puis renvoie le tableau actuel, qui va changer Le tableau d'origine

reçoit trois paramètres :

• 1, cible (obligatoire) Remplacer les données de cette position

2、start(可选) 从该位置开始读取数据，默认为0，如果为负数，则表示到数

3、end(可选) 到该位置前停止读取数据，默认等于数组长度。如果是负数，表示到数

三个参数都应该是数字，如果不是，会自动转为数值

[1,2,3,4,5].copywithin(0,3);  //[4,5,3,4,5]  表示从下标3位置直到结束的成员(4,5)，复制到从下标0开始的位置，结果替换掉了原来的1和2

【相关推荐：javascript视频教程、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!