Ce que cet article vous apporte est un résumé (code) des méthodes courantes de fonctionnement des tableaux en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
1. concat()
La méthode concat() est utilisée pour connecter deux ou plusieurs tableaux. Cette méthode ne modifie pas le tableau existant, elle renvoie uniquement une copie du tableau concaténé.
var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1);//[1, 2, 3] console.log(arr3);//[1, 2, 3, 4, 5]
2. join()
La méthode join() est utilisée pour mettre tous les éléments du tableau dans une chaîne. Les éléments sont séparés par le délimiteur spécifié. Par défaut, ',' est utilisé pour séparer les éléments, ce qui ne modifie pas le tableau d'origine.
var arr = [2,3,4]; console.log(arr.join());//2,3,4 console.log(arr);//[2, 3, 4]
3. push()
La méthode push() peut ajouter un ou plusieurs éléments à la fin du tableau et renvoyer la nouvelle longueur. L'ajout à la fin renvoie la longueur, ce qui modifiera le tableau d'origine.
var a = [2,3,4]; var b = a.push(5); console.log(a); //[2,3,4,5] console.log(b);//4 push方法可以一次添加多个元素push(data1,data2....)
4. pop()
La méthode pop() est utilisée pour supprimer et renvoyer le dernier élément du tableau. Renvoyer le dernier élément modifiera le tableau d'origine.
var arr = [2,3,4]; console.log(arr.pop());//4 console.log(arr); //[2,3]
5. shift()
La méthode shift() est utilisée pour supprimer le premier élément du tableau et renvoyer la valeur du premier élément. Renvoie le premier élément, en modifiant le tableau d'origine.
var arr = [2,3,4]; console.log(arr.shift()); //2 console.log(arr); //[3,4]
6. unshift()
La méthode unshift() ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur. Renvoie la nouvelle longueur, en modifiant le tableau d'origine.
var arr = [2,3,4,5]; console.log(arr.unshift(3,6)); //6 console.log(arr); //[3, 6, 2, 3, 4, 5]
7. slice()
Renvoie un nouveau tableau contenant les éléments de arrayObject du début à la fin (à l'exclusion de cet élément). Renvoie l'élément sélectionné. Cette méthode ne modifie pas le tableau d'origine.
var arr = [2,3,4,5]; console.log(arr.slice(1,3)); //[3,4] console.log(arr); //[2,3,4,5]
8. splice()
La méthode splice() peut supprimer zéro ou plusieurs éléments à partir de l'index et utiliser une ou plusieurs valeurs déclarées dans la liste des paramètres pour remplacer le éléments supprimés. Si un élément est supprimé de arrayObject, un tableau contenant l'élément supprimé est renvoyé. La méthode splice() modifie directement le tableau.
var a = [5,6,7,8]; console.log(a.splice(1,0,9)); //[] console.log(a); // [5, 9, 6, 7, 8] var b = [5,6,7,8]; console.log(b.splice(1,2,3)); //[6, 7] console.log(b); //[5, 3, 8]
9. substring() et substr()
Même point : si vous n'écrivez qu'un seul paramètre :
substr(startIndex);
substring(startIndex);
Les deux ont la même fonction : ils interceptent le fragment de chaîne depuis l'indice courant jusqu'à la fin de la chaîne.
var str = '123456789'; console.log(str.substr(2)); // "3456789" console.log(str.substring(2));// "3456789"
Différence : Le deuxième paramètre
substr(startIndex,lenth) : Le deuxième paramètre est d'intercepter la longueur de la chaîne (intercepter une chaîne d'une certaine longueur à partir du point de départ )
substring (startIndex, endIndex) : Le deuxième paramètre est d'intercepter l'indice final de la chaîne (intercepter la chaîne entre les deux positions, 'y compris la tête mais pas la queue')
console.log("123456789".substr(2,5)); // "34567"
console.log("123456789".substring(2,5));// "345"10. sort Trier
par position du code Unicode, ordre croissant par défaut :
var scores = [1, 10, 21, 2]; scores.sort(); // [1, 10, 2, 21]
11. reverse()
la méthode reverse() est utilisée pour inverser l'ordre des éléments dans le tableau. Ce qui est renvoyé est le tableau inversé, qui modifiera le tableau d'origine.
var arr = [2,3,4]; console.log(arr.reverse()); //[4, 3, 2] console.log(arr); //[4, 3, 2]
12. IndexOf et lastIndexOf
acceptent tous deux deux paramètres : la valeur à rechercher et la position de départ à rechercher.
S'il n'existe pas, renvoie -1 ; s'il existe, renvoie la position. indexOf recherche d'avant en arrière et lastIndexOf recherche d'arrière en avant.
indexOf：
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
if (a.indexOf(7) === -1) {
// element doesn't exist in array
}
lastIndexOf：
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 313. each
exécute la fonction donnée sur chaque élément du tableau et renvoie vrai si chaque élément renvoie vrai.
function isBigEnough(element, index, array) {
return element < 10;
}
[2, 5, 8, 3, 4].every(isBigEnough); // true14. some
exécute la fonction donnée sur chaque élément du tableau Si un élément renvoie ture, il renvoie true.
function compare(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(compare); // false
[12, 5, 8, 1, 4].some(compare); // true15. filter
exécute la fonction donnée sur chaque élément du tableau et renvoie un tableau composé d'éléments dont le résultat est vrai.
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"] 16. map
exécute la fonction donnée sur chaque élément du tableau et renvoie le résultat de chaque appel de fonction pour former un nouveau tableau.
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]17. forEach parcours de tableau
const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
copy.push(item)
}); 18. réduire
reduce exécute la fonction de rappel pour chaque élément du tableau dans l'ordre, à l'exclusion de ceux supprimés du tableau Ou un élément qui n'a jamais reçu de valeur, acceptant quatre paramètres : la valeur initiale (ou la valeur de retour de la dernière fonction de rappel), la valeur actuelle de l'élément, l'index actuel et le tableau dans lequel réduire est appelé.
无初始值：
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);Imprimer les résultats :
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
ici On peut voir que l'index dans l'exemple ci-dessus commence à 1 et que la valeur du premier précédent est la première valeur du tableau. La longueur du tableau est de 4, mais la fonction de réduction boucle 3 fois.
a la valeur initiale :
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);Résultat de l'impression :
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2 , 3, 4] 10
Dans cet exemple, l'index commence à 0, la première valeur précédente est la valeur initiale 0 que nous avons définie, la longueur du tableau est de 4 et la fonction de réduction boucle 4 fois.
Conclusion : si aucune valeur initiale n'est fournie, réduire exécutera la méthode de rappel à partir de l'index 1, en ignorant le premier index. Si initialValue est fourni, commence à l’index 0.
ES6 ajoute une nouvelle méthode pour exploiter les tableaux
1. find()
Passez une fonction de rappel, recherchez le premier élément du tableau qui correspond aux règles de recherche actuelles, renvoyez-le et terminez la recherche.
const arr = [1, "2", 3, 3, "2"] console.log(arr.find(n => typeof n === "number")) // 1
2. findIndex()
transmet une fonction de rappel, trouve le premier élément du tableau qui répond aux règles de recherche actuelles, renvoie son indice et termine la recherche.
const arr = [1, "2", 3, 3, "2"] console.log(arr.findIndex(n => typeof n === "number")) // 0
3. fill()
Remplacez les éléments du tableau par de nouveaux éléments et vous pouvez spécifier la plage d'indices de remplacement.
arr.fill(value, start, end)
4、copyWithin()
选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。
arr.copyWithin(target, start, end) const arr = [1, 2, 3, 4, 5] console.log(arr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2 const arr1 = [1, 2, 3, 4, 5] console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3 const arr2 = [1, 2, 3, 4, 5] console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2
5、from
将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组。
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]6、of
用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。
Array() // [] Array(3) // [, , ,] Array(3, 11, 8)// [3, 11, 8] Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7);// [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]
7、entries() 返回迭代器：返回键值对
//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']
//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
console.log(v)
}
// ['a', 'a'] ['b', 'b']8、values() 返回迭代器：返回键值对的value
//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
console.log(v)
}
//'a' 'b' 'c'
//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
console.log(v)
}
// 'a' 'b' 'c'
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
console.log(v)
}
// 'a' 'b'9、keys() 返回迭代器：返回键值对的key
//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
console.log(v)
}
// 0 1 2
//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
console.log(v)
}
// 'a' 'b' 'c'
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
console.log(v)
}
// 'a' 'b'10、includes
判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。
var a = [1, 2, 3]; a.includes(2); // true a.includes(4); // false
【相关推荐：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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
