Résumé des méthodes de fonctionnement des tableaux JavaScript (avec exemples)

Cet article vous présente un résumé des méthodes de fonctionnement des tableaux JavaScript (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

ECMAScript fournit de nombreuses méthodes pour manipuler les éléments déjà contenus dans un tableau. Ici, je résume ma compréhension de ces méthodes. Parmi tant de méthodes, j'ai d'abord utilisé si cela changerait le tableau d'origine comme norme de classification, et j'ai expliqué chaque méthode une par une.

1. Le tableau d'origine ne sera pas modifié

1. concat()

Méthode d'utilisation : array.concat(array2,array3,...,arrayX)
Valeur de retour : renvoie un nouveau tableau

La méthode concat() est utilisée pour concaténer deux ou plusieurs tableaux. Cette méthode ne modifie pas le tableau existant, elle renvoie uniquement une copie du tableau concaténé.
Sans aucun argument passé, il copie simplement le tableau actuel et renvoie la copie ; si les valeurs transmises ne sont pas des tableaux, les valeurs sont simplement ajoutées à la fin du tableau résultant.

var arr1 = [1,2,3];
var arr2 = arr1.concat(4,[5,6]);

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

2. join()

Méthode d'utilisation : array.join(separator)
Valeur de retour : renvoie une chaîne

La méthode Join() est utilisée Place tous les éléments d'un 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 arr1 = [1,2,3];
var arr2 = arr1.join();

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // 1,2,3

J'ai déjà rencontré une fonction qui nécessite de générer plusieurs * consécutifs. Au début, je pouvais utiliser directement une boucle for pour le faire. Plus tard, après avoir découvert la méthode join(), j'ai découvert cela. cela pourrait être fait en une seule phrase.

var arr3 = "";
for(let i = 0; i < 15; i ++) {
    arr3 = arr3 + "*";
}
console.log(arr3);  // ***************

var arr4 = new Array(16).join("*");
console.log(arr4);  // ***************

3. slice()

Méthode d'utilisation : array.slice(start, end)
Valeur de retour : renvoie un nouveau tableau, comprenant du début à la fin (à l'exclusion de cet élément) l'élément dans arrayObject

slice() accepte un ou deux paramètres, c'est-à-dire les positions de début et de fin des éléments à renvoyer.
Avec un seul paramètre, la méthode slice() renvoie tous les éléments depuis la position spécifiée par le paramètre jusqu'à la fin du tableau actuel
S'il y a deux paramètres, la méthode renvoie les éléments entre le début et la fin ; positions --mais n'inclut pas les éléments à la position finale.
Si le paramètre est un nombre négatif, il précise la position à partir de la fin du tableau. Autrement dit, -1 fait référence au dernier élément, -2 fait référence à l'avant-dernier élément, et ainsi de suite.

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1);
var arr3 = arr1.slice(2,4);
var arr4 = arr1.slice(-4,-2);  // 等价于 arr1.slice(2,4);

console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2);  // [ 2, 3, 4, 5, 6 ]
console.log(arr3);  // [ 3, 4 ]
console.log(arr4);  // [ 3, 4 ]

Cette méthode est utilisée pour convertir des pseudo-tableaux en données standard

    Array.prototype.slice.call(arguments)

4. some()

Méthode d'utilisation : array.some(function(currentValue,index,arr) , thisValue)
Valeur de retour : valeur booléenne

ou ==> some() exécute la fonction donnée sur chaque élément du tableau. Si la fonction renvoie true pour un élément, l'élément restant ne le sera pas. n'est plus vérifié ; s'il n'y a aucun élément qui remplit la condition, false sera renvoyé.

function compare(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].some(compare);  // false
[20, 5, 8, 1, 4].some(compare);  // true

5. each()

Méthode d'utilisation : array.every(function(currentValue,index,arr),thisValue)
Valeur de retour : valeur booléenne

and ==> each() exécute la fonction donnée sur chaque élément du tableau. Si la fonction renvoie vrai pour chaque élément, les éléments restants ne seront pas testés si l'un d'eux ne répond pas à l'élément de condition, renvoie faux ; .

function compare(item, index, arr){
    return item > 10;
}

[20, 50, 80, 11, 40].every(compare);  // true
[20, 50, 80, 10, 40].every(compare);  // false

5. filter()

Méthode d'utilisation : array.filter(function(currentValue,index,arr), thisValue)
Valeur de retour : Return array

La méthode filter() crée un nouveau tableau. Les éléments du nouveau tableau sont vérifiés en vérifiant tous les éléments du tableau spécifié qui remplissent les conditions.
Exécutez la fonction donnée sur chaque élément du tableau et renvoyez un tableau d'éléments dont le résultat est vrai.

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]

6. map()

Méthode d'utilisation : array.map(function(currentValue,index,arr), thisValue)
Valeur de retour : Return array

La méthode map() renvoie un nouveau tableau, et les éléments du tableau sont les valeurs des éléments du tableau d'origine après avoir appelé la fonction.

function mapArr(item, index, arr){
    return item * 4;
}

[2, 5, 8, 1, 4].map(mapArr);  // [8,20,32,4,16]

Une question qui est souvent posée lors des examens écrits et des entretiens - implémenter une méthode map tableau Ce qui suit est une méthode que j'ai écrite moi-même

