javascript的数组和常用函数详解


Posted in Javascript onMay 09, 2014

1.认识数组

数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象。
Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能。

1.1 定义数组

声明有10个元素的数组:

var a = new Array(10);

此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如 a[2] 但此时元素并未初始化,调用将返回 undefined。
以下代码定义了个可变数组,并进行赋值。
var a = new Array();
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;

上面提过了,数组里面可以放对象,例如下面代码:

var a =    new Array();
a[0]    = true;
a[1]    = document.getElementById("text");
a[2]    = {x:11, y:22};
a[3]    = new Array();

数组还可以实例化的时候直接赋值,例如:

var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

a 和 b 都是数组,只不过b用了隐性声明,创建了另一个实例,此时如果用alert(a==b)将弹出false

1.2 多维数组

其实Javascript是不支持多维数组的,在asp里面可以用 dim a(10,3)来定义多维数组,在Javascript里面,如果用 var a = new Array(10,3) 将报错
但是之前说过,数组里面可以包含对象,所以可以把数组里面的某个元素再声明为数组,例如:

var a = new Array();
a[0] = new Array();
a[0][0] = 1;
alert(a[0][0]);  //弹出 1

声明的时候赋值
var a = new Array([1,2,3], [4,5,6],[7,8,9]);
var b = [[1,2,3], [4,5,6], [7,8,9]];

效果一样,a采用常规实例化,b是隐性声明,结果都是生成一个多维数组。

1.3 Array literals

这个还真不知中文怎么叫,文字数组?
说到数组,不得不说到Array  Literals,数组其实是特殊的对象,对象有特有属性和方法,通过 对象名.属性 、对象.方法() 来取值和调用,而数组是通过下标来取值,Array Literals跟数组有很多相似,都是某数据类型的集合,但是Array Literals从根本来说,是个对象,声明和调用,跟数组是有区别:

var aa = new Object();
aa.x = "cat";
aa.y = "sunny";
alert(aa.x);    //弹出cat

创建一个简单的对象,一般调用是通过aa.x,而如果当成Array  literals的话,用alert(aa[“x”])一样会弹出cat

var a = {x:"cat",    y:"sunny"};
alert(a["y"]);  //弹出sunny

这是另一种创建对象的方法,结果是一样的

2.数组元素的操作

上面已经说过,可以通过 数组[下标] 来读写元素
下标的范围是 0 ? (23(上标2) -1),当下标是负数、浮点甚至布尔值的时候,数组会自动转换为对象类型,例如:

var b    = new Array();
b[2.2]    = "XXXXX";
alert(b[2.2]);  //-> XXXXX

此时相当于b[“2.2”]  = “XXXXX”。

2.1数组的循环

var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}

这是最常用的,历遍数组,代码将依次弹出1至6
还有一种常用的:
var a = [1,2,3,4,5,6];
for(var e in a){
alert(e);
}

还是依次弹出1至6,for…in是历遍对象(数组是特殊的对象)对象,用在数组上,因为数组没有属性名,所以直接输出值,这结构语句用在对象上,例如下面:

var a = {x:1,y:2,z:3};
for(var e in a){
alert(e    + ":" + a[e]);
}

此时e取到的是属性名,即 x、y、x,而要取得值,则采用 数组名[属性],所以 a[e] 等同于 a[“x”]、a[“y”]、a[“z”]

2.2数组常用函数

concat

在现有数组后面追加数组,并返回新数组,不影响现有数组:

var a = [123];
var b = "sunnycat";
var c =    ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];alert(a.concat(b));     // -> 123,sunnycat
alert(a);  //    -> 123
alert(b.concat(c, d));       // -> sunnycatwww,21,ido[object    Object]
alert(c.concat(b));     // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" #    "));       // -> 1 # 2 # 3    # 4 # 5,6,7,8 # 11 # 22 # 33

需要注意的是只能用于数组或字符串,如果被连接(前面的a)的是数值、布尔值、对象,就会报错,字符串连接数组时,字符串会跟数组首元素拼接成新元素,而数组连接字符串则会追加新元素(这点我也不清楚原委,知情者请透露),对于数组里面包含数组、对象的,连接后保持原样。

join

用指定间隔符连起来,把数组转为字符串:

var a = ['a','b','c','d','e','f','g'];
lert(a.join(","));   // -> a,b,c,d,e,f,g 相当于a.toString()
alert(a.join(" x "));  // -> a x b x c x d x e x f x g

