Résumé des méthodes de matrice ES5 et ES6

Ce que je veux partager avec vous dans cet article est un résumé des méthodes de tableau ES5 et ES6. Les amis qui en ont besoin peuvent jeter un œil aux

Propriétés des objets tableau

• .

  constructor Return Une référence à la fonction de tableau qui a créé cet objet.

• length Définit ou renvoie le nombre d'éléments dans le tableau.

• prototype vous donne la possibilité d'ajouter des propriétés et des méthodes aux objets.

Méthode objet Array traditionnelle

• toSource() Renvoie le code source de l'objet.

• toString() Convertit le tableau en chaîne et renvoie le résultat.

• toLocaleString() Convertit le tableau en tableau local et renvoie le résultat.

• valueOf() Renvoie la valeur d'origine de l'objet tableau

Modifie le tableau d'origine

push() Ajoute à la fin du tableau Un ou plusieurs éléments et renvoie la nouvelle longueur.
unshift() Ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur.

pop() Supprime et renvoie le dernier élément du tableau
shift() Supprime et renvoie le premier élément du tableau

sort() Trie les éléments du tableau
reverse() inverse l'ordre des éléments dans un tableau.
splice() supprime des éléments et ajoute de nouveaux éléments au tableau.

splice

Syntaxe

arrayObject.splice(index,howmany,item1,...,itemX)

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.splice(2,1);               //"George", "John"
arr.splice(1,0,"William");     //"George", "William", "John"
arr.splice(2,1,"haha");        //"George", "William", "haha"

Ne pas modifier l'original Array

concat() concatène deux ou plusieurs tableaux et renvoie le résultat.
join() place tous les éléments du tableau dans une chaîne. Les éléments sont séparés par le délimiteur spécifié.
slice() Renvoie l'élément sélectionné dans un tableau existant

slice

Syntaxe

arrayObject.slice(start,end);

• démarrage Obligatoire. Spécifie où commencer la sélection. Peut être négatif, en comptant à partir de la fin du tableau.

• fin Facultatif. Spécifie où se termine la sélection. S'il n'est pas spécifié, le tableau découpé contient tous les éléments du début à la fin du tableau. Peut être négatif, en comptant à partir de la fin du tableau.

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.slice(2,1);         //[]
arr.slice(1,2);         //"William"
arr.slice(-2,-1);         //"William"

Convertir des objets de type tableau (tels que des arguments) en tableaux réels
Array.prototype.slice.call(arguments);

ES5 nouvellement tableau ajouté

• méthodes d'index : indexOf(), lastIndexOf()

• méthodes d'itération : forEach(), map(), filter( ) , some(), each()

• Méthodes de fusion : réduire(), réduireRight()

les méthodes ne modifient pas le tableau d'origine

Méthode d'index

indexOf

array.indexOf(searchElement[, fromIndex])

• Renvoie la valeur de l'index entier, s'il n'y a pas de correspondance (correspondance stricte), renvoie -1.

• fromIndex est facultatif, indiquant que la recherche commence à partir de cette position. Si la valeur par défaut ou le format ne répond pas aux exigences, utilisez la valeur par défaut 0.

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)

lastIndexOf

array.lastIndexOf(searchElement[, fromIndex])

• Recherchez à partir de la fin de la chaîne, pas depuis le début.

