web前端必背知识 javascript 数组


前言

本文章讲述了web前端 JavaScript 数组的基础知识与一些案例,但不包括全部,如果你觉得本文对你有帮助,请三连支持小编,万分感谢!


以下是本篇文章正文内容,下面案例可供参考

一、本文的学习目标

1.能够知道为什么有数组

2.能够创建数组

3.能够获取数组中的元素

4.能够对数组进行遍历

5.能够给数组新增一个元素

6.能够独立完成冒泡排序的案例


二、数组的概念

标题之前学习的变量,只能储存一个值,如果我们想储存很多的值,那么该如何储存呢?

这时候就可以使用数组(Array),数组可以把一组相关的数据存放在一起,并提供方便的访问(获取)方式。

什么是数组?

数组是指一组数据的集合,其中每个数据被称做元素,在数组中可以存放任意类型的元素。数组是一种将一组数据储存在单个变量名下的优雅方式。

例子:

var num=10;

var arr=[1,2,3,4,5,....,"关注我!"]

三、创建数组

数组的创建方式

js中创建数组的方式有两种:

1.利用 new 创建数组。

var 数组名 = new Array()
var arr =new Array()//创建一个新数组

这种方式就不在本文章里细讲了,等讲到数组时小编会讲的,要注意Array() A要大写!

2.利用数组字面量创建数组。

var arr =['关','注','博','主']

var arr =[1,2,true]

数组里的数据一定要用逗号分隔开,数组里面的数据,比如1,2 我们称为数组元素。


四、获取数组中的元素

数组的索引

索引(下标):用来访问数组元素的序号(数组的下标从0开始)

var arr = ['小白','小黑','大黄','关注我!']
//索引号:    0      1     2      3 

数组可以通过索引来访问,设置,修改对应的数组元素,我们可以通过数组名【索引】的形式来获取数组中的元素。

例如:

var arr = ['小白','小黑','大黄','关注我!']
console.log(arr[2])

在这里插入图片描述

数组下标的练习

要求:定义一个数组,里面存放星期一,星期二…直到星期日,在控制台输出星期日。

var arr = ['星期1','星期2','星期3','星期4','星期5','星期6','星期7']
			console.log(arr[])

五、遍历数组

遍历数组的基本了解

数组中的每一项我们怎么取出来?

可以通过数组名【索引号】的方式一项项的取出:

var arr = ['星期1','星期2','星期3','星期4','星期5','星期6','星期7']
			console.log(arr[0])
			console.log(arr[1])
			console.log(arr[2])
			console.log(arr[3])
			......
			console.log(arr[6])

怎么把数组里面的元素全部取出呢?

从代码中可以发现,从数组中每取出一个元素时,代码是重复的,有所不一样的是索引值在递增,所以答案就是循环

var arr = [1,2,3,4]

for(var i=0; i<4; i++){
    
    

	document.write(arr[i])//输出时 i 当索引号来用
	
}//因为我们数组的索引是从0开始的,所以必须从零开始

遍历:就是把数组中的每个元素从头到尾都访问一次

如果你对循环还不够了解可以去看我关于循环的文章:
https://blog.csdn.net/weixin_71170351/article/details/125224949


数组长度

使用数组名.length可以访问数组元素的数量(数组长度),数组的长度是元素的个数不要跟索引号混淆哦

var arr = [1,2,3,4]

	console.log(arr.length)//数组名.length 
var arr = [1,2,3,4]

for(var i=0; i<4; i++){
    
    

	document.write(arr[i])//输出时 i 当索引号来用
	
}//因为我们数组的索引是从0开始的,所以必须从零开始

结果:
在这里插入图片描述
在这里插入图片描述


六、数组中新增元素

通过修改length 长度新增数组元素

1.可以通过length长度实现数组扩容的目的,length属性是可读写的。

var arr=[1,2,3]
arr.length=5
document.write(arr)
document.write(arr[4])

其中除了1,2,3是没有给值的 所以默认值是undefined

2.新增元素,修改索引号 追加数组元素

var arr =['讲解','数','组']
arr[0]='我来讲解'//替换
arr[3]='关注'//新增
arr[4]='点赞'
arr[5]='收藏'
console.log(arr)

七、数组案例

1.数组去重
要求:将数组【2,0,6,1,77,0,52,0,25,7】中的 0 去掉后形成一个新数组。

var arr=[2,0,6,1,77,0,52,0,25,7]
var newarr=[]
for(var i=0; i<arr.length; i++){
    
    
	if(arr[i]!=0){
    
    
		newarr[newarr.length] = arr[i]
	}
}
console.log(newarr)

冒泡排序

冒泡排序是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或者从大到小)
列如:
在这里插入图片描述

//var arr =[5,4,3,2,1]
var arr=[4,1,2,3,5]
for(var i=0; i<=arr.length - 1; i++){
    
    //外循环管趟数
	for(var j=0; j<=arr.length -i -1; j++){
    
    //里循环管 每一趟的交换次数
	//内部交换2个变量的值 前一个和后一个数组元素相比较
		if(arr[j]<arr[j+1]){
    
    
			var temp =arr[j]
			arr[j]=arr[j+1]
			arr[j+1]=temp
		}
	}
}
document.write(arr)

结束

好的各位到这里本文章就结束了,如果对你有帮助请:在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_71170351/article/details/125243099