js的引用类型之Array类型

概念

js的数组的每一项可以保存任何类型的数据;数组大小也是可以动态调整的。

创建数组的方式

Array构造函数

1
2
3
4
var colors = new Array('red','blue');

//也可以省略new
//var colors = Array('red','blue');

数组字面量表示法

1
var colors = ['red','blue'];
1
2
var arr1 = new Array();
var arr2 = [1,2,3,'赵',new Date()];

length

利用length删除数组项

1
2
3
4
5
6
7
var arr = [1,2,3,4];
console.log(arr[2]);
arr.length = 2;
console.log(arr[2]);

//输出3
//输出undefined

利用length增加数组项

1
2
3
4
var arr = ['red','black'];
arr[arr.length] = 'orange';
arr[arr.length] = 'blue';
console.log(arr);//["red", "black", "orange", "blue"]

检测数组是否是数组

  1. instanceof
  2. isArray (ECMAScript5)
  3. 自定义

第一个方法必须在有且只有一个全局执行环境下有效,如果网页中又多个框架,则会失效。

第二个是ECMAScript5中新添的方法,支持多个框架下使用,弥补第一种的缺陷。支持i9+,firefox4+,safari5+,opera10.5+和chrome

在不支持第二个方法的情况下,采用自定义函数如下

1
2
3
4
//可以在ie8下检测多框架下的数组是否是数组
function isArray(value) {
return Object.prototype.toString.call(value) == "[object Array]";
}

数组转换方法

toLocaleString() | toString() | valueOf()

调用数组的toString()方法返回数组中的项以字符串和逗号拼接起来的字符串

而调用valueOf()返回的还是数组

1
2
3
4
var arr = [1,2,3,4];
console.log(arr.toString());//输出1,2,3,4
console.log(arr.valueOf());//输出[1,2,3,4]
console.log(arr);//输出[1,2,3,4]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var person1 = {
toLocaleString : function () {
return 'jacka';
},
toString : function () {
return "jackb";
}
};

var person2 = {
toLocaleString : function () {
return 'alicea';
},
toString : function () {
return "aliceb";
}
};

var people = [person1,person2];
console.log(people);
//toString对数组里的每一项都调用toString方法
console.log(people.toString());
//toLocaleString对数组里的每一项都调用toLocaleString方法
console.log(people.toLocaleString());

如果数组中的某一项的值是null或者undefined,那么该值在join(),toLocaleString(),toString(),valueOf()方法中返回的结果是空字符串

join

在每个元素之间加入内容;不操作数组本身,返回新字符串

1
2
3
4
5
var arr1 = [1,2,true,4,'good'];
var a = arr1.join('-');
console.log(a);//输出1-2-true-4-good
console.log(typeof a);//输出string
console.log(arr1);//输出[1,2,true,4,'good']

栈方法

push() || pop()

push()方法可以接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。

pop()方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

1
2
3
4
var arr = [1,2];
var b = arr.push(3,4);
console.log(arr);//输出[1,2,3,4]
console.log(b);//输出4

1
2
3
4
var arr = [1,2];
var b = arr.pop();
console.log(arr);//输出[1]
console.log(b);//输出2

队列方法

shift():移除数组中的第一个项并返回该项,同时将数组的长度减1

unshift:在数组前端添加任意个项并返回该新数组的长度

1
2
3
4
var arr = [1,2];
var b = arr.shift();
console.log(arr);//输出[2]
console.log(b);//输出1

1
2
3
4
var arr = [1,2];
var b = arr.unshift(3,4);
console.log(arr);//输出[3,4,1,2]
console.log(b);//输出4

重排序方法

sort:正序排序

reverse:倒序排序,只是集合顺序倒序,无关元素大小

reverse()和sort()方法的返回值是经过排序之后的数组

1
2
3
4
5
6
7
8
9
10
var arr1 = [1,3,10,-2,5,3,0,12];
var arr2 = [1,3,10,-2,5,3,0,12];

var a = arr1.sort();
console.log(a);//输出[-2, 0, 1, 10, 12, 3, 3, 5]
console.log(arr1);//输出[-2, 0, 1, 10, 12, 3, 3, 5]

var b = arr2.reverse();
console.log(b);//输出[12, 0, 3, 5, -2, 10, 3, 1]
console.log(arr2);//输出[12, 0, 3, 5, -2, 10, 3, 1]

sort排序是按照每一位的大小来排序的

从小到大排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr1 = [1,-2,12,13,3,2,0,2,1];
function compare(value1,value2){
if(value1 < value2) {
return -1;
}else if(value1 > value2) {
return 1;
}else{
return 0;
}
}
function compare(value1,value2) {
return value1 - value2;
}
arr1.sort(compare);
console.log(arr1);

操作方法

concat()

先创建当前数组的一个副本,然后将收到的参数添加到这个副本的末尾,最后返回新构建的数组

1
2
3
4
5
6
7
8
9
10
11
12
var a = [1,2,3,4];
var b = a.concat();
console.log(b);//[1,2,3,4]

var c = a.concat("5,6");
console.log(c);// [1, 2, 3, 4, "5,6"]

var d = a.concat([7,8]);
console.log(d);// [1, 2, 3, 4, 7, 8]

