Js基础24:数组

Js基础24:数组概念 数组是一个有顺序 有长度的数据集合 1 定义数组 nbsp 先定义一个数组 nbsp var nbsp arr nbsp nbsp nbsp console log arr nbsp nbsp 另一种定义方式 nbsp var nbsp arr nbsp nbsp new nbsp Array 2 数组存值数组中的数据使用索引

大家好,欢迎来到IT知识分享网。

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

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'  ]

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/94749.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信