javascript中级

Posted sidings

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中级相关的知识,希望对你有一定的参考价值。

张东

[email protected]

1. ***数组:

   什么是:

   为什么:

   何时:

   如何: 创建,访问元素,遍历

 

1. ***数组:

   什么是: 内存中连续存储多个数据的一块存储空间

      vs 变量:  内存中存储一个数据的存储空间

   为什么: ***程序=数据结构+算法

                算法: 解决问题的步骤

                数据结构: 数据在内存中的存储结构

                    好的数据结构可以极大提高程序的执行效率

   何时: 今后,只要连续存储多个相关的数据,都要用数组

   如何: 创建,访问元素

      创建: 3个场景:

         1. 创建空数组: var 变量=[];

                                             =new Array();

             何时: 在创建数组时,暂时不知道数组中的元素内容

         2. 创建数组时,初始化数组内容:

                                var 变量=[值1,值2,...];

                                             =new Array(值1,值2,...);

             何时: 在创建数组时,已经知道元素的内容

             强调: 每个元素之间,必须用逗号分隔

         3. 创建n个空元素的数组: var 变量=new Array(n);

             何时: 在创建数组时,仅知道元素的个数,暂时不知道元素的内容。

 

    访问数组中的元素:

       下标: 数组中唯一标识每个元素存储位置的序号

              默认从0开始,连续不重复

       arr[i]: 访问arr数组中下标为i位置的元素值

          数组中每个元素的用法和普通变量完全一样。

          其实,数组也是一组变量的集合,再起一个统一的变量名

 

    三个不限制:

       1. 不限制元素的数据类型

       2. 不限制元素的个数

       3. 不限制下标越界:

              赋值: 如果下标越界,不报错!而是在指定位置自动添加新元素。——稀疏数组: 下标不连续的数组

              取值: 如果下标越界,不报错!而是返回undefined

 

    length属性: 记录理论上数组的元素个数

                 length永远是最大下标+1

       固定套路:

          1. 最后一个元素: arr[arr.length-1]

          2. 倒数第n个元素: arr[arr.length-n]

          3. 在末尾追加新元素: arr[arr.length]=值

          4. 清空数组: arr.length=0;

          5. 删除末尾最后一个元素: arr.length--;

          6. 删除末尾的n个元素: arr.length-=n;

 

    遍历: 依次访问数组中每个元素:

       for(var i=0;i<arr.length;i++){

           arr[i]//当前元素

       }

       何时: 今后只要对数组中每个元素执行相同的操作时

 

***数组是引用类型的对象:

    数据类型: 基础类型: 值直接存储在变量本地的数据类型

                    引用类型: 值无法保存在变量本地的数据类型

                        数据实际存储在变量外的一个独立存储空间

                            同时存储多个数据的一块存储空间-对象

                            每个对象都有唯一的内存地址

                        变量中仅保存对象的地址值!

                        访问变量等效于通过地址值找到具体对象去访问

    数组就是引用类型的对象

 

***按值传递:

    两变量间赋值,或将变量作为参数传入函数时,其实仅将原变量中值,复制一个副本给对方变量:

       对基础类型: 修改新变量的值,不影响原变量;

       对引用类型: 仅复制对象的地址给对方,不创建新对象

                          通过新变量修改对象,等效于修改原对象

 

null vs undefined

  undefined: 空, 专门用于程序自动给变量初始化空值

  null: 空, 专门用于程序员主动释放对一个对象的引用

     垃圾回收: 内存中引擎会自动释放不再被任何变量引用的对象

     垃圾回收器: 在内存中自动执行的小程序

                        自动释放不被任何变量引用的对象

     好的习惯: 只要一个对象不再使用,都要主动将变量置为null

 

 

 

 

正课:

1. ***数组:

   API:

     拼接和选取

     修改

     翻转

****排序: 自定义排序算法: 冒泡排序

              sort()

 

1. 拼接和选取:

   拼接: 将其它元素或其它数组拼接到当前数组末尾,返回新数组

      var newArr=arr1.concat(值1,值2,arr2,......)

      强调: 1. 无权修改原对象,只能返回新对象

               2. 打散传入的数组参数——珍贵

   选取: 复制原数组中指定位置的元素组成新数组

      var subArr=arr1.slice(starti,endi+1);

      强调: 1. 无权修改原对象,只能返回新对象

               2. 规律: 所有两个参数都是下标的API,都含头不含尾

      简写: 1. 省略第二个参数: arr1.slice(starti)

                      从starti位置一直选取到结尾

               2. 不写参数: arr1.slice()——复制整个数组中所有元素

               3. 如果离结尾近:

                      arr1.slice(arr1.length-n,arr1.length-m+1)

                      选择倒数第n到倒数第m的元素

                      arr1.slice(-n,-m+1);

 

2. 修改数组splice: 删除,插入,替换

    删除: arr.splice(starti,n) 从arr中starti开始,删除n个元素

        强调: 1. 不遵循含头不含尾

                 2. 直接修改原数组

                 3. starti也支持负数参数,表示倒数第n个位置

        简写: 省略第二个参数: arr.splice(starti) 删除starti后所有

        返回值: var deletes=arr.splice(starti,n)

              返回被删除的元素组成的临时新数组

    插入: arr.splice(starti,0,值1,值2,...)

              在arr中starti位置插入: 值1,值2,...

              原starti位置及其之后的值,向后顺移

        强调: 不能打散数组参数

    替换: arr.splice(starti,n,值1,值2,...)

              在arr中先删除starti位置后的n个元素

                         再在starti位置插入新元素

        强调: 删除的元素个数和插入的新元素个数不必一样

                数组自动调整length

3. 翻转数组: arr.reverse();

