美文网首页
JS中引用类型

JS中引用类型

作者: 言大大freedom | 来源:发表于2016-12-18 17:08 被阅读0次

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

    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) 

    相关文章

      网友评论

          本文标题:JS中引用类型

          本文链接:https://www.haomeiwen.com/subject/izwamttx.html