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; };}
- ES5中新增的Array方法
- ES5中新增的Array方法
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- ES5中新增的Array方法详细说明
- 新增Array方法(ES5)
- ES5 Array新增方法
- es5中js的数组 新增方法总结
- “火了”无人车产业
- 第四次作业
- 基于web的IT技术论坛
- java——修饰符
- bzoj3393 [Usaco2009 Jan]Laserphones 激光通讯
- ES5中新增的Array方法
- 3月题外:关于GeoServer和OpenLayers3实用开源插件或组件的总结
- 项目组git合作模板
- rsa_pkcs1_decrypt( p_rsa, NULL, NULL, RSA_PUBLIC, &olen, o_priv_encrypted, p_priv_decrypted, 1024 )
- 前端基础之五 元素关系及选择器
- 斯坦福机器学习1-3
- spring di
- MySQL之DML(Data Manipulation Languages)
- 关于自己遇到的nfs 挂载问题: