了解一些es5的方法

一.前言-索引
ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了。

ES5中新增了写数组方法,如下:
forEach (js v1.6)
map (js v1.6)
filter (js v1.6)
some (js v1.6)
every (js v1.6)
indexOf (js v1.6)
lastIndexOf (js v1.6)
reduce (js v1.8)
reduceRight (js v1.8)

1.forEach
forEach是array新方法中最基本的一个,就是遍历,循环。例如下面的这个例子:

var array = [1, 2, 3, 4];

for (var k = 0, length = array.length; k < length; k++) {
  alert(array[k]);
}

Array在ES5新增的方法中,参数都是function类型,默认有传参,这些参数分别是?见下面:

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

显而易见,forEach方法中的function回调支持3个参数,第一个是遍历的数组内容,第二个人是数组索引,第三个是数组本身。
因此我们会有:

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

对比jq中的$.each方法:

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

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

array.forEach(callback,[ thisObject])
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
        );

如果第二个参数可选参数不指定,则使用的是全局对象代替,即this指向window,严格模式下会报错
如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined.

另外,forEach不会遍历纯粹“占着官位吃空饷”的元素的,例如下面这个例子:
中间插播一下对象属性的删除

1.对象属性的删除
function fun (){
    this.name ="mm";
}
var obj = new fun();
console.log(obj.name); //mm
delete obj.name;
console.log(obj.name); //undefined
2.直接用delete删除不了变量,3.删除不了原型链中的变量

var array = [1, 2, 3];

delete array[1]; // 移除 2
alert(array); // "1,,3"

alert(array.length); // but the length is still 3

array.forEach(alert); // 弹出的仅仅是1和3

2.map调用的方法[].map;基本用法和forEach方法类似,map是影射的意思,也就是原数组被映射成对应的新数组。

var data = [1, 2, 3, 4];
var dataPingfang = data.map(function(item){
    return item * item;
})
console.log(dataPingfang);

3.在实际应用中,我们可以利用map方法方便获得对象数组中的特定属性

var users = [
        {name:'张含韵', email:'132143@.qq.com'},
        {name:'阳光', email:'1342423u8@qq.com'},
        {name:"清明", email:'214y32895y89@qq.com'}
    ]
    var emails = users.map(function(user){
        return user.name;
    })
    console.log(emails);

3.filter为“过滤”、“筛选”之意。指数组filter后,返回过滤后的新数组。用法跟map极为相似:
filter的callback函数需要返回布尔值true或false. 如果为true则表示,恭喜你,通过啦!如果为false, 只能高歌“我只能无情地将你抛弃……”。

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

同时使用map, filter方法

var users = [
       {name:"阳光", email: "yangguang.@qq.com"},
       {name:"希望", email: "xiwang.@qq.com"},
       {name:"梦想", email: "mengxiang.@qq.com"},
    ]
    var zhangEmail = users.map(function(user){
        return user.email;
    }).filter(function(email){
        return /^yang/.test(email);
    })
    console.log(zhangEmail);

4.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("朕准了!");
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值