【JavaScript】第三章数组

第三章数组

• 数组
• • 什么是数组
  • 定义数组
  • • 1．使用Array对象
    • 2．使用"\[\]"定义数组
  • 数组元素操作
  • • 1.获取数组元素
    • 2.获取数组长度
    • 3.为数组元素赋值
    • 4.添加数组元素
    • 5.删除数组元素

JavaScript程序设计案例教程（第2版）（双色）（含微课）

数组

什么是数组

在JavaScript开发中，数组主要用于临时存储同类数据，进行高速批量运算。

例如，有一批用户名称需要临时进行记录保存，根据之前学习的知识，如果使用一个变量保存一个用户名称，就需要多个变量，这给代码编写和维护都带来了很大的困难，使用数组类型的变量来保存这种批量数据就很好地解决了这些问题。

数组本质上是一种具有顺序的特殊对象。数组由多个元素组成，每个元素由"下标"和"值"组成。

其中数组元素的"下标"又称"索引"或"键"，以数字标识，代表元素在数组中的位置，默认情况下从0开始递增。数组元素的值可以存储任意类型的数据，如String类型、Number类型、Object类型等。

数组结构如下图

数组，0、1、2、3、4代表数组元素的下标，a、b、c、d、e代表数组中存储的元素值。

定义数组

JavaScript中有两种定义数组的方式：一种是实例化Array对象的方式；另一种是直接使用\[\]定义数组。

下面分别对两种方式进行讲解

1．使用Array对象

使用Array对象（内置）定义数组是通过new关键字实现的。具体方法如下

// 定义一个空数组
var array = new Array();
// 定义元素为数值的数组
var nums = new Array(1,2,3);
// 定义元素为字符串的数组
var fruits = new Array('apple','pear','orange');
// 定义元素为复杂类型的数组
var complex = new Array('hello',1,true,null);

由上述示例可以看出，实例化Array数组时可以传入各种数据类型的值。需要注意的是，如果初始化对象时仅传入一个数值类型的参数，并不是定义了一个元素为对应数值的数组，而是定义了一个长度为对应数值的数组。代码如下

var array = new Array(5);
console.log(array);           // 输出结果: (5)[empty × 5]
使用Array对象定义数组时，可以省略关键字new。代码如下：
var names = Array('edward','tom');
// 等价于var names = new Array('edward','tom');
var colors = Array(3);
// 等价于var colors = new Array(3);

使用 new Array()和 Array()都能初始化数组，但使用关键字?new?进行初始化符合JavaScript语言规范，建议大家在使用时加上new关键字。

2．使用"\[\]"定义数组

使用"\[\]"和使用Array对象定义数组的方式类似，将new Array()替换为"\[\]"即可，代码如下

// 定义一个空数组
var array = [];
// 数组元素值为数值
var nums = [1, 2, 3];
// 数组元素值为字符串
var fruits = ['apple', 'pear', 'orange'];
// 数组元素值为复杂类型
var complex = ['hello', 1, true, null];
// 部分元素为空的数组
var empty = [1, , , 4, 5];
console.log(empty); 		// 输出结果(5):[1, empty × 2, 4, 5]

使用Array对象和"\[\]"定义数组类似，不同之：后者可以定义部分数据元素为空的数组，如上述empty数组中包含两个为空的元素，前者则不可以；还有前者能通过传入一个数值类型的参数定义一个长度为这个参数值的数组，如new Array(2)定义了一个长度为2的数组，后者则不可以

数组元素操作

常见的数组元素操作包括：获取数组中的某个元素、获取数组长度、为数组元素赋值等。

下面分别介绍。

1.获取数组元素

每个数组元素都有一个下标，获取数组元素的值就是通过元素下标实现的。下面通过实例说明

【例3-1】 定义数组names，并输出数组中元素的值。

var names = ['tim', 'jack', 'rose'];
console.log(names[0]);             
// 输出结果'tim'
console.log(names[2]);             
// 输出结果'rose'
console.log(names[3]);             
// 输出结果undefined

上述实例，分别通过下标0和2获取到了对应元素的值"tim"和"rose"。

在获取names数组中下标为3的元素时，获取的结果为undefined，这是因为names数组总共只有3个元素，下标为3及以后的元素都不存在

2.获取数组长度

在一些场景中，需要获取数组的长度。使用数组的length属性可获取数组长度。数组长度为数组元素的最大下标值加1。下面通过实例说明获取数组长度的具体方法。

【例3-2】 定义3个数组，并分别获取各个数组的长度。

