javascript之Array 数组对象详解


Posted in Javascript onJune 07, 2016

1、创建Array对象方法:

--->var arr = [element0, element1, ..., elementn];//简单的定义方法

var arr = [1,2,3]

此时可以知道
arr[0] == 1;

arr[1] == 2;

arr[2] == 3;

--->new Array();

var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值

arr[0] = "arr0";

arr[1] = "arr1";

arr[2] = "arr2";

--->new Array(size);//定义一个大小有限制的数组对象,然后以下面的方式赋值(赋值方式和上面是一样的)

var arr = new Array(3);

arr[0] = "arr0";

arr[1] = "arr1";

arr[2] = "arr2";

--->new Array(element0, element1, ..., elementn);//直接将数组内容定义好

var arr = new Array("arr0","arr1","arr2");

此时可以知道:
arr[0] == "arr0";

arr[1] == "arr1";

arr[2] == "arr2";

2、Array对象属性

Array常见的属性有三个:constructor、length和prototype

--->constructor,顾名思义,就是一个构造器,即这个对象是由什么构成的,再通俗一点就是这个对象的类型,见下面例子

var arr = new Array(3);

if(arr.constructor==Array)

{

   document.write("This is an Array");

}

if (test.constructor==Boolean)

{

   document.write("This is a Boolean");

}

if (test.constructor==Date)

{

   document.write("This is a Date");

}

if (test.constructor==String)

{

   document.write("This is a String");

}

上面的输出结果是:This is an Array

--->length,即Array的长度

var arr = new Array(3);

document.write(arr.length);//输出结果是3

注意,在Javascript中是可以修改Array对象的属性的,

因此:

arr.length=5;

document.write(arr.length);//输出结果是5

--->prototype,使您有能力向对象添加属性和方法。

function myarray(name,age)//定义一个类,此类目前有两个属性

{

   this.name = name;

   this.age = age;

}

var myarr = new myarray("john",25);

myarray.prototype.test = null;//为myarray类添加了一个属性

myarr.test = "test";

alert(myarr.test);//输出test

3、concat()方法--->连接两个或多个数组

它有两种使用方式:

--->连接实际数据
例:

var arr = new Array(1,2,3);

alert(arr.concat(4,5));//输出1,2,3,4,5

--->连接两个或多个数组

var arr1 = new Array(1,2,3);

var arr2 = [4,5];

var arr3 = new Array("jone","john");

alert(arr1.concat(arr2,arr3));//输出1,2,3,4,5,jone,john

4、join()方法--->数组中的元素放入一个字符串

它可以有参数或者无参,参数代表的是对生成的字符串的分割方式

--->无参

var arr = new Array("jone","Grrgy","john");

alert(arr.join());//输出jone,Grrgy,john  字符串中间以,隔开

--->有参

var arr = new Array("jone","Grrgy","john");

alert(arr.join("."));//输出jone.Grrgy.john   字符串中间以参数隔开

5、pop()方法用于删除并返回数组的最后一个元素(删除前)

var arr = new Array("jone","john","grrgy");

document.write(arr.pop());//输出内容:grrgy

document.write(arr.join("-"));//输出:jone-john

6、push()方法用于向数组最后添加一个元素,并返回数组的长度(添加后)

假如push()中参数为空(不填写),则返回数组原长度,不会对数组做任何修改
例:

var arr = ["jone","john","grrgy"];

document.write(arr.push("tom"));//输出:4(长度)

document.write(arr.join());//输出:jone,john,grrgy,tom

7、reverse()颠倒数组中元素的顺序,无参

例:

var arr = ["jone","john","grrgy"];

document.write(arr.reverse());//grrgy,john,jone

8、shift()删除并返回数组的第一个元素(删除前)

var arr = ["jone","john","grrgy"];

document.write(arr.shift());//输出:jone

document.write(arr.join());//输出:jone,john

9、slice()从指定的数组中返回指定的元素,注:它返回的是一个数组

它的参数有两个,start和end,
start为必选,指定的是开始元素的位置
end为可选,指定的结束元素的位置,假如不写,则认为是到数组结尾
例:

var arr = ["jone","john","grrgy","tom","hell"];

var test = arr.slice(1);

if(test.constructor==Array)

{

   document.write("This is an Array<br>");

   document.write(test.join());

}

最后结果输出:

This is an Array
john,grrgy,tom,hell

