JavaScript深入浅出————数组（五）

最新推荐文章于 2024-10-03 17:13:29 发布

pugongyingyangyue

最新推荐文章于 2024-10-03 17:13:29 发布

阅读量373

点赞数

本文详细介绍了JavaScript数组的基础概念、创建方式、元素操作、迭代方法及数组方法等核心内容，并对比了数组与一般对象的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建数组，操作数组

数组是值的有序集合.每个值叫做元素,每个元素在数组中都有数字位置编号,也就是索引.JS的数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或其他数组.
例如:var arr=[1,true,null,undefined,{x:1},[1,2,3]];

1.创建数组——字面量
var BAT=["Alibaba","Tencent","Baidu"];
var students={{name:"Bosn",age:27},{name:"Nunnly",age:3}};
var arr=["Nunnly","is","big","keng","B",123,true,null];
var arrInArr=[[1,2],[3,4,5]];

var commasArr1=[1,,2];//1,undefined,2
var commasArr2=[,,];//undefined,undefined,javaScrapt允许数组最后含有多余，但不建议这样

数组的大小有限制:size from 0 to 4294967295(2^23-1);
new Array(4294967295);//不会报错
new Array(4294967296);//Invalid array length

2.创建数组——new Array
var arr=new Array();
var arrWithLength=new Array(100);//创建一个数组，长度为100
var arrLikesLiteral=new Array(true,false,null,1,2,"hi");//等价于[true,false,null,1,2,"hi"]

  3.数组元素读写
var arr=[1,2,3,4,5];
arr[1];//2
arr.length;//5

arr[5]=6;//动态添加数组元素
arr.length;//6

delete arr[0];
arr[0];//undefined,注意，此时数组长度仍然为6

4.数组元素增删
javascript中的数组是动态的,无需指定大小
var arr=[];
arr[0]=1;
arr[1]=2;
arr.push(3);
arr;//[1,2,3]

arr[arr.length]=4;//equal to arr.push(4);
arr;//[1,2,3,4];

arr.unshift(0);//在数组头部插入元素
arr;//[0,1,2,3,4];

delete arr[2];
arr;//[0,1,undefined,3,4]
arr.length;//5
2 in arr;//false

arr.length-=1;
arr;//[0,1,undefined,3],4 is removed

arr.pop();//3 returned by pop
arr;//[0,1,undefined],3 is removed

arr.shift();//移除数组的第一个元素
arr;//[1,undefined]

5.数组迭代
var i=0,n=10;
var arr=[1,2,3,4,5];
for(;i<n;i++){
  console.log(arr[i]);//1,2,3,4,5
}

for(i in arr){
  console.log(arr[i]);//1,2,3,4,5
}

Array.prototype.x="inherited";

for(i in arr){
  console.log(arr[i]);//1,2,3,4,5,inherited
}

for(i in arr){
  if(arr.hasOwnProperty(i)){
   console.log(arr[i]);//1,2,3,4,5
  }
}

注意:for-in 会将原型链上的值也列出来,且顺序是步确定的

二、二维数组，稀疏数组

1.二维数组
var arr=[[0,1],[2,3],[4,5]];
var i=0,j=0;
var row;
for(;i<arr.length;i++){
  row=arr[i];
  console.log("row"+i);
  for(j=0;j<row.length;j++){
   console.log(row[j]);
  }
}

2.稀疏数组
稀疏数组并不含有从0开始的连续索引.一般length属性值比实际元素个数大.
var arr1=[undefined];
var arr2=new Array(1);
0 in arr1;//true
0 in arr2;//false
arr1.length=100;
arr1[99]=123;
99 in arr1;//true
98 in arr1;//false

var arr=[,,];
0 in arr;//false

三、数组方法（上）

1.数组方法

一般对象的原型链指向Object.prototype，数组也是一样的，数组对象的原型为Array.prototype

