javascript Array array méthodes communes_javascript compétences

(1) Méthodes de base des tableaux

1.join()

La méthode Array.join() convertit tous les éléments du tableau en chaînes et les concatène ensemble, renvoyant la chaîne générée finale. Vous pouvez spécifier vous-même le symbole de délimitation. S'il n'est pas spécifié, la virgule

sera utilisée par défaut.

var arr = [1,2,3];
console.log(arr.join());//"1,2,3"
console.log(arr.join("-"));//"1-2-3"

var a = new Array(10); //长度为10的空数组 组成下边字符串
console.log(a.join("-"));//"---------"

2.reverse()
La méthode Array.reverse() inverse l'ordre des éléments dans le tableau et renvoie le tableau dans l'ordre inverse (le tableau renvoyé est lui-même, le tableau d'origine a été modifié)

var arr = [1,2,3];
arr.reverse();
console.log(arr.join());//"3,2,1"

Donc, si vous souhaitez inverser une chaîne, vous pouvez le faire

var str = "abcdefg";

console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值
console.log(str); //"abcdefg" 当然了，原始的是不会变的.

3.sort()
La méthode Array.sort() trie les éléments du tableau et renvoie le tableau trié.

Lorsqu'il n'y a pas de paramètres, le tri par défaut est dans l'ordre, c'est-à-dire du plus petit au plus grand. Bien entendu, vous pouvez également ajouter directement une fonction de comparaison pour trier

var arr = [1,4,7];
arr.sort();
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return a-b; //从小到大
});
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return b-a; //从大到小
});
console.log(arr); //[7,4,1]


var num = new Array('one','three','Six','Five');
num.sort(); //区分大小写排序
console.log(num); // ["Five", "Six", "one", "three"]
num.sort(function(s,t){
 var a = s.toLowerCase();
 var b = t.toLowerCase();
 if(a<b) return -1;
 if(a>b) return 1;
 return 0;
});
console.log(num); // ["Five", "one", "Six", "three"]

4.concat()
La méthode Array.concat() crée et renvoie un nouveau tableau dont les éléments incluent les éléments du tableau d'origine à partir duquel concat() a été appelé et chaque paramètre de concat().

Si l'un de ces paramètres est lui-même un tableau, les éléments du tableau sont concaténés, pas le tableau lui-même.

Mais sachez que concat() n'aplatira pas de manière récursive un tableau de tableaux. concat() ne modifie pas non plus le tableau appelant.

var arr = [1,2,3];
console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5]
console.log(arr);       // [1, 2, 3]
console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]
console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7]
console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]]
console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]

5.slice()
La méthode Array.slice() renvoie une tranche ou un sous-tableau du tableau spécifié. Ses deux paramètres précisent respectivement les positions de début et de fin du segment (a,b). Ce qui est renvoyé, ce sont les éléments du tableau commençant de a à b à l'exclusion de b.
S'il n'y a qu'un seul paramètre (a), il représente les éléments de a jusqu'à la fin du tableau.
Si un nombre négatif (-a) apparaît dans le paramètre, il indique la position d'un par rapport au dernier élément du tableau. Par exemple (-3) représente l'avant-dernier élément jusqu'à la fin. Si un nombre négatif apparaît, convertissez-le d'abord, puis découvrez-le selon les règles de plage
Il renvoie également un nouveau tableau et ne modifie pas le tableau d'origine

var arr = [1,2,3,4,5];
console.log(arr.slice(0,3)); // [1, 2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.slice(3));//[4, 5]
console.log(arr.slice(-3));// [3, 4, 5]
console.log(arr.slice(-3,-1));// [3, 4]
console.log(arr.slice(2,-1));// [3, 4]

6. épissure()
La méthode Array.splice() est une méthode générale pour insérer ou supprimer des éléments dans un tableau. Il modifie la valeur du tableau d'origine et renvoie une nouvelle séquence de tableau

Le premier paramètre de splice() spécifie la position de départ de l'insertion ou de la suppression, et le deuxième paramètre spécifie le nombre d'éléments qui doivent être supprimés du tableau. Si le deuxième paramètre est omis, il sera supprimé jusqu'à la fin par défaut.

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.splice(4)); //[5, 6, 7, 8]
console.log(arr); // [1, 2, 3, 4]
console.log(arr.splice(1,2));// [2, 3]
console.log(arr); // [1, 4]

Les deux premiers paramètres de splice() spécifient les éléments du tableau à supprimer. N'importe quel nombre d'arguments qui suivent spécifient les éléments à insérer dans le tableau, en commençant par la position représentée par le premier argument.

Différent de concat() ci-dessus, splice() insère directement le tableau, comme le suivant [1,2]

var arr = [1,2,3,4,5];
console.log(arr.splice(2,0,'a','b')); // []
console.log(arr); // [1, 2, "a", "b", 3, 4, 5]
console.log(arr.splice(2,1,[1,2],3));// ["a"]
console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]

7.push() pop() unshift() shift()
Considérez simplement ces méthodes comme des opérations de pile : les deux premières sont des opérations de pile normales et les deux dernières sont des opérations de pile inversées
push() et unshift() ajoutent des éléments de l'arrière et du devant au tableau et renvoient la longueur du nouveau tableau
pop() et shift() suppriment le dernier et le premier élément du tableau et renvoient les éléments supprimés

