JavaScript-数组（Array）

已于 2024-06-21 10:42:21 修改
阅读量5.4k 收藏 30
点赞数 9
分类专栏： HTML/JS/CSS（原生） 文章标签： javascript 前端 开发语言
于 2023-01-16 18:48:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StupidlyGrass/article/details/128697065
版权

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

JS中Array数组方法（秒懂数组方法如何使用）
百赢出品，必属精品
04-06 4167
JavaScript中的Array（数组）是一种用于存储多个值的数据结构，它是一种有序的集合，可以包含各种类型的数据，例如数字、字符串、对象等。
JavaScript之数组Array
仗剑东游的猫
07-17 212
JavaScript的数组Array，就是用[ ]括起来的一组数据，数组内可以包含任意类型的数据。 创建数组 //创建一个空数组 var arr1 = new Array console.log(arr1) //[] //创建并赋值 var arr2 = new Array(1,3) console.log(arr2) //[1,3] //创建并赋值 var arr3 = [3,2...
JS中的数组--Array对象及其方法（进阶）
最新发布
wechatonly的博客
10-03 1330
本文介绍了JS中数组的特性，以及常用的数组的方法，并且通过数组对象这种引用类型，来对深拷贝和浅拷贝做了介绍
js Array 方法|js Array 方法使用
weixin_30478923的博客
04-18 83
Array 对象的方法 FF: Firefox, N: Netscape, IE: Internet Explorer 方法 描述 FF N IE concat() 连接两个或更多的数组，并返回结果。 1 4 4 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 1 3 4 pop() 删除并返回数组...
JS中数组Array的用法{转载}
给力VSTO
05-18 426
js数组元素的添加和删除一直比较迷惑，今天终于找到详细说明的资料了，先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.length);//2 //alert(arr[arr
JavaScript之数组
peppa_pig的博客
07-30 259
1.数组的概念 所谓数组，是有序的元素序列。（一组有序 数据） js的数组可以包含任意数据类型，数组中的元素同场是同一种类型。 2.数组的构建方式    2.1字面量   var arr = [1,2,3,4,5];    2.2构造函数   var arr1 = new Array( )；              //创建一个空数组 var arr1 ...
js数组（Array）
热门推荐
xxxx的博客
01-31 1万+
目录 一：什么是数组？ 二：利用new创建数组 三：利用数组字面量创建数组 四：数组元素的类型 五：获取数组中的元素 六：遍历数组 七：数组的长度 八：数组的最大值 九：数组转换为字符串 十：数组中新增元素 十一：数组函数 十二：修改数组中的值 一：什么是数组？ 数组是一组数据的集合，其中每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将数据存储在单个变量名下的优雅方式。 二：利用new创建数组 ：Array A要大写...
JavaScript Array
司马懿的西山居
09-15 1533
数组对象用来在单独的变量名中存储一系列的值。在JavaScript中我们有且仅能使用关键词 new 来创建数组对象。一、仅有以下2种方式来创建数组（1）先声明数组后赋值。var myArray = new Array(); myArray[0] = 'China'; myArray[1] = 'America'; myArray[2] = 'Japan'; //输出 [ 'China', 'Amer
JavaScript-数组-循环-bloco-4.2
02-18
了解这些循环结构后，我们可以根据需求选择合适的循环方式来处理JavaScript数组。在实际开发中，要根据性能、可读性和代码简洁性来选择最适合的循环方法。"JavaScript---Array-e-loop-For-bloco-4.2-master"可能是一...
JavaScript 数组- Array的方法总结(推荐)
12-10
以下是对JavaScript数组方法的详细总结： **一、创建数组** 1. 使用构造函数创建数组： ```javascript var colors = new Array(); // 创建空数组 var colors = new Array(3); // 创建长度为3的数组，但不包含...
challenge-javascript-08:Challenge-javascript-08-JavaScript数组过滤器
03-09
Challenge-javascript-08-JavaScript数组过滤器 Los Arrays en Javascript soportan lafunción filter ，从头到尾评估数组，并从头到尾保持数组状态。 Usando lafunción filter用于研究Array上的buscar todos ...
js代码-数组对象根据某个值相同合并分组
07-16
首先，我们需要理解JavaScript中的数组方法，如`Array.prototype.reduce()`、`Array.prototype.map()`和`Array.prototype.filter()`，它们是处理数组的强大工具。在本例中，我们主要关注`reduce()`方法，它可以将...
JavaScript - 数组 toSorted() 方法
我的博客，不一样的自我表达
06-13 709
Array 实例的toSorted () 方法是 sort() 方法的复制版本。它返回一个新数组，其中的元素按升序排序。关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。另一方面，sort 方法就地修改了原始数组。: Sort() 方法修改原始数组。
JavaScript中的数组
Dt_1213的博客
06-14 209
数组 (1)、数组的定义 　　数组是值的有序集合 　　javascript数组是无类型的；数组元素可以是任意类型，并且同一个数组的不同元素也可能有不同的类型。 　　每个值叫做一个元素，而每个元素在数组中有一个位置 (2)、创建数组 1.使用数组直接量是创建数组最简单的方式，在方括号中将数组元素用逗号隔开即可。 　　eg:var empty = []; //没有元素的数组 ...
JavaScript中的Array
m0_51636525的博客
05-16 1730
对象允许存储键值集合，但是在某些情况下使用键值对来访问并不方便 我们需要一种有序的集合，里面的元素是按照某一种顺序来排列的 这个有序的集合，我们可以通过索引来获取到它 这个结构就是数组Array 数组的元素是从0开始编号的（索引index） 有些编程语言允许我们使用负数索引，但是JavaScript不支持这种写法 1.数组的创建方式 创建数组有两种语法 var arr1 = [] var arr2 = new Array() 在创建的时候也可以直接写入创建的内容 var .
js 数组（Array）
xiaobao860720的博客
06-14 1293
数组也是对象，它和普通对象功能类似，也是用来存储一些数据的，不同与对象的是普通对象是用字符串作为属性名的，而数组使用数字来作为索引操作元素数组的存储性能比较好，开发中我们常用数组来存储一些数据//创建数组对象var arr = new Array();console.log(typeof arr);语法：数组[索引] = ‘’；arr[0] = 10;arr[1] = 11;//注意如果读取不存在...
【前端学习】 JavaScript 之数组 (Array)
LZwarning0215的博客
09-03 939
前端 JavaScript JS 开发 编程 小白 新手入门 零基础 代码 数组 Array 实例方法 pop() push() shift() unshift() slice() reverse() sort() concat() indexOf() join() find() findIndex() includes() toString() some() every() fill() splice() forEach() map() filter() flat() reduce()
js（array）
weixin_33695450的博客
05-21 480
1.什么是数组？ 存储一对变量，内存中连续存储多个数据的存储空间，在统一取名字（连续存储方便维护和查询） 2.什么时候使用数组？ 连续存储多个数据，必须使用数组。 3如何创建数组？ （1）.var arr =new Aarray(6)//表示创建一个元素数为6的数组，（）里面的数字表示数组的长度； （2）.var=[ ];//表示创建一个空数组；数组[ ]里可以填写元素（不区分数据类型...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值