Le résumé le plus complet des méthodes de tableau

Le soi-disant tableau est une séquence non ordonnée d'éléments. Si une collection limitée de variables du même type est nommée, alors le nom est le nom du tableau. Les variables individuelles qui composent un tableau sont appelées composants du tableau, également appelés éléments du tableau, et parfois appelées variables d'indice. Le nombre numérique utilisé pour distinguer les éléments individuels d’un tableau est appelé indice. En programmation, un tableau est une forme d'organisation de plusieurs éléments du même type de manière désordonnée pour faciliter le traitement. Ces collections non ordonnées d'éléments de données similaires sont appelées tableaux. Dans cet article, nous partageons principalement avec vous le résumé le plus complet des méthodes de tableau. Nous utiliserons des méthodes javascript natives, dans l'espoir d'aider tout le monde.

Créer un tableau

var colors = [];
var colors = ['red', 'blue'];

Détecter le tableau

if(arr instanceof Array) {}

Si la page Web contient plusieurs cadres, vous devez utiliser la méthode suivante pour détecter le tableau

if(Array.isArray(arr)) {}

arr.valueOf()

var colors = ['red', 'yellow'];
colors.valueOf();
// > ['red', 'yellow']

arr.toString()

var colors = ['red', 'yellow'];
colors.toString();
// > "red,yellow"

arr.push(item)

Ajouter un élément à la fin du tableau et retourner la longueur du nouveau tableau

var colors = ['red', 'yellow'];
colors.push('pink');
// > 3

arr.pop()

Supprime l'élément de la fin du tableau et renvoie l'élément supprimé

var colors = ['red', 'yellow'];
colors.pop();
// > 'yellow'

arr.unshift(item)

de la tête du tableau Ajouter un élément et renvoyer la longueur du nouveau tableau

var colors = ['green', 'pink'];
colors.unshift('pink');
// > 3

arr.shift()

Supprimer un élément de la tête du tableau et renvoyer l'élément supprimé

var colors = ['yellow', 'orange'];
colors.shift();
// > 'yellow'

arr.reverse()

Inverser l'ordre du tableau et renvoyer le tableau réorganisé Le tableau d'origine sera modifié

[1, 2, 3, 'reer', 'game', 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]

. arr.sort(fn)

Si aucun paramètre n'est transmis, par défaut, les éléments du tableau seront convertis en chaînes à des fins de comparaison, il n'est donc généralement pas recommandé d'utiliser directement le arr.sort() par défaut pour le tri.
La valeur de retour est le nouveau tableau après le tri. Le tableau d'origine sera modifié

• pour trier les éléments numériques du tableau de petit à grand.

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]

• Trier les éléments numériques du tableau du plus grand au plus petit

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]

arr.concat(otherArr)

Si vous passez un élément ou un tableau dans le paramètre, le paramètre sera fusionné dans arr et le nouveau tableau sera renvoyé. Le tableau d'origine ne changera pas

var arr = [1, 3, 'jake'];
arr.concat('rose', [2, 'fi']);
// > [1, 3, 'jake', 'rose', 2, 'fi']

arr.slice().

Coupez le tableau et retournez le tableau après la coupe. Les éléments ne changeront pas

• Passez un paramètre indiquant la position de départ et la position de fin est la fin

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]

• Passez en 2 paramètres, indiquant la position de départ et la position de fin, mais n'incluant pas l'élément où se situe la position de fin

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]

arr.splice()

Selon différents paramètres, vous pouvez respectivement supprimer, insérer et remplacer des éléments, ce qui modifiera le tableau d'origine

• Supprimer

Passer 2 paramètres, représentant respectivement la position de départ et le nombre d'éléments à supprimer, et renvoyer un tableau d'éléments supprimés

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, 1, "9", "doc"]

• Insérer

