Interprétation du tableau Javascript Méthode de tableau_Connaissances de base

Dans la continuité de l'article précédent "Introduction de base à Javascript Array Array", cet article présente en détail toutes les méthodes d'Array.

Toutes les méthodes de tableau sont définies sur Array.prototype, et Array.prototype lui-même est également un tableau.

array.concat()

Copie superficielle du tableau actuel et ajouter les paramètres reçus à la fin du nouveau tableau. Le tableau d'origine est inchangé.

Grammaire

array.concat(value1, value2, ..., valueN)
Le paramètre est un tableau ou une valeur non-tableau qui doit être fusionné

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

Vous pouvez combiner des valeurs de tableau ou non, mais sachez que si vous incluez un objet, l'objet fait toujours référence à l'objet d'origine.

array.join()

Renvoie une chaîne concaténée avec tous les éléments du tableau à l'aide de délimiteurs. Le délimiteur par défaut est la virgule.

Grammaire

array.join(séparateur)
Le paramètre est le séparateur

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

Lors de l'assemblage d'un grand nombre de fragments de chaîne, la méthode de jointure est plus rapide que l'opérateur par élément.

L'utilisation de new Array(3) générera un tableau vide d'une longueur de trois, et combiné avec la méthode join(), vous pourrez répéter une certaine chaîne.

var str = new Array(3).join('-+'); // -+-+

Le nombre de répétitions est la longueur du tableau moins un, car la chaîne est le délimiteur.

Puisque le tableau lui-même est un objet, il possède la méthode toString(), qui peut également être utilisée pour diviser le tableau en une chaîne, mais le séparateur ne peut être qu'une virgule.

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

En fait, il appellera d’abord la méthode toString() de chaque élément.

array.push()

Ajoutez un ou plusieurs paramètres à la fin du tableau et renvoyez la longueur du tableau. Changez le tableau lui-même.

Grammaire

array.push(value1, value2, ..., valueN);
Exemple

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

Une autre méthode peut également être implémentée pour insérer des valeurs à la fin du tableau.

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

Supprimez le dernier élément du tableau et renvoyez l'élément supprimé. Changez le tableau lui-même.

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

Si le tableau est vide, renvoie undéfini.

array.unshift()

Insérez un ou plusieurs paramètres dans la tête du tableau et renvoyez la longueur du tableau. Changez le tableau lui-même.

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

Supprimez le premier élément du tableau et renvoyez l'élément supprimé. Changez le tableau lui-même.

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

Si le tableau est vide, renvoie undéfini.

array.sort()

Cette méthode trie selon la valeur renvoyée par la méthode toString() de chaque élément, donc les résultats attendus ne sont généralement pas obtenus.

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

Mais la méthode sort() peut recevoir une fonction personnalisée à des fins de comparaison. La fonction de comparaison accepte deux paramètres, en particulier sort() qui par défaut est par ordre croissant, donc si vous voulez que le premier paramètre soit devant le deuxième paramètre, vous devez renvoyer un nombre négatif, s'il est égal, renvoyez 0, et si c'est le cas derrière, renvoie un nombre positif.

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

La comparaison de chaînes peut être utilisée conjointement avec la méthode string.localeCompare().

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F'] 

array.reverse()

Inversez l'ordre des éléments du tableau et renvoyez le tableau lui-même.

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

Copie superficielle d'une section du tableau sans modifier le tableau lui-même.

array.slice(début, fin);
La méthode accepte deux paramètres, le dernier peut être omis et la valeur par défaut est la longueur du tableau lui-même.

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

Si un nombre négatif est transmis, la longueur du tableau sera automatiquement ajoutée pour essayer de devenir un nombre non négatif.
Passer une valeur dont la valeur absolue est inférieure à la longueur du tableau signifie prendre le nombre d'éléments de valeur absolue négative de l'arrière vers l'avant. Par exemple, les trois derniers éléments sont repris dans l'exemple.

array.splice()

Il s'agit de la méthode la plus puissante et la plus couramment utilisée dans les tableaux, qui permet de réaliser la suppression, l'insertion et le remplacement.

Grammaire

array.slice(start, count, item);
Cette méthode supprime un ou plusieurs éléments et les remplace par de nouveaux éléments. start est la position de départ, count est le nombre d'éléments supprimés, item est l'élément nouvellement ajouté (il y a plus d'un élément et peut être omis) et les éléments supprimés sont renvoyés sous la forme d'un tableau.

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

Ce qui suit présente quelques nouvelles méthodes d'ECMAScript5, principalement parce que ie8 ne les prend pas en charge.

indexOf() et lastIndexOf()

Trouver la position d'index de l'élément correspondant dans le tableau.Le deuxième paramètre indique la position de départ de la direction de recherche correspondante.S'il n'est pas trouvé, renvoie -1;
indexOf() recherche d'avant en arrière et lastIndexOf() recherche d'arrière en avant.

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

Méthode itérative

La méthode suivante accepte deux paramètres, le premier est la fonction à exécuter pour chaque élément et le second est la portée dans laquelle la fonction s'exécute.
La fonction en cours d'exécution a trois paramètres, à savoir l'élément actuel, la position et le tableau lui-même.

array.every()

Exécutez la fonction donnée, et si chaque élément de l'itération renvoie vrai, il finira par renvoyer vrai.

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

运行给定函数，如果迭代中有一项返回true,则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

运行给定函数，将迭代中返回的值组成数组，返回该数组。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

运行给定函数，将迭代中返回true的元素以数组形式返回

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

运行给定函数，不返回任何值。类似于普通的for循环的功能。

归并方法

函数接受两个参数，第一个参数是每一个运行的自定义函数，第二项是作为归并基础的初始值。
自定义函数接受四个参数，分别是前一项，当前项，位置，数组。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

这一篇介绍了数组方法的种种细节和注意问题，下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。