前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript|数组对象

JavaScript|数组对象

作者头像
算法与编程之美
发布2020-09-08 17:01:50
1.7K0
发布2020-09-08 17:01:50
举报

讲到数组会有人问,什么是数组?数组就是有序数据的集合,在JavaScript中的数组元素允许属于不同的数据类型,用数组名和下标就可以唯一地确定数组中的元素。接下来将会详细的讲解一下JavaScript数组对象。

创建数组对象

数组是具有相同数据类型的变量集合,这些变量都可以通过检索进行访问。数组中的变量称为数组的元素,数组能够容纳元素的数量称为数组的长度。数组中的每一个元素都具有唯一的索引(下标)与其相对应,在JavaScript中,数组的索引从零开始。

数组对象使用Array,新建数组对象有三种方法。

方法一:var 数组名 = new Date();//新建一个长度为0的数组 方法二:var 数组名 = new Date(n);//新建一个长度为n的数组 方法三:var 数组名 = new Date(元素1,元素2,元素3,…);//新建一个指定长度的数组并赋值

数组对象属性的应用

在JavaScript中数组对象的属性主要有三个:

constructor:返回对创建对象的数据函数的引用;

length:设置或返回数组中的元素的数目;

prototype:使开发者有能力向对象添加属性和方法

1.constructor

constructor属性返回对创建对象的数据函数的引用,其语法格式如下:

object. constructor;

示例:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
       <head>
              <meta charset="UTF-8">
              <title>数组对象的学习</title>
       </head>
       <body>
                     <script  type="text/javascript">
                            var  myArray1 = new Array();
                            if(myArray1.constructor==Array){
                                document.write("这是数组对象");    
                            }
                            if(myArray1.constructor==Boolean){
                                document.write("这是布尔对象");    
                         }
                         if(myArray1.constructor==Date){
                                document.write("这是日期对象");    
                         }
                         if(myArray1.constructor==String){
                                document.write("这是字符串对象");
                         }
                  </script>
       </body>
</html>

显示结果:

图1 数组对象的constructor属性结果

2. length

Length返回数组元素中元素的数目,其语法格式如下:

arrayObject.length;

示例:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
       <head>
              <meta  charset="UTF-8">
              <title>数组对象的学习</title>
       </head>
       <body>
            <script  type="text/javascript">
                         var arr = new Array(3);
                         arr[0] = "xiaozhan"
                         arr[1] = "zhangyunlei"
                         arr[2] = "zhangjie"
                         document.write("数组的长度:" + arr.length);
                         document.write("<br />");
                         arr.length=5;
                         document.write("设置之后的长度:" + arr.length);   
                  </script>    
       </body>
</html>

显示结果:

图2 数组对象的length属性结果

3.prototype

Prototype属性可以对对象田间属性和方法。其语法格式如下:

Object,prototype.name = value;

示例:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
       <head>
              <meta  charset="UTF-8">
              <title>数组对象的学习</title>
       </head>
       <body>
            <script  type="text/javascript">
Array.prototype.outAll = function(ar){
                                for(var  i=0;i<this.length;i++){
                                       document.write(this[i]);
                                       document.write(ar);
                                }
                                document.write("<br>");
                         }
                         var arr = new Array(1,2,3,4,5,6,7,8,9);
                         arr.outAll("");
                  </script>    
       </body>
</html>

显示结果:

图3 数组对象的prototype属性结果

数组对象常用方法

在JavaScript中,有大量的数组常用的操作方法,比如合并数组、删除数组元素、添加数组元素等。只有不断地运用这些方法才能熟练的掌握。在这里给大家展示一下数组对象方法表,可帮助大家快速查找需要用到的方法。

方法

描述

concat()

连接两个或更多的数组,并返回结果。

pop()

删除并返回数组的最后一个元素

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()

颠倒数组中元素的顺序。

slice()

从某个已有的数组返回选定的元素

shift()

删除并返回数组的第一个元素

sort()

对数组的元素进行排序

splice()

删除元素,并向数组添加新元素

toString()

把数组转换为字符串,并返回结果

toSource()

返回该对象的源代码

toLocaleString()

把数组转换为本地数组,并返回结果

unshift()

向数组的开头添加一个或更多元素,并返回新的长度

valueOf()

返回数组对象的原始值

结语

JavaScript中数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。因为数组中的每个元素都有自己的的ID,可以方便它可以很容易地被访问到,所以学会数组对象的属性和常用方法,可以减少查找数据和储存数据的工作量。

END

主 编 | 王楠岚

责 编 | 程 才

where2go 团队

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-09-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档