数组

本节学习目标

• 了解数组的常用方法

本节内容

在JavaScript中，除了对象(Object)外，数组(Array)类型应该是最常用的数据类型了。数组是数据的有序列表，在JavaScript中，数组中的每一项可以保存任何类型的数据，也就是说可以用数组的第一项保存字符串，第二项保存数值，第三项保存对象等，同时，JavaScript中数组的长度是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

创建数组的基本方式有两种。第一种是使用JavaScript中Array构造函数，示例如下：

var fruits = new Array();

如果预先知道数组要保存的项目数量，也可以给构造函数传递该参数，例如，下面的代码将创建一个长度为10的数组：

var fruits = new Array(10);

创建数组的第二种方式是使用数组字面量表示法。数组字面量也就是说我们直接把数组中的每一个数据项都列出来，包含在一对中括号之间，不同的数据项以逗号隔开，如下所示：

var fruits = ['apple', 'pear', 'peach']; // 创建了一个包含三个字符串的数组
var names = []; // 创建了一个空数组
var values = [1, 2, ,]; // 不要这样做!这样会创建一个包含2项或4项的数组

在我们要对数组进行读取操作时，我们可以使用中括号并提供相应的基于0的数字索引，如下所示：

var fruits = ['apple', 'pear', 'peach'];
console.log(fruits[0]); // 显示第一项 - 'apple'
fruits[1] = 'grape'; // 修改第二项
console.log(fruits[1]); // 显示第二项 - 'grape'
fruits[3] = 'banana'; // 新增第四项
console.log(fruits[3]); // 显示第四项 - 'banana'

方括号中的索引表示要访问的值。如果索引小于数组中的项数，就返回对应项的值，就像上例中fruits[0]会返回'apple'一样。设置数组中某一项的值也是使用的相同的语法，但会替换指定位置的值。如果设置某个值的索引超过了该数组现有的长度，如上述例子中的fruits[3]所示，数组就会自动增加到该索引值加1的长度（就上例而言，索引是3，因此该数组的长度就是4）。

数组的项数保存在该数组的length属性中，这个属性始终会返回0或者更大的值，如下例所示：

var fruits = ['apple', 'pear', 'peach'];
console.log(fruits.length); // 3
var colors = [];
console.log(colors.length); // 0

数组中的length属性很有特点，它不是只读的。因此，我们还可以通过设置这个属性，从数组的末尾移除数据项，请看下面的例子：

var fruits = ['apple', 'pear', 'peach'];
fruits.length = 2;
console.log(fruits[2]); // undefined - 相当于删除了数组中的第三项

JavaScript中常用方法：

• push()方法

  向数组的末尾添加新的元素。示例如下：

  var fruits = ['apple', 'pear', 'peach'];
  fruits.push('banana');
  console.log(fruits); // ['apple', 'pear', 'peach', 'banana']

• pop()方法

  从数组的末尾移除一个元素。示例如下：

  var fruits = ['apple', 'pear', 'peach'];
  fruits.pop();
  console.log(fruits); // ['apple', 'pear']

• unshift()方法

  向数组的前面添加新的元素。示例如下：

  var fruits = ['apple', 'pear', 'peach'];
  fruits.unshift('banana');
  console.log(fruits); // ['banana', 'apple', 'pear', 'peach']

• shift()方法

  从数组的前面移除一个元素。示例如下：

  var fruits = ['apple', 'pear', 'peach'];
  fruits.shift();
  console.log(fruits); // ['pear', 'peach']

  以上四个方法是我们在对数组进行添加，删除的基本操作。

  
• indexOf()方法

  找到某一个数据项在数组中的索引值。示例如下：

  var fruits = ['apple', 'pear', 'peach'];
  console.log(fruits.indexOf('pear')); // 1

其他资料推荐

• JavaScript数组 - MDN
• js数组方法全面总结
• javascript：数组总结

本节练习

• 阅读推荐的链接，复习JavaScript中数组的相关方法

• 写程序判断下列变量是不是数组类型。

  var a = '[a, b, c, d]'; 
  var b = [1, 2, 3, 4];

• 编写程序，将下面数组中的每一项都乘以2。

  var a = [1,2,3,4,5];
  // should output [2,4,6,8,10]

• 编写程序，按下面的要求输出结果。

  var colors = ["Red", "Green", "White", "Black"];
  // case 1 output: 'Red Green White Black'
  // case 2 output: 'Red+Green+White+Black'
  // case 3 output: 'Red,Green,White,Black'

• 编写程序，将下面数组中的数字按从大到小的顺序排序。

  var a = [5,1,8,10,4];
  // should output: [10,8,5,4,1]

• 编程程序，找出下列数组中出现频率最高的元素。

  var a = [3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3];
  // should output: 'a'