首页手记 JavaScript数组

JavaScript数组

标签：

JavaScript

JavaScript数组的应用应该都比较熟悉了。先上一张神图，转自右下角大神。

forEach，map，filter
some，every
reduce，reduceRight
slice，splice
indexOf，lastIndexOf
sort
类数组对象

forEach，map，filter

forEach遍历数组，函数声明：[].forEach( function(value, index, array) { … }, [thisArg] );。参照MDN

第一个参数是回调函数，它支持3个参数，第1个是遍历的数组内容，第2个是对应索引，第3个是数组自身。

第二个参数thisArg可选，可用于以改变回调函数里面的this指针

因为forEach是第一个被介绍的数组方法，所以稍微详细点用console.log看一下回调函数的3个参数。（之后的数组方法有兴趣的可以自己用console.log看一下回调函数，不赘述）

[1, 2 ,3, 4].forEach(console.log);// 1, 0, [1, 2, 3, 4]// 2, 1, [1, 2, 3, 4]// 3, 2, [1, 2, 3, 4]// 4, 3, [1, 2, 3, 4]

上面已经清晰地展现了遍历的结果，第一列是value，第二列是对应的index值，第三列是数组本身。

现在用forEach实现数组求和：

var price = 0;
[1.2, 2.4, 0.6, 7].forEach(function (value) {
    price += value;
});console.log(price);     //11.2

相比for循环，上述代码除了更简单外，还避免了常见的for循环的起始，终止条件越界等错误。对于数组遍历来说，forEach和map是优于for循环的。

现在看看第二个参数thisArgs的作用，如果不指定该参数，回调函数内的this指向的是window（关于this可以参照这里），例如上例中的回调函数里，你可以写成this.price += value;，效果是一样的（当然前提是变量确实是window的全局属性）。但有时this指向window就不对了，如下：

var group = {    members: ["Jack", "Andy", "Natasha"],    joinParty: "Yes",    getInfo: function (m) {        this.isJoinParty(m);        console.log(m + " " + this.joinParty);
    },    isJoinParty: function (m) {        switch(m) {        case "Andy" :            this.joinParty = "No";            break;        default:            this.joinParty = "Yes";            break;
        }
    }
};
group.members.forEach(group.getInfo);

代码很简单，小组内3人，Andy不参加聚会，另两人参加聚会。期望把统计结果打印出来。但很遗憾上面代码会报Error。按理说getInfo函数里的this应该指向group对象，但遗憾地是getInfo作为[].forEach的回调函数时相当于普通函数，因此getInfo里的this指向的是window。而window对象里显然不存在isJoinParty。

因此正确的调用方式是，添加第二个参数，明确指定this的绑定对象：

group.members.forEach(group.getInfo, group);//Jack Yes//Andy No//Natasha Yes

map映射创建新数组，函数声明：[].map( function(value, index, array) { … }, [thisArg] );。和forEach一样，不赘述。唯一需要注意的的是回调函数需要有return值，否则新数组都是undefined。

其实map能干的事forEach都能干，你可以把map理解为forEach的一个特例，专门用于：通过现有的数组建立新数组。例如将旧数组中字符串都trim一下，去除空格后生成新数组：

var trimmed = ['    Jack','Betty    ','    Chirs    '].map(function(s) {    return s.trim();    //需要return值，否则新数组里都是undefined});console.log(trimmed);    //["Jack", "Betty", "Chirs"]

在没有map之前是通过forEach来创建新数组的。你需要先定义一个空数组，再将每次trim后的字符串push到新数组内，比较麻烦。因为“通过现有的数组建立新数组”这个需求是如此的普遍，因此ES5中干脆追加了map方法，相比forEach代码简单优雅多了。

filter用于过滤数组，函数声明：[].filter( function(value, index, array) { … }, [thisArg] );。和forEach一样，不赘述。唯一需要注意的的是回调函数需要return布尔值true或false，如果忘记写return语句，返回得到的是空数组，表示一个都不匹配。例如：

var newArray = [0, 1, 2].filter(function(value) {});console.log(newArray);      //[]，没有return语句得到的是空数组//过滤出不超过10的正数var newArray2 = [0, 1, 2, 14].filter(function(value) {    return value > 0 && value <= 10;
});console.log(newArray2);   //[1, 2]

some，every

some表示只要某一个满足条件就OK，every表示全部满足条件才OK。

some的函数声明：[].some( function(value, index, array) { … }, [thisArg] );

every的函数声明：[].every( function(value, index, array) { … }, [thisArg] );

