JS中引用类型

引用类型的值(对象)是引用类型的一个实例。

Object类型

创建Object类型的方式有两种。

  • 一种是使用new操作符后跟Object构造函数。
    var person = new Object()
    person.name = “nick”
    person.age = 19

  • 一种是使用字面量形式。通过字面量定义对象实际上不会调用Object构造函数
    var person = {
    name : “nick”,
    age : 19
    }

Array类型

创建Array类型的方式有两种。

  • 一种是使用new操作符后跟Array构造函数(new可以省略)。
    var a = new Array()
    var a = new Array(10) //表示a是一个长度为10的数组
    var a = new Array(“nick” ,“19”, “boy”) //表示a是一个包含三个字符串的数组
  • 一种是使用字面量形式。通过字面量定义数组实际上不会调用Array构造函数。数组可以通过[i]索引来访问,数组下标越界不会报错,返回udefined。
    var b = [] //空数组
    var c = [1,2,3]
    console.log(c[0]) // 1
    c[3] = 4 //新增数组第四项
    console.log(c) //[1,2,3,4]
    数组的length属性不是只读的,可以动态修改。可以利用length属性在数组末尾添加新项。数组的最后一项索引永远都是length-1。
    var person = [‘nick’,’19’,’boy’]
    person[person.length] = ‘student’ //在数组的最后一项后添加student

检测某个对象是不是数组:

 if(value instanceof Array) {
          //具体操作
   }

对于一个页面,或者一个全局作用域而言,使用instanceof操作符就能得到满意的结果。但是如果页面中包含多个框架,那实际上就存在两个以上不同的全局实行环境,从而存在两个以上不同版本的Array构造函数。如果一个框架向另一个框架传入数组,传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。


  if(Array.isArray(value)) {
           //具体操作
    } 支持浏览器IE9+

转化方法(数组转化成字符串)

数组继承的toLocalString() ,toString(),valueOf(),默认情况下都会以逗号分隔的字符串形式返回数组项。而使用join()方法,可以使用不同的分隔符来构建字符串。

   var person = [‘nick’,’19’,’boy’]
   var newPerson = person.join(‘,’)
   console.log(newPerson)   // nick,19,boy

数组栈与队列方法

  • 栈是一种LIFO(Last-In-First-Out)后进的先出。
    push(),接受任意数量的参数,把它们追个添加到数组的末尾,并返回修改后数组的长度。
    pop(),从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

     var num = Array()
     var len=num.push(11,12)
     alert(len)  //2
    
     len =num.push(13)
     alert(len) //3
    
     var item = num.pop()
     alert(item) //13
     alert(num.length) //2
    
  • 队列数据结构访问规则是FIFO(Firsr-In-First-Out)先进的先出
    push(),从数组尾部添加项,返回修改后数组的长度。
    pop(),从数组尾部移除最后一项,然后返回移除的项。
    unshift(),从数组前端添加一项,然后返回数组的长度。
    shift(),从数组前端移除第一项,然后返回被移除的项
    var num = Array()
    len =num.unshift(11,12)
    alert(len) //2

     len =num.unshift(10)
     alert(len)  //3
    
     var item = num.pop()
     alert(item) //12
     alert(num.length) //2
    

数组排序

数组中已经存在两种可以直接用来重排序的方法:reverse()和sort()。
reverse()用来颠倒数组的顺序。

var a=[1,3,2,5]
var b=a.reverse()
console.log(b) // [5, 2, 3, 1]

sort()方法按升序排列数组项,从小到大。为了实现排序,sort()会调用每个值的toString()转型方法,然后比较得到的字符串,即使数组中的每一项都是数值,sort()方法比较的也是字符串。所以调用sort()方法时,可以传入一个函数作为参数,以便确定哪个值位于哪个值前面。

 function compare(value1,value2){
      if (value1<value2) {
          return -1
      } else if (value1>value2) {
          return  1
      } else {
          return 0
      }
  }
 调用时sort(compare)
 更简单的比较器函数
 function compare(value1,value2){
       return value2-value1
 }

