ES5中新增的Array方法

来源:互联网 发布:淘宝体检中心不清洗 编辑:程序博客网 时间:2024/05/16 02:02

forEach(js1.6)

var arr = [1,2,3,4];arr.forEach(alert);

等同于

for(var i=0;i<arr.length;i++){    alert(arr[i]);}

Array在ES5新增的方法中,参数都是function类型,默认有传参

var arr = [1,2,3,4];arr.forEach(console.log);

这里写图片描述
forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。

[].forEach(function(value, index, array) {    // ...});

对比jQuery中的$.each方法:

$.each([], function(index, value, array) {    // ...});

第1个和第2个参数正好是相反的

forEach除了接受一个必须的回调函数参数,还可以接受一个可选的上下文参数(改变回调函数里面的this指向)(第2个参数)

var database = {          users: ["张三", "李四", "王五"],          sendEmail: function (user) {            if (this.isValidUser(user)) {              console.log("你好," + user);            } else {              console.log("抱歉,"+ user +",你不是本家人");              }          },          isValidUser: function (user) {            return /^张/.test(user);          }        };        // 给每个人法邮件        database.users.forEach(  // database.users中人遍历          database.sendEmail,    // 发送邮件          database               // 使用database代替上面标红的this        );

如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined
另外,forEach不会遍历纯粹“占着官位吃空饷”的元素的,例如下面这个例子:

var array = [1, 2, 3];delete array[1]; // 移除 2alert(array); // "1,,3"alert(array.length); // but the length is still 3array.forEach(alert); // 弹出的仅仅是1和3

综上全部规则,我们就可以对IE6-IE8进行仿真扩展了,如下代码:

// 对于古董浏览器,如IE6-IE8if (typeof Array.prototype.forEach != "function") {  Array.prototype.forEach = function (fn, context) {    for (var k = 0, length = this.length; k < length; k++) {      if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {        fn.call(context, this[k], k, this);      }    }  };}

map(js1.6)“映射”,也就是原数组被“映射”成对应新数组

var arr =[1,2,3];var arr2 = arr.map(function(item){    return item*item;});alert(arr2);//1,4,9

callback需要有return值,如果没有,就像下面这样:

var data = [1, 2, 3, 4];var arrayOfSquares = data.map(function() {});arrayOfSquares.forEach(console.log);

这里写图片描述
在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。

var users = [             {name: "张三", "email": "zhang@email.com"},             {name: "李四",   "email": "li@email.com"},             {name: "王五",  "email": "wang@email.com"}           ];           var emails = users.map(function (user) { return user.email; });           console.log(emails.join(", ")); // zhang@email.com, li@email.com, wang@email.com

Array.prototype扩展可以让IE6-IE8浏览器也支持map方法:

if(typeof Array.prototype.ma!='function'){    Array.prototype.map = function(foo,context){        var arr = [];        if(typeof foo === 'function'){            for(var i=0;i<this.length;i++){                arr.push(foo.call(context,this[i],i,this));            }        }        return arr;    }}

filter
filter为“过滤”、“筛选”之意。指数组filter后,返回过滤后的新数组。用法跟map极为相似:
可能会疑问,一定要是Boolean值吗?我们可以简单测试下嘛,如下:

var data = [0, 1, 2, 3];var arrayFilter = data.filter(function(item) {    return item;});console.log(arrayFilter); // [1, 2, 3]

有此可见,返回值只要是弱等于== true/false就可以了,而非非得返回 === true/false

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

测试

var emailsZhang = users  // 获得邮件  .map(function (user) { return user.email; })  // 筛选出zhang开头的邮件  .filter(function(email) {  return /^zhang/.test(email); });console.log(emailsZhang.join(", ")); // zhang@email.com

some
some意指“某些”,指是否“某些项”合乎条件。与下面的every算是好基友,every表示是否“每一项”都要靠谱。用法如下:

array.some(callback,[ thisObject]);

例如下面的简单使用:

var scores = [5, 8, 3, 10];var current = 7;function higherThanCurrent(score) {  return score > current;}if (scores.some(higherThanCurrent)) {  alert("朕准了!");}

结果弹出了“朕准了”文字。 some要求至少有1个值让callback返回true就可以了。显然,8 > 7,因此scores.some(higherThanCurrent)值为true.

我们自然可以使用forEach进行判断,不过,相比some, 不足在于,some只有有true即返回不再执行了。
IE6-IE8扩展如下:

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

在javascript中有时会看到有两个!的用法

    var foo;      alert(!foo);//undifined情况下,一个感叹号返回的是true;      alert(!goo);//null情况下,一个感叹号返回的也是true;      var o={flag:true};      var test=!!o.flag;//等效于var test=o.flag||false;      alert(test);  

这段例子,演示了在undifined和null时,用一个感叹号返回的都是true,用两个感叹号返回的就是false,所以两个感叹号的作用就在于,如果明确设置了变量的值(非null/undifined/0/”“等值),结果就会根据变量的实际值来返回,如果没有设置,结果就会返回false。

every
跟some的基友关系已经是公开的秘密了,同样是返回Boolean值
IE6-IE8扩展(与some相比就是true和false调换一下):

if (typeof Array.prototype.every != "function") {  Array.prototype.every = function (fn, context) {    var passed = true;    if (typeof fn === "function") {       for (var k = 0, length = this.length; k < length; k++) {          if (passed === false) break;          passed = !!fn.call(context, this[k], k, this);      }    }    return passed;  };}
0 0
原创粉丝点击