4. ****排序:

    自定义排序算法: 冒泡,快速,插入

       冒泡: 原理:

 

 

 

 

 

 

正课:

1. ***数组:

   排序:

   栈和队列:

   二维数组:

2. ***String

 

1. 排序:

    自定义排序: 冒泡

    排序API: arr.sort();

       大问题: 默认将所有元素转为字符串再按字符串排列

                  只能对字符串类型的元素正确排序

       解决: 自定义比较规则:

         比较器函数: 专门比较任意两值大小的函数:

                   要求: 两个参数: a,b

                            返回值: 如果a>b,就返回正数

                                        如果a<b,就返回负数

                                        如果a=b,就返回0

         最简单的数字比较器函数:

           function compare(a,b){return a-b;}

         如何使用: 将比较器函数名作为参数传入sort函数中

           arr.sort(compare) //强调: 不要加()

           compare函数作为参数传入sort中,被sort反复调用

         降序: 颠倒比较器函数的正负号,可改升序为降序

           最简单的数字降序比较器函数:

              function compare(a,b){return b-a;}

 

2. 栈和队列: js中没有专门的栈和队列类型

                   一切栈和队列都是用普通数组模拟的

   栈: 一端封闭,只能从另一端进出的数组

    特点: FILO

   何时: 今后只要希望始终使用最新的元素时

   如何:

      1. 从结尾出入栈:

          入: arr.push(值) => arr[arr.length]=值

          出: var last=arr.pop()

          特点: 每次出入栈,都不影响其他元素的位置

      2. 从开头出入栈:

          入: arr.unshift(值)

          出: var first=arr.shift()

          特点: 每次出入栈,其它元素位置都会依次顺移

        

   队列: 只能从一端进入,从另一端出的数组

     特点: FIFO

   何时: 只要希望按先后顺序使用数组中的元素时

     1. 结尾入: 入: arr.push(值)

     2. 开头出: var first=arr.shift()

       

3. 二维数组:

  什么是: 数组中的元素又引用了另一个子数组

  何时: 1. 保存横行竖列的二维数据结构

           2. 对一组数据,再进行细致分类时

  如何:

     创建: 2种:

        1. 创建数组时,还不知道子数组的内容:

            var arr=[];

            arr[0]=[值1,值2,...];

            arr[1]=[值1,值2,...];

        2. 创建数组同时初始化元素:

             var arr=[

                   [值1,值2,...],

                   [值1,值2,...],

                   ...

             ]

     访问: arr[r][c]->用法和普通数组元素的用法完全一样

         强调: 二维数组,行下标r不能越界!——报错!

     遍历: 外层循环控制行,内层循环控制列

        for(var r=0; r<arr.length; r++){//遍历每一行

            for(var c=0;c<arr[r].length;c++){//遍历第r行中每一列

             arr[r][c]//当前元素

            }

        }

 

     练习: Math.random() 生成0~1之间的一个随机小数

             

 

 

正课:

1. ***数组:

    关联数组:

    API:

      转字符串

      拼接和选取

      修改

      翻转

 

1. 关联数组:

   索引数组: 下标为数字的数组

   问题: 每个元素,只有值,没有有意义的名称

   解决: 关联数组: 可自定义下标名称的数组

   如何:

      创建: 2步: 1. 先创建空数组: var scores=[]

                       2. 在空数组中添加新元素,使用自定义的下标名

                              scores["MATH"]=81;

      访问元素: 用自定义的下标名称:

            scores["MATH"] 用法和普通变量完全一样

   关联数组原理:

       hash算法: 散列: 接收一个字符串,然后根据字符串计算出一个尽量不重复的数字。

           相同字符串,计算出的数字一定相同

           不同的字符串,计算出的数字几乎不同的

       关联数组: hash数组

          存入元素: 将下标名交给hash算法,计算出一个尽量不重复的序号,将元素存储到数组中序号指定的位置

          获取元素: 将下标名交给hash算法,计算出和存入时完全一样的序号,直接去数组中序号位置获取元素值——不用遍历

    为什么: 1. 因为下标有意义,便于维护

                 2. 查找极快——和总元素个数以及存储位置无关!

    何时: 1. 今后只要快速查找某个元素时,都用hash数组

             2. 今后只要存储有意义的一组元素时,都用hash数组

    鄙视: 谈谈对hash的理解:

      hash算法; 存入;  获取;   优;

 

   特点: length属性失效,永远为0

   遍历: for in循环:

      for(var key in hash){//in依次获得每个元素的下标名称

         key//自动获得当前元素的下标名

         hash[key]//当前元素值

      }

 

2. 数组API: 浏览器已经实现的,我们直接用的函数

    数组对象: 存储一组数据,提供操作数据的API

    1. 数组转为字符串: 2种:

        1. var str=String(arr): 将arr中每个元素转为字符串,再用逗号链接成一个字符串。

        2. 可自定义连接符:

            var str=arr.join("自定义连接符")

            固定套路: 1. 无缝拼接: arr.join("")

                            2. 判断数组是空数组: arr.join("")===""

                            3. 动态生成页面元素的内容

 

 

 

 

 

 

 

 

 

正课:

1. ***String

   什么是:

***内置对象:

***包装类型:

   字符串API

 

1. 什么是: 多个字符组成的只读字符数组

      vs 数组: 下标i

                   length

                   slice()  concat

      不同: 数组中凡是直接修改原数组的API,字符串都不能用!

 

2. 内置对象: ES标准中规定的,浏览器厂商已经实现的现成的对象和API

    11个: Number  String  Boolean

              Array Date RegExp Math

              Error

              Function  Object

              Global(浏览器中被替换为window)