参照MDN。其实都和上面的forEach一样，不赘述。唯一需要注意的的是回调函数需要return布尔值true或false，如果忘记写return语句，表示不满足条件，返回false

[1, 10, 100].some(function(x) { x > 5; });      //false，忘记写return了[1, 2, 3, 4, 5].every(function(x) { x > 0; });  //false，忘记写return了[1, 10, 100].some(function(x) { return x > 5; });   // true[1, 10, 100].some(function(x) { return x < 0; });   // false [1, 2, 3, 4, 5].every(function(x) { return x > 0; });   // true[1, 2, 3, 4, 5].every(function(x) { return x < 3; });   // false

reduce，reduceRight

两者都是用于迭代运算。区别是reduce从头开始迭代，reduceRight从尾开始迭代。

reduce的函数声明：[].reduce( function(previousValue, currentValue, currentIndex, array) { … }, [initialValue] );

第一个参数是回调函数，有4个参数：previousValue，currentValue，currentIndex，array。看名字也能知道意思：前一个值，当前值，当前索引，数组本身。

第二个参数initialValue可选，表示初始值。如果省略，初始值为数组的第一个元素，这样的话回调函数里previousValue就是第一个元素，currentValue是第二个元素。因此不设initialValue的话，会少一次迭代。例如：

var sum = [1, 2, 3, 4].reduce(function (previous, current) {    return previous + current;
});console.log(sum);    //10//给它加上initialValue初始值10var sum2 = [1, 2, 3, 4].reduce(function (previous, current) {    return previous + current;
}, 10);console.log(sum2);    //20

上图清楚地表明了各个运算步骤，很容易理解。如果不设initialValue，会少一次迭代。

reduceRight的函数声明：[].reduceRight( function(previousValue, currentValue, currentIndex, array) { … }, [initialValue] );。和reduce一样，不赘述

用reduce和reduceRight很容易就能实现二维数组扁平化，如下：

var flat1 = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {    return a.concat(b);
});console.log(flat1);    //[0, 1, 2, 3, 4, 5]var flat2 = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {    return a.concat(b);
});console.log(flat2);    //[4, 5, 2, 3, 0, 1]

slice，splice

两者做的事情还不太一样，但名字实在太像了，所以放一起介绍。

slice用于复制数组，复制完后旧数组不变，返回得到的新数组是旧数组的子集。函数声明：[].slice(begin, [end])。参照MDN

第一个参数begin是开始复制的位置，需要注意的是，可以设负数。设负数表示从尾往前数几个位置开始复制。例如slice(-2)将从倒数第2个元素开始复制。另外需要注意的是，该参数虽未标注为可选，但实际上是可以省略的，省略的话默认为0。

第二个参数end可选，表示复制到该位置的前一个元素。例如slice(0,3)将得到前3个元素，但不包含第4个元素。不设的话默认复制到数组尾，即等于array.length。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'].slice(0, 3);console.log(fruits);    //["Banana", "Orange", "Lemon"]var fruits2 = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'].slice(-1);console.log(fruits2);    //["Mango"]

当然slice最常见的是用在将类数组arguments对象转换为真正的数组：

var args = [].slice.call(arguments);

splice用于剥离数组，从旧数组中移除元素，返回得到的新数组是被移除的元素。函数声明：[].splice(start, deleteCount, [item…])。参照MDN

第一个参数start是开始剥离的位置，需要注意的是，可以设负数。设负数表示从尾往前数几个位置开始剥离。例如splice (-2)将从倒数第2个元素开始剥离。

第二个参数deleteCount是要剥离的元素个数，设0表示一个都不剥离。

第三个参数开始可选，用于替换旧数组中被移除的元素

var oldArray = ['a', 'b', 'c'];
var newArray = oldArray.splice(1, 2, 'Jack', 'Betty', 'Andy');
console.log(oldArray);     //["a", "Jack", "Betty", "Andy"]
console.log(newArray);     //["b", "c"]

一个常见的应用就是删除数组内某元素，用delete的话会留下空洞，应该用splice方法：

//错误的方法用deletevar numbers = [0, 1, 2, 3, 4];delete numbers[2];console.log(numbers);     //[0, 1, undefined, 3, 4]//正确的方法用splicenumbers.splice(2, 1); 
console.log(numbers);     //[0, 1, 3, 4]

indexOf，lastIndexOf

两者都用于返回项目的索引值。区别是indexOf从头开始找，lastIndexOf从尾开始找。如果查找失败，无匹配，返回-1

indexOf的函数声明：[].indexOf( searchElement, [fromIndex = 0] );。参照MDN