操作方法

  • concat(),数组拼接,返回新构建的数组,不修改原数组。在没有给concat()方法传递参数时,相当于复制当前数组并返回副本。

  • slice(),截取数组。可以接受传入一个参数,也可以传入两个参数。传入一个参数时表示从当前下标对应的值开始截取直到数组的最后一项。传入两个参数时表示从当前下标对应的值开始截取到第二个参数下标对应值的前一项(含头不含尾)。返回新的子数组不修改原数组。接受负数下标。
    var colors = [‘red’,’blue’,’grey’,’yellow’]
    var colors1 = colors.slice(1)
    console.log(colors1) //[“blue”,’grey’,’yellow’]

      var colors2 = colors.slice(1,3)
      console.log(colors2) //[“blue”,’grey’]
      console.log(colors) //[‘red’,’blue’,’grey’,’yellow’]
    
  • splice(),最强大的数组方法,有很多用法,主要用途是向数组的中部插入项。splice()会修改原数组,splice()方法始终会返回一个数组,该数组中包括从原始数组中删除的项,如果没有删除任何项,则返回一个空数组 。

  1. 删除:可以删除任意数量的项。接受两个参数,第一个表示要删除第一项的位置,第二个参数表示要删除的个数

  2. 插入:可以向指定位置插入任意数量的项。接受至少三个参数,第一个表示起始位置,第二个表示要删除的项数,第三个表示要插入的项。

  3. 替换:可以向指定位置插入任意数量的项,且同时可以删除任意数量的项。
    var colors = [‘red’,’blue’,’grey’,’yellow’]
    var colors1 = colors.splice(0,1)
    console.log(colors1) //[‘red’]
    console.log(colors) //[“blue”,’grey’,’yellow’]

      var colors2 = colors.splice(1,0,’green’) //在位置1插入一项
      console.log(colors2) //[]
      console.log(colors) //[“blue”,’green’,’grey’,’yellow’]
    
      var colors3 = colors.splice(1,1,’orange’)
      console.log(colors3) //[’green’]
      console.log(colors) //[“blue”,’orange’,’grey’,’yellow’]
    

位置方法

ES5为数组实例添加了两个位置方法。indexOf()和lastIndexOf()。
indexOf()从数组的开头开始向后查找,lastIndexOf()从数组的末尾开始向前查找。都是返回要查找项位置的下标,找不到返回-1。它们可以接受两个参数,第一个是要查找的项,第二个是开始查找的起点位置的下标(可选)。

    var num =[1,2,3,4,2,1,5]
    console.log(num.indexOf(2)) //1
    console.log(num.lastIndexOf(2)) //4
    console.log(num.indexOf(2,2)) //4
    console.log(num.lastIndexOf(2,2)) //1

迭代方法

ES5为数组的迭代提供了五个方法。每个方法接收两个参数,第一个是在每一项上要运行的函数,第二个是运行函数的作用域对象(影响this的值,可选)。传入这些方法中的给定函数接收三个参数,分别是数组项的值,该项在数组中的位置和数组对象本身。

  • every():对数组的每一项运行给定的函数,如果函数对每一项都返回true,则返回true
  • some():对数组的每一项运行给定的函数,如果其中任何一项返回true,则返回true。
  • filter():对数组中的每一项运行给定的函数,返回该函数会返回true的数组。
  • map():对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组。
  • foreach():对数组的每一项运行传入的函数,但是没有返回值,本质上与使用for循环迭代数组一样。

归并方法

ES5中新增两个归并数组的方法。reduce()和reduceRight()。这两个方法都会迭代数组的项,并且构建一个最终返回的值。reduce()是从数组的第一项开始,reduceRight()是从数组的最后一项开始。

Date ()类型

 var now = new Date()

ES5中添加了Date.now()方法表示调用这个方法时的日期和时间的毫秒数。

    时间戳
    var start = Date().now
    doSomething()
    var stop = Date().now()
    result = stop - start

Date对象API:
分量:年 FullYear /月Month /日 Date /星期Day /时 Hours /分Minutes / 秒 Seconds / 毫秒 Milliseconds

  • 每个分量都有一对儿get/set方法
    var n=date.getXXX()获得分量的值
    date.setXXX(n)设置分量的值,Day没有set
  • 命名:年月日星期,没有s结尾 。时分秒毫秒,都有s结尾
  • 返回值:Date从1开始到31结束
    除Date外,其余都是从0开始到 进制-1结束。只有月需要+1修正

RegExp ()类型

创建正则表达式
直接量:var reg=/正则表达式/[ig]
使用new:var reg=new RegExp("正则表达式",["ig"])
正则表达式匹配模式有三个标志:

  • g:全局模式。非在发现第一个匹配时立即停止
  • i:不区分大小写。匹配第一个
  • m:多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
    RegExp有两个方法:exec(),test()

Function 类型

函数声明vs函数表达式

使用函数声明,解析器会率先读取函数声明,并使其在执行任何代码之前可用(访问)。而函数表达式必须等到解析器执行到它所在的代码时,才会真正被解释执行。
alert (sum(1,2)) //3
function sum (num1,num2) {
return num1+num2
}

    alert (sum(1,2)) //报错
    var sum = function (num1,num2) {
               return num1+num2
    }

函数内部的属性

在函数内部拥有两个特殊的对象:arguments和this。

其中arguments对象是一个类数组对象,包含传入函数中的所有参数。虽然arguments对象的主要用途是用来保存函数参数,但是这个对象还有一个callee的属性,该属性是一个指针,指向的是拥有这个arguments对象的函数。严格模式下访问arguments.callee会报错


函数内部还有一个特殊的对象this,this引用的是函数据以执行的环境对象。当在网页的全局作用域中方调用函数的时候,this对象引用的就是window。

