Array类型是除了Object类型之外最常用的类型,因此必须要掌握它的方法
1.创建数组
(1)使用Array构造函数
var arr = new Array(); // 空数组
var arr = new Array(5); // 数组的长度为5
var arr = new Array(2, 1, 3, 5, 4);
二维数组的创建
var arr = new Array();
for (var i = 0; i < 5; i++) {
arr[i] = new Array();
for (var j = 0; j < 5; j++) {
arr[i][j] = i+j;
}
}
也可以省略new,如下所示
var arr = Array(); // 空数组
var arr = Array(5); // 数组的长度为5
var arr = Array(2, 1, 3, 5, 4);
(2)使用字面量
var arr = []; // 空数组
var arr = [2, 1, 3, 5, 4];
2.检测数组
有时候需要检测一个元素是否为数组,检测数组的方法有以下两种
(1)instanceof
if (value instanceof Array) {
// 对数组执行某些操作
}
(2)isArray()
if (Array.isArray(value)) {
// 对数组执行某些操作
}
注:支持Array.isArray()方法的浏览器有IE9+、FireFox4+、Safari5+、Opera10.5+、Chrome
3.数组的转换
(1)toString()
该方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
var arr = [2, 1, 3, 5, 4];
console.log(arr.toString()); //2,1,3,5,4
(2)valueOf()
该方法会返回由数组中每个值的字符串形式组成的数组
var arr = [2, 1, 3, 5, 4];
console.log(arr.valueOf()); // [2, 1, 3, 4, 5]
(3)toLocalString()
该方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
var arr = [2, 1, 3, 5, 4];
console.log(arr.toLocalString()); // 2,1,3,5,4
console.log(arr); // [2, 1, 3, 5, 4]
4.栈方法
栈是一种先出先出的数据结构,在C语言中,栈是基本的数据结构。ECMAScript中虽然没有栈这种数据结构,但却专门为数组提供了push()和pop()方法,以便实现类似栈的行为
(1)push()
接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
var arr = [2, 1, 3, 5, 4];
var result = arr.push(6);
console.log(arr, result);
(2)pop()
从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
var arr = [2, 1, 3, 5, 4];
var result = arr.pop();
console.log(arr, result);
5.队列方法
队列是一种先进先出的数据结构。在C语言中,栈是基本的数据结构。ECMAScript中虽然没有队列这种数据结构,但却专门为数组提供了shift()和unshift()方法,以便实现类似队列的行为
(1)shift()
移除数组中的第一个项并返回该项,同时数组长度减1
var arr = [2, 1, 3, 5, 4];
var result = arr.shift();
console.log(arr, result);
(2)unshift()
在数组前端添加任意个项并返回新数组的长度
var arr = [2, 1, 3, 5, 4];
var result = arr.unshift(6);
console.log(arr, result);
6.重排序方法
(1)reverse()
数组倒置
var arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]
(2)sort()
按升序排列数组项
var arr = [2, 1, 3, 5, 4];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串。即使数组中的每一项都是数值,sort()方法比较的也是字符串,例如:
var arr = [0, 1, 5 , 10, 15];
arr.sort();
console.log(arr); // [0, 1, 10, 15, 5]
虽然5小于10,但是在进行字符串比较时,字符串”10”位于字符串”5”的前面,于是就有了上面的结果,那么怎解决这一问题呢?解决方案如下:
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var arr = [0, 1, 5 , 10, 15];
arr.sort(compare);
console.log(arr); // [0, 1, 5, 10, 15]
7.操作方法
(1)concat()
创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构造的数组
var arr = [2, 1, 3, 5, 4];
var result = arr.concat(6, 8, 7);
console.log(result); // [2, 1, 3, 5, 4, 6, 8 7]
console.log(arr); // [2, 1, 3, 5, 4]
如果传递给concat方法的是一个或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中,如果传递的不是数组,这些值就会被简单地添加到结果数组的末尾
var arr = [2, 1, 3, 5, 4];
var result = arr.concat(6, [8, 7]);
console.log(result); // [2, 1, 3, 5, 4, 6, 8 7]
console.log(arr); // [2, 1, 3, 5, 4]
(2)slice()
能基于当前数组中的一或多个项创建一个新数组
slice()方法可以接收一或两个参数,即要返回项的起始和结束位置。只有一个参数时,该方法返回从该参数指定位置开始到当前数组末尾的所有项,当有两个参数时,该方法返回起始和结束位置之间的项——但不包括结束位置的项
var arr = [2, 1, 3, 5, 4];
var result1 = arr.slice(1, 4);
var result2 = arr.slice(1);
console.log(result1, result2); // [1, 3, 5] [1, 3, 5, 4]
var result3 = arr.slice(-4, -1);
console.log(result3); // [1, 3, 5]
console.log(arr); // [2, 1, 3, 5, 4]
注:slice方法不会影响原始数组
(3)splice()
splice()的主要用途是向数组的中部插入项,但使用这种方法的方式有如下三种:
插入:可以向指定位置插入任意数量的项,只需提供三个参数:起始位置、0(要删除的项数)
删除:可以删除任意数量的项,只需指定两个参数:要删除的第一项的位置和要删除的项数
替换:可以向指定位置插入任意数量的项,同时删除任意数量的项,只需指定三个参数:起始位置、要删除的项数和要插入地任意数量的项。插入的项数不必与删除的项数相等
// 插入
var arr = [2, 1, 3, 5, 4];
var remove = arr.splice(0, 0, 6);
console.log(arr); // [6, 2, 1, 3, 5, 4]
console.log(remove); // 空数组
// 删除
var arr = [2, 1, 3, 5, 4];
var remove = arr.splice(0, 1);
console.log(arr); // [1, 3, 5, 4]
console.log(remove); // [2]
// 替换
var arr = [2, 1, 3, 5, 4];
var remove = arr.splice(2, 1 , 8);
console.log(arr); // [1, 2, 8, 7, 5, 4]
console.log(remove); // 3
8.位置方法
indexOf()
从数组的开头开始向后查找,返回要查找的项在数组中的位置,或者在没找到的情况下返回-1
该方法接收两个参数:要查找的项(可选)和表示查找起点位置的索引
var arr = [2, 1, 3 , 5, 4];
console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(3, 2)); // 2
console.log(arr.indexOf(3, 3)); // -1
lastIndexOf()
从数组的末尾开始向前查找,返回要查找的项在数组中的位置,或者在没找到的情况下返回-1
该方法接收两个参数:要查找的项(可选)和表示查找起点位置的索引
var arr = [2, 1, 3 , 5, 4];
console.log(arr.lastIndexOf(3)); // 2
console.log(arr.lastIndexOf(3, 3)); // 2
console.log(arr.lastIndexOf(3, 2)); // -1
9.迭代方法
ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数(可选的)运行该函数的作用域对象。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身
(1)every()
对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true,否则,返回false
var arr = [2, 1, 3, 5, 4];
var everyResult = arr.every(function (item, index, array) {
return (item > 2);
});
console.log(everyResult ); // false
(2)some()
对数组中的每一项运行给定函数,如果该函数对任一项都返回true,则返回true
var arr = [2, 1, 3, 5, 4];
var someResult = arr.some(function (item, index, array) {
return (item > 2);
});
console.log(someResult); // true
(3)filter()
对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
var arr = [2, 1, 3, 5, 4];
var filterResult = arr.filter(function (item, index, array) {
return (item > 2);
});
console.log(filterResult); // [3, 5, 4]
(4)map()
对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
var arr = [2, 1, 3, 5, 4];
var mapResult = arr.map(function (item, index, array) {
return item * 2;
});
console.log(mapResult); // [4, 2, 6, 10, 8]
(5)forEach()
对数组中的每一项运行给定函数
注:这个方法没有返回值
var arr = [2, 1, 3, 5, 4];
arr.forEach(function (item, index, array) {
// 执行某些操作
});
支持这些迭代方法的浏览器有IE9+、FireFox2+、Safari3+、Opera9.5+、Chrome
10.归并方法
reduce()
从数组的第一项开始,逐个遍历到最后。其中,reduce接受四个参数:前一个值、当前值、项的索引、数组对象
由于函数的返回值会作为第一个参数自动传给下一项,所以可以使用reduce()方法执行数组求和
var arr = [2, 1, 3, 5, 4];
var sum = arr.reduce(function (prev, cur, index, array) {
return prev + cur;
});
console.log(sum); // 15
reduceRight()
从数组的最后一项开始,向前遍历到第一项。其中,reduceRight接受四个参数:前一个值、当前值、项的索引、数组对象
同样的,reduceRight也可以执行数组求和操作,只是是从后向前加
var arr = [2, 1, 3, 5, 4];
var sum = arr.reduceRight(function (prev, cur, index, array) {
return prev + cur;
});
console.log(sum); // 15
参考文献:《JavaScript高级程序设计》(第三版)
(完)