IsYang's Blog

生于忧患，死于安乐。

Array数组总结

• 分类: JavaScript • 标签: JavaScript高级程序设计

Object类型

创建Object实例的方式：

  • 方式一：使用new操作符后跟Object构造函数

    1
    2
    3
    4
    var obj = new Object();
    // 或者 var obj = {};
    obj.name = "IsYang";
    obj.age = 18

  • 方式二：使用对象字面量表示法

    1
    2
    3
    4
    var obj = {
        name : "IsYang"，
        age : 18
    }

Array类型

创建数组的基本方式：

  • 方式一：使用Array构造函数

    1
    2
    var arr = new Array();
    // 或者省略new  var obj = Array();

  • 方式二：使用数组字面法表示法

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

数组的长度length属性不是只读的，因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。

1
2
3
4
5
var arrColor = ["red","blue","green"];
arrColor.length = 2; 
alert(arrColor[2]);  //undefined  总共有三个值，将其设置为2会移除最后一项
//（位置为2的那一项，ps：数组从0开始，长度从1开始）
arrColor[arrColor.length] = "black";  	//（在位置3）添加一种颜色

检测数组

确定某个对象是不是数组

1
2
3
4
// 用于只有一个全局执行环境时
if(value instanceof Array){
	//执行某些操作
}

1
2
3
4
// 用于多个全局执行环境时
if(Array.isArray(value)){
	//执行某些操作
}

转换方法

数组继承的toLocaleString()、toString()和valueOf()方法，在默认情况下都会以逗号分隔字符串的形式返回数组项。

使用join()方法，则可以使用不同的分隔符来构建这个字符串。

1
2
var arrColor = ["red","blue","green"];
arrColor.join("||");  //只接收一个参数  red||blue||green

栈方法

push() 向数组的末尾添加一个或多个元素，并返回新的长度。
pop() 删除数组的最后一个元素并返回删除的元素。

1
2
3
4
5
6
7
8
9
10
var arrColor = ["red"];
var count = arrColor.push("blue"); // red, blue
// 等价于
// arrColor[2] = "blue";
// 等价于
//arrColor[arrColor.length] = "blue";
var item = arrColor.pop(); //取得最后一项
alert(item) //删除blue
alert(arrColor.length) //1

队列方法

shift() 移除数组中的第一项
unshift() 数组前端添加任意个项

1
2
3
4
5
6
var arrColor = ["red"];
var count = arrColor.unshift("blue"); // blue, red
var item = arrColor.shift(); //取得第一项
alert(item) //删除blue
alert(arrColor.length) //1

重排序方法

reverse() 反转数组项的顺序

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

sort() 比较字符串的大小（需要接收一个比较函数作为参数）

比较函数方法一：

1
2
3
4
5
6
7
8
9
function compare(value1,value2){
	if(value1 < value2){
		return -1; //升序，若降序 return 1;
	}else if(value1 > value2){
		return 1; //升序，若降序 return -1;
	}else{
		return 0;
	}
}

比较函数方法二：

1
2
3
function compare(value1,value2){
	return value2 - value1;
}

接收比较函数

1
2
3
var count = [0,1,2,6,4];
count.sort(commpare);
alert(count); //0,1,2,4,6

操作方法

concat() 连接两个或更多的数组，并返回结果

1
2
3
var value = ["Is"];
var value2 = value.concat("Yang",["good","and","nice"]);
alert(value2); // Is,Yang,good,and,nice

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

语法：slice(起始位置，结束位置)

1
2
3
var colors = ["red","green","blue","yellow"];
var colors2 = colors.slice(1); //green, blue, yellow
var colors3 = colors.slice(1,3); //green, blue

负数例如：包含5项的数组上， slice(-2,-1)等价于(3,4)

splice()从数组中添加或删除元素

  • 删除：splice(起始位置，删除的项数)

  • 插入：splice(起始位置,0（要删除的项数）,插入的项)

  • 替换：splice(起始位置，删除的项数，插入的任意数量)

1
2
3
4
5
6
7
8
9
10
11
var colors = ["red","green","blue"];
var removed = colors.splice(0,1); //删除第一项
alert(colors); //green,blue
alert(removed); //red
removed = colors.splice(1, 0, "yellow", "orange"); //从位置1开始插入两项
alert(colors); //green, yellow,orange, blue
removed = colors.splice(1, 1, "red", "purple"); //插入两项，删除一项
alert(colors); //green,red, purple, orange, blue
alert(removed); //yellow,返回删除的值只包含一项

位置方法

indexOf() 搜索数组中的元素，并返回它所在的位置。
indexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

接收的两个参数（要查找的项，（可选的）表示查找起点位置的索引）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
var person = {name: "Nicholas"};
var people = [{name: "Nicholas"}];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person));  //0

迭代方法

每个方法都接收两个参数：（要在每一项上运行的函数，（可选的）运行该函数的作用域对象–影响this的值）;
传入这些方法中的函数会接收三个参数：（数组项的值，该项在数组中的位置，数组对象本身）

  • every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true
  • filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。
  • forEach()：对数组中的每一项运行给定函数。该方法没有返回值
  • map()： 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
  • some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true,则返回true。
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 numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
	return (item > 2);
});
alert(everyResult);  //false
var someResult = numbers.some(function(item, index, array){
	return (item > 2);
});
alert(someResult);  //true
var filterResult = numbers.filter(function(item, index, array){
	return (item > 2);
});
alert(filterResult);  //[3,4,5,4,3]
var mapResult = numbers.map(function(item, index, array){
	return item * 2;
});
alert(mapResult);  //[2,4,6,8,10,8,6,4,2]
numbers.forEach(function(item, index, array){
	//执行某些操作
});

归并方法

两个归并数组的方法：reduce() 和 reduceRight()，执行数组中所有值之和的操作。
reduce()方法从数组的第一项开始，逐个遍历到最后。
reduceRight()方法从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：（在每一项上调用的函数，（可选的）作为归并基础的初始值）。
传个reduce()和reduceRight()的函数接收4个参数：（前一个值，当前值，项的索引，数组对象）。
第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。

1
2
3
4
5
6
7
8
9
10
11
12
13
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
	return prev + cur;
});
alert(sum); //15
//等价，只不过方向相反执行而已
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev,cur,index,array){
	return prev + cur;
});
alert(sum); //15