ES5也规范了另一个函数对象的属性caller。caller返回的是一个函数的引用,这个函数调用了当前的函数。callee返回正在执行的函数本身的引用。严格模式下访问arguments.caller会报错。

       var  a = **function**() {   
            alert(a.caller)  // function () {   a()  }   
       }   
       var  b = **function**() {   
            a()
       }   
      //b(); 
      a()  //如果直接调用a(即a在任何函数中被调用,也就是顶层调用),返回null

函数的属性和方法

每个函数都包含两个属性:length 和 prototype。length表示函数希望接受的命名参数的个数。

      function a (name){
         alert(name)
      }
      a(‘nick’)
      alert(a.length) //1

每个函数中包含两个非继承而来的两个方法:apply()和call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。

apply()接收两个参数,第一个是运行函数的作用域,第二个是参数数组。第二个参数可以是Array的实例,也可以是arguments对象。


call()第一个参数接受this值,其余参数(参数值,非参数数组)是直接传递给函数。

      window.a=1
      var num={a:2}
      function sum(){
            alert(this.a)
      }
      sum() //1
      sum.call(this) //1 在全局调用
      sum.call(window) //1
      sum.call(num)  //2

基本包装类型

为了方便操作基本类型直,提供了三个特殊的引用类型:Number,String,Boolean。包装类型专门封装了基本类型的数据,并提供了对基本类型数据操作方法的对象。对包装类型的实例调用typeof会返回‘object’

String vs new String/Number vs new Number/Boolean vs new Boolean
String/Number/Boolean:转型函数,转换为基本类型,返回的依旧是基本类型的值 typeof string =>string


new String/new Number/new Boolean:创建一个基本包装类型,返回包装类型的值。typeof obj =>object

引用类型与包装类型的区别:

主要是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在一行代码的执行瞬间,然后立即被销毁。

      var s1 = ‘hello world’
      s1.color = ‘red’
      alert(s1.color)  //undefined

String 类型

字符方法:

charAt()接受一个参数,以单字符字符串的形式返回给定位置的那字符
charCodeAt()接受一个参数,返回的不是字符而是给定位置的编码

      var s1 = ‘hello world’
      alert(s1.charAt(1)) //‘e’
      alert(s1.charCodeAt(1)) //‘101’

字符串操作方法:

concat():将一个或多个字符串拼接起来,可以接受多个任意参数

      var s1 = ‘hello’
      var s2 = ‘world’
      var result = s1.concat(s2) //‘hello world’

slice()与substring()返回被操作字符串的子字符串,可以接收一个或两个参数。第一个表示指定字符串起始位置,第二个表示子字符串在那里结束,含头不含尾。


substr()返回被操作字符串的子字符串,第二个参数表示的是返回的字符串的个数。如果这三种方法没有给第二个参数,则将字符的长度作为结束位置。以上三种方法不影响原字符串。

      var s1 = ‘hello world’
      alert(s1.slice(-3)) //‘rld’
      alert(s1.slice(1,3)) //‘el’
      alert(s1.substring(2,4)) //ll
      alert(s1.substring(7)) //‘orld’
      alert(s1.substr(2,5)) //‘llo w’
      alert(s1.substr(2)) //‘llo world’

在传递给这些方法的参数是负值的情况下,它们三个的行为就不相同了。slice()会将传入的负值域字符串长度相加,substr()会将负的第一个参数加上字符串长度,负的第二个参数转换为0,substring()会将所有负值参数转化为0。

字符串位置方法

indexOf() 从前开始查找,返回位置下标,找不到返回-1
lastIndexOf() 从后开始查找,返回位置下标,找不到返回-1

去空格方法

trim()

字符串大小写转换

toLowerCase() 全部转小写
toUpperCase()全部转大写

字符串的模式匹配方法

match() search() replace()

split()将字符串或者正则表达式对象切割成数组,第二个参数可选,用于指定数组的大小。

内置对象(11个)

    Global,Math, Date,RegExp,String,Number,Boolean,Array,Error,Function,Object 

    全局函数:isNaN(),isFinite(),parseInt(),parseFloat() 

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

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,199评论 0 4
  • 本章内容 使用对象 创建并操作数组 理解基本的 JavaScript 类型 使用基本类型和基本包装类型 引用类型的...
    闷油瓶小张阅读 674评论 0 0
  • 今天的学习进入到实战阶段,山部长就卖场销售成交五步做了非常详细实用的分享和指导,干货十足,小伙伴们听的意犹...
    牛东明阅读 294评论 0 0
  • 又是一个月没打开简书。 直接用日期做文章标题,虽然可以避免每次写东西都要起名字的苦恼,但也有一个坏处——倘若有一次...
    夜凄儿阅读 217评论 0 0
  • Google 在Android 5.0之后对Camera做了相当大的改动,新增了Camera2 的API,整体的开...
    cain_huang阅读 7,573评论 8 10