3. 包装类型对象:

    什么是: 专门封装基础类型的值,并提供操作基础类型值的API的对象

    为什么: 基础类型的值,本身不包含任何API功能

    何时: 只要试图对基础类型的值调用API时,都会自动创建对应类型的包装类型对象来封装基础类型的值。

    调用后: 包装类型对象,自动释放!

       比如: var n=345.678;

                n.toFixed(2)=>345.678.toFixed(2)

                                    =>new Number(345.678).toFixed(2)

4. String的API:

***所有字符串API都无权修改原字符串,只能返回新字符串!

   大小写转换: 将字符串中所有英文字母转为统一的大小写

      何时: 只要不区分大小写时,都要先转为一致的大小写,再判断。 比如: 用户名,邮箱地址,验证码

      如何: str.toUpperCase() //都转大写

               str.toLowerCase() //都转小写

 

   获得指定位置的字符: str[i]

       var char=str.charAt(i);

       获得指定字符的unicode号:

       var unicode=str.charCodeAt(i); //省略i,默认是0

           将unicode号反向转回文字

           var char=String.fromCharCode(unicode);

 

    选取子字符串: str.slice(starti,endi+1)

       str.substring(starti,endi+1) 不支持负数参数

       str.substr(starti,n): 选取starti开始的n个元素

 

 

 

 

 

 

正课:

1. ***String API

   查找关键词

   替换

   切割字符串

2. *****正则表达式

 

1. 查找关键词: 4种

   1. 查找一个固定的关键词出现的位置:

       var i=str.indexOf("关键词",fromi)

         在str中,从fromi位置开始查找"关键词"的位置

         如果找到,返回关键词所在位置的下标

                找不到,返回-1

         简写: 省略fromi,默认从0开始

       专门找最后一个关键词的位置:

       var i=str.lastIndexOf("关键词")

         在str中,找最后一个关键词出现的位置

 

      问题: 只能找第一个关键词

      解决: 正则表达式:

 

   2. 使用正则表达式查找指定的一类关键词的位置:

       按模式匹配:

       var i=str.search(/正则表达式/);

           在str中查找第一个符合正则表达式要求的关键词的位置

           返回值: 找到的关键词的下标, 如果找不到返回-1

       何时: 仅判断是否包含敏感词时,就用search

                如果返回不是-1,说明包含,否则说明没找到

       忽略大小写: /正则/i

       问题: 1. 只能获得第一个的位置,不能获得所有敏感词

                2. 只能返回位置,不能返回内容

    3. 使用正则表达式查找指定的一类关键词的内容:

        var arr=str.match(/正则/ig);

        默认只找第一个,找所有,必须加g

        返回值: 所有敏感词组成的数组

               没找到返回null!

           强调: 如果一个API有可能返回null,就必须先判断不是null,再使用!

        arr.length 表示找到的关键词个数

        问题: 仅返回所有关键词的内容,无法返回每个关键词位置

    4. 即找所有关键词内容,又找每个关键词的位置?

        reg.exec();

 

2. 替换: 将字符串中所有敏感词替换为新内容

    基本替换:

    str=str.replace(/正则/ig,“替换值”);

   

 

4. *****正则表达式:

   什么是: 专门定义一类字符串统一规则的表达式

   何时: 1. 按照指定规则模糊查找一类关键词时

            2. 表单中验证输入项的格式

   如何: 语法:  

      1. 最简单的正则其实就是关键词原文

      2. 字符集: 规定字符串中一位字符可用的备选字符列表

         何时: 只要某一位字符,有多个备选字时

         如何: [备选字符列表]

           强调: 一个字符集只能匹配一位字符

           简写: 如果备选字符列表是连续的,就可用-省略中间字符

              一位字母: [a-zA-Z]

              一位数字: [0-9]

              一位汉字: [\u4e00-\u9fa5]

         特殊: 除了: [^排除的字符列表]

                    强调: ^必须写在[开头]

     3. 预定义字符集: 4个:

          \w  一位字母数字或_  =>[a-zA-Z0-9_]

          \d  一位数字  => [0-9]

          \s  一位空字符: 空格,Tab,...

          .    一位任意字符

        强调: 一个预定义字符集仅匹配一位字符

                 只有规则和预定义字符完全一致时,才能使用

                      如果不一致, 依然需要手写普通字符集

         字符集仅控制每个字符的内容

     4. 量词: 专门固定字符出现的次数

         有明确数量边界:

           字符集{min,max}   规定字符集必须最少出现min次

                                                                 最多max次

           字符集{min,}   最少min次, 多了不限

           字符集{n}        必须n次

         没有明确数量边界:

           字符集?     可有可无,最多一次

           字符集*     可有可无,多了不限

           字符集+    {1,}

         强调: 仅修改相邻的前一个字符集

     5. 选择和分组:

         分组: 将多个字符集分成一组:

             何时: 如果希望一个量词同时修饰多个字符集时

            比如: 我(了个?)?去: 我去   我了去   我了个去    我个去X

         regexper.com

         选择: 其实就是"或"   规则1|规则2

            只要匹配任意一个规则即可

            (微|w(ei)?)\s*(信|x(in)?)

      

     手机号:

         (\+86|0086)?      +86或0086  可有可无,最多一次

         \s*                        空字符 可有可无,多了不限

         1

         [34578]               34578中挑一个

         \d{9}                    9位数字

         (\+86|0086)?\s*1[34578]\d{9}

     邮箱:

         字母/数字或_   一次以上

         @

         字母或数字      2位以上

         (.和 字母或数字      2到3位)   1到2次

         \[email protected][a-zA-Z0-9]{2,}(.[a-zA-Z0-9]{2,3}){1,2}

        

 

正课:

1. 正则:

 指定匹配位置

2. ***String API:

    替换: 衍生: 删除和格式化

    切割

3. ***RegExp对象

 

1. 正则:

    指定匹配位置: 三个位置:

      字符串的开头  ^

      字符串的结尾  $

         比如: 开头的空字符: ^\s+

                  结尾的空字符: \s+$

                  开头或结尾的空字符^\s+|\s+$

         固定套路: 只要希望字符串和正则从头到尾完全匹配

                         比如同时前加^后加$

                只要用正则表达式执行验证时,必须前加^后加$

      单词边界        \b  包含: ^  $   空格    标点

         比如: 单词首字母: \b[a-z]

                  单词尾字母: [a-z]\b

                  单独的一个单词no: \bno\b

 

2. ***StringAPI

  替换: 简单替换: str=str.replace(/正则/ig, "替换值");

           问题: 不能根据不同的关键词,选择不同的值替换

     解决: 高级替换:

      str=str.replace(/正则/ig,function(kw){

          //kw会自动获得本次找到的关键词内容

          return //根据不同kw,返回不同的替换值

      })

     何时: 只要根据不同的关键词,替换不同内容时

  衍生:

    删除: 将关键词替换为""

    格式化: 将原字符串重新拼接为新的格式

      比如: "19831226" => "1983年12月26日"

      2步: 1. 正则将原字符串分组

                 /(\d{4})(\d{2})(\d{2})/

               //    1         2         3

             2. 使用简单替换: str.replace(/正则/,"...$n...")

                  $n可自动获得第n个分组的子内容

                    n从1开始

  切割: 将原字符串,按指定字符,分隔为多个子字符串

      如何: var substrs=str.split(/正则/)

         返回切割后的多个子字符串组成的数组

                结果中,不再包含分隔符

      固定套路: 将字符串打散成字符数组: var chars=str.split("")

 

3. ***RegExp:

    什么是: 封装一条正则表达式, 提供了使用正则表达式进行查找和验证的API

    何时: 1. 查询关键词的第四种情况: 即查内容,又查位置

             2. 利用正则表达式执行验证

    如何:

       创建: 2种:

          1. 如果正则表达式是固定不变的: var reg=/正则/ig;

               强调: /正则/中正则中的/都要转义为\/

          2. 如果正则表达式是动态生成的:

               var reg=new RegExp("正则"[,"ig"]);

               强调: "正则"中的" \ 都要转义为\"  \\

                 比如: "\d{6}" => "\\d{6}"

                

 

 

 

 

 

 

 

 

 

正课:

1. ***RegExp:

2. Math

3. ***Date

 

1. ***RegExp

   API:

     验证: 检查字符串是否完全符合正则表达式的要求!

      如何: var bool=reg.test(待检测字符串)

         强调: 只要验证,reg中必须前加^后加$

    

     查找关键词: 第四种情况: 即找内容,又找位置

      如何: var arr=reg.exec(待查找的完整字符串)

              在"待查找的完整字符串"中,依次查找每个符合reg要求得关键词。

          返回值: 本次找到的一个关键词及其位置

             arr[0]: 关键词内容

                如果正则中有分组

                arr[n]: 自动保存第n个分组匹配的子内容

             arr["index"]: 当前关键词位置 -> 可简写为arr.index

             如果没找到,返回null

          每次查找后,都将reg.lastIndex属性(下次开始位置)修改为当前index+关键词长度,相当跳过当前关键词继续向后找

  

      固定套路: 找所有关键词:

         while((arr=reg.exec(str))!=null){

              arr[0] 关键词内容

                 arr[n]  自动获得第n个分组的子内容

              arr.index 当前关键词位置

         }

         如果只需要分组的子字符串,不需要完整关键词:

            可省略arr,用RegExp.$n

         while(reg.exec(str)!=null){

               RegExp.$n   自动获得第n个分组的子内容

         }

 

      练习:

       贪婪模式: 正则表达式默认匹配最长的符合条件的子字符串

              默认使用贪婪模式

              .*    .+

       懒惰模式: 仅匹配最短的符合条件的子字符串

          贪婪->懒惰:  .*?   .+?

 

2. Math:

   什么是: 专门封装数学计算所用常量,并提供数学计算所用API

   何时: 只要数学计算时

   特点: 不能new!

   API:

     1. 取整:

         Math.ceil(num) 上取整: 只要超过,就取下一个整数

         Math.floor(num) 下取整: 省略小数部分

         Math.round(num) 四舍五入取整:

         vs toFixed(d):

           1. 小数位数: Math.round()只能取整,不能规定小数位数

                                    toFixed(d)可取整,也可规定小数位数

           2. 返回值: Math.round()返回number

                           toFixed(d)返回string

         自定义round函数:

    2. 乘方和开平方:

      乘方: Math.pow(底数, 幂)

      开平方: Math.sqrt(n)

    3. 最大值和最小值:

      Math.max(值1,值2,...);

      Math.min(值1,值2,...);

        问题: 不支持数组

        解决: Math.max.apply(null,arr)

    4. 随机数:

        Math.random()  0<=r<1 随机小数

        从min~max之间取随机整数:

        Math.floor(Math.random()*(max-min+1)+min)

        从0~n之间去随机:

        Math.floor(Math.random()*(n+1));

 

