es5数组及对象处理方法

es6已经出来了,为什么还要整理es5?因为知识不是跳跃的,就像已经出来vue、react这样的框架,你还是需要jQuery一样!

es5浏览器兼容:

  • Opera 11+
  • Firefox 3.6+
  • Safari 5+
  • Chrome 8+
  • Internet Explorer 9+

vue因为采用es5语法,所以兼容也是兼容到IE9;这就说明,在你开发的时候可以放肆的运用css3了!接下来主要介绍常用数组及对象新增处理方法。

数组

1.forEach

forEach是Array新方法中最基本的一个,就是遍历,循环。如下:

//之前
var arr=[1,2,3,4,5];
for(var i=0;i<arr.length;i++){
      console.log(i)//1 2 3 4 5
}
//forEach
arr.forEach(function(value,index,array){
      console.log(value)//1 2 3 4 5
})

//甚至
var obj={
      say:function(a){
            alert(a);
      }
}
arr.forEach(function(value,index,array){
      this.say(value)//1 2 3 4 5
},obj)
//改变this指向,在特定环境下非常方便!以下介绍的数组方法同样适用

再强调一下:改变this指向,在特定环境下非常方便!以下介绍的数组方法同样适用

2.map

调用数组的每个元素传递给指定的函数,并返回一个包含返回值的新数组;传递给map()的函数有返回值,map()返回新数组,不会修改调用的数组;

var arr=[1,2,3,4,5];
var arr2=arr.map(function(x){
          return x*x
})
//arr2=[1, 4, 9, 16, 25]
3.filter

返回数组的一个子集,回调函数用于逻辑判断是否返回,返回true则把当前元素加入到返回数组中,false则不加;

var arr=[1,2,3,4,5];
var arr2=arr.filter(function(x){
           if(x>3){
                  return true;
           }
})
//arr2=[4, 5]
4.every

every是“所有”函数的每个回调函数都返回true的时候才会返回true,当遇到false的时候终止执行,返回false;

var arr=[1,2,3,4,5];
var flag=arr.every(function(x){
           return x>3
})
//false
5.some

some函数是“存在”有一个回调函数返回true的时候终止执行并返回true,否则返回false;

var arr=[1,2,3,4,5];
var flag=arr.some(function(x){
           return x>3
})
//true

对象

1.新建对象(Object.create(.proto,propertiesObject))
proto是一个对象,作为新创建对象的原型。可以为null
propertiesObject 是一个对, 它有4个值和两个函数,分别是:
  • value : 设置属性的值

  • writable : 布尔值,设置属性是否可以被重写,默认属性值为false(不能被重写)

  • enumerable : 布尔值,设置属性是否可以被枚举,默认属性值为false(不能被枚举)

  • configurable : 布尔值,设置属性是否可以被删除,默认属性值为false(不能被删除)
    两个函数:

  • get : 函数,设置属性返回结果

  • set : 函数,有一个参数

来看看具体的用法:

writable:
var account = Object.create(Object.prototype,{
           type: {
                   value: "建设银行",
                   //enumerable: false
                   //configurable: false
                   writable: false
           }
   });
  account.type="交通银行";
  console.log(account.type);  
  //建设银行,因为writable设置为false表示该属性不能被修改
configurable:
var account = Object.create(Object.prototype,{
           type: {
                   value: "建设银行",
                   //enumerable: false
                   configurable: false,
                   writable: false
           }
   });
   account.type="交通银行";
   delete account.type;
   console.log(account.type);  
   //交通银行,configurable: false表示不能删除该属性值
enumerable:
var account = Object.create(Object.prototype,{
           type: {
                 value: "建设银行",
                 enumerable: true,
                 configurable: false,
                 writable: false
           }
   });
 for(var i in account){
          console.log(account[i]); //建设银行,如果enumerable为true,那么打印undefined
  }
get&&set look here
2.检测对象属性是否存在(in):
var obj={
        name:"veb"
}
console.log("name" in obj)//true
3.枚举属性:

(1)for in
遍历对象中可枚举的属性。除开对象内置的继承属性,其余的自身属性或者来自原型对象上的继承属性都可以被枚举出来

(2)Object.keys(obj)
返回数组,每一项式obj中可枚举的自身属性的属性,不包含继承
(3)Object.getOwnPropertyNames(obj)
返回数组,包含所有的自身属性

4.原型属性
  • 通过Object.getPrototypeOf(obj)来获取对象的原型
  • 通过obj.constructor.prototype来检测对象的原型
  • 通过obj2.isPrototypeOf(obj1)来检测obj2是不是obj1的原型
5.对象序列化
  • 通过JSON.stringify(obj)来将对象转化为字符串
  • 通过JSON.parse(obj)来将字符串解析为对象

bind

之前改变函数内部this指向,大家会这么做:

function fun(){
      this.say("hello");
}
var obj={
      say:function(a){
            console.log(a)
      }
}

//因为执行函数fun,内部this指向window;所以我们会这样处理;
fun.call(obj)//hello

call方法属于在调用函数的时候改变this指向!

那么这跟bind有什么关系呢?
bind用法如下:

function fun(){
      this.say("hello");
}
var obj={
      say:function(a){
            console.log(a)
      }
}
var f=fun.bind(obj)
f();//hello

看到这,有的同学不干了,这比 call多了一步啊,我用 call多好了?

注意:bind可以理解为在函数定义的时候改变 this指向。只不过返回了一个新的函数

例如:

function Fun(){
      this.name="veb";
      setTimeout(function(){
              alert(this.name)
      },1000)
}
var person=new Fun()
//undefined

我们知道是this指向问题,所以这样改进:

function Fun(){
      this.name="veb";
      var this_=this;
      setTimeout(function(){
              alert(this_.name)
      },1000)
}
var person=new Fun()
//veb

但是这样处理会导致代码很不直观,
使用bind如下:

function Fun(){
      this.name="veb";
      setTimeout(function(){
              alert(this.name)
      }.bind(this),1000)
}
var person=new Fun()
//veb

加油!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,521评论 0 5
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4