JavaScript数组 Array 对象

Array类型是ECMAScript中常用的数据类型之一。与其它语言不同的是，ECMAScript 数组的每一项可以保存不同类型的数据，而且，ECMAScript数组大小是动态调整的，数组的长可以随着的数据的添加自动增长。

1. 数组初始化
2. 数组属性
3. 数组方法
4. 数组类型检测

1. 数组初始化

数组初始化可以使用Array()构造函数或使用数组字面量。

1.1 使用构造函数

使用构造函数创建数组有三种方式：不指定数组长度、指定数组长度、指定数组元素。语法格式如下：

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

示例如下：

//不指定数组长度
var myFiends=new Array();
myFiends[0]="刘德华";
myFiends[1]="张学友";
myFiends[2]="周润发";

//指定数组长度
var myFiends2=new Array(3);
myFiends2[0]="刘德华";
myFiends2[1]="张学友";
myFiends2[2]="周润发";

//指定数组元素
var myFiends3=new Array("刘德华", "张学友", "周润发");

对于Array构造函数，可以省略new关键字。即：new Array()与Array()创建结果相同。

1.2 使用数组字面量

数组字面量是指用一对包含数组项的方括号表示，多个数组项之间以逗号分隔。示例如下：

//创建一个空数组
var myArray=[];
//创建一个包含3个字符串的数组
var myFiends=["刘德华", "张学友", "周润发"]; 
//不建议这样用，可能创建一个2或3项的数组
var values=[1,2,];
//不建议这样用，可能创建一个5或6项的数组
var vals=[,,,,,];

由于 Array 的构造函数在如何处理参数时会有些问题，因此建议总是使用数组的字面量[]来创建数组。示例如下：

[1, 2, 3]; // 结果: [1, 2, 3]
new Array(1, 2, 3); // 结果: [1, 2, 3]

[3]; // 结果: [3]
new Array(3); // 结果: [] 
new Array('3') // 结果: ['3']

//使用Array构造函数时，当指定单个整型初始化参数，会创建一个长度为3的数组
new Array(3, 4, 5); // 结果: [3, 4, 5] 
new Array(3) // 结果: []，此数组长度为 3

1.3 数组元素索引与设置

扫描二维码关注公众号，回复： 3484911 查看本文章

在读取与设置数组的值时，要使用用方括号[]和数组项的索引号（索引号从0开始）。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors[0]);     //显示数组中第一个元素
colors[2] ＝ 'black';       //修改第二项
colors[3] ＝ 'brown';       //新增第四项

2. 数组属性

属性	描述
constructor	返回对创建此对象的数组构造函数的引用。
length	设置或返回数组中元素的数目。
prototype	使你可以向数组对象添加属性和方法。

2.1 constructor属性

constructor 属性返回对创建此对象的数组构造函数的引用。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.constructor==Array);    // true

2.2 length属性

length 属性可设置或返回数组中元素的数目。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.length);    // 3

2.3 prototype属性

使你可以向数组对象添加属性和方法。示例如下：

var colors = ['red', 'green', 'blue'];
Array.prototype.green = function () {
	return 'green';
}
console.log(colors.green());		// 'green'

3. 数组方法

方法	说明
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

3.1 concat()

concat() 方法用于连接两个或多个数组。示例如下：

var colors = ['red', 'green', 'blue'];
var colors1 = ['black'];
console.log(colors.concat(colors1));	// [ 'red', 'green', 'blue', 'black' ]

3.2 join()

join() 方法用于把数组中的所有元素连接成一个字符串。join()方法可以通过参数指定的分隔符，不指定时使用','号分隔。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.join());		// red,green,blue
console.log(colors.join(';'));		// red;green;blue

3.3 pop()

pop() 方法用于删除并返回数组的最后一个元素。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.pop());		//blue
console.log(colors);		//['red', 'green']

3.4 push()

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.push('black'));		//4
console.log(colors);		//['red', 'green', 'blue', 'black']

3.5 reverse()

reverse() 方法用于颠倒数组中元素的顺序。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.reverse());		//[ 'blue', 'green', 'red' ]

3.6 shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.shift());		//red
console.log(colors);		//[ 'green', 'blue' ]

3.7 slice(start,end)

slice() 方法可从已有的数组中返回选定的元素。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.slice(0, 2));		//[ 'red', 'green' ]

3.8 sort(sortby)

sort() 方法用于对数组的元素进行排序。sortby参数可选，规定排序顺序，必须是函数。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.sort());   //[ 'blue', 'green', 'red' ]

var students = [{name:'x', age:7}, {name:'y', age:9}, {name:'z', age:6}]
students.sort(function(a,b){
	return a.age > b.age;
});
//[ { name: 'z', age: 6 },
  { name: 'x', age: 7 },
  { name: 'y', age: 9 } ]

3.9 splice(index,howmany,item1,.....,itemX)

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。示例如下：

//从数组第1索引位开始，删除两个元素，并添加'black项'
var colors = ['red', 'green', 'blue'];
console.log(colors.splice(1,2, 'black'));		//[ 'green', 'blue' ]
console.log(colors);       //[ 'red', 'black' ]

3.10 toSource()

toSource() 方法表示对象的源代码。该原始值由 Array 对象派生的所有对象继承。toSource() 方法通常在后台调用使用，并不显式地出现在代码中。

3.11 toString()

toString() 方法可把数组转换为字符串，并返回结果。返回值与没有参数的 join() 方法返回的字符串相同。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.toString());		//red,green,blue

3.12 toLocaleString()

toLocaleString() 用于把数组转换为本地字符串。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.toLocaleString());		//red,green,blue

3.13 unshift()

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.unshift('black'));		//4
console.log(colors);		//[ 'black', 'red', 'green', 'blue' ]

3.14 valueOf()

valueOf() 方法返回 Array 对象的原始值。该原始值由 Array 对象派生的所有对象继承。 valueOf() 方法通常在后台调用使用，并不显式地出现在代码中。示例如下：

var colors = ['red', 'green', 'blue'];
console.log(colors.valueOf());		//[ 'red', 'green', 'blue' ]

4.数组类型检测

一般情况，对于单个网页或一全局作用域中可以使用instanceof操作符进行判断。

if (value instanceof Array) {
       //对数组的操作
}

如果网页包含多个框架，实际就会存在两个以上的全局环境，从而存在两个以上的不同版本的Array构造函数。为解决这个问题，ECMAScript5中新增了Array.isArray()方法，支持ECMAScript5的运行环境可以使用如下方法判断。

if (Array.isArray(value)) {
       //对数组的操作
}