Bootstrap

JavaScript-数组(Array)

1、什么是数组

  • 用以在单一变量中存储多个值,并且可以是任意数据类型

2、数组的声明方式

(1) let声明
	<script>
		let arr = [];  //[]表示声明的是一个数组,arr是数组名称
	</script>
(2) var声明
	<script>
		var arr = [];  //[]表示声明的是一个数组,arr是数组名称
	</script>
(3) 数组声明示例

① 声明空数组

	<script>
		let arr = [];	//字面量创建
		let arr = new Array();	//new 关键字创建
	</script>

② 声明数组并赋值

	<script>
		let arr = [1,2,3,'name','age'];		//字面量创建
		let arr = new Array(1,2,3);		//new 关键字创建
	</script>

③ 声明数组并赋单个值

	<script>
		let arr = [5];		//字面量创建
		let arr = new Array(5); 	//new 关键字创建
	</script>
总结
  • 数组长度是可以变化的
  • 数据中存储的数据,称为数组元素
  • 字面量创建数组 与 new 关键字创建数组的区别:

① 当new Array中只有一个数字时,表示数组长度,每一个值都为空;
② 示例:let arr = new Array(5); //这里是创建一个空数组,并且数组长度为5,所有值为空;

3、数组操作的方式

(1)获取数组长度

① 语法格式:

	数组名.length;

② 示例:

	<script>
		let arr = ['name','age','sex'];
		console.log(arr.length);
	</script>

③ 运行效果

Picture

(2)获取数组元素

① 语法格式:

	//数组元素是通过索引来获取的,索引从0开始,索引为0,表示数组第一个元素,一次类推
	数组名[索引];

② 示例:

	<script>
		let arr = ['name','age','sex'];
		console.log(arr[0]);	//输出数组第一个元素
		console.log(arr[1]);	//输出数组第二个元素
		console.log(arr[2]);	//输出数组最后一个元素
	</script>

③ 运行效果

Picture

(3)push / unshift:添加
1)push:在数组末尾添加

① 语法格式:

	数组名.push(value)	//添加单个值
	数组名.push(value1,value2)	//添加多个值

② 示例:

	//添加单个值
	<script>
		let arr = ['name','age','sex'];
		arr.push('height');
		console.log(arr);
	</script>

运行效果
Picture

	//添加多个值
	<script>
		let arr = ['name','age','sex'];
		arr.push('year','month','days');
		console.log(arr);
	</script>

运行效果
Picture

2)unshift:在数组开头添加

① 语法格式:

	数组名.unshift(value);	//添加单个值
	数组名.unshift(value1,value2);	//添加多个值

② 示例:

	//添加单个值
	<script>
		let arr = ['name','age','sex'];
		arr.unshift('height');
		console.log(arr);
	</script>

运行效果
Picture

	//添加多个值
	<script>
		let arr = ['name','age','sex'];
		arr.unshift('year','month','days');
		console.log(arr);
	</script>

运行效果
Picture

(4)pop / shift:删除
1) pop:删除数组最后一个元素

① 语法格式:

	数组名.pop();

② 示例:

	<script>
		let arr = ['name','age','sex','height'];
		arr.pop();
		console.log(arr);
	</script>

③ 运行效果

Picture

2)shift:删除数组第一个元素

① 语法格式:

	数组名.shift();

② 示例:

	<script>
		let arr = ['name','age','sex','height'];
		arr.shift();
		console.log(arr);
	</script>

③ 运行效果

Picture

(5)splice:删除 / 添加 / 替换

① 语法格式:

	//删除
	数组名.splice(索引,删除长度);
	
	//新增
	数组名.splice(索引,删除长度为0,要添加的元素);   //可以添加一个值,也可以添加多个值

	//替换
	数组名.splice(索引,删除长度,要添加的元素);

② 示例:

	//删除
	<script>
		let arr = [1,2,3,4,5,6];
		arr.splice(3,2);   //从索引3开始,删除长度为2
		console.log(arr);
	</script>

运行效果
Picture

	//添加
	<script>
		let arr = [1,2,3,4,5,6];
		arr.splice(2,0,'name','age','sex');   //可以添加一个值,也可以添加多个值
		console.log(arr);
	</script>