这个很容易理解,但需要注意的是只转换一维数组里面,如果数组里面还有数组,将不是采用join指定的字符串接,而是采用默认的toString(),例如

var a =    ['a','b','c','d','e','f','g',[11,22,33]];
alert(a.join(" * "));  // -> a * b * c * d * e * f * g *    11,22,33

注:数组里面的数组,并没用 * 连接

pop

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

var a =    ["aa","bb","cc"];
document.write(a.pop());    // -> cc
document.write(a);        // -> aa, bb

注:如果数组为空,则返回undefined

push

往数组后面添加数组,并返回数组新长度

var a =    ["aa","bb","cc"];
document.write(a.push("dd"));    // -> 4
document.write(a);        // -> aa,bb,cc,dd
document.write(a.push([1,2,3]));  // -> 5
document.write(a);        // -> aa,bb,cc,dd,1,2,3

跟concat的区别在于,concat不影响原数组,直接返回新数组,而push则直接修改原数组,返回的是数组新长度

sort

数组排序,先看个例子

var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()); // -> 11,2,3,33445,5654,654,asd,b

结果是不是很意外,没错,排序并不是按整型大小,而是字符串对比,就是取第一个字符的ANSI码对比,小的排前面,相同的话取第二个字符再比,如果要按整型数值比较,可以这样

var a = [11,2,3,33445,5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a);  //    -> 2,3,11,654,5654,33445

sort()方法有个可选参数,就是代码里的function,这是个简单的例子,不可对非数字进行排序,非数字需要多做判断,这里就不多讲

reverse

对数组进行反排序跟,sort()一样,取第一字符ASCII值进行比较

var a = [11,3,5,66,4];
alert(a.reverse());  // -> 4,66,5,3,11

如果数组里面还包含数组,则当为对象处理,并不会把元素解出来

var a = ['a','b','c','d','e','f','g',[4,11,33]];
alert(a.reverse());  // -> 4,11,33,g,f,e,d,c,b,a
alert(a.join(" * "));  // -> 4,11,33 * g * f * e * d * c * b * a

按理应该是11排最后面,因为这里把 4,11,33 当做完整的对象比较,所以被排在第一位
看不明白的话,用join()串起来,就明了多

shift

删除数组第一个元素,并返回该元素,跟pop差不多

var a =    ["aa","bb","cc"];
document.write(a.shift());   // -> aa
document.write(a);        // -> bb,cc

注:当数组为空时,返回undefined

unshift

跟shift相反,往数组最前面添加元素,并返回数组新长度

var a =    ["aa","bb","cc"];
document.write(a.unshift(11));   // -> 4 注:IE下返回undefined
document.write(a);        // -> 11,aa,bb,cc
document.write(a.unshift([11,22]));   // -> 5
document.write(a);        // -> 11,22,11,aa,bb,cc
document.write(a.unshift("cat"));  // -> 6
document.write(a);        // -> cat,11,22,11,aa,bb,cc

注意该方法,在IE下将返回undefined,貌似微软的bug,我在firefox下则能正确发挥数组新长度

slice

返回数组片段

var a = ['a','b','c','d','e','f','g'];
alert(a.slice(1,2));  // -> b
alert(a.slice(2));    // -> c,d,e,f,g
alert(a.slice(-4));   // -> d,e,f,g
alert(a.slice(-2,-6));    // -> 空

a.slice(1,2),从下标为1开始,到下标为2之间的数,注意并不包括下标为2的元素
如果只有一个参数,则默认到数组最后
-4是表示倒数第4个元素,所以返回倒数的四个元素
最后一行,从倒数第2开始,因为是往后截取,所以显然取不到前面的元素,所以返回空数组,如果改成  a.slice(-6,-2) 则返回b,c,d,e

splice

从数组删除某片段的元素,并返回删除的元素

var a = [1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2));    // -> 4,5
document.write(a);        // -> 1,2,3,6,7,8,9
document.write(a.splice(4));  // -> 7,8,9 注:IE下返回空
document.write(a);        // -> 1,2,3,6
document.write(a.splice(0,1));    // -> 1
document.write(a);        // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"]));   // -> 3
document.write(a);        // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee").join("#")); // -> aa,bb,cc#6
document.write(a);        // -> 2,ee,7,8,9
document.write(a.splice(1,2,"cc","aa","tt").join("#"));  // -> ee#7
document.write(a);        // -> 2,cc,aa,tt,8,9

