JavaScript高级程序设计(第3版) 笔记

第五章 引用类型

  • 引用类型的值(对象)是引用类型的一个实例。常被称作类,但不是类。引用类型也被称为对象定义,描述的是一类对象所具有的属性和方法。
  • 新对象是使用new操作符后跟一个构造函数创建的。
    var person = new object() ;
    创建了Object 引用类型的一个新实例,然后把该实例保存在了变量person中.

5.1 Object 类型

  • Object是ECMAScript中使用最多的一个类型。对于应用程序中存储和传输数据时理想的选择。
  • 创建的方法。
    1. 使用new操作符后跟 Object 构造函数
        var person = new Object();
        person.name = "Jay";  // 分号
        person.age = 20 
      
    2. 使用对象字面量表示法--(大部分会选择对象字面量的表示方法)
      var person = {
            name: "Jay",  // 逗号
            age: 20
      }
      
      
      也可以使用字符串表示:
        var person = {
                  "name": "Jay",  // 逗号
                  "age": 20
                }
      
  • 一般访问对象属性的时候选择使用点表示法,这是面向对象语言中的通用语法。在JavaScript中也可以使用方括号。在使用方括号语法的时候,应该要使用属性的字符串形式放在方括号中。例:
        console.log(person.name);
        console.log(person["name"]);
    
    • 方括号的优点在于可以使用变量来访问。例:
           var propertyName = "name";
            console.log(person[propertyName])
      
    • 建议使用点表示法

