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; }); // falsereduce，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最常见的是用在将类数组arguments对象转换为真正的数组： splice用于剥离数组，从旧数组中移除元素，返回得到的新数组是被移除的元素。函数声明： 第一个参数start是开始剥离的位置，需要注意的是，可以设负数。设负数表示从尾往前数几个位置开始剥离。例如splice (-2)将从倒数第2个元素开始剥离。 第二个参数deleteCount是要剥离的元素个数，设0表示一个都不剥离。 第三个参数开始可选，用于替换旧数组中被移除的元素 一个常见的应用就是删除数组内某元素，用delete的话会留下空洞，应该用splice方法： 两者都用于返回项目的索引值。区别是indexOf从头开始找，lastIndexOf从尾开始找。如果查找失败，无匹配，返回-1 indexOf的函数声明： lastIndexOf的函数声明： 第一个参数searchElement即需要查找的元素。第二个参数fromIndex可选，指定开始查找的位置。如果忽略，indexOf默认是0，lastIndexOf默认是数组尾。[].slice(begin, [end])。参照var args = [].slice.call(arguments);
[].splice(start, deleteCount, [item…])。参照MDNvar 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"]
//错误的方法用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( searchElement, [fromIndex = 0] );。参照MDN[].lastIndexOf( searchElement, [fromIndex = arr.length – 1] );['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
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