若将var test = arr.slice(1)改为:
var test = arr.slice(1,2);
结果输出为:
john

10、sort()对数组的元素进行排序,非常重要的一个方法

它可以有参数,参数为一个function(),此function规定了排序的规则,
注,它生出的是原数组的副本,不会生成新的数组,即在原数组的基础上进行修改
假如不添加参数的话,那么会按照Javascript中内置的排序方式进行,字母顺序
例:

var arr = ["jone","john","grrgy","tom","hell"];

document.write(arr.sort());

document.write("<br>");

document.write(arr);

输出结果为:
grrgy,hell,john,jone,tom
grrgy,hell,john,jone,tom

下面是按照数字大小进行排序

function sortNumber(a,b)// 定义排序规则的函数

{

   if(a>b)

   {

      return 1;

   }

   else if(a<b)

   {

      return -1;

   }

   else

   {

      return 0;

   }
}

var arr = new Array(1,2000,3,400);

document.write(arr.sort(sortNumber));//此处只写函数名即可

document.write("<br>");

document.write(arr);

输出:

1,3,400,2000
1,3,400,2000

11、splice()删除元素并向数组中添加元素

splice(index,howmany,element1,element2.....elementx)说明如下:
index为必需项,规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany为必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
当howmany为0,则表示不删除任何元素,言外之意就是只添加
element1为可选,规定要添加到数组的新元素。从 index 所指的下标处开始插入,可以插入多个
splice()和slice()的区别在于,splice()是对原数组进行的处理,它修改了原数组的值,返回一个数组。
splice()相当于针对数组中某个元素进行替换,或者是插入或者是删除

看下面三个例子:

--->只插入

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";
document.write(arr + "<br />");

arr.splice(2,0,"William");

document.write(arr + "<br />");

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
William插入到了2的位置

--->只删除

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";
document.write(arr + "<br />");

arr.splice(2,1);

document.write(arr + "<br />");

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,James,Adrew,Martin
删除了原先数组2位置的元素

--->既删除又添加(相当于替换)

var arr = new Array(6);

arr[0] = "George";

arr[1] = "John";

arr[2] = "Thomas";

arr[3] = "James";

arr[4] = "Adrew";

arr[5] = "Martin";
document.write(arr + "<br />");

arr.splice(2,1,"William");

document.write(arr + "<br />");

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
将原先的Thomas替换成了William

12、toSource()返回对象的源代码,此方法一般位于Javascript的后台自动调用,很少在前台使用且此方法无法在IE浏览器实现,例:在firefox中

var myarr = new Array('lisi',25);

document.write(myarr.toSource());

输出结果为:
["lisi", 25]

假如重新定义一个类,则可以将属性名显示出来,例:

function myarray(name,age)

{

    this.name = name;

    this.age = age;

}

var myarr = new myarray('lisi',25);

document.write(myarr.toSource());

输出结果为:
({name:"lisi", age:25})
有点类似于Json类型的数据,但其实仅仅是相似而已,它并不是一种Json数据类型格式

13、toString(),数组返回成字符串,它和join()实现的结果一样,但是join()方法可以自定义间隔的符号而toString()则不可以,只能以,隔开,例:

var myarr = new Array('jone','john','Tom');

document.write(myarr.join('.'));

document.write('<br>');

document.write(myarr.join(','));

document.write('<br>');

document.write(myarr.join());

document.write('<br>');

document.write(myarr.toString());

输出结果为:
jone.john.Tom
jone,john,Tom
jone,john,Tom
jone,john,Tom
可以看出后三种方法结果是一样的

14、unshift(),可以向数组的开头添加一个或多个元素并且返回数组的新长度,且原来的数组将会改变

unshift(element1,element2,element3....),最起码有一个元素,例:

var myarr = new Array('jone','john','Tom');

var length = myarr.unshift('zhangsan','lisi');

document.write(myarr);

document.write('<br>');

document.write(length);

输出结果为:
zhangsan,lisi,jone,john,Tom
5

查看更多JavaScript的语法,大家可以关注:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 #Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 #Javascript
javascript基础知识
Jun 07 #Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 #Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 #Javascript
javascript如何定义对象数组
Jun 07 #Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 #Javascript
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
npm的lock机制解析
2019/06/20 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python获取url的返回信息方法
2018/12/17 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
乳制品整治工作方案
2014/05/29 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书