详解JavaScript数组

基本概念:

是什么:

数组也是对象,在之前的博客中写过,JS中有三种对象内建对象、宿主对象、自定义对象,数组属于内建对象。

数组与普通对象区别

普通对象使用字符串作为属性名(一组属性的集合),数组使用数字为索引操作元素(索引是从0开始的整数),看下列图示
在这里插入图片描述
JS中的数组和C#中集合ArrayList及其相似,值可以是任意类型。

数组操作

创建数组

new和构造函数创建
var arr = new Array();
var arr1=new Array(1);//一个参数时表明数组长度为1
var arr2= new Array(1,2,3)//多个参数表明,数组元素
字面量创建

语法:[]

var arr=[];
var arr1=[1,2,1];//可以指定数组元素

数组元素(任意类型)

arr1 = ["hello",1,true];
arr1= [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];//普通对象
arr1=[function(){},function(){}];//函数对象
arr1=[[1,3],[45,45],[45,23]]//数组

数组常用属性

length属性:length获取数组最大索引加一
语法:数组.length

<script text="type/javascript">
var arr =[1,1,1,1,4,4,4];
console.log(arr.length);//输出7

//向数组最后的位置添加元素
arr[arr.length]=12;
</script>

数组遍历

  • for循环
  • foreach方法
for循环
<script type="text/javascript">
	//创建一个数组
	var arr =["孙悟空","猪八戒","沙和尚"];
	
	//所谓的遍历数组,就是将数组中所有的元素都取出来
	// console.log(arr[0]);
	// console.log(arr[1]);
	// console.log(arr[2]);
	
	for(var i=0;i<arr.length;i++)
	{
		console.log(arr[i]);
	}
	
</script>

foreach方法
forEach()方法需要将函数作为参数
	像这种函数,由我们创建不由我们调用,称为回调函数
	数组有几个元素,执行几次这个函数,每次执行时
	浏览器会将遍历的元素
	以实参的形式传递进来,我们可以定义形参读取这些内容

浏览器会在回调函数中传递三个参数
	1.当前正在遍历的元素
	2.当前遍历元素索引
	3.就是正在遍历的数组

举例:

在这里插入图片描述

增删改查元素

在这里插入图片描述

<script type="text/javascript">
		var arr=[];
		
		//增(添加元素):语法:数组[索引]=值
		arr[0]=10;
		arr[2]=33;//arr[1]默认为空
		
		//push()方法:向数组的末尾添加一个或多个元素
		var result=arr.push(1,2);
		console.log(result);//输出数组长度
		
		//unshift()方法:开头添加一个或多个元素
		result= arr.unshift(5);
		console.log(result);//输出数组长度
</script>
<script type="text/javascript">
		
		var arr =["孙悟空","猪八戒","沙和尚"];
		
		//pop()方法:删除数组最后一个元素
		var result = arr.pop();
		console.log(result);//输出沙和尚
		
		//shift()方法:删除数组第一个元素
		result = arr.shift();
		console.log(result);//输出孙悟空
		
		//splice()方法:删除数组指定元素
		//1.表示开始位置索引
		//2.表示删除的数量
		//3.第三个参数及以后可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
		var re= arr.splice(1,2,"唐僧");
		console.log(re);//输出["孙悟空","唐僧"]

</script>
//改(修改元素):语法:数组[索引]=新值
arr[2]=50;
<script type="text/javascript">
	
	//查(读取元素):语法:数组[索引]
	console.log(arr[2]);

	//slice(start,end);从已有的数组中返回选定的元素
	//stat:截取数组开始位置的索引,包括开始索引
	//end:截取数组结束的位置的索引,不包含结束
	//end可以不写表示从截取开始到最后都要
	//索引可以传递一个负值,表示从后向前计算
	var arr1 = ["孙悟空","猪八戒","沙和尚"];
	var result=  arr1.slice(1,2);
	console.log(result);//输出猪八戒

</script>

数组其他方法

  • concat()
  • join()
  • reverse()
  • sort()
concat()

作用:连接两个或多个数组,并将数组返回

<script type="text/javascript">
	var arr =["孙悟空","猪八戒","沙和尚"];
	var arr1=["沙和尚","玉兔精","蜘蛛精"];
   
    var arr2=arr.concat(arr1);
    console.log(arr2);//["孙悟空", "猪八戒", "沙和尚", "沙和尚", "玉兔精", "蜘蛛精"]
</script>
join()

作用:该方法可以将数组转换成字符串

<script type="text/javascript">
	var arr =["孙悟空","猪八戒","沙和尚"];
   
    var re=arr.join("——");
    console.log(re);//孙悟空——猪八戒——沙和尚
</script>
reverse()

作用:该方法用来反转数组

<script type="text/javascript">
	var arr =["孙悟空","猪八戒","沙和尚"];
   
    var re=arr.reverse();
    console.log(re);// ["沙和尚", "猪八戒", "孙悟空"]
</script>
sort();

作用:可以用来对数组中元素进行排序

<script type="text/javascript">
	  var arr=["b","b","a"];
	  arr.sort();
	  console.log(arr);//输出abb
</script

总结:

感悟:感觉这个属性与方法都是为了增删改查服务的,这个是以后学习直接借鉴的地方

发布了163 篇原创文章 · 获赞 79 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/shang_0122/article/details/104058421