var e = a.concat([7,8],9,"[10]");
console.log(e);// [1, 2, 3, 4, 7, 8, 9, "[10]"]

slice()

arr.slice(a,b)

截取[arr[a],arr[b])。如果a > b,那么 返回空数组

1
2
3
4
5
6
7
8
9
var arr = [1,2,3,4,5,6,7];
var a = arr.slice(1);//从arr[1]开始截取,包括arr[1] 截取[arr[1],无穷)
console.log(a);//[2,3,4,5,6,7]

var b = arr.slice(1,3);//截取[arr[1],arr[3])
console.log(b);//[2,3]

var c = arr.slice(-3,-1);//截取[arr[arr.length-3],arr[arr.length-1]) 截取[arr[4],arr[6])
console.log(c);//[5,6]

splice()

删除

返回删除项,改变数组

1
2
3
4
var arr = [0,1,2,3,4,5];
var a = arr.splice(0,2);
console.log(a);//[0,1]
console.log(arr);//[2, 3, 4, 5]

插入和替换

返回截取的数组,改变数组

splice(a,b,c,d,e,f…):

  • a:起始位置
  • b:表示截取的个数
  • c,d,e,f…:表示追加的新元素项的值
    1
    2
    3
    4
    var arr = [1,2,3,4,5];
    var b = arr.splice(1,2,6,7,8);
    console.log(arr);//输出[1,6,7,8,4,5]
    console.log(b);//输出[2,3]

arr[1]开始截取arr[1]arr[2]两个项;插入6,7,8,即[1,6,7,8,4,5];返回arr[1]arr[2]组成的数组

位置方法

indexOf() || lastIndexOf()

查找数组里的项,返回索引值;找不到则返回’-1’

这个查找比较的时候是’===’,绝对等

传一个参数

1
2
3
4
var arr = [1,2,4,5,'我',23,1];
var result = arr.indexOf('我');
console.log(result);//输出4
//'我'从0开始排在第四位

传两个参数

1
2
3
4
var arr = [1,'我',4,5,'我',23,1];
var result = arr.indexOf('我',2);
console.log(result);//输出4
//从第二个开始,即arr[2]开始查找'我'

lastIndexOf

1
2
3
4
var arr = [1,'我',4,5,'我',23,1];
var result = arr.lastIndexOf('我');
console.log(result);//输出4
//从最后开始,开始查找'我'

1
2
3
4
var arr = [1,'我',4,5,'我',23,1];
var result = arr.lastIndexOf('我',1);
console.log(result);//输出1
//从arr[1]开始向前开始寻找

迭代方法

every some

every()

对数组的每一项根据传入的函数进行运行,如果返回true,则返回true;若有一个错误,则最后结果就是false

1
2
3
4
5
6
7
8
9
var arr = [1,2];
var result = arr.every(function(item,index,array){
//item:当前元素的值
//index:当前元素的索引值
//array:当前元素所属的数组
return item > 2;
});
console.log(result);//输出false
//因为有1,2都不大于2

some与之相反,有一个true则返回true;都返回false才返回false

filter

对数组的每一个元素进行一个函数运行,把过滤的结果返回

1
2
3
4
5
6
7
8
var arr = [1,2];
var result = arr.filter(function(item,index,array){
//item:当前元素的值
//index:当前元素的索引值
//array:当前元素所属的数组
return item > 1;
});
console.log(result);//输出[2]

forEach

循环数组每一项的值,并执行一个方法

只适合遍历一维数组

1
2
3
4
var arr = [1,2,3,4,5];
arr.forEach(function(item,index,array){
console.log(item);
});

map

对数组的每一个元素进行一个函数运行,把新的结果返回

1
2
3
4
5
var arr = [1,2,3,'我'];
var result = arr.map(function(item,index,array){
return item*2;
});
console.log(result);//[2, 4, 6, NaN]

归并方法

reduce(函数,可选的初始开始值) || reduceRight

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr = [1,2,3,4];
var result = arr.reduce(function(prev,cur,index,array){
//prev:前一个值
//cur:当前值
//index:索引值
//array:数组
return prev + cur;
});
console.log(result);//输出10
//遍历到1 没有前一个值
//遍历到2 前一个值prev=1,cur=2;---3
//遍历到3 前一个值prev=3,cur=3;---6
//遍历到4 前一个值prev=6,cur=4;----10

reduceRight就是从右边开始遍历

数组方法总结

数组的方法 类别 传参个数 第一个参数 第二个参数 第三个参数 是否影响原数组 是否ECMAScript5
instanceof 检测数组
toLocaleString() toString() ValueOf() 转换方法
push() 栈方法 任意数量
pop() 栈方法
shift() 队列方法
unshift() 队列方法 任意数量
reverse() sort() 重排序方法
concat() 操作方法 任意
slice() 操作方法 两个 起始位置 结束位置(可选)
splice() 操作方法 三个以上 初始位置 要删除的项数 替代的数组
indexOf() lastIndexOf() 位置方法 两个 要查找的项 查找起点位置(可选)
every() filter() forEach() map() some() 迭代方法 两个 在每一项上运行的函数 运行该函数的作用域对象(可选)
reduce() reduceRight() 归并方法 两个 在每一项上运行的函数 作为归并基础的初始值(可选)