概念：数组是一个有顺序、有长度的数据集合

1、定义数组

 // 先定义一个数组 var arr = []; console.log(arr);  // 另一种定义方式 var arr = new Array();

2、数组存值

数组中的数据使用索引管理。索引就是序号，只不过数组中的数据从0开始

 // 声明一个空数组 var arr = []; // 或者 var arr = new Array(); //把成绩存储到数组中 arr[0] = 91; arr[1] = 88; arr[2] = 72; arr[3] = 45; arr[4] = 63; console.log(arr); // 输出 [91,88,72,45,63] 就是一个数据集合

但是这个方式是比较麻烦的，我们如果一开始就知道数组了，可以直接使用一个简单的语法存储数据

 var arr = [91,88,72,45,63]; console.log(arr); // 输出的结果是一样的

3、数组取值（索引）

把数据存储在数组里面，是为了将来能使用的，所以要从里面把数据取出来。数据取值同样使用索引取。

 console.log(arr[0]); var sum = arr[0] + arr[1] + arr[2] + arr[3] + arr[4]; console.log(sum); // 输出370

把 数组[索引]格式当成一个变量使用就行

4、遍历数组

我们在求成绩总和的时候，一个一个地把数组里面的数组取出来了，从索引 0 到最后一个索引，里面有很多重复的代码，我们其实可以使用循环实现。

 // 最初的写法 var sum = arr[0] + arr[1] + arr[2] + arr[3] + arr[4];

转化一下

 var sum = 0; sum += arr[0]; sum += arr[1]; sum += arr[2]; sum += arr[3]; sum += arr[4];

再转化

 var sum = 0; var i = 0; sum += arr[i]; i++; sum += [i]; i++; // 直到i == 4 结束

写成循环

 var sum = 0; for(var i = 0; i <= 4; i++){   sum += arr[i]; } console.log(sum); // 输出 370，和我们一个一个相加是一样的

使用循环来遍历数组，当数组中的数据比较多的时候，会比较方便。

5、数组长度

我们在遍历数组的时候，发现总是从索引 0 开始遍历，到最后一个索引，但是如果数据比较多的时候，我们就不容易得到最后一个索引是多少。所以在这还有一个更简单的写法：使用数组的长度来控制遍历的次数。

数组长度：就是数组中数据的个数

 console.log(arr.length); // 数组.length 就是数组的长度

如果数组的长度是5，索引的最后一个就是4，我们发现最大索引总是比长度少 1 ，所以遍历还可以这么写

 for(var i = 0; i <= arr.lensgth - 1; i++){   console.log(arr[i]); } // 简化一下 // 把 <= 的 = 号 去掉，会使循环的次数少一次，我们把上限次数+1，就变成了 i < arr.length - 1 + 1 ,最终： for(var i = 0; i < arr.lensgth; i++){   console.log(arr[i]); }

总结：

1.如果要存储多个数据，就使用数组来存储

2.在数组里面使用索引访问每个数据

3.基于数组的顺序和长度，我们可以使用for循环遍历数组

练习：

 // 渲染商品数据列表 var datas = [     './images/00_03.png', './images/00_04.png',     './images/00_05.png', './images/00_06.png',     './images/00_07.png', './images/00_07.png',     './images/00_10.png', './images/00_11.png',     './images/00_12.png', './images/00_13.png',     './images/00_14.png', './images/00_16.png',     './images/00_17.png', './images/00_18.png',     './images/00_19.png', './images/00_20.png',     './images/00_22.png', './images/00_23.png',     './images/00_24.png', './images/00_25.png' ]