JavaScript中对数组和数组API的认识

 

一、数组概念：

　　数组是JavaScript中的一类特殊的对象，用一对中括号“[]”表示，用来在单个的变量中存储多个值。在数组中，每个值都有一个对应的不重复的索引值。自动匹配索引值的数组称为索引数组，自定义索引值的数组称为关联数组（又叫哈希数组）。以下均研究索引数组。

 

二、创建数组：

　　使用数组之前首先都要先创建并赋值给一个变量，创建数组有两种不同的方法。

　　1、调用构造函数Array()创建数组，索引数组索引值都从0开始

　　　　eg:var arr=New Array();         　　//创建一个空数组

　　　　eg:var arr=New Array(3);　    　　//创建一个长度为3的数组

　　　　　  arr[0]=12;　　   　　　　  　　 //存储一个Number类型的值

　　　　　  arr[1]="abc";　　 　　　　　　//存储一个String类型的值

　　　　　  arr[2]=true;　　       　　　　　//存储一个Boolean类型的值

　　　　　  可以简写：var arr=New Array(12,"abc",true);

 

　　2、用数组字面量表示

　　　　eg:var arr=[];　　　　　　　　　　//创建一个空数组

　　　　eg:var arr=[3];　　　　　　　 　　//创建一个长度为1的数组，存错了一个数值3

　　　　eg:var arr=[12,"abc",true];             //创建一个存储3个值的数组

 

三、简单操作

　　1、读取和设置数组中的值时，要使用一对方括号“[]”，里面是值的索引值

　　　　eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　console.log(arr[0]);　　　　    //12，取arr数组索引值为1的值，并打印在控制台

　　　　　　arr[1]="ABC";　　　　　　　  //取arr数组索引值为1的值，修改为“ABC”放入原数组

　　　　　　console.log(arr[1]);　　　　　//ABC

　　　　　　arr[3]="一";　　　　　　　　  //在数组中索引值为3的位置增加一个值"一"

　　　　　　console.log(arr[3]);　　　　　//一

 

　　2、数组的length属性可以得到数组的长度，修改length属性可以起到修改数组的效果

　　　  索引数组里面最后一个值的索引值总比数组长度小1

　　　　eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　console.log(arr.length);　　　 //3，此时arr数组的长度

　　　　　　arr[arr.length]="ABC";　　　　//在arr数组末尾新增一个值“ABC”，

　　　　　　console.log(arr.length);　　　 //4，新增之后arr数组的长度

　　　　　　arr.length=arr.length-1;　　　//删除arr数组末尾的值

　　　　　　console.log(arr.length);　　　 //3，新增之后arr数组的长度

 

　　　　　　也可以直接修改数组的长度

　　　　　　arr.length=2;

　　　　　　console.log(arr.length);　　　 //2（小于之前的3），之前多出来的值会被删除

　　　　　　arr.length=6;

　　　　　　console.log(arr.length);　　　 //6（大于之前的3），不够的值被自动补充为undefined

 

四、遍历数组

　　1、普通的for循环遍历

　　　　通常情况下是从索引值0开始遍历，这样 i 的取值就要限制在[0,arr.length)

　　　　eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　for(var i=0;i<arr.length;i++){

　　　　　　　　console.log(arr[i]);

　　　　　　} 　　　　　　　　　　　　　  //12  abc  true (空格处均有换行)

 

　　2、用for...in方法遍历

　　　　其中key表示索引值，arr表示要遍历的数组

　　　　 eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　for(var key in arr){

　　　　　　　　console.log(arr[key]);

　　　　　　}　　　　　　　                       //12  abc  true (空格处均有换行)

 

　　3、用for...of方法遍历

　　　　val表示数组的值，arr为数组

　　　　 eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　for(var val of arr){

　　　　　　　　console.log(val);

　　　　　　}　　　　　　　　　　　　　　//12  abc true (空格处均有换行)

 

　　4、用forEach()方法遍历

　　　　让数组的每一项都执行给定的函数，此方法没有返回值。

　　　　该函数默认需要传参，分别是：数组每一项值，每一项值的索引值以及数组本身

　　　　 eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　arr.forEach(function(x,index,a){

　　　　　　　　console.log(index+"--"+x);

　　　　　　})　　　　　　　　　　　　　 //0--12  1--abc  2--true (空格处均有换行)

五、数组属性

　　1、length：数组包含的元素的个数，即数组的长度。详见上文 简单操作 第二条

　　2、constructor：返回对创建此对象的数组函数的引用（不常用）

　　3、prototype：可以用来向数组对象添加属性和方法（不常用）

 

六、数组方法

　　1、增加

　　　　push()：向数组末尾增加元素，并返回修改后数组的长度（后加）

