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

1. 语法

声明数组的方法有两种：

  1. // 声明
  2. let myArray;
  3. // 初始化  
  4. myArray = [val1, val2, .., valN]   
  5. // 或者
  6. let myArray = [val1,val2, .., valN]

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

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

2. 访问数组元素

数组从0开始索引。数组名称后跟下标用于引用数组元素。
示例代码：

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

执行上面示例代码，得到以下结果：

  1. 2
  2. 4

3. 数组构造器

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

  • 值列表，以逗号分隔，或

  • 一个数值，指示数组的大小

    1. let myArray = [ 4, 8, 13, 6, 55, 41, 42, 99, 1 ];
    2. console.log("Length of myArray: " + myArray.length); // 9 Elements
    3. console.log("Element at index 0: " + myArray[0]); // 4
    4. console.log("Element at index 1: " + myArray[1]); // 8
    5. console.log("Element at index 4: " + myArray[4]); // 55

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

    1. let names = [ "Trump", "Putin", 100 ];
    2. console.log("Length of array: " + names.length); // 3 Elements
    3. console.log("Element at index 0: " + names[0]); // Trump
    4. console.log("Element at index 1: " + names[1]); // Putin
    5. console.log("Element at index 2: " + names[2]); // 100
    6. // Assign new value to element at index 2:
    7. names[2] = "Merkel";
    8. console.log("Element at index 2: " + names[2]);

    使用循环，可以这样访问数组元素：

    1. let fruits = ["Acerola", "Apple", "Banana", "Breadfruit", "Carambola" ];
    2. for( let index = 0; index < fruits.length; index++) {
    3.  console.log("Index: " + index+" Element value: " + fruits[index]);
    4. }

    4. JavaScript数组

    JavaScript支持以下类别的数组。

  • 多维数组

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

    4.1. ES6多维数组

    ES6还支持多维数组概念。 多维数组可以定义为对另一个数组的值的数组引用。多维数组未在JavaScript中直接提供。 如果需要创建多维数组，则需要使用一维数组来完成。
    我们也可以把二维数组看作是多维数组的最简单形式。
    声明
    以下语法说明了如何在JavaScript中声明二维数组。
    1. let array_name = [[value1,value2,value3],[val1,val2,val3]];
    二维数组中元素的访问 -
    1. let array_name[initial_array_index][referenced_array_index]
    示例代码：
    1. let multi = [[2,3,4],[4,9,16]]    
    2. console.log(multi[0][0])   
    3. console.log(multi[0][1])   
    4. console.log(multi[0][2])   
    5. console.log(multi[1][0])   
    6. console.log(multi[1][1])   
    7. console.log(multi[1][2])
    执行上面示例代码，得到以下结果：
    1. 2
    2. 3
    3. 4
    4. 4
    5. 9
    6. 16

    4.2. 将数组传递给函数

    将数组作为参数传递给函数时，必须指定不带括号的数组名称(对数组的引用)。
    示例代码
    1. let rainbow = new Array["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
    2. function show(rainbow) {      
    3.  for(let i = 0;i<rainbow.length;i++) {              
    4.     console.log(rainbow[i])   
    5.  }   
    6. }   
    7. show(rainbow)
    执行上面示例代码，得到以下结果：
    1. Violet
    2. Indigo
    3. Blue
    4. Green
    5. Yellow
    6. Orange
    7. Red

    4.3.从函数返回数组

    函数可以返回数组：
    1. function show() {   
    2.   return new Array("Blue", "Red", "Green", "Yellow")   
    3. }   
    4. let colors = show()   
    5. for(let i in colors) {   
    6.   console.log(colors[i])     
    7. }
    执行上面示例代码，得到以下结果：
    1. Blue
    2. Red
    3. Green
    4. Yellow
    5. Shell

    5. 数组方法

    ES6中引入了一些新的数组方法，例如：Array.of()，Array.from()等。
    ES6中引入的数组方法列表如下：
编号 方法 描述 JavaScript版本
1 Array.from() 它将类似数组的值和可迭代的值转换为数组。 ECMAScript 6
2 Array.of() 它从可变数量的参数(而不是参数数量或参数类型)创建实例。 ECMAScript 6
3 Array.prototype.copyWithin() 它将数组的一部分复制到同一数组中的其他位置。 ECMAScript 6
4 Array.prototype.find() 它根据传递给此方法的特定条件从数组中找到一个值。 ECMAScript 6
5 Array.prototype.findIndex() 返回满足给定条件的给定数组的第一个元素的索引。 ECMAScript 6
6 Array.prototype.entries() 它返回一个数组迭代器对象，该对象可用于遍历数组的键和值。 ECMAScript 6
7 Array.prototype.keys() 它返回一个数组迭代器对象以及该数组的键。 ECMAScript 6
8 Array.prototype.values() 它返回所有键对应的值。 ECMAScript 6
9 Array.prototype.fill() 它用静态值填充指定的数组元素。 ECMAScript 6

5.1. Array.from()方法

此方法的一般是用于从类似数组的对象中启用新的数组创建。 它将类似数组的值和可迭代的值(例如set和map)转换为数组。
语法

  1. Array.from(object, mapFunction, thisValue)

此函数的参数值说明如下：

  • object: 始终需要此参数值。 它是要转换为数组的对象。
  • mapFunction: 可选的。 这是一个映射函数，用于调用数组的每个项目。
  • thisValue: 可选的。在执行 mapFunction时，使用类似于this的功能。

示例代码：

  1. let name = Array.from('Xntutor')  
  2. console.log(name)

执行上面示例代码，得到以下结果：

  1. [
  2.   'X', 'n', 't',
  3.   'u', 't', 'o',
  4.   'r'
  5. ]

5.2. Array.of()方法

在ES5中，当在数组构造函数中传递单个数值时，它将创建该大小的数组。 Array.of()是一种创建数组的新方法，可以修复ES5的这种行为。通过使用此方法，如果仅使用单个数字值创建数组，则它将仅使用该值创建数组，而不是创建该大小的数组。
示例

  1. let name = Array.of(42)  
  2. console.log(name)  
  3. console.log(name.length)

执行上面示例代码，得到一些以下结果：

  1. [ 42 ]
  2. 1

5.3. Array.prototype.copyWithin()方法

这是一种有趣的方法，已添加到ES6中的数组方法库中。此方法将数组的一部分复制到同一数组中的其他位置。它返回修改后的数组，其长度没有任何修改。

注意：此方法不会向数组中添加更多项，而只会覆盖原始数组的元素。

示例：

  1. array.copyWithin(target, start, end);

此方法的参数说明如下：

  • target：始终是必需的。它是复制元素的索引位置。
  • start：是可选参数。它指的是开始复制元素的索引位置。 它的默认值为0。如果此参数的值为负，则将从头算起。
  • end：也是可选参数。它指的是停止复制元素的索引位置。 它的默认值是数组的长度。

示例

  1. const num = [1,2,3,4,5,6,7,8,9,10];  
  2. const num1 = [1,2,3,4,5,6,7,8,9,10];  
  3. const num2 = [1,2,3,4,5,6,7,8,9,10];  
  4. console.log(num.copyWithin(1,3,5));  
  5. console.log(num1.copyWithin(1,3)); // 省略参数 end  
  6. console.log(num2.copyWithin(1)); // 省略参数 start 和 end

执行上面示例代码，得到以下结果：

  1. [
  2.   1, 4, 5, 4,  5,
  3.   6, 7, 8, 9, 10
  4. ]
  5. [
  6.   1, 4,  5, 6,  7,
  7.   8, 9, 10, 9, 10
  8. ]
  9. [
  10.   1, 1, 2, 3, 4,
  11.   5, 6, 7, 8, 9
  12. ]

5.4. Array.prototype.find()方法

这是ES6的另一个新功能。 它根据传递给此方法的特定条件从数组中找出指定值。 它返回满足给定条件的第一个元素值。
语法

  1. array.find(callback(currentValue, index, arr),thisValue)

方法的参数说明如下：

  • callback: 它代表执行每个元素的函数。
  • currentValue: 必需的参数，它是当前元素的值。
  • index: 可选参数，它是当前元素的数组索引。
  • arr: 可选参数，它是find()操作的数组。
  • thisValue: 可选参数，它是使用回调时使用的值。

示例代码

  1. let arr=[5,22,19,25,34];    
  2. let result=arr.find(x=>x>20);    
  3. console.log(result);

执行上面示例代码，得到以下结果：

  1. 22

注意：ES6 find()方法与ES5 filter()方法不相似，因为filter()方法始终返回匹配数组(返回多个匹配项)，但是find()方法始终返回实际语句。

5.5. Array.prototype.findIndex()方法

Array.prototype.findIndex()方法返回满足给定条件的给定数组的第一个元素的索引。 如果没有元素满足条件，则返回-1。
语法

  1. array.findIndex(callback(value,index,arr),thisArg)

示例代码：

  1. let arr=[5,22,19,25,34];    
  2. let result=arr.findIndex(x=>x>20);    
  3. console.log(result)

执行上面示例代码，得到以下结果：

  1. 1

5.6. Array.prototype.entries()方法

此方法返回一个数组迭代器对象，该对象可用于遍历数组的键和值。
条目将返回一个数组数组，其中每个子数组都是[index, value]数组。
语法

  1. array.entries();

示例

  1. let colours = ["Red", "Yellow", "Blue", "Black"];  
  2. let show = colours.entries();  
  3. for (i of show) {  
  4.   console.log(i);  
  5. }

执行上面示例代码，得到以下结果：

  1. [ 0, 'Red' ]
  2. [ 1, 'Yellow' ]
  3. [ 2, 'Blue' ]
  4. [ 3, 'Black' ]

在上面的示例中，也可以使用传播运算符代替for...of循环，如下示例得到相同的结果。

  1. let colours = ["Red", "Yellow", "Blue", "Black"];  
  2. let show = colours.entries();  
  3. console.log(...show);

执行上面示例代码，得到以下结果：

  1. [ 0, 'Red' ] [ 1, 'Yellow' ] [ 2, 'Blue' ] [ 3, 'Black' ]

5.7. Array.prototype.keys()方法

此方法的工作方式类似于Array.entries()方法。 顾名思义，它用于返回数组迭代器对象以及数组的键。
语法

  1. array.keys()

示例代码：

  1. let colours = ["Red", "Yellow", "Blue", "Black"];  
  2. let show = colours.keys();  
  3. console.log(...show);

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

  1. 0 1 2 3

5.8. Array.prototype.values()方法

此方法类似于Array.keys()和Array.entries()，但它提供了每个键的值。
语法

  1. array.values()

示例代码：

  1. let colours = ["Red", "Yellow", "Blue", "Black"];  
  2. let show = colours.values();  
  3. console.log(...show);

执行上面示例代码，得到以下结果：

  1. Red Yellow Blue Black

5.9. Array.prototype.fill()方法

此方法用静态值填充指定的数组元素。 该值可用于填充数组的一部分或填充整个数组。 它修改了原始数组。可以指定填充的开始和结束位置。 如果未指定，则将填充所有元素。
语法

  1. array.fill(value, start, end)

以下是上面参数的说明：

  • value: 填充数组是一个静态值，必需项。
  • start: 它是开始填充数组的索引。可选项，其默认值为0。
  • end: 它是停止填充数组的索引。 可选项，其默认值是数组的长度。

示例代码

  1. let colours = ["Red", "Yellow", "Blue", "Black"];  
  2. let show = colours.fill("Green",2,4);  
  3. console.log(...show);

执行上面示例代码，得到以下结果：

  1. Red Yellow Green Green

6. 销毁分配

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

7. 数组解构

解构是将复杂的结构分解为更简单的部分。 使用解构语法，可以从对象和数组中提取较小的片段。用于变量的赋值和声明。
解构是一种从存储在数组或对象中的数据中提取多个值的有效方法。 解构数组时，我们在分配中使用它们的位置(或索引)。
下面我们通过使用一些示例来理解数组的解构：

  1. let arr = ["Hello", "World"]  
  2. // destructuring assignment  
  3. let [first, second] = arr;  
  4. console.log(first); // Hello  
  5. console.log(second); // World

在上面的示例中，解构分配的左侧用于定义从源变量解包所需的值。

  1. Hello
  2. World

下面是一个数组解构的例子。
示例代码：

  1. let colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
  2. // destructuring assignment  
  3. let[color1, color2, color3] = colors;  
  4. console.log(color1); // Violet  
  5. console.log(color2); // Indigo  
  6. console.log(color3); // Blue

执行上面示例代码，得到以下结果：

  1. Violet
  2. Indigo
  3. Blue

示例
如果要从给定数组中选择随机元素，则可以在数组分解中执行以下操作：

  1. let colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
  2. // destructuring assignment  
  3. let[color1, ,color3, ,color5] = colors; //Leave space for unpick elements  
  4. console.log(color1); // Violet  
  5. console.log(color3); // Blue  
  6. console.log(color5); // Yellow

在上面的示例中，我们定义了一个名为colors的数组，其中包含七个元素。 但是显示给定数组中的三种随机颜色，即Violet, Blue 和 Yellow。 这些数组元素位于位置0、2和4中。
销毁期间，需要为未选择的元素留出空间，如上例所示。 否则会得到意想不到的结果。

  1. Violet
  2. Blue
  3. Yellow
  4. Shell

注意：不能使用数字进行销毁。 使用数字将引发错误，因为数字不能是变量的名称。

7.1. 数组解构和Rest运算符

通过在数组解构中使用rest运算符(…)，可以将数组的所有剩余元素放入新数组中。
下面我们通过一个例子来理解它。

  1. let colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
  2. // destructuring assignment  
  3. let [a,b,...args] = colors;  
  4. console.log(a);   
  5. console.log(b);   
  6. console.log(args);

执行上面示例代码，得到以下结果：

  1. Violet
  2. Indigo
  3. [ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ]

7.2. 数组解构和默认值

如果要从数组中获取一个值，并且该值未定义，则可以为变量分配默认值。

  1. let x, y;  
  2. [x=50, y=70] = [100];  
  3. console.log(x); // 100  
  4. console.log(y); // 70

执行上面示例代码，得到以下结果：

  1. 100
  2. 70

7.3. 交换变量

可以在一个解构表达式中交换两个变量的值。 数组解构可以轻松交换变量的值，而无需使用任何临时变量。
示例代码：

  1. let x = 100, y = 200;  
  2. [x, y] = [y, x];  
  3. console.log(x); // 200  
  4. console.log(y); // 100

执行上面示例代码，得到以下结果：

  1. 200
  2. 100

7.4. 从函数解析返回的数组

一个函数可以返回一个数组。 但是数组解构使得从函数解析返回的数组更加简洁。
我们通过下面一个例子来理解。

  1. function array() {  
  2.     return [100, 200, 300];  
  3. }  
  4. let [x, y, z] = array();  
  5. console.log(x); // 100  
  6. console.log(y); // 200  
  7. console.log(z); // 300

在上面的示例中，我们定义了array()函数，该函数返回包含三个元素的数组。使用数组分解将上述数组元素分解为一行代码中的特定元素：x，y和z。

  1. 100
  2. 200
  3. 300

8. 数组解构

解构是将复杂的结构分解为更简单的部分。 使用解构语法，可以从对象和数组中提取较小的片段。用于变量的赋值和声明。
解构是一种从存储在数组或对象中的数据中提取多个值的有效方法。 解构数组时，我们在分配中使用它们的位置(或索引)。
下面我们通过使用一些示例来理解数组的解构：

  1. let arr = ["Hello", "World"]  
  2. // destructuring assignment  
  3. let [first, second] = arr;  
  4. console.log(first); // Hello  
  5. console.log(second); // World

在上面的示例中，解构分配的左侧用于定义从源变量解包所需的值。

  1. Hello
  2. World

下面是一个数组解构的例子。
示例代码：

  1. let colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
  2. // destructuring assignment  
  3. let [color1, color2, color3] = colors;  
  4. console.log(color1); // Violet  
  5. console.log(color2); // Indigo  
  6. console.log(color3); // Blue

执行上面示例代码，得到以下结果：

  1. Violet
  2. Indigo
  3. Blue

示例
如果要从给定数组中选择随机元素，则可以在数组分解中执行以下操作：

  1. let colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
  2. // destructuring assignment  
  3. let [color1, ,color3, ,color5] = colors; //Leave space for unpick elements  
  4. console.log(color1); // Violet  
  5. console.log(color3); // Blue  
  6. console.log(color5); // Yellow

在上面的示例中，我们定义了一个名为colors的数组，其中包含七个元素。 但是显示给定数组中的三种随机颜色，即Violet, Blue 和 Yellow。 这些数组元素位于位置0、2和4中。
销毁期间，需要为未选择的元素留出空间，如上例所示。 否则会得到意想不到的结果。

  1. Violet
  2. Blue
  3. Yellow

注意：不能使用数字进行销毁。 使用数字将引发错误，因为数字不能是变量的名称。

8.1. 数组解构和Rest运算符

通过在数组解构中使用rest运算符(…)，可以将数组的所有剩余元素放入新数组中。
下面我们通过一个例子来理解它。

  1. let colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];  
  2. // destructuring assignment  
  3. let [a,b,...args] = colors;  
  4. console.log(a);   
  5. console.log(b);   
  6. console.log(args);

