Maison  >  Article  >  interface Web  >  Résumé de l'introduction aux objets tableau en JavaScript

Résumé de l'introduction aux objets tableau en JavaScript

零下一度
零下一度original
2017-06-26 09:07:341211parcourir

L'objet tableau est un objet tableau utilisé pour stocker plusieurs valeurs dans une seule variable. Les tableaux JS sont faiblement typés, le tableau est donc autorisé à contenir des éléments de différents types. Les éléments du tableau peuvent même être des objets ou d'autres tableaux.

  • Syntaxe de création de tableaux

1. Constructeur de tableau

1、var list=new Array();2、var list=new Array(size);3、var list=new Array(element0,element1,...elementn);

Méthode littérale

var Array[element0,element1,...elementn];
Exemples

var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);
var list[1,true,null,undefined,{x:1},[1,2,3]];
  • Classification des tableaux

1. d'un tableau est que les éléments du tableau sont également des tableaux.

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素
2. Tableau clairsemé

Un tableau clairsemé est un tableau contenant des index discontinus commençant à 0. Dans les tableaux clairsemés, la valeur de l'attribut de longueur est généralement supérieure au nombre réel d'éléments (rare)

Exemple

var a=["a",,"b",,,,"c",,];

  • Attribut d'objet de tableau

属性 作用
length 属性 表示数组的长度,即其中元素的个数
prototype 属性 返回对象类型原型的引用
constructor 属性 表示创建对象的函数
1. L'attribut de longueur

Expliquez l'attribut de longueur à travers quelques opérations


//Un tableau contenant 10 nombres est défini. var arr=[1,2,3,4,5,6,7,8,9,10];L'attribut de longueur du tableau est variable

alert(arr.length); //显示数组的长度10
arr.length=15; //增大数组的长度,length属性是可变的
alert(arr.length); //显示数组的长度已经变为15
Accéder aux éléments du tableau

alert(arr[3]); //显示第4个元素的值,为4
Réduire la longueur du tableau

arr.length=2; //将数组的长度减少到2,数组中的元素只剩下索引值小于2的元素
alert(arr[9]); //这时候显示第10个元素已经变为"undefined"因为索引值大于等于2的元素都被抛弃了
Restaurer la longueur du tableau

arr.length=10; //将数组长度恢复为10
alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回,显示"undefined"
2. L'attribut prototype

renvoie une référence au prototype du type d'objet. Les attributs prototype sont communs à prototype. Le paramètre object
objectName.prototype
est le nom de l'objet objectName. object

Description : utilisez l'attribut prototype pour fournir un ensemble de fonctions de base de la classe de l'objet. Les nouvelles instances d'un objet « héritent » des opérations assignées au prototype de l'objet.

Pour les objets tableau, utilisez l'exemple suivant pour illustrer l'utilisation de l'attribut prototype.

Ajoutez une méthode à l'objet tableau pour renvoyer la valeur maximale de l'élément dans le tableau. Pour ce faire, déclarez une fonction, ajoutez-la à Array.prototype et utilisez-la.

function array_max( )
{   var i, max = this[0];   for (i = 1; i < this.length; i++)
   {       if (max < this[i])
       max = this[i];
   }   return max;
}Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );
Une fois ce code exécuté, y contient la valeur maximale dans le tableau x, ou disons 6.

3. L'attribut constructeur

représente la fonction qui crée l'objet. constructor
est le nom d'un objet ou d'une fonction. object.constructor //object Description : L'attribut
est membre de tous les objets avec constructor. Ils incluent tous les prototype objets intrinsèques à l'exception des objets Global et Math. JScriptLes attributs contiennent une référence à une fonction qui construit une instance d'objet spécifique. constructor

Par exemple :

x = new String("Hi");if (x.constructor == String) // 进行处理(条件为真)。//或function MyFunc {// 函数体。
}

y = new MyFunc;if (y.constructor == MyFunc) // 进行处理(条件为真)。
Pour un tableau :

y = new Array();
  • Méthode objet du tableau

Remarque : certaines sont de nouvelles fonctionnalités d'ECMAScript5 (non prises en charge par IE678)

主要对一些新特性进行讲解
concat
concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。
例如

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

slice
slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素

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

splice
splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a,b)从a位置开始截取其中的b个元素
object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原数组被修改了

var arr=[1,2,3,4,5];
arr.splice(2,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];

foreach
foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分别对应:数组元素,元素的索引,数组本身console.log(x + &#39;|&#39; + index + &#39;|&#39; + (a === arr));
});// 1|0|true// 2|1|true// 3|2|true// 4|3|true// 5|4|true

说明:如果只有一个参数那这个参数代表数组元素,也就是数组的值,请看例2。

例2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是数组的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出来是21

map 
map 对数组做一些映射,map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,它与forEach的区别是forEach为数组中的每个元素执行一次回调函数。

var arr = [1, 2, 3];
arr.map(function(x) {     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]

filter
filter 过滤掉某些元素,和map有点类似,Array的filter也接收一个函数。但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素,也就是过滤掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

every()与some()
every()与some()方法都是JS中数组的迭代方法。every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true。
总结就是every()当每个元素都符合条件的时候返回true,而some()是任一项满足条件就返回true

例1 every()var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {     return x < 10;
}); // true

arr.every(function(x) {     return x < 3;
}); // false

some只需要有一个符合的就行

例2 somevar arr = [1, 2, 3, 4, 5];
arr.some(function(x) {     return x === 3;
}); // true

arr.some(function(x) {     return x === 100;
}); // false

reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 2, 3];var sum = arr.reduce(function(x, y) {     return x + y
}, 0); //参数 0是可选的,如果写了参数0那第一次传递的两个值就是0和1
如果不写第一次传递的就是数组的前两个值,计算结果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];var max = arr.reduce(function(x, y) {     console.log(x + "|" + y);     return x > y ? x : y;
});// 3|9// 9|6
max; // 9

reduceRight
和reduce一样只不过reduceRight 变成了从右到左两两执行某些操作

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);     return x > y ? x : y;
});// 6|9// 9|3max; // 9

indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,indexOf(a,b)表示查找a元素,从b位置开始;lastindexOf表示从右向左找。当b为负数的时候表示从倒数第几个元素开始找,请看例子。

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1表示没有这个元素
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4查找1从倒数第3个元素开始
arr.indexOf(2, -1); // -1查找2从倒数第1个元素开始
arr.lastIndexOf(2); // 3从右边开始找第一次出现2的位置
arr.lastIndexOf(2, -2); // 3从右边的倒数第二个开始找2出现的位置
arr.lastIndexOf(2, -3); // 1

isArray
isArray用来判断是否是数组,但是isArray是Array构造器对象上的属性,所以不能直接用isArray,必须要写成Array.isArray([]),但是可以其它的判断方法直接判断

[]instanceof Array;//true
({}).toString.apply([])===&#39;[object Array]&#39;;//true
[].construcror===Array;//true

数组和一般对象的比较

  数组 / 一般对象
相同点 都可以继承,对象不一定是数组,都可以当做对象添加属性
不同点 数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法

数组和字符串的比较

 

  数组 /字符串
相同点 字符串是数组的一种
不同点 字符串是不可变的数组,字符串没有数组的方法

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流 

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn