Explication détaillée des compétences JavaScript Array object_javascript

Cet article présente l'objet tableau Array de JS, le contenu spécifique est le suivant

Table des matières
1. Introduction : Présentez la description, la méthode de définition et les propriétés de l'objet tableau Array.

2. Méthodes d'instance : Présentation des méthodes d'instance des objets Array : concat, each, filter, forEach, indexOf, join, lastIndexOf, map, pop, push, reverse, shift, slice, sort, splice, toString, tounshift, etc.

3. Méthode statique : Présentation de la méthode statique de l'objet Array : Array.isArray().

4. Opérations pratiques : effectuez des exemples d'opérations sur un tableau : indexation, pour la traversée, la copie superficielle, la copie profonde et d'autres opérations.

1. Introduction
1.1 Description

Un tableau est une collection ordonnée de valeurs. Chaque valeur est appelée un élément et chaque élément a une position dans le tableau, représentée par un nombre, appelé index. Les tableaux JavaScript ne sont pas typés : les éléments du tableau peuvent être de n'importe quel type et différents éléments d'un même tableau peuvent avoir des types différents. --"Le guide définitif de JavaScript (sixième édition)"

1.2 Définition

var names = new Array("张三", "李四", "王五");
//或者
var names = ["张三", "李四", "王五"];

1.3 Propriétés

length : Indique la longueur des éléments du tableau.

2. Méthodes d'instance
Méthodes courantes :

1) unshift() : Insère des éléments en tête du tableau

2) shift() : Supprime et renvoie le premier élément du tableau

3) push() : Insérer des éléments à la fin du tableau

4) pop() : Supprime et renvoie le dernier élément du tableau

2.1 concat() : Connecte des éléments à un tableau. Le tableau d'origine ne sera pas modifié et un nouveau tableau sera renvoyé

Paramètres :

①value1,value2....valueN : n'importe quel nombre de valeurs

Valeur de retour :

{Array} Un nouveau tableau, contenant le tableau d'origine et les éléments nouvellement ajoutés.

Exemple :

var demoArray = ['a', 'b', 'c'];
var demoArray2 = demoArray.concat('e');
console.log(demoArray); // => demoArray:['a','b','c'] 原数组不发生变更
console.log(demoArray2); // => ['a','b','c','e']

2.2 each() : parcourez les éléments dans l'ordre et déterminez si chaque élément est vrai

Paramètres :

①function(value,index,self){} : Chaque élément utilisera cette fonction pour déterminer si elle est vraie. Lorsqu'il est déterminé qu'elle est fausse, le parcours se terminera immédiatement.

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour :

{Boolean} : renvoie vrai uniquement si chaque élément est vrai ; renvoie faux tant qu'un élément est faux.

Exemple :

var demoArray = [1, 2, 3];
var rs = demoArray.every(function (value, index, self) {
 return value > 0;
});
console.log(rs); // => true
 

2.3 filter() : parcourt les éléments dans l'ordre et renvoie un nouveau tableau contenant des éléments qui remplissent les conditions

Paramètres :

①function(value,index,self){} : Appelez cette fonction sur chaque élément tour à tour et renvoie un nouveau tableau contenant des éléments qui remplissent les conditions.

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour :

{Array} Un nouveau tableau contenant des éléments qui répondent aux critères

Exemple :

var demoArray = [1, 2, 3];
var rs = demoArray.filter(function (value, index, self) {
 return value > 0;
});
console.log(rs); // => [1, 2, 3]

2.4 forEach() : parcourez les éléments dans l'ordre et exécutez la fonction spécifiée sans valeur de retour

Paramètres :

①function(value,index,self){} : Appelez cette fonction pour chaque élément tour à tour

Valeur : éléments du parcours du tableau

Index : numéro d'élément

Auto : tableau lui-même

Valeur de retour : Aucune

Exemple :

var demoArray = [1, 2, 3];
demoArray.forEach(function (value, index, self) {
 console.log(value); // => 依次输出：1 2 3
});

2.5 indexOf() : Rechercher les éléments correspondants dans le tableau. S'il n'y a aucun élément correspondant, -1 est renvoyé. Utilisez l'opérateur "===" lors de la recherche, vous devez donc faire la distinction entre 1 et '1'

Paramètres :

①value : La valeur à trouver dans le tableau.

②start : La position du numéro de série pour commencer la recherche. S'il est omis, il sera 0.

Valeur de retour :

{Int} : renvoie le numéro de série de la première valeur correspondante dans le tableau. S'il n'existe pas, renvoie -1

Exemple :