var langs = ['javaScript', 'java', 'c++'];
var mix = [1, false, , 'hello', null];
var empty = [];
console.log(langs.length);      		                 // 输出结果 3
console.log(mix.length);        		                 // 输出结果 5
console.log(empty.length);      		 // 输出结果 0

上述实例，langs数组一共有3个元素，所以langs数组长度为3。mix数组的第三个元素为空，但是空元素也会占用数组的存储位置，所以mix数组的长度为5。

注意：类似empty的空数组长度为0

使用数组元素的length属性不仅能获取数组长度，还可以通过对length属性赋值，改变数组长度，代码如下

var langs = ['javaScript', 'java', 'c++'];
langs.length = 4;
// 输出结果 (4) ["javaScript", "java", "c++", empty]
var mix=[1,false,'hello',null];
mix.length=2;
console.log(mix);
//输出结果（2）[1,flase]
var empty=[];
empty.length=3;
console.log(empty);
//输出结果（3）[empty*3]

由上述代码可以看出，将数组长度值设置为比数组本身的长度值大时，会使用空元素填充数组，使数组长度和length属性值保持一致。

当将数组长度值设置为比数组本身的长度值小时，会按照下标由大到小的顺序删除数组元素，使数组长度和length属性保持一致。

当为空数组设置length属性值时，同样会使用空元素填充数组，使数组长度和length属性一致。

3.为数组元素赋值

在初始化数组后，经常会碰到需要改变数组中元素值的情况，也就是为数组元素赋值。下面通过实例说明为数组元素赋值的方法。

【例3-3】 定义数组并为数组元素赋值

	var langs = ['javaScript', 'java', 'c++'];
      langs[1] = 'python'
      console.log(langs); 
      // 输出结果 (3) ["javaScript", "python", "c++"]
      var nums = [1, 2, 3];
      nums[3] = 4;
      console.log(nums); 
      // 输出结果 (4) [1, 2, 3, 4]
      var empty = [];
      empty[2] = 'hello';
      console.log(empty);  
      // 输出结果 (3) [empty × 2, 'hello']

由上述实例可以看出，当为数组元素赋值时，如果被赋值元素存在，则改变该元素的值，如langs数组所示；

如果被赋值元素下标和数组长度相等，则在数组末尾添加该元素值，如nums数组所示；

如果被赋值元素下标大于数组长度，则在被赋值元素所在位置添加元素值，同时在原数组最后一个元素到被赋值元素之间添加空元素，如empty数组所示。

拓展阅读

C++和Java等语言在初始化数组时，需要指定数组长度，且数组长度固定，不能动态调整。

JavaScript则不同，它支持动态调整数组长度，且对数组做了很多优化。

4.添加数组元素

定义数组后，可以根据实际需求为数组添加元素。在JavaScript中常使用push()和unshift()两个方法添加数组元素。下面通过实例说明其用法。

【例3-4】 定义数组并为其添加元素。

 	var nums = [1, 2, 3];
      var length1 = nums.push(4);
      console.log(nums);         
       // 输出结果 (4) [1, 2, 3, 4]
      console.log(length1);       
      // 输出结果 4
      var nums2 = [1, 2, 3, 4];
      var length2 = nums2.unshift(0);
      console.log(nums2);          
      // 输出结果 (5) [0，1, 2, 3, 4]
      console.log(length2);       
      // 输出结果 5

可以看出，push()方法是在数组末尾添加对应元素，unshift()方法是在数组开头添加对应元素，它们的返回值都为添加元素后的数组长度。

5.删除数组元素

在定义数组后，有时也需要根据实际情况删除数组中的某个元素。例如，一个保存全体员工信息的多维数组，若有一个员工离职了，那么就需要从数组中删除该员工的信息。JavaScript中常使用pop()和shift()方法删除数组元素。下面通过实例说明它们的用法。

【例3-5】 定义数组并删除其中的个别元素。

 var array = ['a', 'b', 'c', 'd', 'e'];
      var item1 = array.pop();
      console.log(array);     
      // 输出结果 (4) ["a", "b", "c", "d"]
      console.log(item1);     
      // 输出结果e
      var array2 = ['a', 'b', 'c', 'd '];
      var item2 = array2.shift(0);
      console.log(array2);    
      // 输出结果 (3) ["b", "c", "d"]
      console.log(item2);     
      // 输出结果a

由上述实例可以看出，pop()方法删除数组末尾的对应元素，shift()方法删除数组开头的对应元素，它们的返回值都为删除元素的值