跳转至

3.集合类型

3.1 数组

ECMAScript数组的每一项可以保存任何类型的数据,而且,数组的大小是可以动态调整的,可以随着数据的添加自动增加。

3.1.1 创建数组

创建数组的基本方式有两种。

  • 第一种是使用Array构造函数。
var colors = new Array();
//给构造函数 传递 数组中应该包含的项目
var colors =new Array("red","blue","green");
1
2
3
//使用 Array构造函数时也可以省略new操作符
var colors =Array("red","blue","green");
alert(colors[0]); // red
1
2
3
4
5
// 给构造函数传递一个参数时,如果传递的是数值,则会按照该数值创建包含给定项数的数组;
// 如果传递的是其他类型的参数,则会创建包含那个值的只有一项的数组
//给构造函数传递一个数值设置数组的长度
var colors = new Array(10);
alert(colors.length) // 10
  • 第二种是使用数组字面量表示法
1
2
3
4
5
var colors = ["red","blue","green"]; //创建一个包含3个字符串的数组
var names = [];// 创建一个空数组
//在IE中,values会成为一个包含3个项目,每项的值分别是1,2和undefined的数组.
//其他浏览器中,values会成为一个包含2项值分别为1,2
var values = [1,2,];

读取和设置数组的值。

1
2
3
4
5
var colors = ["red","blue","green"];
alert(colors[0]); // 显示第一项 red
colors[2] = "black"; // 修改第三项
colors[3] = "brown";// 新增第四项
alert(colors[2]); // black

3.1.2 length属性

数组的length属性是可写的。。所以通过这个属性,可以从末尾移除项或向数组中添加新项。

1
2
3
4
5
var colors = ["red","blue","green"];
colors.length = 5; 
alert(colors); // red,blue,green,,
colors.length = 2; //设置length属性是2,会移除最后一项
alert(colors[2]); // undefined
1
2
3
4
//当把一个值放在超过当前数组大小的位置上,数组会重新计算长度,长度值等于最后一项的索引加1
var colors = ["red","blue","green"];
colors[99] = "black";
alert(colors.length);// 100

3.1.3 常用方法

isArray方法判断某个值是不是数组。

var colors = ["red","blue","green"];
alert(Array.isArray(colors));// true

数组继承的toLocaleString()toString()valueOf()方法,在默认情况下都会以逗号分隔的字符串的形式返回数组项。而如果使用join()方法,则可以使用不同的分隔符来创建这个字符串。

1
2
3
4
5
var colors = ["red","blue","green"];
alert(colors.toLocaleString()); //red,blue,green
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors.join("||")); //red||blue||green

push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。pop()方法则从数组末尾移除最后一项,然后返回移除的项。

1
2
3
4
5
var colors = ["red","blue","green"];
var count = colors.push("black");
alert(count); // 4
var item = colors.pop();
alert(item); // black

shift()方法能够移除数组中的第一项并返回该项,同时将数组长度减1。unshift()能在数组前端添加任意个项并返回新数组的长度。

1
2
3
4
5
var colors = ["red", "blue", "green"];
var item = colors.shift();
alert(item); // red
var count = colors.unshift("black", "pink");
alert(count); // 4

reverse()方法会反转数组项的顺序。

var colors = ["red", "blue", "green"];
alert(colors.reverse()); // green,blue,red

sort()对数组进行排序。默认情况下,sort()方法会调用每个数组项的toString()方法,然后比较得到的字符串,然后按升序排列数组项。即使数组中的每一项都是数值,sort()方法比较的也是字符串。

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

sort()方法可以接收一个比较函数作为参数,可以自定义排序规则。

1
2
3
4
5
6
function compare(value1,value2){
    return value1 - value2;
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values); // 0,1,5,10,15

concat()方法会创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本。如果传递给concat()方法的是一或者多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。

1
2
3
4
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); // red,green,blue 
alert(colors2) //red,green,blue,yellow,black,brown

slice()能够基于当前数组中的一或多个项创建一个新数组。

1
2
3
4
5
6
7
var colors = ["red","green","blue","yellow","purple"];
// 只有一个参数的情况下,slice()方法返回从该参数指定位置开始到到当前数组末尾的所有项目.
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors); // red,green,blue,yellow,purple
alert(colors2); // green,blue,yellow,purple
alert(colors3); // green,blue,yellow

splice()方法第一个参数为起始位置,第二个参数要删除的项数,第二个之后的参数为要插入的项,插入的项数可以是任意多个项。splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项。

1
2
3
4
5
6
var colors = ["red","green","blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red
removed = colors.splice(0,2,"yellow","orange");
alert(removed); // green,blue

indexOf()方法从数组的开头开始查找,lastIndexOf()方法从数组的末尾开始向前查找。两个方法都返回要查找的项在数组中的位置,在没有找到的情况下返回-1。

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); // 3
alert(numbers.lastIndexOf(4)); // 5
alert(numbers.indexOf(4,4)); // 5
alert(numbers.lastIndexOf(4,4)); //3

every()方法对数组中每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.every(function(item,index,array){
    return (item>2);
});
alert(result); // false

some()方法对数组中每一项运行给定函数,如果该函数对任意一项返回true,则返回true。

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.some(function(item,index,array){
    return (item>2);
});
alert(result); // true

filter()方法对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

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

map()对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.map(function(item,index,array){
    return item * 2;
});
alert(result); // 2,4,6,8,10,8,6,4,2

forEach()方法遍历数组。

1
2
3
4
var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.forEach(function(item,index,array){
   alert(item*2);
});

reduce()方法

1
2
3
4
5
6
7
// 第一次执行 prev 是1 cur是2
// 第二次 prev 是3 (1+2) cur 是3
var numbers = [1,2,3,4,5];
var result = numbers.reduce(function(prev,cur,index,array){
    return prev + cur
});
alert(result); // 15

3.2 Map

Map是一组键值对的结构。

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
console.log(m.get('Michael')); //95

初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:

1
2
3
4
5
6
7
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值覆盖掉:

1
2
3
4
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

3.3 Set

Set是一个存储不重复数据的集合。

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

Set具有以下方法:

1
2
3
4
5
var s = new Set([1,2,3]);
s.add(4); //添加元素
console.log(s); //Set(4) {1, 2, 3, 4}
s.delete(3); //删除元素
console.log(s); // Set(3) {1, 2, 4}