注意该方法在IE下,第二个参数是必须的,不填则默认为0,例如a.splice(4),在IE下则返回空,效果等同于a.splice(4,0)

toString

把数组转为字符串,不只数组,所有对象均可使用该方法

var a =    [5,6,7,8,9,["A","BB"],100];
document.write(a.toString());    // -> 5,6,7,8,9,A,BB,100
var b = new Date()
document.write(b.toString());    // -> Sat Aug 8 17:08:32 UTC+0800    2009
var c = function(s){
alert(s);
}
document.write(c.toString());    // -> function(s){ alert(s); }

布尔值则返回true或false,对象则返回[object objectname]
相比join()方法,join()只对一维数组进行替换,而toString()则把整个数组(不管一维还是多维)完全平面化
同时该方法可用于10进制、2进制、8进制、16进制转换,例如:

var a =    [5,6,7,8,9,"A","BB",100];
for(var i=0; i<a.length; i++){
document.write(a[i].toString()    + " 的二进制是 "    + a[i].toString(2) + " ,八进制是 " + a[i].toString(8) + " ,十六进制是 " + a[i].toString(16));  //    -> 4,5
}

输出结果:
5 的二进制是 101 ,八进制是 5 ,十六进制是 5
6 的二进制是 110 ,八进制是 6 ,十六进制是 6
7 的二进制是 111 ,八进制是 7 ,十六进制是 7
8 的二进制是 1000 ,八进制是 10 ,十六进制是 8
9 的二进制是 1001 ,八进制是 11 ,十六进制是 9
A 的二进制是 A ,八进制是 A ,十六进制是 A
BB 的二进制是 BB ,八进制是 BB ,十六进制是 BB
100 的二进制是 1100100 ,八进制是 144 ,十六进制是 64

转换只能在元素进行,如果对整个数组进行转换,则原封不动返回该数组

toLocaleString

返回本地格式字符串,主要用在Date对象上

var a = new Date();
document.write(a.toString());    // -> Sat Aug 8 17:28:36 UTC+0800    2009
document.write(a.toLocaleString());   // -> 2009年8月8日 17:28:36
document.write(a.toLocaleDateString());   // -> 2009年8月8日

区别在于,toString()返回标准格式,toLocaleString()返回本地格式完整日期(在【控制面板】>>【区域和语言选项】,通过修改[时间]和[长日期]格式),toLocaleDateString()跟toLocaleString()一样,只是少了时间

valueOf

根据不同对象返回不同原始值,用于输出的话跟toString()差不多,但是toString()是返回string类型,而valueOf()是返回原对象类型

var a = [1,2,3,[4,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = function(){
alert("sunnycat");
};
document.write(a.valueOf());    // -> 1,2,3,4,5,6,7,8,9
document.write(typeof (a.valueOf()));  // -> object
document.write(b.valueOf());    // -> 1249874470052
document.write(typeof(b.valueOf()));  // -> number
document.write(c.valueOf());    // -> true
document.write(typeof(c.valueOf()));  // -> boolean
document.write(d.valueOf());    // -> function () {    alert("sunnycat"); }
document.write(typeof(d.valueOf()));  // -> function

数组也是对象,所以typeof  (a.valueOf())返回object,返回的依然是个多维数组

var a = [1,2,3,[4,5,6,[7,8,9]]];
var aa = a.valueOf();
document.write(aa[3][3][1]); // -> 8

Date对象返回的是距离1970年1月1日的毫秒数,Math和Error对象没有valueOf方法。

Javascript 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 #Javascript
实例讲解JS中数组Array的操作方法
May 09 #Javascript
一个JavaScript的求爱小特效
May 09 #Javascript
js中的setInterval和setTimeout使用实例
May 09 #Javascript
js获取 type=radio 值的方法
May 09 #Javascript
js实现的点击数量加一可操作数据库
May 09 #Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 #Javascript
You might like
PHP 柱状图实现代码
2009/12/04 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python如何建立全零数组
2020/07/19 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
Yahoo-PHP面试题3
2012/01/14 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
房屋产权证明书
2014/10/15 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
canvas实现贪食蛇的实践
2022/02/15 Javascript