您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年08月29日 05:00

原创 JavaScript Array 对象详解

2777 次浏览 读完需要≈ 12 分钟

内容目录

JavaScript中的Array对象,就是我们常说的数组对象,主要用于封装多个任意类型的数据,并对它们进行管理。

所有主流浏览器均支持Array对象。更多细节信息请参考JavaScript Array对象的属性和方法

语法

Array对象(或称之为Array()函数),其用法主要有以下两种:

用法一:充当Array对象的构造函数使用,用于结合new关键字构造一个新的Array对象。Array()构造函数又有如下两种形式:

// 形式一
new Array( [ size ] )

// 形式二
new Array( value1 [, value2 [, valueN... ] ] )

用法二:当作普通函数使用,其行为与用法一(使用new关键字)完全一致,相当于用法一省略了new关键字。

// 形式一
Array( [ size ] )

// 形式二
Array( value1 [, value2 [, valueN... ] ] )

用法三:JS还支持以字面值形式创建Array对象,其用法如下:

// 最外侧的一对中括号是语法所必需的,里面的中括号表示该参数可省略
// 一般推荐使用该方式创建数组
[ [ value1 [, value2 [, valueN...] ] ] ]

参数

请根据前面语法部分所定义的参数名称查找对应的参数。

参数 描述
size 可选/Number类型指定数组的长度(即数组元素的个数),默认为 0。
value1 任意类型指定的数组元素1。
value2 可选/任意类型指定的数组元素2。
valueN 可选/任意类型指定的数组元素N,可以有任意多个。

Array()形式一将返回一个具有指定长度的数组:

  • 如果没有指定size参数,则返回一个不包含任何元素的空数组(长度为 0)。
  • 如果指定了size参数,则返回一个长度为size、所有元素为undefined的数组。
  • 参数size不能为负数或小数部分不为0的浮点数,否则将引发异常:Uncaught RangeError: Invalid array length

Array()形式二将返回一个包含指定元素的数组,所有参数均为数组的元素,数组的长度即为参数的个数)。

注意:如果Array()只有一个参数,则它既可能是形式一,也可能是形式二。此时,JS将会根据该参数的类型进行判断:
1.如果该参数为Number数据类型(不包括Number对象),则充当形式一的参数size
2.如果该参数为其它类型,则充当形式二的参数value1

返回值

Array()函数的返回值是Array类型,返回一个新的Array对象。

示例&说明

以下是Array对象的几种常见创建示例:

// 使用Array()构造一个空数组
var arr1 = new Array( ); // 长度为0
var arr2 = Array( ); // 长度为0

var arr3 = new Array( 3 ); // 长度为3 (只有一个Number数据类型的参数,将其视作size)
var arr4 = Array( 3 ); // 长度为3
// var arr = Array( -3 ); // size为负,将会报错!

var arr5 = new Array( "CodePlayer" ); // 长度为1 (只有一个参数,但不是Number数据类型,将其视作一个value1)
var arr6 = Array( new Number( 3 ) ); // 长度为1 (Number对象不是Number数据类型,也被视作value1)

var arr7 = new Array( "CodePlayer", "张三", true ); // 长度为3
var arr8 = Array( 5, "张三", 1.2, arr5 ); // 长度为4 (虽然第一个参数为Number数据类型,但有多个参数,JS仍将其视作value1。arr5是数组,仍被视作一个元素)

// 以字面值形式创建数组(推荐使用此方式)
// 中括号内的每个值都是数组的元素,可以有任意多个
var arr9 = [ ];  // 长度为0
var arr10 = [ 2 ]; // 长度为1 (中括号内的数据都是元素)
var arr11 = [ "张三", "CodePlayer", 365 ]; // 长度为3

在JS中,Array对象的数据类型为Object。你可以使用typeof运算符进行查看,其结果是"object"。

var arr1 = new Array();
var arr2 = Array( "CodePlayer" );
var arr3 = [ 2, 3, 5 ];

// arr2、arr3的测试输出结果与arr1完全一致,此处不再重复
document.writeln( typeof arr1 ); // object 【对js中绝大多数类型的对象使用typeof运算符,其结果都是"object"】
document.writeln( arr1 instanceof Array ); // true
document.writeln( arr1.constructor === Array ); // true

运行代码(其他代码请自行复制到演示页面运行)

在JS中,我们可以通过数组下标[index]的形式访问其中的某个元素,也可以通过数组下标的形式向其中添加新的元素。数组下标是从0开始算起的。

var arr = ["CodePlayer", 2.1, true];

document.writeln( arr.length ); // 3

document.writeln( arr[0] ); // CodePlayer
document.writeln( arr[1] ); // 2.1
document.writeln( arr[2] ); // true

// 修改索引为1的元素(第二个元素)
arr[1] = "item2";
document.writeln( arr[1] ); // item2

// 添加一个新的元素到数组索引3
arr[3] = "新的元素";
document.writeln( arr.length ); // 4

// 常规for循环,遍历输出数组中的所有元素
for(var i = 0; i < arr.length; i++){	
	document.write( arr[i] + " ");
}
//输出结果: CodePlayer item2 true 新的元素

// for-in循环,遍历输出数组中的所有元素
for(var i in arr){
	// 遍历输出数组中的所有元素
	document.write( arr[i] + " ");
}
//输出结果: CodePlayer item2 true 新的元素

值得注意的是:Array对象的length属性并不能真实反映数组中的实际元素个数,因为length属性返回的是最大下标 + 1

var arr = [ ];
arr[1] = "Code";
arr[3] = "Player";

document.writeln( arr.length ); // 4 【最大下标(3) + 1】


// 常规for循环,遍历输出数组中的所有元素
for(var i = 0; i < arr.length; i++){
	document.write( arr[i] + " ");
}
//输出结果: undefined Code undefined Player


// for-in循环,遍历输出数组中的所有元素
// for-in循环会忽略掉那些没有设置过的索引
for(var i in arr){
	// 遍历输出数组中的所有元素
	document.write( arr[i] + " ");
}
//输出结果: Code Player
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单