JavaScript中的Array类型

来源:互联网 发布:qq三国js心法 编辑:程序博客网 时间:2024/06/04 23:51

js中Array类型是一种引用数据类型,与其他语言不同的是,数组中的每一项可以为任意类型,数组的大小也是可以动态调整的。

创建数组

有两种方法:
1.使用Array构造函数

var foo = new Array();  //[]var bar = new Array(3); //[,,,]var hello = new Array('hello', 2);  //['hello', 2]

2.更常用的是使用字面量来创建数组

var foo = [1, 2, 3];var bar = ['hello', 1, [2, 3]];

length属性

每个数组的实例都有length属性,其值为数组的项数。
可以通过设置数组的length值来改变数组的长度。

var foo = [1, 2, 3];foo.length = 2; //删除数组的最后一项foo.length = 3; //foo[2]值为undefined

检测数组

有两种方法
1.

if (value instanceof Array) {}

2.

if (Array.isArray(value)) {}

instanceof操作符的问题在于假定只有一个全局执行环境,可是当网页有多个框架(不太理解是什么情况)时,每个框架里的Array构造函数是不同的,所以当一个框架中的数组实例传入另一个框架中再使用instanceof操作符时就会得到错误的结果。
Array.isArray()就没有这种问题。

转换方法

所有对象都有toString、toLocalString、valueOf方法,数组也不例外。
toString()会返回数组中每个值的字符串形式凭借而成的以逗号分隔的字符串。而valueOf和toLocalString往往返回的结果也相同。
而如果我们想自定义数组返回的各项之间的分隔符,可以使用join方法。
join()接收一个字符串参数,并将该字符串当做分隔符,然后返回数组各项以分隔符连接起来的字符串。

var foo = ['1', '2', '3'];alert(foo.join(' '));   //'1 2 3'

如果数组中某一项为null或者undefined,则在最终连接的字符串中以空字符表示。

栈方法

顾名思义是让数组像栈表现一样的方法。栈的特性就是:FILO(先进后出)
数组有两个栈方法: push和pop
push():在数组末尾增添一项或多项, 参数为要增添的项,返回值为新数组的长度。
pop():删除数组末尾的一项,返回值为数组最后一项。

队列方法

类似栈方法,不过是先进先出
shift():出队,即删除数组第一项,返回值为数组第一项。
unshift():进队,在数组最前端增添一项或多项,参数为要增添的项,返回值为新数组的长度。
通过组合使用shift和push可以模拟队列。
或者组合使用unshift和pop也可从另一方向模拟队列。
通过组合使用shift和unshift则可以模拟栈,与组合使用push和pop模拟的栈方向相反。

重新排序方法

数组中有两个可以用来重新排序的方法:reverse()和sort()
reverse()会反转数组的顺序

var foo = [1, 2, 3, 4];foo.reverse();alert(foo); //4,3,2,1

sort()方法默认会按升序排列数组,即最小项在最前面。
sort方法会调用每一项的toString()方法将数组每一项转换成字符串后作比较,即使每一项都是数组,它比较的也是字符串。

var foo = [0, 1, 5, 10, 15];foo.sort();alert(foo); //0,1,10,15,5

因为字符串 ‘10’ ‘15’ 都位于 ‘5’ 的前面。这就让我们很不好办,得到的结果和我们预期很不一致。因此我们有必要来自定义比较函数,并将比较函数作为参数传递给sort()函数。
比较函数接收两个参数,返回值为正数、负数或者0。
如下

function compare(value1, value2) {    if (value1 < value2) {        return -1;    } else if (value1 > value2) {        return 1;    } else {        return 0;    }}var foo = [0, 1, 3, 2, 4];foo.sort(compare);alert(sort);    //0,1,2,3,4

返回-1表示第一个值应该在第二个值之前,这时候我们是value1

操作方法

即操作已经包含在数组中的项的方法。
concat():基于当前数组所有项创建新的数组,首先会创建当前数组的副本,然后将接收到的参数添加到副本的末尾,最后返回副本。

var colors = ['red', 'blue'];var newColors = colors.concat('black', ['yellow', 'green']);alert(colors);  //red,bluealert(newColors); //red,blue,black,yellow,green

slice()基于当前数组的一项或多项创建新的数组,接收两个参数,要返回项的起始位置和结束位置。如果只有一个参数,则结束位置为数组末项。

var colors = ['red', 'blue', 'green', 'yellow', 'black'];var colors2 = colors.slice(2);var colors3 = colors.slice(2, 4);alert(colors2); //green,yellow,blackalert(colors3); //green,yellow

splice()方法,主要用途是向数组中插入项。
参数第一个为要修改的位置,第二个为要删除的项数,后面为要插入的项。
删除:splice(0,2)表示删除前两项,修改位置在0,删除两项,无新插入。
插入:splice(2,0,’red’,’green’)在第三项后插入两项,修改位置在2,无删除,新插入两项。
替换:splice(2,1,’red’,’green’)将第三项替换为两项。

同时splice()方法会返回一个数组,包含了原数组中删除的项。无删除则为空数组。

位置方法

indexOf()和lastIndexOf()方法
返回要查找的项在数组中的位置。第二个参数为可选的表示查找起点开始位置。
两者的区别为indexOf为从前向后查找,lastIndexOf为从后向前查找。

迭代方法

js中数组有5个迭代方法:
every()
some()
filter()
map()
forEach()

这5个方法都会接收一个函数作为参数。
传入这5个方法的函数都会接收到3个参数:数组项的值,该项在数组中的位置,数组对象本身。

其中every和some方法类似,都会返回一个布尔值。作为参数的函数会返回一个布尔值,如果数组中的每一项参数函数都返回true,则every()会返回true,否则返回false。而some()函数则只要数组中存在某一项会使参数函数返回true就返回true。

var number = [1,2,3,4,5,6,7];var everyResult = number.every(function(item, index, array) {    return (item>2);});var someResult = number.some(function(item, index, array) {    return (item>2);});alert(everyResult); //falsealert(someResult);  //true

而filter()则返回的是一个数组,该数组由原数组中使参数函数返回true的项组成。

var number = [1,2,3,4,5,6];var filterResult = number.filter(function(item, index, array) {    return (item>2);});alert(filterResult);    //3,4,5,6

对于map()方法也会返回一个数组,该数组由参数函数返回值组成。

var number = [1,2,3];var mapResult = number.map(function(item, index, array) {    return item*2;});alert(mapResult); //2,4,6

而forEach()方法和map类似,但是不返回值。

var number = [1,2,3];number.forEach(function(item, index, array) {    console.log(item);});alert(number);  //1,2,3

归并方法

数组的归并方法有两个:reduce()和reduceRight()
这两者的区别在于归并的方向不同。
这两个方法都可以接收两个参数:在每一项都调用的函数和可选的作为归并基础的初始值。
参数函数接收4个参数:前一项值,当前项值,项的位置,数组本身

var values = [1,2,3,4,5];var sum = values.reduce(function(prev, cur, index, array) {return prev + cur;});alert(sum); //15
原创粉丝点击