lastIndexOf的函数声明：[].lastIndexOf( searchElement, [fromIndex = arr.length – 1] );

第一个参数searchElement即需要查找的元素。第二个参数fromIndex可选，指定开始查找的位置。如果忽略，indexOf默认是0，lastIndexOf默认是数组尾。

['a', 'b', 'd', 'e'].indexOf('b');      //1['a', 'b', 'd', 'e'].indexOf('b', 2);   //-1,从2号位开始找没找到['a', 'b', 'd', 'e'].indexOf('c');      //-1,没找到['a', 'b', 'd', 'e'].lastIndexOf('b');      //1['a', 'b', 'd', 'e'].lastIndexOf('b', 2);   //1,逆向2号位等价于正向1号位['a', 'b', 'd', 'e'].lastIndexOf('c');      //-1,没找到

sort

sort用于排序数组，函数声明：[].sort( [sortfunction] );。参照MDN

它就一个参数，就是排序函数指针。而且是可选的，不设的话有默认的排序函数，数字的话会升序排列，string会根据Unicode升序排列。

var sumArray = [4, 3, 1, 0, 2];var sumArray2 = ['d', 'z', 'a'];
sumArray.sort();
sumArray2.sort();console.log(sumArray);  //[0, 1, 2, 3, 4]console.log(sumArray2); //["a", "d", "z"]

但是内置的默认排序函数，是不可靠的，如下：

var scores = [1, 10, 2, 21]; 
scores.sort(); 
console.log(scores);    //[1, 10, 2, 21]

因此保险起见最好自定义排序函数：

var scores = [1, 10, 2, 21]; 
function compareNumbers(x, y) {    if (x < y) { return -1; } 
    if (x > y) { return 1; }    return 0;
}
scores.sort(compareNumbers);console.log(scores);        //[1, 2, 10, 21]

而且如果数组内是对象，或排序逻辑复杂的话，那默认排序函数更是力不从心了，必须自定义排序函数：

var items = [
    { name: 'Jack', value: 37 },
    { name: 'Betty', value: 21 },
    { name: 'Andy', value: 45 }
];
items.sort(function (a, b) {    if (a.value < b.value) { return -1; } 
    if (a.value > b.value) { return 1; }    return 0;
});console.log(items);//[{ name="Betty", value=21},// { name="Jack", value=37}, // { name="Andy",  value=45}]

剩下的比较简单，大致说一下，就不详细介绍了。

push和pop用于数组尾处压入和弹出元素。

unshift和shift用于数组头部压入和弹出元素。

reverse用于反转数组，concat用于连接数组，join用于数组元素间插入些东西后拼接成string。

类数组

JS里有很多类数组对象。什么叫类数组对象呢？它们首先是对象，并没有继承Array，但长的却很像数组。最典型的如arguments对象，HTMLCollection对象。

类数组对象不能直接使用数组方法，但数组方法是如此简单便利，要在类数组对象身上使用数组方法，需要让数组函数通过call绑定类数组对象。

处理arguments对象：

var args = [].slice.call(arguments);

处理HTMLCollection对象：

//用forEach遍历页面所有div，输入classNamevar divs = document.getElementsByTagName("div");Array.prototype.forEach.call(divs, function(div) {  
    console.log("该div类名是：" + (div.className || "空"));
});//下面这样直接调用forEach将报错，因为divs是HTMLCollection对象而非Arraydivs.forEach(function(div) {    console.log("该div类名是：" + (div.className || "空"));
});

处理字面量对象：

var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };var result = Array.prototype.map.call(arrayLike, function(s) {    return s.toUpperCase();
});     
console.log(result);    //["A", "B", "C"]

处理字符串：

var result = Array.prototype.map.call("abc", function(s) {    return s.toUpperCase();
});console.log(result);    //["A", "B", "C"]

但Array的concat会检查参数的[[Class]]属性，只有参数是一个真实的数组才会将数组内容连接起来，否则将作为单个元素来连接。要完全实现连接，我们需要自己在对象上增加slice方法：

//单用concat的话，arguments对象将作为一个单一整体被连接function namesColumn() {    return ["Jack"].concat(arguments);
}var newNames = namesColumn("Betty", "Andy", "Chris");console.log(newNames);    //["Jack", ["Betty", "Andy", "Chris"]]//配合slice能实现完全连接function namesColumn() {    return ["Jack"].concat([].slice.call(arguments));
}var newNames = namesColumn("Betty", "Andy", "Chris");console.log(newNames);    //["Jack", "Betty", "Andy", "Chris"]