　　　　unshift()：向数组开头增加元素，并返回修改后数组的长度（前加）

　　　　eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　   var change1=arr.push("ABC");

　　　　　　console.log("change1："+change1+"，当前数组："+arr);

　　　　　　//change1：4，当前数组：12,abc,true,ABC

　　　　　　var change2=arr.unshift("一");

　　　　　　console.log("change2："+change2+"，当前数组："+arr);

　　　　　　//change2：5，当前数组：一,12,abc,true,ABC

 

　　2、删除

　　　　pop()：删除并返回数组的最后一个元素（后减）

　　　　shift()：删除并返回数组的第一个元素（前碱）

　　　　eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　   var change3=arr.pop();

　　　　　   console.log("change3："+change3+"，当前数组："+arr);

　　　　　　//change3：true，当前数组：12,abc

　　　　　   var change4=arr.shift();

　　　　　   console.log("change4："+change4+"，当前数组："+arr);    

　　　　　　//change4：12，当前数组：abc,true

　　

　　3、修改

　　　　concat()：连接两个或两个以上的数组，并返回新构建的数组

　　　　　  创建原数组的副本，将元素或者数组添加到此副本的末尾并返回。

　　　　　　在没有参数的情况下，只是返回原数组的副本。

　　　　 　   eg:var arr=[12,"abc",true];   //创建一个存储3个值的数组

　　　　　　　  var arr1=arr.concat(8,["ABC","一"]);

　　　　　　　  console.log("arr："+arr+"，arr1："+arr1);　　

　　　　　　　  //arr：12,abc,true，arr1：12,abc,true,8,ABC,一（原数组未被改变）

　　　　join()：把数组元素组成一个字符串，通过参数指定的分隔符进行分隔

　　　　　　该方法只有一个参数，即分隔符，用引号“""”包裹

　　　　　　省略的话默认用逗号“,”分隔，若想要无缝衔接，用“""”

　　　　　　 eg:var arr=[12,"abc",true];   　　//创建一个存储3个值的数组

　　　　　　　　console.log(arr.join());　　    //12,abc,true（默认用逗号分隔）

　　　　　　　　console.log(arr.join(""));　　 //12abctrue（无缝衔接）

　　　　　　　　console.log(arr.join(" "));　　//12 abc true（用空格分隔）

　　　　sort()：对数组的元素进行排序，默认按升序排列数组中的元素

　　　　　　sort()方法调用数组中值的toString()方法，比较得到的字符串排序（数值不例外）

　　　　　　sort()方法是在原数组上进行排序的，会改变原数组

　　　　　　eg:var arr=["a","b","c","d","e"];

　　　　　　　　console.log(arr.sort());

　　　　　　　　console.log(arr);　　　　

　　　　　　　　//["a", "b", "c", "d", "e"] ["a", "b", "c", "d", "e"](空格处有换行，原数组被改变)

　　　　　　eg:var arr=[2,12,5,34];

　　　　　　　　console.log(arr.sort());

　　　　　　　　console.log(arr);　　　　

　　　　　　　　//[12, 2, 34, 5] [12, 2, 34, 5](空格均有换行，原数组被改变)

　　　　　　上例显然是错误的，是因为sort()把所有数据类型转为字符串进行对比的

　　　　　　为了解决这个问题，我们可以给sort()方法设置一个对比规则的函数作参数

　　　　　　这个函数接收两个参数，若要第一个参数位于第二份参数之前，就返回一个负值

　　　　　　反之则反，两个参数相等即返回0

　　　　　　通过这个函数我们可以设置自定义的规则来进行数组排序

　　　　　　eg:var arr=[2,12,5,34];