3. ***Date

   什么是: 封装一个时间,提供操作时间的API

   何时: 只要存储时间,都要用Date对象

   如何:

      创建: 4种:

      1. 创建日期对象,并自动获得当前客户端系统时间

         var now=new Date();

      2. 创建日期对象,并封装自定义时间:   

         var date=new Date("yyyy/MM/dd hh:mm:ss");

         var date=new Date(yyyy,MM-1,dd,hh,mm,ss)

      3. 复制一个日期对象:

         问题: 日期对象的计算都是直接修改原日期对象

                      计算后无法保留计算前的旧时间

         解决: 今后如果需要同时保留开始和结束时间时

                     都要先将开始时间复制一个副本,再用副本计算

         var date1=new Date(...);

         var date2=new Date(date1);

      4. 用毫秒数创建日期对象:

         Date对象的原理:

            Date对象中保存了一个巨大的毫秒数

               起始时间为: 1970年1月1日0点至今的毫秒数

         var date=new Date(ms);

         两个日期对象可相减: 得到毫秒差

 

 

 

 

 

 

 

 

 

 

正课:

1. ***日期API

2. ***Error

 

1. ***日期API

   单位:  FullYear   Month     Date          Day

             Hours      Minutes   Seconds    Milliseconds

   API: 1. 每个单位都有一个对儿get/set方法

            比如: var year=date.getFullYear()//获取单位的值    

                     date.setFullYear(year)//设置单位的值

            特殊: Day没有set方法

          2. 命名: 年月日星期没有s结尾

                      时分秒毫秒都有s结尾

          3. 取值范围: 只有Date从1~31

                   不考虑FullYear, 其余都是从0开始,到进制-1结束

               Month: 0~11 总比现实中小1, 需要修正

               Date: 1~31   不用修正

               Day: 0~6      不用修正

               Hours: 0~23 不用修正

               Minutes/Seconds: 0~59 不用修正

   日期计算:

      1. 计算两个日期的时间差: 两日期相减,得毫秒数,再换算

      2. 对任意单位做加减: 3步:

           1. 取分量: var d=date.getDate();

           2. 做加减: d+=60

           3. 放回去: date.setDate(d);

                强调: 所有set方法可自动调整时间进制

          其实可简写为: date.setDate(date.getDate()+60)

   转字符串:

       date.toString() -> 当地时间的完整时间格式

       date.toLocaleString() ->当地时间的简化版格式

       date.toLocaleDateString() -> 当地时间的日期部分

       date.toLocaleTimeString() -> 当地时间的时间部分

       date.toGMTString() -> 标准时区的标准时间

 

   作业: 自定义format函数: 2_format.html

 

2. ***Error

   什么是错误(bug): 程序执行过程中遇到的异常中断。

          一旦发生错误,程序立刻退出。

   什么是错误处理: 即使程序发生错误,也能保证程序不异常中断的一种机制。

   如何:

       try{

           可能发生错误的代码

       }catch(err){//仅在发生错误时,才执行

           错误处理代码: 1. 提示用户错误信息(String(err))

                                  2. 记录系统日志

       }finally{

           无论是否发生错误,都必须执行的代码。

           比如: 释放资源!

       }

  err: Error对象: 在错误发生时,自动创建的,保存错误信息的对象。

    错误类型6种:

        SyntaxError   语法错误

        ReferenceError   要使用的变量没找到

        TypeError   错误的调用了对象的方法

        RangeError  参数范围越界 比如: toFixed(d) 0~20

 

        EvalError   URIError

 

 

 

 

 

 

 

 

 

 

 

 

 

正课:

1. ***错误处理

2. ***Function

   *****闭包

 

1. ***错误处理

    只要可以提前预料的错误,都要用if...else...来代替try catch

    只有无法提前预料的错误,采用try catch

 

    主动抛出错误:

    为什么: 抛出错误通常是为了提醒使用者错误的使用的程序

    如何: throw new Error("错误消息")

 

2. ***Function:

    什么是: js中一切函数都是对象

                函数对象是专门封装函数定义的对象。

    创建: 3种:

      1. 声明: function 函数名(参数列表){函数体; return 返回值;}

          何时: 只要一段代码被反复使用,都要先定义在一个专门的函数中,再反复调用函数即可——复用

             何时使用参数: 只要函数步骤中必须某些数据才能正常执行时,就要定义参数。

             何时使用返回值: 如果函数的调用者需要函数的执行结果时,函数就必须返回值。

         可被声明提前:

      2. 函数直接量:

       var  函数名=function(参数列表){函数体; return 返回值;};

         不会被声明提前。

****声明提前(hoist): 在开始执行程序前,将所有var声明的变量和function声明的函数提前到*当前作用域*的顶部,集中创建。

          赋值留在原地!

       何时: 只要不希望被声明提前时。

        揭示了: 函数名仅是一个普通的变量

                    函数定义其实是一个对象

                    函数名中仅保存了函数对象的地址——引用

 

      3. 用new:

var fun=

     new Function("参数1","参数2",...,"函数体; return 返回值")

 

     比如: function compare(a,b){return a-b;}

              var compare=function(a,b){return a-b;}

              var compare=new Function("a","b","return a-b;");

 

***重载(overload):

  什么是: 相同函数名,不同参数列表的多个函数,在调用时,可根据传入参数的不同,自动选择对应的函数调用!

   为什么: 减轻调用者的负担,一个函数名,可执行多种操作

   何时: 一项任务,根据不同的参数,执行不同的操作流程时

   如何:   js语法不支持重载效果

      变通:  所有函数对象内,都自动内建了一个arguments对象

         arguments对象:

            专门保存传入函数的所有参数值的类数组对象

             类数组对象: (object like array)

                vs 数组: 相同: 下标, length, for遍历

                             不同: 类数组对象是Object,不是Array,无法使用Array的API

                                     数组是Array类型,可以使用数组类型所有的API

 

    匿名函数:

    什么是: 函数创建时,不被任何变量引用的函数

    为什么: 节约内存

    何时: 如果一个函数只用一次,用完希望自动释放时

        1. 回调callback: 将函数作为参数传递给另一个函数去调用 

            比如: arr.sort(function (a,b){return a-b});

                     str.replace(/reg/g,function(kw,$1,...){return ...})

        2. 自调: 创建函数后立刻调用自己!

            何时: 如果一个函数只执行一次,不会再重用时

            为什么: 建立临时作用域!避免全局污染!

            如何:

               (function(参数列表){函数体; return 返回值})();

 

 

 

 

 

 

 

 

 

 

