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

ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)

接着上一篇的ECMAScript 6 数组扩展方法


数组元素迭代方法还剩下  filter  ,  some  ,  every


3. filter

过滤数组,将数组元素迭代,依次调用回调函数


array.filter(callback);


实例:

我们遍历迭代a数组,然后每个元素对2整除,符合条件的返回.

var a=[1,2,3];
var b=a.filter(function(item,index,a){
	return item%2==0;
});
console.log(b);


filter 第一个参数是回调函数 

function(item,index,a)

item 是当前迭代元素

index 当前迭代元素所在索引

a  是数组的实例.


看下结果:

返回结果我们验证了b 是一个数组.


上面的 filter 函数感觉和 map 实在是太像了,唯一不同的是返回结果 ,map 是在每个迭代元素做操作后返回新元素,老数组和新数组元素个数一致.

filter 是迭代每个元素后,执行回调函数看元素是否符合条件,符合及返回,不符合不返回.所以老数组和新数组元素个数不一致.


基于上面的一点点区别,那么如果浏览器不支持 filter 时,我们完全可以按照 map 的实现方式来实现:

if (typeof Array.prototype.filter != "function") {
  Array.prototype.filter = function (fn) {
    var arr = [];
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {          
           if(fn.call(this[k], k, this))
             arr.push(this[k]);
       }
    }
    return arr;
  };
}

上面代码我们用一个for 循环遍历数组,然后数组每个元素调用 fn 函数,

if(fn.call(this[k],k,this))

如果调用 fn 函数返回 true 时,把新元素 push 到 arr 新数组中.

否则不做任何处理.


4.some

满足其中一些项(最少一个,最多不限)


array.some(callback);


some在迭代数组元素时,会通过回调函数 callback 来对元素做验证,只要有一项为 true , some 就返回 true .


我们从一个数组中找到小于0的元素:

var a=[1,2,3,-5];

console.log(
    a.some(function(item,index,arr){
        return item<0;
    })
);


回调函数 function(item,index,arr) 参数和上面一致,分别表示 当前迭代元素,当前元素所在的索引,数组实例


当你的浏览器不支持此方法时,你可以自己在数组原型链上定义一个同名方法,然后自己实现此功能如下:

if (typeof Array.prototype.some != "function") {
  Array.prototype.some = function (fn) {
	var checked = false;
	if (typeof fn === "function") {
   	  for (var k = 0, length = this.length; k < length; k++) {
		  if (checked === true) break;
		  checked = !!fn.call(this[k], k, this);
	  }
    }
	return checked;
  };
}

上面定义的 some 函数接收一个参数 fn (这是一个回调处理函数,在数组遍历时用来处理一些自定义的逻辑处理)


在for 循环中,元素迭代时,如果 checked 为true ,直接跳出循环(因为已经至少返回了一个 true )

如果 checked 不为 true ,那么把迭代元素作为参数传入回调函数 fn 中做逻辑判断.


5.every

every 和 some 正好相反.

every 是在元素迭代过程中,每个元素在回调函数操作中都要返回 true 才可以.( some 是至少有一个返回 true 即可)


array.every(callback);

和 some 函数一样,接收callback 回调函数. 返回 ture / false


我们要求一个数组所有元素都必须是正整数,看下面的示例:

var a=[1,2,3,5];

console.log(a.every(function(item,idex,arr){
    return item>0;
}));


运行结果返回 true


接着考虑下如果遇到浏览器不支持此方法,我们该如何定义一个同名的函数呢.

其实有了上面的 some 函数实现,我们很容易想到 every 的实现,我们只需要给 checked=true;
当迭代元素执行回调函数时,如果有一个false ,就直接跳出循环.

if (typeof Array.prototype.every != "function") {
  Array.prototype.every = function (fn) {
    var checked = true;
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          if (checked === false) break;
          checked = !!fn.call(this[k], k, this);
      }
    }
    return checked;
  };
}


上面2篇的简单介绍,终于吧 ECMAScript 5.1 数组中新增的迭代元素方法介绍完了.


***end***

回到顶部