var arr = [2, 4, 8, 6, 1];

Array.prototype.myMap = function (fn, thisValue) {
    var arr = this,
        len = arr.length,
        tmp = 0,
        result = [];
    thisValue = thisValue || null;
    for (var i = 0; i < len; i++) {
        var item = arr[i],
            index = i;
        tmp = fn.call(thisValue, item, index, arr);
        result.push(tmp);
    }
    return result
}

function mapArr(item, index, arr) {
    return item * 4;
}
arr.myMap(mapArr)   // [8, 16, 32, 24, 4]

forEach()

Utilisation : array.forEach(function(currentValue, index, arr), thisValue)

Valeur de retour : non définie

La méthode forEach() est utilisée pour appeler chaque élément du tableau et transmettre l'élément à fonction de rappel. Cette méthode n'a aucune valeur de retour.

Essentiellement la même chose que d'utiliser une boucle for pour parcourir un tableau.

var items = [1, 2, 4, 7, 3];
var copy = [];

items.forEach(function(item,index){
  copy.push(item*index);
})

console.log(items);  // [ 1, 2, 4, 7, 3 ]
console.log(copy);  // [ 0, 2, 8, 21, 12 ]

7. réduire() et réduireRight()

Méthode d'utilisation : array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Valeur de retour : Renvoie le résultat du calcul

函数参数

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()方法中数组的第一项开始，逐个遍历到最后；而reduceRight()则从数组的最后一项开始，向前遍历到第一项。

如果没有设置initialValue，total的值为数组第一项，currentValue为数组第二项。
如果设置了initialValue，则total的值就是initialValue，currentValue为数组第一项。

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum);

console.log(numbers);  // [ 65, 44, 12, 4 ]
console.log(res);  //  125

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum, 10);  // 初始值设置为10，所以最终结果也相应的加10

console.log(res);  //  135

具体reduce()方法用得好是能起到很大的作用的，对于批量修改从后台获取的数据十分有用，可以参考JS进阶篇--JS数组reduce()方法详解及高级技巧

二、会改变原数组

1. push()

使用方法：array.push(item1, item2, ..., itemX)
返回值： 返回新数组的长度

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);

console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6

2. pop()

使用方法：array.pop()
返回值： 数组原来的最后一个元素的值（移除的元素）

pop()方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.pop();

console.log(arr); // [ 65, 44, 12 ]
console.log(arr1); //  4

3. unshift()

使用方法：array.unshift(item1,item2, ..., itemX)
返回值： 返回新数组的长度

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.unshift(1);

console.log(arr); // [ 1, 65, 44, 12, 4 ]
console.log(arr1); //  5

4. shift()

使用方法：array.shift()
返回值： 数组原来的第一个元素的值（移除的元素）

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.shift();

console.log(arr); // [ 44, 12, 4 ]
console.log(arr1); //   65

5. sort()

使用方法：array.sort(sortfunction)
返回值： 返回排序后的数组（默认升序）

sort() 法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。

P.S 由于排序是按照 Unicode code 位置排序，所以在排序数字的时候，会出现"10"在"5"的前面，所以使用数字排序，你必须通过一个函数作为参数来调用。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values);  // [ 0, 1, 10, 15, 5 ]

values.sort(function(a, b){
  return a - b;
})
console.log(values);  //  [0, 1, 5, 10, 15 ]

6. reverse()

使用方法：array.reverse()
返回值： 返回颠倒后的数组

reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。

var values = [0, 1, 5, 10, 15];
values.reverse();
console.log(values);  // [ 15, 10, 5, 1, 0 ]

7. fill()

使用方法：array.fill(value, start, end)
返回值： 返回新的被替换的数组

fill()方法用于将一个固定值替换数组的元素。

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置(不包含) (默认为 array.length)

var values = [0, 1, 5, 10, 15];
values.fill(2);
console.log(values);  // [ 2, 2, 2, 2, 2 ]

values = [0, 1, 5, 10, 15];
values.fill(2,3,4);
console.log(values);  // [ 0, 1, 5, 2, 15 ]

8. splice()

使用方法：array.splice(index,howmany,item1,.....,itemX)

返回值： 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组

splice()有多种用法：

1、删除: 可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。splice(0,2) // 会删除数组中前两项

2、插入: 可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。splice(2,0,1,4) // 会从数组位置2的地方插入1和4

3、替换: 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需提供3个参数：起始位置、要删除的项数和要插入的项。插入的项不必与删除的项数相等。splice(2,3,1,4) // 会从数组位置2删除两项，然后再从位置2的地方插入1和4

// 删除
var values = [4,8,0,3,7];
var remove = values.splice(3,1);
console.log(values);  // [ 4, 8, 0, 7 ]
console.log(remove);  // [ 3 ]    删除第四项
// 插入
remove = values.splice(2,0,1,2);
console.log(values);  // [ 4, 8, 1, 2, 0, 7 ]
console.log(remove);  // []  从位置2开始插入两项，由于没有删除所有返回空函数
// 替换
remove = values.splice(2,2,6,9,10);
console.log(values);  // [ 4, 8, 6, 9, 10, 0, 7 ]
console.log(remove);  // [ 1, 2 ]  从位置2开始删除两项，同时插入三项

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!