当前位置: 首页 > 教程 > ECMAScript/ES6 >

ECMAScript/ES6数组

精华
小牛编辑
165浏览
2023-03-14

JavaScript中的数组是一个对象,用于表示相似类型的元素的集合。 我们可以在一个变量名中存储多个值或一组值。 数组用于按时间顺序存储值的集合。 数组是同类元素的集合,或者说数组是相同数据类型的值的集合。

我们可以存储任何有效值,例如对象,数字,字符串,函数以及其他数组,这使得创建复杂的数据结构(如数组数组或对象数组)成为可能。

1.语法

声明数组的方法有两种:

// 声明
var myArray;

// 初始化  
myArray = [val1, val2, .., valN]   


// 或者
var myArray = [val1,val2, .., valN]

数组参数包含整数和字符串的列表。 建议使用数组文字来创建数组,而不要使用new关键字。
new关键字只会使代码复杂化,有时会产生意外的结果。如果在数组的构造函数中指定单个数字参数(或使用new关键字创建数组),则它将被视为数组的长度。

注意:数组允许的最大长度为4,294,967,295

2.访问数组元素

数组从0开始索引。数组名称后跟下标用于引用数组元素。

语法:

array_name[subscript];

示例代码:

var num;  
num = [2,4,6,8];  
console.log(num[0]);  
console.log(num[1]);

执行上面示例代码,得到以下结果:

2
4

3.数组构造器

可以使用数组构造函数创建一个数组。 数组构造函数可以通过以下方式传递:

  • 值列表,以逗号分隔,或
  • 一个数值,指示数组的大小

如下图解:

var myArray = [ 4, 8, 13, 6, 55, 41, 42, 99, 1 ];

console.log("Length of myArray: " + myArray.length); // 9 Elements
console.log("Element at index 0: " + myArray[0]); // 4
console.log("Element at index 1: " + myArray[1]); // 8
console.log("Element at index 4: " + myArray[4]); // 55

可以将新值分配给数组元素:

var names = [ "Trump", "Putin", 100 ];

console.log("Length of array: " + names.length); // 3 Elements

console.log("Element at index 0: " + names[0]); // Trump

console.log("Element at index 1: " + names[1]); // Putin

console.log("Element at index 2: " + names[2]); // 100

// Assign new value to element at index 2:
names[2] = "Merkel";

console.log("Element at index 2: " + names[2]);

使用循环,可以这样访问数组元素:

var fruits = ["Acerola", "Apple", "Banana", "Breadfruit", "Carambola" ];

for( var index = 0; index < fruits.length; index++) {
   console.log("Index: " + index+" Element value: " + fruits[index]);
}

4.JavaScript数组

JavaScript支持以下类别的数组。

  • 多维数组
  • 将数组传递给函数
  • 从函数返回数组

4.1.ES6多维数组

ES6还支持多维数组概念。 多维数组可以定义为对另一个数组的值的数组引用。多维数组未在JavaScript中直接提供。 如果需要创建多维数组,则需要使用一维数组来完成。

我们也可以把二维数组看作是多维数组的最简单形式。

声明

以下语法说明了如何在JavaScript中声明二维数组。

var array_name = [[value1,value2,value3],[val1,val2,val3]];

二维数组中元素的访问 -

var array_name[initial_array_index][referenced_array_index]

示例代码:

var multi = [[2,3,4],[4,9,16]]    
console.log(multi[0][0])   
console.log(multi[0][1])   
console.log(multi[0][2])   
console.log(multi[1][0])   
console.log(multi[1][1])   
console.log(multi[1][2])

执行上面示例代码,得到以下结果:

2
3
4
4
9
16

4.2.将数组传递给函数

将数组作为参数传递给函数时,必须指定不带括号的数组名称(对数组的引用)。

示例代码

var rainbow = new Array["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
function show(rainbow) {      
   for(var i = 0;i<rainbow.length;i++) {              
      console.log(rainbow[i])   
   }   
}   
show(rainbow)

执行上面示例代码,得到以下结果:

Violet
Indigo
Blue
Green
Yellow
Orange
Red

4.3.从函数返回数组

函数可以返回数组:

function show() {   
    return new Array("Blue", "Red", "Green", "Yellow")   
 }   
 var colors = show()   
 for(var i in colors) {   
    console.log(colors[i])     
 }

执行上面示例代码,得到以下结果:

Blue
Red
Green
Yellow

5.数组方法

ES6中的数组方法对于处理数组中存储的数据很有用。数组方法用于通过数组轻松执行复杂的任务。可以通过单击此链接ES6数组方法来了解有关数组方法的更多信息。

6.销毁分配

ES6提供了一个称为销毁分配的新功能,该功能能够从对象和数组中提取特定项目,并使用简写语法将它们放入变量中。它不仅有助于减少代码,而且可以改变代码的结构方式。这是销毁结构的过程。
销毁分配是一个JavaScript表达式,可以从数组,映射,集合以及不同变量的对象属性中提取数据。

7.数组解构

重构意味着将复杂的结构分解为更简单的部分。使用解构语法,可以从对象和数组中提取较小的片段。它可以用于变量的赋值和声明。
要了解有关阵列解构的更多信息,可以单击此链接ES6数组解构。

8.对象解构

它类似于数组解构,除了可以从对象中提取属性(或键)及其对应的值,而不是从数组中提取值。
要了解有关对象解构的更多信息,可以单击此链接ES6对象解构。