【javascript】Array 常用方法

---

一、创建数组

创建空数组

// 创建一个空数组
var arr1= new Array();		// new 一个空数组
var arr2 = new Array(20);	// 创建数组，包含20个初始空间，默认值 undefined
var arr3 = new Array('red', 'blue', 'green');	// 创建数组，并初始化

var arr4 = [];				// 通过字面量创建
var arr5 = ['red', 'blue', 'green'];	// 初始化
1
2
3
4
5
6
7

不推荐做法

var arr1 = [1, 2, ];	// 会创建包含2或3项的元素，不推荐这样做
var arr2 = [, , , ,];	// 会包含4或5项元素，不推荐这样做
1
2

对于上述 arr1，在 IE 中，arr1 会成为一个包含 3 个项且每项的值分别为 1、2 和 undefined 的数组；在其他浏览器中，values 会成为一个包含 2 项且值分别为1 和 2 的数组
而 arr2 ，前面4项元素都为 undefined

---

二、访问数组

javascript 中，访问数组可以通过方括号访问。但与其它语言不同的是，当索引越界时，不会报错，会返回 undefined

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

javascript 与其它语言还有一个区别，数组的 length 属性不是只读的
当给 length 属性赋值更小时，数组后面的元素会被删除；更大时，自动添加 undefined

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

---

三、检测数组

可以通过以下两种方式检测一个 object 是不是 Array 类型

if (obj instanceof Array) {
	...
}

if (Array.isArray(obj)) {
	...
}
1
2
3
4
5
6
7

---

四、栈方法

js 提供了 push和 pop两个方法用于栈的行为

var arr = [];
arr.push(1);	// [1]
arr.push(2);	// [1, 2]
var item = arr.pop();	// item = 2, arr = [1]
1
2
3
4

五、队列方法

js 提供了 shift和 unshift两个方法用于队列
shift 从首部取出，unshift 从首部添加

shift 搭配 push 可以实现队列，尾进首出
unshift 搭配 pop 可以实现反向队列，首进尾出

// shift 和 push
var arr = [];
arr.push(1);	// [1]
arr.push(2);	// [1,2]
var item = arr.shift();	// item = 1, arr = [2]

// unshift 和 pop
var arr1 = [];
arr1.unshift(1);	// [1]
arr1.unshift(2);	// [2, 1]
var item1 = arr.pop();	 // item1 = 1, arr = [2]
1
2
3
4
5
6
7
8
9
10
11

---

六、重排序方法

reverse 和 sort
reverse 方法用于翻转数组，不再赘述。本节主要讲 sort 方法

sort 方法用于给数组排序，默认情况下，小的在前面，大的在后面。但默认情况下，sort 方法会调用每个数组项的 toString 方法，比较字符串

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

比较字符串的第一个字母，若相等，继续比较，1打头的永远在9打头的前面，因为 sort 认为1比9小，哪怕是100也会认为比99小，因为比较的不是数字，而是字符串。如果是英文，则比较 ascii 码。

若想给数字排序，则需要传入 compare 比较函数
传入 value1, value2。若返回值为负数，则 value1 在前，value2 在后

var arr  = [0, 1, 5, 15, 10];
// 假如我们想从小到大排序
arr.sort(function compare(value1, value2) {
	if (value1 < value2) {	// value1 比 value2 小，value1 前，应返回负数
		return -1;
	} else {
		return 1;
	}
});
console.log(arr);	// [ 0, 1, 5, 10, 15 ]
// 从大到小
arr.sort(function compare(value1, value2) {
	if (value1 < value2) {
		return 1;
	} else {
		return -1;
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上述代码可以优化

arr.sort(function compare(value1, value2) {	// 从小到大
	return value1 - value2;	// value1 小，差为负数，value1在前，小的在前
});
1
2
3

---

七、操作方法

slice，concat，splice

concat 方法传入多个对象，如果是元素，追加到数组后，如果是数组，把数组里面的元素追加到数组后

// concat
var arr = [1];
arr.concat(2, [3, 4]);	// [1, 2, 3, 4]
1
2
3

slice(a[, b]) 截取数组从索引 a 到 索引 b 的片断，但不包含b 。如果 b 省略，默认截取到最后

var arr = [1,2,3,4,5];
var arr1 = arr.slice(1, 4);	// arr1 = [2, 3, 4]
var arr2 = arr.slice(2);	// arr2 = [3, 4, 5]
1
2
3

splice(a, b[, args...]) 从 索引a 开始，删除 b 个元素，并把 args 添加到索引 a 的位置。该方法可以实现删除、插入、替换操作

var arr = [1,2,3,4,5];
var a = arr.splice(0, 1);	// a = 1, arr = [2, 3, 4, 5]
arr.splice(0, 0, 1);	// 删除0个，在0的位置添加1，arr = [1,2,3,4,5]
var b = arr.splice(1, 2, 3, 4, 5);	// 从索引 1 开始，删除2个，把3，4, 5插入到该位置
// b = [2, 3], arr = [1, 3, 4, 5, 4, 5];
1
2
3
4
5

---

八、位置方法

js 提供 indexOf 和 lastIndexOf 查询元素索引，一个从头开始查，一个从尾开始查。还可以指定开始参数，表示从某个索引开始查起

var arr = [1,2,3,4,5,4,3,2,1];
var index1 = arr.indexOf(2);	// index1 = 1
var index2 = arr.lastIndexOf(2);	// index2 = 7
var index3 = arr.indexOf(2, 2);		// index3 = 7;
1
2
3
4

---

九、迭代方法

js 提供了以下五个迭代方法。在迭代方法中，传入的函数参数均为
item, index, array
元素，索引，数组

var number = [1,2,3,4,5,4,3,2,1];
var statu = number.every(
    function(item, index, array) {
        return item > 2;
    }
)
console.log(statu);		// false

statu = number.some(
    function(item, index, array) {
        return item > 2;
    }
)
console.log(statu);		// true

var brr = number.filter(
    function(item, index, array) {
        return item > 2;
    }
)
console.log(brr);		// [ 3, 4, 5, 4, 3 ]

var crr = number.map(
    function(item, index, array) {
        return item * 2;
    }
)   
console.log(crr);		// [2, 4, 6, 8, 10, 8, 6, 4, 2]

number.forEach(function(item, index, array) {
	console.log(item);
});		// 输出数组每个元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---

十、归并方法

js 中提供了 reduce 和 reduceRight 两个方法迭代所有项，并构建最终的返回值
reduce 从左向右，reduceRight 从右向左

传入函数参数：
prev, cur, index, array
上一个函数的累计和，当前值，索引，数组

// 利用 reduce 给数组求和
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(prev, cur, index, array) {
	return prev + cur;
});	// sum = 15
// 利用 reduceRight 求数组元素的积
var multi = arr.reduceRight(function(prev, cur, index, array) {
	return prev * cur;
});	// multi = 120
1
2
3
4
5
6
7
8
9

注意，arr 中有5个元素，只会运行 4 次。为了保证每次运行都有 prev，第一次运行时，prev = 1, cur = 2，最后一次运行时 cur = 5。所以只会运行 arr.length - 1 次