• La valeur par défaut de fromIndex est array.length - 1.

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (从后往前，索引值小于3的开始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

Les deux méthodes utiliseront l'opérateur d'égalité lors de la comparaison du premier paramètre avec chaque élément du tableau. Elles doivent être complètement égales, sinon -1 sera renvoyé.

Méthode d'itération

Chaque méthode accepte deux paramètres, le premier paramètre est un rappel (fonction de rappel, obligatoire) et le deuxième paramètre est un paramètre de contexte facultatif.

• Le premier rappel de paramètre accepte trois paramètres, la valeur de l'élément actuel, l'index de l'élément actuel dans le tableau et l'objet du tableau lui-même. Autrement dit, function(value,index,arr) {}; il convient de noter que la différence par rapport à la méthode encapsulée dans notre jQuery couramment utilisé est le premier paramètre et le deuxième paramètre, c'est-à-dire que l'ordre de l'index et de la valeur est inversé. .

• Le deuxième paramètre est un paramètre de contexte facultatif, qui est l'objet de portée qui exécute le premier paramètre de fonction, qui est la valeur pointée par ceci dans le rappel mentionné ci-dessus. Si le deuxième paramètre optionnel n'est pas précisé, l'objet global est utilisé à la place (fenêtre dans les navigateurs), voire indéfini en mode strict.

Il convient de noter qu'à l'exception de la méthode forEach(), le rappel dans les autres méthodes d'itération doit avoir une valeur de retour, sinon il renverra undéfini.

forEach

forEach() parcourt le tableau et exécute la fonction donnée sur chaque élément du tableau. Cette méthode n'a aucune valeur de retour.

[].forEach(function(value, index, array) {
    // ...
}, [ thisObject]);

• En plus d'accepter un paramètre de fonction de rappel requis, forEach peut également accepter un paramètre de contexte facultatif (en modifiant le pointeur this dans la fonction de rappel) (le deuxième paramètre).

• Si le deuxième paramètre optionnel n'est pas précisé, l'objet global sera utilisé à la place (fenêtre dans le navigateur), voire indéfini en mode strict

[1, 2, 3, 4].forEach(function (item, index, array) {
  console.log(array[index] == item); // true
  sum += item;
});

alert(sum); // 10

var database = {
  users: ["张含韵", "江一燕", "李小璐"],
  sendEmail: function (user) {
    if (this.isValidUser(user)) {
      console.log("你好，" + user);
    } else {
      console.log("抱歉，"+ user +"，你不是本家人");    
    }
  },
  isValidUser: function (user) {
    return /^张/.test(user);
  }
};

// 给每个人法邮件
database.users.forEach(  // database.users中人遍历
  database.sendEmail,    // 发送邮件
  database               // 使用database代替上面标红的this
);

// 结果：
// 你好，张含韵
// 抱歉，江一燕，你不是本家人
// 抱歉，李小璐，你不是本家

map

map() fait référence au "mapping", qui exécute une fonction donnée sur chaque élément du tableau et renvoie un tableau composé des résultats de chaque appel de fonction.

[].map(function(value, index, array) {
    // ...
}, [ thisObject]);

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

filter

filter()，“过滤”，对数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

array.filter(callback,[ thisObject]);

• filter的callback函数需要返回布尔值true或false。

• 返回值只要是弱等于== true/false就可以了，而非非得返回 === true/false。

var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
  return value % 3 === 0;
}); 
console.log(flag);  // [3, 6, 9]

every

every()，判断数组中每一项都是否满足所给条件，当所有项都满足条件，才会返回true。

array.every(callback,[ thisObject]);

var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);  // false

some

some()，判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

array.some(callback,[ thisObject]);

var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);   // true

归并方法

这两个方法相比前面可能稍微复杂一些，它们都会迭代数组中的所有项，然后生成一个最终返回值。这两个方法接收两个参数。

• 第一个参数callback，函数接受4个参数分别是（初始值total必选，当前值currentValue必选，索引值currentIndex可选，当前数组arr可选），函数需要返回一个值，这个值会在下一次迭代中作为初始值。

• 第二个参数是迭代初始值（initialValue），参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 对于空数组是不会执行回调函数的。

array. reduce(function(total, currentValue, currentIndex, array) {
    // ...
});

var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
});
console.log(sum9);  // 24 
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
}, 10);
console.log(sum9_1);  // 240

reduceRight

reduceRight()和reduce()相比，用法类似，差异在于reduceRight是从数组的末尾开始实现的。

array.reduceRight(callback,[ thisObject]);

var arr9 = [2, 45, 30, 80];
var flag = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
});
var flag_1 = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
},200);
console.log(flag);  // 3
console.log(flag_1);  // 43

相关推荐：

ES6系列之声明变量let与const

Es6数组的扩展

ES5实例详解javascript多种继承方式

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!