Array类型是ECMAScript中常用的数据类型之一。与其它语言不同的是,ECMAScript 数组的每一项可以保存不同类型的数据,而且,ECMAScript数组大小是动态调整的,数组的长可以随着的数据的添加自动增长。
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 数组元素索引与设置
在读取与设置数组的值时,要使用用方括号[]
和数组项的索引号(索引号从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)) { //对数组的操作 }