正课:

1. *****作用域和作用域链

2. *****闭包

 

1. *****作用域和作用域链

   作用域scope:

     什么是: 一个变量的使用范围——使用

                 本质上作用域是一个对象——存储

                     作用域中的变量都是对象的成员

     程序/函数的执行过程:

        1. 开始执行程序前:

            创建ECS(执行环境栈):

                依次保存每个调用的函数的执行环境

            在ECS中压入第一个全局执行环境(全局EC)

            创建window对象,全局EC引用window对象

            window就是全局作用域对象

        2. 开始执行程序:

            所有全局变量都保存在全局作用域对象window中

        3. 定义函数时:

            在全局添加函数名变量

            创建函数对象封装函数定义

            函数名变量引用函数对象

            函数对象中有一个scope属性,引用回创建函数时的作用域对象。通常都是window。

        4. 调用函数时:

            在ECS中压入一个新的EC

            为本次函数调用创建专门的活动对象(AO)

            在AO中创建所有函数定义中规定的局部变量

            其实AO就是函数作用域对象

                 所有局部变量都是AO的成员

            新的EC引用活动对象AO

            AO的parent指向window

            变量的使用顺序:

               先用AO(函数作用域)中的局部变量

               如果AO中没有,才去window(全局作用域)中找

        5. 函数调用后:

            本次函数调用的EC出栈

                导致函数作用域对象AO释放

                       导致局部变量一同释放

   作用域链(scope chain): 由多个作用域对象连续引用形成的链式结构。

      顺序: 先函数作用域对象AO->全局作用域对象window

      所有的变量都保存在作用域链上的对象中

          局部变量都保存在函数作用域对象AO中

          全局变量都保存在全局作用域对象window中

      控制了: 变量的使用顺序

        先用AO(函数作用域)中的局部变量

               如果AO中没有,才去window(全局作用域)中找

 

   闭包:

     什么是: 即重用变量,又防止变量被污染的一种机制

     为什么: 全局变量: 优: 可重用     缺: 易被全局污染

                 局部变量: 优: 不会被污染    缺: 不可重用

     何时: 即重用变量,又防止变量被污染

     如何: 3步:

        1. 用外层函数包裹住受保护的变量和操作变量的内层函数

        2. 外层函数将内层函数返回到外部,被外部的变量保存

        3. 通过外部变量调用内层函数,访问受保护的变量

     缺: 1. 占用更多内存: 外层函数的AO

          2. 容易造成内存泄漏

     三特点: 1. 函数嵌套:

                  2. 外层函数包含一个受保护的局部变量

                 3. 外层函数将内层函数对象返回

 

 

 

 

 

 

回顾:

1. *****闭包:

   鄙视: 快速绘制闭包图

       1. 受保护的变量,并确定外层函数调用后,变量的值

       2. 找所有操作受保护变量的内层函数

 

正课:

1. *****面向对象OOP:

   什么是: 程序中都是先用对象来定义数据和功能,再按照逻辑的需要,访问对象中的数据和功能。

   为什么: 和现实中人的想法非常接近。

   什么是对象: 内存中同时存储多个数据和功能的存储空间

              描述现实中一个具体事物的属性和功能的程序结构

                     事物的属性,会成为对象中的属性

                     事物的功能,会成为对象中的方法

   何时: 今后开始写程序前,都要先用对象,描述好要操作的事物的属性和功能,再按需使用对象的功能,访问对象的属性

   如何: 面向对象三大特点: 封装,继承,多态

      封装: 将一个具体事物的属性和功能集中定义在一个对象中

      创建自定义对象: ——封装   3种:

         1. 使用对象直接量:

              var obj={

                  属性名: 属性值,

                         ... : ... ,

                  方法名: function(){... this.属性名 ...},

                         ... : ... ,

              }

          强调: 对象自己的方法,要访问自己的属性,必须用this.属性名.

           this->正在调用函数的当前对象自己

 

       2. 使用new: 2步: 

          var obj=new Object(); //创建一个空对象

          //向空对象中添加属性和方法

          obj.属性名=属性值;

          obj.方法名=function(){...this.属性名...};

         

     对象的本质: js中一切对象的底层都是关联数组

                        每个属性/方法都是关联数组中的元素

                        属性名/方法名是key,属性值/函数对象是value

 

      问题: 一次只能创建一个对象

       3. 解决: 用构造函数:

          什么是构造函数: 专门描述一类对象统一结构的函数

          何时: 今后只要反复创建多个相同结构的对象时,都要先定义构造函数

          为什么: 复用对象的结构代码

          如何: 2步:

            1. 定义构造函数

                function 类型名(属性参数列表){

                     this.属性名=属性参数值;

                               ...=...;

                     this.方法名=function(){ ... this.属性名 ...  }

                }

            2. 用new调用构造函数,创建并装修新对象

                var obj=new 类型名(属性值列表);

                     创建一个指定“类型”的对象

                     用new调用指定"类型"的构造函数来创建对象

              new: 4件事:

                1. 创建新的空对象

                2. 让新对象继承构造函数的原型对象

                3. 用新对象去调用构造函数

                      向新对象中添加构造函数规定的属性

                      将属性参数的值,保存到新对象的新属性中

                      向新对象中添加构造函数规定的方法

                4. 将新对象的地址保存在变量

 

      按需访问对象的属性,调用对象的方法: 

         访问对象的属性: obj.属性名   用法和普通的变量完全一样

                属性就是保存在对象中的一个变量

         调用对象的方法: obj.方法名() 用法和普通的函数完全一样

            强调: 方法中的this,默认指.前的对象

 

      构造函数的问题: 只能复用代码,不能节约内存

 

      继承: 父对象的成员,子对象不用重复创建,也可直接使用

      为什么: 即节约内存,又代码重用

      何时: 只要一类子对象,需要相同的属性或功能时,都要将相同的属性和功能仅在父对象中定义一次即可

      如何:

        原型对象: 集中存储同一类型的子对象所需的所有共有属性和方法的父对象

 

 

 

 

 

 

 

