Js基础24：数组

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

1、定义数组

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

2、数组存值

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

欢迎大家来到IT世界,在知识的湖畔探索吧! // 声明一个空数组  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、数组取值（索引）

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

欢迎大家来到IT世界,在知识的湖畔探索吧! 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'  ]