Passer en 3 paramètres, [Position de départ | Le nombre d'éléments à supprimer est 0 | à insérer], Enfin, un tableau composé d'éléments supprimés est renvoyé. Comme le nombre d'éléments supprimés ici est de 0, un tableau vide

var arr = [2, 4, 6];
arr.splice(2, 0, 'red', 'green'); 
// > []
// arr: [2, 4, "red", "green", 6]

• est renvoyé. >Passez trois paramètres, [position de départ | le nombre d'éléments à supprimer est 1 | élément à insérer], et retournez enfin un tableau composé d'éléments supprimés

Résumé Par conséquent, cette méthode réalisera différentes fonctions en raison de différents paramètres. Tous les paramètres du début à la fin sont

var arr = [2, 4, 9];
arr.splice(1, 1, ['tim', 'tom']);
// > [4]
// arr: [2, ['tim', 'tom'], 9]

• [ Position de départ | être supprimé | La valeur de l'élément à insérer, vous pouvez écrire plusieurs valeurs]

Vérifiez si le tableau contient un élément et renvoie la position d'un élément correspondant dans le tableau. Sinon, -1 est renvoyé. Commencez la recherche à la fin du tableau et renvoyez la position du premier élément correspondant, renvoyez -1

arr.indexOf(item)

IE6, 7, 8 ne prennent pas en charge les méthodes indexOf et lastIndexOf

var arr = [2, 'tim', 4, 5, 2];
arr.indexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

arr.lastIndexOf(item)

Exécutez la fonction donnée sur chaque élément du tableau, en renvoyant true si le la fonction renvoie vrai pour chaque élément. Il y aura une fonction comme paramètre de chaque. Cette fonction a également 3 paramètres, qui sont

[Chaque élément du tableau qui appelle chaque|La position de l'élément correspondant|Représente le tableau]

var arr = [2, 'tim', 4, 5, 2];
arr.lastIndexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

arr.every()Exécutez la fonction donnée sur chaque élément du tableau, en renvoyant vrai si la fonction renvoie vrai pour l'un des éléments. Il y aura une fonction comme paramètre de chaque. Cette fonction a également 3 paramètres, qui sont

[Chaque élément du tableau qui appelle chaque|La position de l'élément correspondant|Représente le tableau]

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

arr.some()Méthode de filtrage. Renvoie un tableau composé d'éléments qui remplissent la condition. Les paramètres de fn sont

[Chaque élément du tableau appelant chaque | La position de l'élément correspondant | Représente le tableau]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

arr.map(fn)

对数组的每一项进行计算等处理，返回处理结果组成的数组，fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

arr.forEach(fn)

遍历数组，没有返回值，fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

numbers.forEach(function(item, index) {
    // do something
})

arr.reduce(fn)

缩减方法。fn的参数为
[ 前一个元素 | 当前元素，从1开始 | 后一个元素的序列，从1开始计数 | 表示该数组 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15

arr.reduceRight(fn)

与reduce一模一样，只是方向相反。

jQuery相关方法

$.each(arr, fn)

遍历数组或者对象，fn有2个参数，分别为， 比原生的for in 更加健壮
[ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

• 跳过一次循环 return | return true

• 终止循环 return false

$.grep(arr, fn)

过滤方法，功能类同原生中的arr.filter(fn)。此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变

$.map(arr, fn)

对每项进行处理，返回处理结果组成的数组，此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响

$.inArray(item, array)

检测某一个元素item是否存在与数组之中，返回其所在的位置，如果不在，则返回-1

$.inArray(3, [1, 2, 3]);
// > 2

$.merge(arr1, arr2)

合并数组，会改变第一个参数的数组为合并之后的数组，返回合并之后的数组

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变，可以使用下面的方式来写
$.merge($.merge([], arr), arr2);

$.unique(arr)

过滤DOM数组中重复的元素

$.makeArray(obj)

将类数组对象转换为数组

$(elem).toArray()

将jQuery对象集合恢复成DOM数组

相关推荐：

最实用的JS数组函数整理

PHP常用数组(Array)函数总结整理

PHP 数组排序方法总结

几种PHP数组定义的方法

JavaScript如何创建数组？