['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].indexOf('a', 1); // =>-1
['a', 'b', 'c'].indexOf('d'); // =>-1
[1, 2, 3].indexOf('1'); // => -1 ：采用的'==='匹配方式

2.6 join() : divisez tous les éléments du tableau en une chaîne via un délimiteur

Paramètres :

①sparator {String} : Le séparateur entre chaque élément s'il est omis, il sera séparé par des virgules anglaises ',' par défaut.

Valeur de retour :

{String} : chaque élément est fusionné en une chaîne avec sparator comme séparateur.

Exemple :

['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-'); // => 'a-b-c'

2.7 lastIndexOf : recherche les éléments correspondants dans le sens inverse dans le tableau. S'il n'y a aucun élément correspondant, -1 est renvoyé. Utilisez l'opérateur "===" lors de la recherche, vous devez donc faire la distinction entre 1 et '1'

Paramètres :

①value : La valeur à trouver dans le tableau.

②start : La position du numéro de série pour commencer la recherche. En cas d'omission, la recherche commencera à partir du dernier élément.

Valeur de retour :

{Int} : recherchez le numéro de séquence de la première valeur correspondante dans le tableau de droite à gauche. S'il n'existe pas, renvoyez -1

Exemple :

['a', 'b', 'c'].lastIndexOf('a'); // => 0
['a', 'b', 'c'].lastIndexOf('a', 1); // => 0
['a', 'b', 'c'].lastIndexOf('d'); // => -1
[1, 2, 3].lastIndexOf('1'); // => -1 ：采用的'==='匹配方式
 

2.8 map() ：依次遍历并计算每个元素，返回计算好的元素的数组

参数：

①function(value,index,self){} ：每个元素依次调用此函数，返回计算好的元素

　　value ：数组遍历的元素

　　index ：元素序号

　　self ：Array本身

返回值：

{Array} 一个包含就算好的元素的新的数组

示例：

[1, 2, 3].map(function (value, index, self) {
 return value * 2;
}); // => [2, 4, 6]
 

2.9 pop() ：移除并返回数组的最后一个元素

参数：无

返回值：

{Object} 数组的最后一个元素；若数组为空，返回undefined

示例：

var demoArray = ['a', 'b', 'c'];
demoArray.pop(); // => c
demoArray.pop(); // => b
demoArray.pop(); // => a
demoArray.pop(); // => undefined

2.10 push() ：把元素添加到数组尾部

参数：

①value1,value2.....valueN ：任意多个值添加到数组尾部

返回值：

{int} 数组新的长度

示例：

var demoArray = ['a', 'b', 'c'];
demoArray.push('d'); // => 4, demoArray ： ['a', 'b', 'c', 'd']
demoArray.push('e', 'f'); // => 6, demoArray ：['a', 'b', 'c', 'd', 'e', 'f']
console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']

2.11 reverse() ：反转数组元素的顺序

参数：无

返回值：无(在原数组内进行元素顺序反转)。

示例：

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]

2.12 shift() ：移除并返回数组的第一个元素

参数：无

返回值：

{Object} 数组的第一个元素；若数组为空，返回undefined。

示例：

var demoArray = ['a', 'b', 'c'];
demoArray.shift(); // => a
demoArray.shift(); // => b
demoArray.shift(); // => c
demoArray.shift(); // => undefined

2.13 slice(startIndex,endIndex) ：返回数组的一部分

参数：

①startIndex ：开始处的序号；若为负数，表示从尾部开始计算，-1代表最后一个元素，-2倒数第二个，依此类推。

②endIndex ： 结束处的元素后一个序号，没指定就是结尾。截取的元素不包含此处序号的元素，结尾为此处序号的前一个元素。

返回值：

{Array} 一个新的数组，包含从startIndex到endIndex前一个元素的所有元素。

示例：

[1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] ：从序号1开始截取
[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] ：截取序号0到序号3(序号4的前一个)的元素
[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] ：截取后面的2个元素
 

2.14 sort(opt_orderFunc) ：按一定的规则进行排序

参数：

①opt_orderFunc(v1,v2) {Function}：可选的排序规则函数。若省略，将按照元素的字母进行从小到大排序。

　　v1 ：遍历时前面的元素。

　　v2 ：遍历时后面的元素。

排序规则：

比较v1和v2，返回一个数字来表示v1和v2的排序规则：

小于0 ：v1小于v2，v1排在v2的前面。

等于0 ：v1等于v2，v1排在v2的前面。

大于0 ：v1大于v2，v1排在v2的后面。