　　　　　　　　function compare(a,b){

　　　　　　　　　　if(a<b){

　　　　　　　　　　　　return -1;

　　　　　　　　　　}else if(a>b){

　　　　　　　　　　　　return 1;

　　　　　　　　　　}else{

　　　　　　　　　　　　return 0;

　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　console.log(arr.sort(compare));

　　　　　　　　//[2, 5, 12, 34] [2, 5, 12, 34](空格处有换行，原数组被改变)

　　　　reverse()：颠倒数组中值的顺序

　　　　　　eg:var arr=[12,"abc",true];   　　//创建一个存储3个值的数组

　　　　　　　　console.log(arr.reverse());

　　　　　　　　console.log(arr);

　　　　　　　　//[true, "abc", 12] [true, "abc", 12](空格处有换行，原数组被改变)

　　　　slice()：返回截取数组的一个片段组成的新数组，原数组不变

　　　　　　该方法接受参数，表示从原数组截取项起始和结束索引值（不包括结束位置的值）

　　　　　　若没有参数，则返回整个数组，相当于复制

　　　　　　若只有一个参数，则表示从原数组截取项的起始位置索引值，结束位置默认为数组末尾

　　　　　　若参数为负数，则表示将数组从后向前找位置，如：-2即倒数第二个值

　　　　　　第二个参数表示的位置一定要在第一个参数表示位置之后，否则返回空数组

　　　　　　eg:var arr=[0,2,4,6,8,10];

　　　　　　　　console.log(arr.slice(2,4));　　　　//[4,6]

　　　　　　　　console.log(arr.slice(2));　　   　　//[4,6,8,10]

　　　　　　　　console.log(arr.slice(2,-2));　  　　//[4,6]

　　　　　　　　console.log(arr.slice(-4,-2));　　    //[4,6]

　　　　　　　　console.log(arr);　　　　　　　　  //[0,2,4,6,8,10]

　　　　splice()：可以实现多种操作，删除，插入和替换，会改变原数组

　　　　　　删除：可以删除数组中任意项，接受两个参数,分别为：

　　　　　　　　要删除的第一项的索引值和要删除的长度

　　　　　　插入：可以在指定位置插入任意项，接受三个部分参数，分别为：

　　　　　　　　要插入的起始位置，要删除的项的数量（0） 以及 要插入的项（可以是多个）

　　　　　　替换：可以在是定位置插入任意项，同时删除任意项，接受三个部分参数，分别为：

　　　　　　　　要插入的起始位置，要删除的项的数量（不为0） 以及 要插入的项（可以是多个）

　　　　　　　　删除的项的数量和要插入的项的数量没有必然的关系，不必完全相等

　　　　　　该方法返回包含删除项的数组，若没有删除项，则返回空数组，此方法会改变原数组

　　　　　　eg:var arr=[0,2,4,6,8,10];

　　　　　　console.log(arr.splice(2,2));　　　　　  

　　　　　　//[4,6]　被删除的值

　　　　　　console.log(arr);　　　　　　　　　　  

　　　　　　//[0,2,8,10]　删除：从索引值为2的地方开始删除两个元素

　　　　　　var arr=[0,2,4,6,8,10];

　　　　　　console.log(arr.splice(2,0,3));　　　　  

　　　　　　//空数组　并未删除元素

　　　　　　console.log(arr);　　　　　　　　　　  

　　　　　　//[0,2,3,4,6,8,10]  插入：在索引值为2的地方插入一个数值3

　　　　　　var arr=[0,2,4,6,8,10];

　　　　　　console.log(arr.splice(2,1,3,5));　　      

　　　　　　//[4]　把索引值为2的4删除，替换成了3,5

　　　　　　console.log(arr);　　　　　　　　　　  

　　　　　　//[0,2,3,5,6,8,10]  替换：把索引值为2的地方替换为两个数值3,5

 

　　　　toString() ：把数组转换为字符串，并返回结果

　　　　　　eg:var arr=[0,2,4,6,8,10];

　　　　　　　　console.log(arr.toString());　　　　　　//0,2,4,6,8,10

　　　　toLocaleString()：把数组转换为本地字符串，并返回结果

　　　　　　用地区特定的分隔符把生成的字符串连接起来，形成一个字符串

　　　　　　eg:var arr=[0,2,4,6,8,10];

　　　　　　　　console.log(arr.toString());　　　　　　//0,2,4,6,8,10

 

　　4、查找

　　　　indexOf()：获取元素在数组中第一次出现的位置，找不到则返回-1

　　　　　　接受两个参数，分别为要查找的元素和开始查找的位置，从前往后查找

　　　　　　第二个参数可以省略，表示默认从第一项开始查找，该参数必须小于数组长度

　　　　　　eg:var arr=[0,2,4,6,2,10];

　　　　　　　　console.log(arr.indexOf(2));　　　　　 //1　默认从第一项开始查找

　　　　　　　　console.log(arr.indexOf(2,2));　　　　  //4　从索引值为2的地方开始从前向后查找

　　　　lastIndexOf()：获取元素在数组中最后一次出现的位置，找不到则返回-1

　　　　　　接受两个参数，分别为要查找的元素和开始查找的位置，从后往前查找

　　　　　　第二个参数可以省略，表示默认从最后一项开始查找，该参数必须小于数组长度

　　　　　　eg:var arr=[0,2,4,6,2,10];

　　　　　　　　console.log(arr.lastIndexOf(2));　　　　//4　默认从最后一项开始查找

　　　　　　　　console.log(arr.lastIndexOf(2,2));　　　 //1　从索引值为2的地方开始从后向前查找

 

 

 

　　　　已上即为本文全部内容，希望能对各位有所帮助，若有不妥之处也请各位多多指正，共同进步。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有