执行上面示例代码，得到以下结果：

  1. Violet
  2. Indigo
  3. [ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ]

8.2. 数组解构和默认值

如果要从数组中获取一个值，并且该值未定义，则可以为变量分配默认值。

  1. let x, y;  
  2. [x=50, y=70] = [100];  
  3. console.log(x); // 100  
  4. console.log(y); // 70

执行上面示例代码，得到以下结果：

  1. 100
  2. 70

8.3. 交换变量

可以在一个解构表达式中交换两个变量的值。 数组解构可以轻松交换变量的值，而无需使用任何临时变量。
示例代码：

  1. let x = 100, y = 200;  
  2. [x, y] = [y, x];  
  3. console.log(x); // 200  
  4. console.log(y); // 100

执行上面示例代码，得到以下结果：

  1. 200
  2. 100

8.4. 从函数解析返回的数组

一个函数可以返回一个数组。 但是数组解构使得从函数解析返回的数组更加简洁。
我们通过下面一个例子来理解。

  1. function array() {  
  2.     return [100, 200, 300];  
  3. }  
  4. let [x, y, z] = array();  
  5. console.log(x); // 100  
  6. console.log(y); // 200  
  7. console.log(z); // 300

在上面的示例中，我们定义了array()函数，该函数返回包含三个元素的数组。使用数组分解将上述数组元素分解为一行代码中的特定元素：x，y和z。

  1. 100
  2. 200
  3. 300