var arr = [];

console.log(arr.push(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.pop());// 3
console.log(arr);//[1,2]

console.log(arr.push([4,5]));//3
console.log(arr);// [1, 2, [4, 5]]

var arr = [];

console.log(arr.unshift(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.shift());// 1
console.log(arr);// [2, 3]

console.log(arr.unshift([4,5]));//3
console.log(arr);//[[4, 5], 2, 3]

(2) Méthodes de tableau dans ECMAScript5

La plupart de ce type de méthodes de tableau ont des règles uniformes et générales. Aucun d'entre eux ne modifie le tableau d'origine.
La plupart des méthodes reçoivent une fonction comme premier argument et appellent la fonction une fois pour chaque élément (ou éléments) du tableau.

S'il s'agit d'un tableau clairsemé, la fonction passée ne sera pas appelée pour les éléments qui n'existent pas
Dans la plupart des cas, la fonction appelée prend trois paramètres : l'élément du tableau, l'index de l'élément et le tableau lui-même. Il n’est généralement pas nécessaire de renseigner les deux derniers paramètres.
En plus du premier paramètre ici (la fonction), il y a un deuxième paramètre (il est facultatif). Si le deuxième paramètre est présent, la fonction appelée sera traitée comme une méthode avec le deuxième paramètre.
En d’autres termes, le deuxième paramètre transmis lors de l’appel de la fonction est utilisé comme valeur de son mot-clé this.

1.forEach()

Cette méthode parcourt le tableau du début à la fin et appelle la fonction spécifiée pour chaque tableau.

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){ //只使用了第一个参数（函数），调用的函数也只使用了第一个参数数组元素
 sum += value;
});

console.log(sum);//15
console.log(data);// [1, 2, 3, 4, 5]

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value,item,data){ //调用的函数具有了三个参数
  data[item] = value*value; //取平方
});

console.log(data);// [1, 4, 9, 16, 25]

2.map()
Cette méthode transmet chaque élément du tableau appelé à la fonction spécifiée et renvoie un tableau contenant la valeur de retour de cette fonction.

var data = [1,2,3,4,5];
var data1 = data.map(function(value){
 return ++ value;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [2, 3, 4, 5, 6]

3.filter()
Les éléments du tableau renvoyés par cette méthode sont un sous-ensemble du tableau appelant. La fonction transmise est utilisée pour la détermination logique et la fonction renvoie vrai ou faux.

Si la valeur de retour est vraie ou une valeur qui peut être convertie en vraie, alors l'élément passé à la fonction de jugement est membre de ce sous-ensemble et il sera ajouté à un tableau en tant que valeur de retour.

var data = [1,2,3,4,5];
var data1 = data.filter(function(value){
 return value <= 3;
});

var data2 = data.filter(function(value){
 return value > 3;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [1,2,3]
console.log(data2);// [4,5]

4.every()和some()
顾名思义，every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true

var data = [1,2,3,4,5];
var data1 = data.every(function(value){
 return value < 4;
});

var data2 = data.some(function(value){
 return value >4;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// false
console.log(data2);// true

5.reduce()和reduceRight()
这两个方法使用指定的函数将数组元素进行组合，生成单个值。

reduce()有两个参数。第一个是执行化简操作的函数，就是说用某种方法把两个值化简为一个值，并返回化简后的值。

　　　　　　　　　　第二个参数可选，用来传递给第一个参数函数作为初始值。如果第二个参数没有，则初始值就使用数组的第一个元素值。

var data = [1,2,3,4,5];
var sum = data.reduce(function(a,b){
 return a+b;
});

var sum1 = data.reduce(function(a,b){
 return a+b;
},5);

var min = data.reduce(function(a,b){
 return (a<b)&#63;a:b;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(sum);// 15
console.log(sum1);// 20
console.log(min);// 1

sum中没有第二个参数，所以初始值为第一个数组元素，第一步1+2=3，第二步3+3=6... 最后得15
sum1中有第二个参数，所以初始值为5，第一步5+1=6，第二步6+2=8... 最后得20

reduceRight()和reduce()差不多，不同的是它按照数组索引从高到低（从右到左）处理数组，而不是正常的从低到高。

var data = ['a','b','c']; 
var str = data.reduce(function(x,y){ //顺序
 return x+y;
});

var str1 = data.reduceRight(function(x,y){ //逆序
 return x+y;
});

console.log(data);// [1, 2, 3]
console.log(str);//"abc"
console.log(str1);//"cba"

6.indexOf()和lastIndexOf()
这个方法搜索整个数组中具有给定值的元素，返回找到的元素的索引（找到了一个就退出了），没有找到则返回-1.

一个从头至尾，一个从尾至头

var data = ['a','b','a','c','a']; 

console.log(data.indexOf('a')); //0
console.log(data.indexOf('d')); //-1
console.log(data.lastIndexOf('a'));//4

console.log(data.lastIndexOf('a',-2));//2 从倒数第二个开始
console.log(data.lastIndexOf('a',1));//0  从顺序第二个往前

7.数组类型 isArray()
判断一个对象是不是数组

console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false

//模拟上边的
var isArray1 = Function.isArray||function(o){
 return typeof o === "object" &&
  Object.prototype.toString.call(o) === "[object Array]";
};

console.log(isArray1([]));//true
console.log(isArray1({}));//false