首页 > web前端 > js教程 > 正文

js基础数组的概述 数组的长度 数组的遍历

韦小宝
发布: 2017-11-27 10:22:08
原创
2209 人浏览过

简述了js中的数组,和获取js数组的长度,遍历js中的数组,让我们以来学习js数组吧!

一、数组的概述数组就是表示一系列有序的数据的集合。

数组的表示方法:[]。可以这样认为只要看见方括号就是一个数组。
数组中每一个数据之间都用逗号隔开,最后一项没有逗号。
array:数组

1 // 定义一个数组
2 var arr = [1,2,4,5];
3 console.log(arr[2]);
登录后复制

使用索引(index),也称为下标,来精确的读取、设置数组中的某一项。数组的下标从0开始。

1 arr[index];  //读取    
设置:arr[2] = 456;
登录后复制

数组中每一项可以是不同的数据类型。通常我们习惯书写相同的数据类型作为一组数组。

二、数组的长度
数组的数据时引用数据类型。

1 // 数组的数据类型
2 console.log(typeof arr);
登录后复制

引用类型一般都有自己的属性和方法

属性:事物具有的特点。比如:人的高矮胖瘦。

方法:就是事物的行为。比如:玩电脑,睡觉。

我们可以使用打点的方法调用属性。

1 引用数据.属性


数组的长度用length属性表示。直接打点调用。

1 // 得到数组的长度
2 console.log(arr.length);
登录后复制


数组的最后一项:下标为数组长度减1.

1 arr[arr.length - 1];
登录后复制

如果下标超过arr.length - 1,值不存在,输出undefined未定义。

1 var arr = [1,23,45,2,56,1,67,89];
2 // 数组的最大下标是length -1,当超过这个下标时输出undefined
3 console.log(arr[9]);
登录后复制

我们可以通过下标给某一项赋值。如果我们给下标超过arr.length - 1的项赋值,强制赋值,强制将数组长度拉长了。

1 var arr = [1,23,45,2,56,1,67,89];
2 arr[20] = 20;
3 console.log(arr[20]);
4 // 现在的数组长度是多少
5 console.log(arr.length);
登录后复制

虽然长度加长了,但是中间没有被赋值的项,还是undefined。

arr.length也可以强制赋值,如果超过原来的长度,多出来的部分未赋值就是undefined,如果少于原来的长度,会把多出去的下标部分数据直接删除。

1 var arr1 = [1,2,45,67,2,5566,67,12];
2 console.log(arr1.length);
3 arr1.length = 5;
4 console.log(arr1.length);
5 console.log(arr1);
登录后复制

三、数组的遍历我们可以通过某种方法,得到数组中的每一项。这就是遍历。

我们通过for循环进行数组的遍历。

1 var arr = [1,2,"号","",function(){},12,23,null,false];
2 // 遍历输出数组中每一项
3 for(var i = 0 ; i <= arr.length - 1 ; i ++){
4 console.log(arr);
5 }
登录后复制

案例:arr = [2,4,6,7,8];求数组中每一项的阶乘然后求和。

1 // 案例
2 var arr = [2,4,6,7,8];
3 // 求阶乘和
4 // 累加器
5 var sum = 0;
6 for(var i = 0 ; i <= arr.length - 1 ; i ++){
7 // 需要一个求阶乘的函数
8 sum += jiecheng(arr);
9 }
10 console.log(sum);
11 
12 
13 // 阶乘函数
14 // 累乘器
15 function jiecheng(a){
16 var cheng = 1;
17 for(var i = 1 ; i <= a ; i ++){
18 cheng *= i;
19 }
20 return cheng;
21 }
登录后复制

以上就是 js基础数组的概述 数组的长度 数组的遍历的所有内容,简单的讲述了js数组如何获取长度以及遍历

相关推荐:

JS 常见的错误类型 小结

5个直接可以拿来用的JS实用功能代码片段

原生js实现可移动的提示div框源码

以上是 js基础数组的概述 数组的长度 数组的遍历的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板