返回值：无(在原先数组里进行排序操作)。

示例：

[1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] ：这里都元素都被转换为字符，11的字符在2前
 
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
 return v1 - v2;
}); // => [1, 2, 3, 4, 5, 11, 22] ：从小到大排序
 
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
 return -(v1 - v2); //取反，就可以转换为 从大到小
}); // => [22, 11, 5, 4, 3, 2, 1]
 

2.15 splice() ：插入、删除数组元素

参数：

①start {int} ：开始插入、删除或替换的起始序号。

②deleteCount {int} ：要删除元素的个数，从start处开始计算。

③value1,value2 ... valueN {Object} ：可选参数，表示要插入的元素，从start处开始插入。若②参不为0，那么先执行删除操作，再执行插入操作。

返回值：

{Array} 返回一个包含删除元素的新的数组。若②参为0，表示没元素删除，返回一个空数组。

示例：

// 1.删除
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 2); // 删除从序号从0开始的2个元素，返回包含删除元素的数组：['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
 
// 2.插入
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ②参为0，返回空数组
console.log(demoArray2); // => [ ]
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
 
// 3.先删除再插入
var demoArray = ['a', 'b', 'c', 'd', 'e'];
// 当②参不为0，那么先执行删除操作(删除序号从0开始的4个元素，返回包含被删除元素的数组)，再执行插入操作
var demoArray2 = demoArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd'] 
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
 

2.16 toString() ：将数组中所有元素通过一个英文逗号','拼接为一个字符串

参数：无

返回值：

{String} 数组中所有元素通过一个英文逗号','拼接为一个字符串，并返回。与调用无参join()方法一样。

示例：

[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'

2.17 unshift() ：在数组头部插入元素

参数：

①value1,value2.....valueN ：任意多个值添加到数组头部

返回值：

{int} 数组新的长度

示例：

var demoArray = [];
demoArray.unshift('a'); // => demoArray:['a']
demoArray.unshift('b'); // => demoArray:['b', 'a']
demoArray.unshift('c'); // => demoArray:['c', 'b', 'a']
demoArray.unshift('d'); // => demoArray:['d', 'c', 'b', 'a']
demoArray.unshift('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']

三. 静态方法
3.1 Array.isArray() ：判断对象是否为数组

参数：

①value {Object}：任意对象

返回值：

{Boolean} 返回判断结果。当为 true时，表示对象为数组；为false时，表示对象不是数组

示例：

Array.isArray([]); // => true
Array.isArray(['a', 'b', 'c']); // => true
Array.isArray('a'); // => false
Array.isArray('[1, 2, 3]'); // => false

四. 实际操作
4.1 索引

说明：每个元素在数组中有一个位置，以数字表示，称为索引。索引是从0开始计，即第一个元素的索引为0，第二个元素的索引为1，依此类推；

当获取一个数组不存在的索引时，返回 undefined。

示例：

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray[0]; // => 获取第一个元素:'a'
demoArray[0] = 1; // 设置第一个元素为 1
console.log(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e']
console.log(demoArray[9]); // => undefined ：当获取的索引不存在时，返回 undefined

4.2 for 语句

说明：可以通过for语句逐个遍历数组

示例：

var demoArray = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0, length = demoArray.length; i < length; i++) {
 console.log(demoArray[i]); // => 逐个输出数组内的元素
}

4.3 浅度复制

说明：Array类型是一种引用类型；当数组a复制给数组b时，对数组b进行元素修改，数组a也会发生修改。

示例：

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA; // 把数组A 赋值给数组B
demoArrayB[0] = 1; // 对数组B 的元素进行修改
console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']：数组A 的元素也发生了变更
 

4.4 深度复制

说明：使用concat()方法，返回新的数组；防止浅度复制的情况发生，对数组b进行元素修改操作，数组a不发生变更。

示例：

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA.concat(); // 使用concat()方法，返回新的数组
demoArrayB[0] = 1; // 对数组B 的元素进行修改
console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']：数组A 的元素没变更
console.log(demoArrayB); // => [ 1, 'b', 'c', 'd', 'e']：数组B 的元素发生了变更

4.5 判断2个数组是否相等

说明：Array数组为引用类型，所以哪怕 []===[] 都会返回false，所以可通过数组toString()方法返回的字符串判断是否相等。

示例：

console.log([]===[]); // => false
console.log(['a', 'b'] === ['a', 'b']); // => false
console.log(['a', 'b'].toString() === ['a', 'b'].toString()); // true

以上就是本文的全部内容，希望对大家学习javascript  Array对象有所帮助。