5.2 Array 类型

  • 创建数组的方法有两种。
    1. 使用 Array构造函数
          var colors = new Array();
      
      • 给定已知长度的数组
          var colors = new Array(20);
      
    2. 使用数组字面量表示法。例:
          var colors = ["red","blue","pink"];  // 创建了一个包含3项的数组
          console.log(colors[0]);  // 打印第一项
          colors[2] = "black"; // 修给第三项
          colors[3] = "green"; // 新增第四项
          var name = [ ];  // 创建了一个空数组
      
      • length属性的特点:不是只读。可以从数组的末尾移除项或添加新 项。例:

              var colors = ["red","blue","pink"];
              colors.length = 2;    // 设置的长度小于数组的长度值
              console.log(colors[2]);  // undefined (不存在)
        
             var colors = ["red","blue","pink"];
             colors.length = 6;    // 设置的长度大于数组的长度值
             console.log(colors[5]);  // undefined
        
              // 代码结果可知道.length 只能设置一次。
              var colors = ["red","blue","pink"];
              colors.length = 2;    // 设置的长度小于数组的长度值
              //console.log(colors[2]);  // undefined
              colors.length = 6;    // 设置的长度大于数组的长度值
              console.log(colors[2]);  //  undefined
        
              // 代码结果可知道.length 只能设置一次。
              var colors = ["red","blue","pink"];
             colors.length = 6;    // 设置的长度大于数组的长度值
              console.log(colors[2]);  //  pink
          ```
        
        
      • 通过length在数组尾部添加新项目

            var colors = ["red","blue","pink"];
            colors[colors.length] = "black"; // 在位置3上添加第四项
            colors[colors.length] = "green"; // 在位置4上添加第五项
            // ["red", "blue", "pink", "black", "green"]
        
5.2.1 检测数组
  • instanceof 操作符只适用于在一个全局环境下进行判断,当有多个框架,就是用Array.isArray() 方法。这个方法的目的就是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境下创建的。 用法:
         if(value instanceof Array) {
                 // 对数组执行某些操作  
                 }
    
         if(Array.isArray(value) ) {
                 // 对数组执行某些操作  
                 }
    
         var colors = ["red","blue","pink"];
          if(Array.isArray(colors)){
                       console.log("是数组")
                   }
    
5.2.2 转换方法
  • 所有的对象都具有 toLocaleString()toString()valueOf() 方法。
    调用toString() 方法会返回由数组中每个值的字符串像是拼接而成的一个以逗号分隔的字符串。valueOf()返回的是数组。
          var colors = ["red","blue","pink"];
          console.log(colors.toLocaleString()); // red,blue,pink
          console.log(colors.toString()); // red,blue,pink
          console.log(colors ); // Array(3)0: "red"1: "blue"2: "pink"length: 3__proto__: Array(0)
          console.log(colors.valueOf()); // Array(3)0: "red"1: "blue"2: "pink"length: 3__proto__: Array(0)
    
    
  • join()方法。只接收一个参数,用作分隔符的字符串,不传参数默认是逗号。
        var colors = ["red","blue","pink"];
        console.log(colors.join("|")); // red|blue|pink
        console.log(colors.join(":")); // red:blue:pink
    
    
5.2.3 栈方法
  • 栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构。最新添加的项最早被被移除。栈发生插入与移除只发生在栈的顶部。数组方法 push()pop()
  • push()方法接收任意数量的参数,把它们依次添加到数组的末尾,并返回数组的长度。
    pop()方法从数组末尾移除最后一项,减少数组length值,然后返回移除的项。
      var colors = new Array();
      var count = colors.push("red","blue");
      console.log(count); // 2
      count = colors.push("pink"); 
      console.log(count); // 3
      var item = colors.pop();
      console.log(item); // pink
      console.log(colors.length); // 2   
    
5.2.4 队列方法
  • 队列数据结构的访问规则是FIFO(First-In-First-Out,先进先出)。在列表的末端添加项,前端移除项。
  • shift()方法可以移除数组中的第一项返回该值,同时数组长度值减1。push()shift()结合使用
          var colors = new Array();
          var count = colors.push("red","blue");
          console.log(count); // 2
          count = colors.shift(); 
          console.log(count); // red
    
  • unshift()方法能在数组前端添加任意个项并返回新数组的长度unshift()pop()结合使用,前者在数组前端添加,后者在数组后端移除。
         var colors = ["blue"]
         var count = colors.unshift("red","pink");
        console.log(count); // 3
         console.log(colors); // (3) ["red", "pink", "blue"]
         var item = colors.pop();
         console.log(item); // blue
         console.log(colors.length); // 2
    
    
5.2.5 重排序方法
  • reverse()sort()
    • reverse()会反转数组的排序

            var arr = [1,2,4,3,5,6];
            console.log(arr); // [1, 2, 4, 3, 5, 6]
            console.log(arr.reverse()); //  [6, 5, 3, 4, 2, 1]
      
    • sort()方法从小到大排列。原理:调用每个数组项的toString()方法,比较得到后的字符串。它比较的是字符串
      ```
      var arr = [10,2,24,3,5,6];
      console.log(arr); // [10, 2, 24, 3, 5, 6]
      console.log(arr.reverse()); // [6, 5, 3, 24, 2, 10]

                  function a(a,b) {
                      if(a>b){
                          return 1;
                      }else if (a<b){
                          return -1;
                      }else {
                          return 0;
                      }
                  }
                  console.log(arr.sort(a)); // [2, 3, 5, 6, 10, 24]
      
                  function b(a,b){
                      return a-b;
                  }
                  console.log(arr.sort(b)); // [2, 3, 5, 6, 10, 24]
      
                  function c(a,b){
                      return b-a;
                  }
                  console.log(arr.sort(c)); // [24, 10, 6, 5, 3, 2]
        ```
      
5.2.6 操作方法
  • concat()方法就是复制数组副本并返回数组副本,参数是在原数组基础上的末尾处添加。不会修改原数组

         var arr = ["hello","world"];
         console.log(arr.concat()); // ["hello", "world"]
         console.log(arr.concat("你好",["hi","world"])); // ["hello", "world", "你好", "hi", "world"]
         console.log(arr); //  ["hello", "world"]
    
  • slice()方法,复制,接受一个或者两个参数,参数表示的是:例:slice(a,b),返回a-b之间的值,包括a,不包括b。slice(a)只有一个参数的情况下,返回从a开始到数组的末尾的所有项的值,包括a。不会修改原数组

      ```
        var colors = ["red","pink","green","black"];
        console.log(colors.slice()); // ["red", "pink", "green", "black"]
        console.log(colors.slice(1)); // ["pink", "green", "black"]
        console.log(colors.slice(1,3)); // ["pink", "green"]
        console.log(colors); // ["red", "pink", "green", "black"]
     ```
    
  • splice()方法。用法:splice(a,b,c,d,e,f...)
    a: 要删除项的位置;b:要删除项的个数;c、d...:要插入的项(任意个数)
    该方法返回的是一个数组,包含从原数组删除的项。原数组会改变

5.2.7 位置方法
  • indexOf(a,b)接受两个参数,a:要查找的项;b: 查找位置起点的索引(可选),从数组的开头开始向后查找。
  • lastIndexOf(a,b)接受两个参数,a:要查找的项;b: 查找位置起点的索引(可选),从数组的末尾开始向前查找。
5.2.8 迭代方法
  • 数组的5个迭代方法,对迭代方法来讲接受两个参数: a:function,要在每一项上运行的函数;b: 可选参数,运行该函数的作用域对象---影响this的值。
  • 对于a这个函数来讲,函数接受三个参数:a1:数组项的值;a2:该项在数组中的位置;a3:数组对象本身。
  • every():对数组中的每一项运行给定的函数,如果每一项都返回true,则返回true。
  • some():对数组中的每一项运行给定的函数,如果任意一项返回true,则返回true。
  • filter(): 对数组中的每一项运行给定的函数,返回 函数返回true的项组合成新数组。(每一项调用该函数后是true的,重新组合成数组返回出来)
  • forEach():对数组中的每一项运行给定的函数,没有返回值。
  • map():对数组中的每一项运行给定的函数,返回 每次函数调用结果组成的数组(每一项调用该函数后得到的新值,重新组合成数组返回出来)。
5.2.9 归并方法
  • reduce(): 迭代数组的所有项,然后构建一个最终返回的值。从数组的第一项开始,逐个遍历到最后。
  • reduceRight():迭代数组的所有项,然后构建一个最终返回的值。从数组的最后一项开始到第一项。
  • 都接受两个参数:a:一个在每一项上调用的函数;b:可选。作为归并基础的初始值。
  • 参数a是调用的函数,这个函数传入4个参数:前一个值、当前值、项的索引和数组对象
         // 求和,reduce从前向后;reduceRight是从后向前
       var num = [1,2,3,4,5,6];
       var sum= num.reduce(function(pre,cur,index,arr){
           return pre + cur;
       });
       var sum2 = num.reduceRight(function(a,b,c,d){
           return a + b;
       })
       console.log(sum); // 21
       console.log(sum2); // 21
    

5.3 Date 类型

  • Data.parse()方法:

         var someDate = new Date(Date.parse("May 28,2018"));
         console.log(someDate); // Mon May 28 2018 00:00:00 GMT+0800 (中国标准时间)
    
         var someDate2 = new Date("May 28, 2018"); // 后台自动调用Data.parse()方法
         console.log(someDate2); // Mon May 28 2018 00:00:00 GMT+0800 (中国标准时间)
    
  • Date.UTC()方法:

        var someDate = new Date(Date.UTC(2018,5,28)); // 年、月(0-11)、日(1-31)
        console.log(someDate); // Thu Jun 28 2018 08:00:00 GMT+0800 (中国标准时间) 
        var someDate2 = new Date(2018,5,28); 
        // console.log(someDate2);// Thu Jun 28 2018 00:00:00 GMT+0800 (中国标准时间)
    
  • Date.now()方法:

          var start = Date.now();
        console.log(start); // 1530201685282
    
        var time = new Date();
        console.log(time.getTime()); // 1530203031852
        console.log(time.getFullYear()); //年 2018
        console.log(time.getMonth()); //月 5 (月份 0-11)
        console.log(time.getDate()); // 日 29
        console.log(time.getDay()); // 星期几 5 (0-6  0:星期日 6:星期六)
        console.log(time.getHours()); // 小时数 0 (0-23)
        console.log(time.getMinutes()); // 分钟数 29 (0-59)
        console.log(time.getSeconds()); // 秒数 11 (0-59)
        console.log(time.getMilliseconds()); //毫秒数 936 

5.4 RegExp 类型

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

推荐阅读更多精彩内容