2.5JavaScript引用类型之数组(Array)

数组是一种特殊的对象。

  • 数组的索引是隐式的整数类型。
  • 数组的索引是有序的,包含 length 个元素的数组从 0 索引到 length-1
  • 数组的元素可以是任意类型,且不必都属于同一个类型,可以随时更改元素从而更改元素的类型。
  • 数组的元素的个数(长度)可以动态改变,可以向数组添加、更改、删除元素。
  • 数组的元素允许重复的元素。

1.索引数组

注意:最后一个元素后面允许有逗号 ,,这样要添加一个新元素时很方便。

//字面量创建方式

//创建一个空数组
let arr = [];

//创建一个数组长度为N的数组(直接填入元素)
let arr = [元素1, 元素2, ..., 元素N];
//Array()函数创建方式(加与不加new都一样)

//创建一个空数组
//等同的数组字面量创建方式let arr = [];,但数组字面量创建方式实际上并不会调用Array()函数。
let arr = [new] Array();

//创建一个数组长度为N的稀疏数组(具体见下面的稀疏数组章节)
let arr = [new] Array(N);

//创建一个数组长度为N的数组(直接填入元素)    
let arr = [new] Array(元素1, 元素2, ..., 元素N);

2.稀疏(Sparse)数组

let arr = [1, , 3];
console.log(arr);

//输出
Array(3) [ 1, <1 empty slot>, 3 ]
​  0: 1
​  2: 3
​  length: 3

从上面的示例中,我们不难发现,空槽(empty slot)作为一种特殊的元素,与普通的元素相比:

相同点:空槽的索引为 1,因此 length 属性的值为 3

不同点:空槽不占用元素的实际个数,这就导致了输出的元素的索引不连续。

所以像这种 length 属性的值大于元素的实际个数的数组,我们称之为稀疏(Sparse)数组。反之,就是紧凑(Dense)数组。

注意:由于不同的数组方法对待空槽的行为不同,以及空槽存在性能隐患,因此实践中要避免使用空槽。如果确实需要使用空槽,则可以显式地使用 undefined 值代替空槽。

//字面量创建方式

//空槽在前面
//示例一
let arr = [, 2, 3];
console.log(arr);  // Array(3) [ <1 empty slot>, 2, 3 ]
//示例二
let arr = [,];
console.log(arr);  // Array(1) [ <1 empty slot> ]

//空槽在中间
let arr = [1, , 3];
console.log(arr);  // Array(3) [ 1, <1 empty slot>, 3 ]

//空槽在末尾
//注意:末尾的逗号是为了添加一个新元素时方便,不是空槽。
let arr = [1, 2, ];
console.log(arr);  // Array(2) [ 1, 2 ]
//Array()函数创建方式(加与不加new都一样)

//创建一个数组长度为5的稀疏数组
let arr = [new] Array(5);
console.log(arr);  // Array(5) [ <5 empty slots> ]

//不支持此语法创建稀疏数组     
let arr = [new] Array(元素1, 元素2, ..., 元素N);

3.多维数组

JavaScript 语言没有专门的多维数组语法,但是一个数组可以作为另一个数组的元素存在。

//字面量创建方式
let arr = [ [1, 2], [3, 4, 5], [6, 7, 8, 9] ];
//Array()函数创建方式(加与不加new都一样)
//注意:不支持let arr = [new] Array(5)(6);语法创建多维数组;
let arr = [new] Array( [1, 2], [3, 4, 5], [6, 7, 8, 9] );

4.访问数组中的元素

可以使用变量名后跟方括号 [] 包含索引的方式来访问数组中索引对应的元素。

另外,还可以使用 at() 实例方法访问数组中索引对应的元素。

注意:负数索引 index,本质上是 arr.length + index 的正数索引。

区别浏览器最低版本要求是否支持负数索引不存在的索引
[]Chrome 1、Firefox 1、Safari 1。不支持返回 undefined
at()Chrome 92、Firefox 90、Safari 15.4。支持返回 undefined
//[]
//正数索引从左往右从0开始,不支持负数索引。

//查看
let a = arr[索引];
let a = arr[索引1][索引2];

//添加或更改
arr[索引] = 值;
arr[索引1][索引2] = 值;

//删除
//元素被删除后为空槽,数组长度不变。
delete arr[索引];
delete arr[索引1][索引2];
//at()
//正数索引从左往右从0开始,负数索引从右往左从-1开始。

//查看
let a = arr.at(索引);
let a = arr.at(索引1).at(索引2);

//添加或更改(不支持此语法)
arr.at(索引) = 值;
arr.at(索引1).at(索引2) = 值;

//删除(不支持此语法)
delete arr.at(索引);
delete arr.at(索引1).at(索引2);

5.数组长度

注意:1个空槽占用1个数组的长度。

//查看长度
let len = arr.length;

//更改长度
//如果整数值小于原来的数组长度,则会从数组末尾删除元素。
//如果整数值大于原来的数组长度,则会从数组末尾添加空槽。
arr.length = 整数值;

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/javascriptlang/35242.html

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2020年9月4日 02:13
下一篇 2020年9月6日 17:55

相关推荐

  • 1.9JavaScript语言的条件(Conditional)、循环(Loop)、跳转(Jump)语句

    1.if条件 2.if-else条件 3.if-else-if条件 4.switch条件 switch 语句用于将 switchExpression 的值按从上往下的顺序与 caseExpression 的值逐个进行匹配测试,直到 switch 语句结束 或 遇到 break 语句。如果匹配成功,则…

  • 2.1JavaScript语言的ES模块(Module)

    ES 模块用于在浏览器环境和服务器环境中使用。 模块就是以 .js 为扩展名的 JavaScript 文件。 普通脚本文件内的顶级的成员对其它脚本文件来说是公开(public)的全局上下文,而模块文件内的顶级的模块成员对其它模块文件来说都是私有(private)的,所以首先需要在模块中将它们显式导出,然后在其它模块中显…

  • 2.4JavaScript引用类型之类(Class)

    类是一种“特殊的函数”。 就像函数声明定义方式和函数表达式定义方式一样,类的定义方式也有两种:类声明定义方式和类表达式定义方式。 1.类声明 注意:在同一个作用域,类声明不可以重复定义,否则会报错。 2.类表达式 注意:在同一个作用域,类表达式不可以重复定义,否则会报错。 注意:命名类表达式的右侧依然是类表达式,不是类…

发表回复

登录后才能评论