运行效果Picture

	//替换
	<script>
		let arr = [1,2,3,4,5,6,7,8];
		arr.splice(5,3,'name','sex','age');
		console.log(arr);
	</script>

运行效果
Picture

(6)concat:合并

① 语法格式:

	新的数组 = 原数组1.concat(原数组2);

② 示例:

	<script>
		let arr1 = ['name','age','sex'];
		let arr2 = [1,2,3];
		newarr = arr1.concat(arr2);
		console.log(newarr);
	</script>

③ 运行效果

Picture

(7)slice:截取

描述

  • 不会改变原来的数组,将截取的元素,以数组的形式返回
  • 起始索引的元素会被截取,结束索引的元素不会被截取

① 语法格式:

	数组名.slice(起始索引,结束索引);

② 示例:

	<script>
		let arr = [1,2,3,4,5,6];
		console.log(arr.slice(2,5));
	</script>

③ 运行效果

Picture

(8)reverse:倒序

描述

  • 会改变原数组

① 语法格式:

	数组名.reverse();	

② 示例:

	<script>
		let arr = [1,2,3,4,5,6];
		arr.reverse();
		console.log(arr);
	</script>

③ 运行效果

Picture

(9)sort:排序

描述

  • 会改变原数组

① 语法格式:

	数组名.sort();

② 示例:

	<script>
		let arr = [1,4,6,2,,7,3,8];
		arr.sort();
		console.log(arr);
	</script>

③ 运行效果

Picture

(10)join:连接

描述

  • 将数组中的元素,以设置的分隔符连接成一个字符串,并返回

① 语法格式:

	数组名.join('分隔符号');

② 示例:

	<script>
		let arr = ['name','sex','age'];
		console.log(arr.join(":"));
	</script>

③ 运行效果

Picture

(11)indexOf:查询索引

注意

  • indexOf是ES6中数组新增项

① 语法格式:

	数组名.indexOf(要查询的值);

② 示例:

	<script>
		let arr = ['name','age','sex','height'];
		console.log(arr.indexOf('age'));
	</script>

③ 运行效果

Picture

(12)includes:判断值是否存在数组中

注意

  • includes是ES6中数组新增项

① 语法格式:

	数组名.includes(要判断的值);

② 示例:

	<script>
		let arr = ['name','age','sex','height']
		console.log(arr.includes('height'));
	</script>

③ 运行效果

// 返回布尔值,ture表示存在,false表示不存在
Picture

(13)清空数组的方式
1)设置为空数组

注意

  • 因 let 不允许重复声明相同名称的变量,所以这里为了演示,使用 var 进行声明

① 语法格式:

	let 数组名 = [];

② 示例:

	//设置为空数组后
	<script>
		var arr = [1,2,3,4,5,6];
		var arr = [];
		console.log(arr);
	</script>

③ 运行效果

Picture

2)设置数组长度为0

① 语法格式:

	数组名.length = 0;

② 示例:

	//设置数组长度后
	<script>
		let arr = [1,2,3,4,5,6];
		arr.length = 0;
		console.log(arr);
	</script>

③ 运行效果

Picture

3)删除所有数组元素

① 语法格式:

	数组名.splice(索引从0开始,整个数组的长度);

② 示例:

	<script>
		let arr = [1,2,3,4,5,6];
		arr.splice(0,arr.length);
		console.log(arr);
	</script>

③ 运行效果

Picture

(14)length的其他用法
1)清空数组
  • 这里上面已经讲到了,就不在赘述,请查看:(13)清空数组的方式
2)增加数组长度

① 语法格式:

	数组名.length = 要设置的长度;

② 示例:

	<script>
		let arr = [1,2,3,4,5,6];
		arr.length = 20;
		console.log(arr.length);
		console.log(arr);
	</script>

③ 运行效果

Picture

3)在数组末尾添加数组元素

① 语法格式:

	数组名[数组名.length] = 要添加的值;

② 示例:

	<script>
		let arr = ['name','age','sex'];
		arr[arr.length] = 'height';
		console.log(arr);
	</script>

③ 运行效果

Picture

注意

  • 在给数组赋值时,当索引超过现有的长度时,会增长数组的长度
更多JavaScript数组学习,请参考官方文档:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

;