正课:

1. *****OOP

   内置对象的原型对象

   共有属性和自有属性

   原型链

   原型相关API

*****自定义继承

 

1. 内置对象的原型对象:

   所有内置对象都是一个构造函数(除Math外)

   每类内置对象都有自己的原型对象(prototype)

   所有内置对象的API都保存在类型.prototype对象中

   何时: 解决浏览器兼容问题: 2步:

      如果类型.prototype.方法===undefined

         类型.prototype.方法=function(...){

            this->自动获得将来调用该方法的当前对象

         }

 

2. 共有属性和自有属性:

   自有属性: 直接保存在对象本地的属性

   共有属性: 保存在父级原型对象中的属性

   访问共有/自有属性:

      读取属性值: 即可用子对象读取,也可用原型对象读取

      修改属性值:

          自有属性: 子对象.属性名=值

          共有属性: 原型对象.属性名=值

   如何判断自有还是共有:

      自有: var bool=obj.hasOwnProperty("属性名")

          判断obj中是否包含自有属性"属性名"

      共有: 不是自有! 且 子对象可访问到!

 

3. ***原型链(prototype chain):

   什么是原型链: 多级父对象连续继承,形成的链式结构

      保存了: 对象的属性和方法

      控制了: 对象的成员的使用顺序

         优先使用自有成员

         自己没有才延原型链向父级查找,只要找到就不再向上

         如果整个原型链上都没有,才返回undefind

   vs 作用域链(scope chain)

      保存了: 全局/局部的变量

      控制了: 变量的使用顺序

         优先在当前函数调用的函数作用域对象(AO)中查找

         如果函数作用域对象(AO)中没有,才延作用域链向全局方向查找。只要找到,就不再继续

         如果整个作用域链上都没有,才报错

 

鄙视题: 判断一个对象是不是数组类型,有几种方式

   0. typeof只能区分基础类型和function

              无法进一步区分对象的类型

   1. 判断原型对象:

     如果obj的原型是Array.prototype说明是数组

      obj.__proto__==Array.prototype

      问题: __proto__是内部属性,本来浏览器是禁止使用的

      解决: Object.getPrototypeOf(obj)

               获得obj的原型对象

     

 

 

 

 

 

 

正课:

1. *****OOP

   原型链

*****自定义继承

 

1. 原型链:

  判断一个对象是不是数组类型,有几种方法: 4种

  0. typeof X

  1. 判断原型对象:

     obj.__proto__==Array.prototype

         问题: __proto__是内部属性,可能不允许使用

         Object.getPrototypeOf(obj)==Array.prototype

              问题: 只能判断直接父对象是Array.prototype的情况

                       无法判断间接继承Array.prototype的情况

              解决: var bool=father.isPrototypeOf(child)

                  判断father是否是child的父级对象

                     不但检查直接父对象,且检查整个原型链!

   2. 判断构造函数:

       每个原型对象都有一个constructor属性指回构造函数

       obj.constructor==Array

       还可以用: obj instanceof Array

          instance: 实例-用一个构造函数创建出的一个具体对象

         比如: var lilei=new Student(...);

                 称lilei是Student类型的一个实例

                 实例化一个Student类型的对象lilei

          检查整个原型链

 

   要求不够严格: 只要有继承关系,就认为是数组

   要求严格: 只有用数组类型创建的对象,才是真正的数组。

 

   3. 检查对象的class属性

      什么是class: 对象的内部属性,专门保存创建对象时使用的类型名。

       只有一个办法获得class属性值:

          调用Object.prototype.toString();->"[object Class]"

      问题: 所有内置对象都重写了Object中的toString

         重写(override): 如果子对象觉得,父对象的成员不好用,可在本地定义同名的自有成员,覆盖父对象中的。

         ——多态

      解决: 用call强行借用

        call: 强行借用一个本无法调用的方法

        何时:  想调用一个原本无法调用的方法

        如何: 想借用的函数.call(要替换的对象)

             比如: Object.prototype.toString.call(obj)

                         相当于: obj.toString()

                         返回: "[object Class]"

 

   4. Array.isArray(obj);

      问题: ES5   IE9+

      解决: 自定义isArray方法

 

鄙视题: 对象实例方法 vs 构造函数方法

     对象实例方法: 必须用一个对象实例才能调用的方法

                            仅当前类型的对象可用!

        对象实例方法一律保存在该类型的原型对象中,所有子对象共用。

        何时: 一个方法只希望当前类型的子对象才能使用时

     构造函数方法: 不需要任何对象实例,用构造函数即可直接调用的方法。

       构造函数方法一律保存在构造函数对象上

        何时: 一个方法的执行和对象的类型无关时

 

