ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)
2011年发布了 ECMAScript 5.1 ,到现在普及程度也不高.如今马上要 ECMAScript 6 马上要发布标准了,何年何月才能普及到.
从2013年 各大浏览器开始支持 ECMAScript 5.1
包括:Chrome 24，Firefox 19，IE 10.0，Opera 12，Safari 6 等浏览器及更高版本得到支持.
今天介绍ECMAScript 5.1 中数组新增的方法:
先推荐一位朋友的博客 IT笔录 ,涉及到开发,系统,运维方方面面,各位攻城狮可以去赏脸拜读一下!
操作数组元素的迭代方法:
forEach() , map(), filter(), every(), some()
归并数组的方法:
reduce(), reduceRight()
元素索引的方法:
indexOf(), lastIndexOf()
var arr=[1,2,3,4,5,6,7,8,9];
依次来看下吧:
1.forEach
arr.forEach(function(item,index,array){
console.log(item,index);
});
forEach 接收三个参数
item (只数组迭代的每个元素)
index (当前迭代元素所在的索引值)
array (数组实例本身)
实例:
ECMAScript 5.1 之前我们想遍历一个数组,只好用 for 循环
for(var i=0;i<arr.length;i++){
console.log('+++',arr[i],i);
}现在,直接用 arr 对象上的 forEach 函数
arr.forEach(function(item,index,array){
console.log('---',item,index);
});//上面的后2个参数是选填的,不需要的话可以拿掉 ,看下2种方法输出的结果
输出结果一致.
如果你使用的浏览器不支持ECMAScript 5.1 怎么办?
作为一个开发者,还有脸问这样的问题吗? 面壁5分钟!
但是不排除有些产品,有些顽固的用户还在死守着IE6 ,除了无语只能默哀3分钟!
当所使用浏览器不支持ECMAScript 时,需要自己实现一个 forEach 方法:
if (typeof Array.prototype.forEach != "function") {
Array.prototype.forEach = function (arr) {
for(var i=0;i<arr.length;i++){
//实现内容
console.log('****',arr[i],i);
}
};
}你可以把上面的 forEach 换成 f ,调用 arr.f(arr) 来验证.这里就不贴代码了.
2. map
他其实和 forEach 方法很相似,虽然名字容易让你联想起来地图,但是他和地图真的半毛钱关系没有. 这里指的是映射.
如何映射?
map 方法会迭代数组里的所有元素,然后依次让每个元素执行回调函数,生成一个新的元素作为新数组的元素,最后返回这个新的数组.
类似这样:
var a=[1,2,3]; 现在希望每个元素 x2 得到新数组,最后 返回 b=[2,4,6];
array.map(callback);
此方法参数 callback 为必填,而且需要返回,否则新元素是 undefined ,当然还有另外一个可选参数没有贴出来,很少用到.
实例:
var b=a.map(function(value,index,a){
//三个参数是否是和forEach 一模一样,value表示当前迭代元素,index 只元素在数组的索引,a 就是数组实例.
//这里写新元素的处理逻辑,必须return
return value*2;
});
console.log(Array.isArray(b),b);最后得到的b 就是新数组,我们console 的时候,数组会调用他的 toString() 方法,导致输出 2,4,6 ,但是为了证明b就是个数组,前面我们加了 Array.isArray(b)
看下结果:
下面看下我们如何面对万恶的IE 浏览器,还是要自己定义一个map 方法:
if (typeof Array.prototype.map != "function") {
Array.prototype.map = function (fn) {
var arr = [];
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k++) {
arr.push(fn.call(this[k], k));
}
}
return arr;
};
}fn 是回调函数,用来处理迭代元素的逻辑.
外层套了一个for循环,用来迭代每一个元素.
然后每个元素当做参数传入到 回调函数 fn 中.
得到的新元素 push 到了新数组 arr 中.
关于call 和 apply 实现继承的方法,请查看我的另外一篇博客
貌似一篇博客写不完了.分成几篇来更新吧,请关注后面几篇
关于 ECMAScript 5.1数组新增的迭代元素方法剩余几个介绍,请移步到
ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)
****end***