Array.prototype.join
Array.prototype.reverse
Array.prototype.sort
Array.prototype.concat
Array.prototype.slice
Array.prototype.splice
Array.prototype.forEach(ES5)
Array.prototype.map(ES5)
Array.prototype.filter(ES5)
Array.prototype.every(ES5)
Array.prototype.some(ES5)
Array.prototype.reduce/reduceRight(ES5
Array.prototype.indexOf/lastIndexOf(ES5)
Array.isArray(ES5)

注意：ES5表示IE9及以上支持的方法，IE6，7，8是不支持的

2.Array.prototype.join

该方法可以将数组转为字符串

var arr=[1,2,3];
arr.join();//"1,2,3",改方法不传入参数时，默认以","隔开
arr.join("_");"1_2_3"

function repeatString(str,n){
return new Array(n+1).join(str);
}
repeatString("a",3);//"aaa"
repeatString("hi",5);//"hihihihihi"

3.Array.prototype.reverse

改方法可以将数组逆序，同时原数组也被修改

var arr=[1,2,3];
arr.reverse();//[3,2,1]
arr;//[3,2,1]

4.Array.prototype.sort

排序，默认按字母顺序排序，同时原数组也被修改

5.Array.prototype.concat

数组合并，原数组不改变

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

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

arr.concat([1,[2,3]]);//[1,2,3,1,[2,3]]

6.Array.prototype.slice
返回部分数组,原数组不改变
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],负数表示从结尾开始数的元素，-1表示倒数第一元素
arr.slice(-4,-3);//[2]

7.Array.prototype.splice
数组拼接,不仅可以删除元素,还可以拼接元素,原数组被修改
var arr=[1,2,3,4,5];
arr.splice(2);//return [3,4,5] 只含一个参数时表示被删除元素的起始位置
arr;//[1,2]

arr =[1,2,3,4,5]
arr.splice(2,2);//return [2],含两个参数时，第一个参数表示被删除元素的起始位置，第二个参数表示删除的长度
arr;//[1,2,5]

在删除的同时添加元素
arr=[1,2,3,4,5];
arr.splice(1,1,"a","b");//return [2]，含多个参数时，第一个参数表示被删除元素的起始位置，第二个参数表示删除的长度，多余的参数表示在被删除的元素的位置添加的元素
arr;//[1,"a","b",3,4,5]

四、数组方法（下）

1.Array.prototype.forEach
遍历数组
var arr=[1,2,3,4,5];
arr.forEach(function(x,index,a){
  console.log(x+","+index+","+a);
});
注意:第一个参数时具体元素的值,第二个参数时索引,第三个参数表示数组本身

2.Array.prototype.map
数组映射,可以对数组中的每个元素进行转换,原数组不改变
var arr=[1,2,3];
arr.map(function(x){
  return x+10;
});//[11,12,13]
arr;//[1,2,3]

3.Array.prototype.filter
数组过滤,原数组不改变
var arr=[1,2,3,4,5,6,7,8,9,10];
arr.filter(function(x,index){
  return index%3===0||x>=8;
});//[1,4,7,8,9,10]
arr;//[1,2,3,4,5,6,7,8,9,10]

4.Array.prototype.every&some
数组判断,every表示每一个,some表示某一个,类似逻辑或和逻辑与
var arr=[1,2,3,4,5];
arr.every(function(x){
  return x<10;
});//true,数组每个元素都小于10时返回true

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

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

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

5.Array.prototype.reduce&reduceRight
reduce是对数组中的元素两两进行一些操作,第二参数是可选的,传入参数时表示第一个x是什么值,如果不传的话,第一个x就指向第一个元素
原数组不改变
var arr=[1,2,3];
var sum=arr.reduce(function(x,y){
  return x+y;//第一个x为0，第一个y为1，第二个x为第一次相加的结果1，第二个y为下一个元素2，以此类推
},0);//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基本一致,只是reduce是从右到左开始遍历的
rr=[3,9,6];
var max=arr.reduce(function(x,y){
  console.log(x+"|"+y);
  return x>y?x:y;
});
//6|9
//9|3
max;//9

6.Array.prototype.indexOf&lastIndexOf
indexOf数组检索,返回对应元素的索引,没有时返回-1,第一个参数表示被搜索的元素,第二个参数表示从哪个位置开始,负数表示倒数开始的位置
lastIndexOf与indexOf基本一致,只是lastIndexOf是从右到左开始搜索
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
arr.indexOf(2,-1);//-1
arr.lastIndexOf(2);//3
arr.lastIndexOf(2,-2);//3
arr.lastIndexOf(2,-3);//1

7.Array.isArray
判断是否为数组
Array.isArray([]);//true

下面的方法也可以判断是否为数组
[] instanceof Array;//true
({}).toString.apply([])==="[object Array]";//true
[].constructor===Array;//true

五、数组小结

1.数组 VS 一般对象

相同：都可以继承，数组是对象，对象不一定是数组，都可以当做对象添加删除属性

不同：数组自动更新length，按索引访问数组常常比访问一般对象属性明显迅速，数组对象继承Array.prototype的大量数组操作方法

2.字符串和数组
var str="hello world";
str.charAt(0);//"h"
str[1];//e

Array.prototype.join.call(str,"_");//"h_e_l_l_o__w_o_r_l_d"