2. *****自定义继承关系:

    1. 修改单个对象的继承关系:

       obj.__proto__=father;

       问题: 内部属性: Object.setPrototypeOf(child,father);

                   设置child继承father

    2. 批量修改多个对象的继承关系:

       直接修改构造函数的prototype引用新的父对象

       obj.prototype=father

       强调: 必须在创建第一个子对象之前就换

    3. 两种类型间的继承: 最像Java的继承

      何时: 只要两种类型间包含相同的属性结构定义或相同的方法。

      如何: 3步:

         1. 抽象出一个父类型

             共同的属性定义,集中到父类型的构造函数中

             共同的方法,集中到父类型的原型对象中

         2. 在子类型构造函数中借用父类型构造函数

              不能直接调用: this->window

             应该用call,将this替换为当前正在创建的新对象

               父类型构造.call(this,参数...)

         3. 让子类型原型对象继承父类型原型对象

 

 

 

 

 

 

 

 

正课:

1. *****ES5

  对对象的保护:

     对单个属性的保护:

         数据属性:

         访问器属性:

 

对对象的保护:

   问题: 属性可随时直接用=赋值任何值

            属性可随时被访问

            可随时添加和删除属性

            ——不严格!

   解决: 对对象提供保护:

  

   如何:

     1. 对对象的属性提供保护

         将对象的属性分两大类:

            1. 命名属性: 可随时通过.属性名方式访问的属性

                  又分为2类:

                     1. 数据属性: 实际存储属性值的属性

                         如何保护: 每个属性都包含四大特性:

                            {

                              value: 实际存储属性值,

                              writable: true/false, //是否可修改

                              enumerable: true/false,//是否可for in遍历

                                    //依然可用.访问到

                              configurable: true/false,

                                  //1. 是否可修改前两个特性

                                  //2. 是否可删除当前属性

                                  //一旦改为false,不可逆!

                             }

                        特殊: 如果要定义的属性不存在:

                           defineProperty会自动添加:

                               自动添加后,属性的特性值都为false

                        问题: 只能提供基本(只读,遍历,删除)保护

                                无法按照自定义规则保护属性

                        解决:

                     2. 访问器属性: 不实际存储属性值

                                            专门对其它属性提供验证保护

                         何时: 只要按照自定义规则保护属性

                         如何: 也有四大特性:

                            {

                       get:function(){return 受保护的属性值},

                               set:function(val){

                                   验证要赋的新值val

                                   验证通过才将val保存到受保护的属性中

                               },

                               enumerable:true/false,

                               configurable:true/false,

                            }

                         当通过访问器属性获取受保护的属性值时

                                自动调用get方法

                         当通过访问器属性为受保护的属性赋值时

                                自动调用set方法

                                    参数val,自动获得要赋的新值

                         大问题: 受保护的属性值应该保存在哪儿?

                                      才能做到比人不能直接用,只能通过访问器属性访问

                         解决: 闭包!

            2. 内部属性: 无法通过.属性名方式访问到的属性

                  class    Object.prototype.toString.call(obj)

                  __proto__  Object.getPrototypeOf(obj)

                                    Object.setPrototypeOf(child,father)

     2. 对整个对象提供保护

 

 

 

 

 

 

 

正课:

1. *****ES5

  对对象的保护:

    对属性的保护

    防篡改

  Object.create();

  数组API:

*****bind()

 

1. 对对象的保护:

   对属性:

     命名属性

        数据属性:

        访问器属性:

           大问题: 受保护的属性值应该保存在?

           解决: 闭包

     内部属性

 

   防篡改: 禁止修改对象的属性结构

     3个级别:

     1. 防扩展: 禁止向对象中添加新属性

         Object.preventExtensions(obj)

     2. 密封: 即防扩展,又禁止删除旧属性

         Object.seal(obj)

            其实是将所有属性的configurable设置为false

     3. 冻结: 即密封,又禁止修改所有属性值!

          何时: 如果一个对象中保存了大量不变的属性值时

             Object.freeze(obj);

             其实是将所有属性的writable设置为false!

 

2. Object.create():

   var newObj=Object.create(father,{扩展的新属性})

    创建一个新对象newObj,继承father,并为newObj扩展新的自有属性

   何时: 只要继承一个现有对象,创建一个新的子对象时

   相当于: var newObj={};

               newObj.__proto__=father;

               Object.defineProperties(newObj,{

          扩展的新属性

               })

 

3. 数组API:

   1. 判断: 数组中的元素是否符合要求

      1. 所有元素是否都符合要求

          var bool=

         arr.every(function(val,i,arr){ return 判断条件 })              2. 是否包含符合要求的元素

          var bool=

              arr.some(function(val,i,arr){ return 判断条件 })

   2. 遍历API: 依次对数组中每个元素执行相同的操作

      1. 对原数组中每个元素执行相同的操作,结果保存回原数组

        arr.forEach(function(val,i,arr){  arr[i]=新值;  });

      2. 取出原数组中每个元素的值,执行相同的操作后,保存到一个新数组中

        var newArr=arr.map(function(val,i,arr){ 

            return 操作后的元素值

        });

   3. 过滤和汇总:

       过滤: 选择原数组中符合条件的元素,组成新数组

       var subArr=arr.filter(function(val,i,arr){

          return 判断条件;

       });

 

       汇总: 将原数组中每个元素统计出一个汇总结果

         var r=arr.reduce(function(prev,val,i,arr){

             return prev+val;

         },0);

         其中: 0: 表示初始值

                  prev: 截止到目前的阶段汇总值

                  回调函数的返回值,自动作为下次的prev值

 

 

 

 

 

 

      

 

以上是关于javascript中级的主要内容,如果未能解决你的问题,请参考以下文章

javascript 中级要点AuthLoadingSample

javascript中级

最小公倍数:中级 Javascript 算法

javascript中级--DOM元素的创建插入删除

[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]

[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]