• 首页
  • javascript
  • ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)

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***

回到顶部