第一周到第六周复习笔记

2019-03-12 本文已影响0人果木山

第一周到第六周知识复习笔记

第一周到第四周

闭包：当函数被调用的时候，会形成一个私有作用域，保护里面的变量不受外界的干扰，函数的这种保护机制叫做闭包；
对象的特征指的是属性和方法；
逻辑运算符：
- a&&b中，若a为真，b运行，返回b,若a为假，b不运行，返回a;
- a||b中，若a为假，b运行，返回b,若a为真，b不运行，返回a;
  - "||"作为判断语句，用在函数形参赋值中，若调用函数时，传入实参，则函数体内的形参值为传入的实参值，若没有传实参，则赋值默认值；
```
 function fn(arg){
      arg= arg || "默认值";//代表的意思是，若传入实参，则arg为传入的实参值，若未传入实参值，则为"默认值";
  }
```
运算符的优先级：算术》比较》逻辑》赋值；
基本数据类型是对键值对的引用，引用数据类型是对地址的引用；
对象的克隆
- 通过for..in..来遍历原对象，然后复制一份；地址不同；
数组的克隆
- var cloneary=ary.splice(0)通过splice来删除原数组的所有内容，返回一个新的数组，返回的新数组与原来数组相同；即克隆一份，但是原数组发生改变；
- var cloneary=ary.slice(0)或ary.slice()通过slice来从第一项截取数组，返回一个新数组，新数组与原数组相同；即克隆，原数组不发生变化；
- var cloneary=ary.concat()通过concat来拼接一个空元素，进而返回一个新的数组，新数组与原数组相同，即克隆，原来数组不发生改变；
数组常用的方法：14种；
- 数组的增加，删除，改、替换；即：push(),pop(),unshift(),shift();splice()(任意位置的删除，增加，修改);
- 数组元素的查找；即：indexOf();
- 数组的截取，拼接；即：slice(),concat();
- 数组转字符串；即：toString(),join();
- 数组的翻转和排序；即：reverse(),sort();
- 数组的遍历；即：forEach(),map();
数组查找是否存在某元素的方法：indexOf()；如果存在，则返回它的索引值，如果不存在，就返回-1;

eval()方法：参数为原始字符串，即计算某个字符串，并执行其中的JS代码；

实例：

 //1.计算字符串，执行其中JS代码；
 eval("x=10;y=20;document.write(x+y)")//输出的结果为30，即执行document.write(x+y)这个JS代码；
 //2.将数组元素加法运算求和
 var ary=[1,2,3,4,5];
 var str=ary.join("+");//将数组转化为字符串；str为"1+2+3+4+5";
 var sum=eval(str);//即执行js代码运算；

数组排序
- sort()排序：正序：参数为function (a,b){ return a-b }；倒排：参数为function (a,b) { return b-a }；
- 利用对象的属性名默认升序排列的特性，将数组元素作为对象的属性名，然后将属性名遍历，通过push()或unshift()插入到新数组中，就能达到升序和降序的效果；
- 快排：
  1. 取数组中间项作为比较项；
  2. 遍历数组元素，依次与目标项比较，若大于则放在right数组中，若等于则放在middle数组中，若小于则放在left数组中；
  3. 封装函数，利用递归思想，将生成的left和right数组再进行此循环，直到left和right数组长度小于等于1,则返回此数组，停止递归；
  4. 注意：
    1）递归函数的返回值为：return fastSort(left).concat(middle,fastSort(right));
    1. 函数中的条件判断：if(arr.length<=1) return arr;其中arr为函数形参，其每个排序的数组；
- 插排：
  1. 取数组中的一项，利用splice删除，通过返回值获取此项；作为数组arr;
  2. 遍历数组ary,同时也遍历arr,用ary中的每一项与arr中的每一项进行比较；
  3. arr中从前面开始比较；若ary元素小于arr中第一项，则将其插到此项前面，break阻断arr循环；若大于等于，则向后继续循环，直到最后一项，然后插在末尾；
  4. 注意：
    1）在ary元素确认插在arr元素中后，就break阻断arr的循环；
    2）若ary元素均比arr元素大，则插在arr数组的末尾；需要进行条件判断；
    3）在arr遍历循环中，直接写j<arr.length；会出bug，页面会持续加载，需注意；
数组去重：五种；
- sort排序后，遍历数组，让i项和i+1项比较，若相同删除一项，注意防止i塌陷；以及i的最大值为ary.length-1;
- 两个遍历,数组中每一项和后面所有项进行比较，若相同，则删除其中重复项j，注意防止j塌陷；
- 新建空数组arr,遍历ary数组，通过indexOf()方法，判断arr中是否存在ary遍历的元素，若为-1,则不存在，插入arr中；
- 利用对象的不重复特性；将ary遍历，元素作为obj对象的属性名，通过判断属性名是否存在，若不存在，则赋值为1，若存在，则在ary中删除元素；
- 利用对象的不重复特性，与d中方法相同，不再删除ary中的元素，而是，获取生成的obj对象中的所有属性名，通过for..in循环，来将所有属性名push进一个数组中，但需注意：获得的属性名为字符串，所以需要Number来转化；
NaN和isNaN()的运用
- NaN为假，用在if条件语句中，会执行条件不成立时的语句；
- isNaN(NaN)为真，用在if条件语句中，会执行条件成立时的语句；
对象的特性
- 属性名不重复性；
- 属性名为数字时，遍历对象拿到的为字符串，属性值为数字，遍历对象后拿到的为数字；
- 属性名为数字时，不管定义顺序如何，定义后，获得的对象，均按升序排列，数字在前，字母在后，字母按定义顺序排列；
字符串
- 常用的方法：charAt(),indexOf(),substr(),substring(),split(),toUpperCase(),toLowerCase();
- 与正则配合的方法：split(),match(),replace(),search();
undefined出现的四种情况
- 函数中变量只声明未定义，获得的值为undefined;
- 函数未设置返回值，则函数执行完的返回值为undefined;
- 函数体设置形参，函数调用时未传入实参，则获得的形参值为undefined;
- 对象身上不存在某属性，则属性值拿到的为undefined；
隐式数据类型的分类及比较
1. 隐式数据类型分类
- 提示种类
  - 如果一个元素存在某一属性，但是未设置，则使用的时候，就会报错： xxx is not defined;
  - 如果一个元素身上不存在此类属性，使用的时候，就会出现undefined,属性不存在不会报错；
  - 获取元素时，若未获取元素，则使用元素时，会报错：of null;
- 数据类型
  - 基本数据类型（5种）:字符串string，数字number，布尔值Boolean，null，undefined；
    - undefined出现的几种情况：1）函数变量找不到会报错，但是变量只声明未定义，则会返回undefined；2）函数定义中未设置返回值，此时函数为一个操作，而不是一个数值，所以使用函数的结果输出的值为undefined；3）对象身上的属性不存在的时候；4）定义了形参，但没有实参，拿到的参数是undefined;
- 其他数据类型转化为number数据类型
  - 一个严格转换：Number();转换的字符串中只能存在数字，不能存在其他字符；即"123"；可以保留小数；
  - 两个非严格转换：parseInt()-只能转化为整数，向下取整；parseFloat()-可以保留小数；
    - 如：var num="123.6666美好345";其中parseInt(num)转换结果为123；parseFloat(num)转换结果为123.6666；Number(num)转换结果为NaN;
  - 如果转换失败的话，返回的结果是NaN:not a number;不是数字；但NaN是number数据类型；
- 关于NaN:
  - NaN是number数据类型；
    - 函数中在没有传实参时，两个变量相加，则值为NaN;
```
function sum(m,n){
        alert(m+n);
        //当没有传实参的时候，拿到的n=undefined;m=undefined;
        //undefined+undefined=NaN;
    }
    sum();
```
  - isNaN()判断是否为非有效数字（即判断是否为NaN）；非有效数字（为NaN时）：true；有效数字：false；
- 算术运算符：+,-,*,/,%
  - 加号"+"：1）字符串拼接（只要不是数字间相加，其余的全部拼接）；2）加法运算:全部是数字之间的加法；3）null+10的值为10；
  - 减号"-",乘号"*",除号"/",取余"%":全部进行数学运算，会默认进行数据转换（按照严格转换Number());
  - 比较：null在与数字进行运算时，会被严格转换为0；undefined参加运算时，会被严格转换成NaN，结果为NaN;
  - 例：("123px"+3)=123px3；("123px"*-/%3)=NaN;
- 严格比较===:不仅在乎结果，而且在乎数据类型;非严格比较==：只在乎结果，不在乎数据类型；
  //==非严格比较，===严格比较 console.log(123=="123");//结果打印出true; console.log(123==="123");//结果打印出false;因两者数据类型不同；
- 真假情况：
  - 假：共6个；空字符串“”，0,false,null,undefined,NaN;
    - 6个假中有两个为Number类型：0，NaN；
  - 真：除了假全是真；注：字符串中有空格的情况为真，即"空格";
1. 隐式数据类型比较：
- 转化基础：
  - 空数组[]默认通过toString()转化成空的字符串再通过Number转换成0；即[]—》""—》0；
  - null==undefined 为真；
  - null与数字比较为假，即：null==0为假；但是null+10==10为真;
  - undefined+10==NaN;
  - false默认转换为0；true默认转换为1；
- 数字与其他类型比较
  - 数字==字符串即：字符串非严格转为数字，如""==0,"123"==123;
  - 数字==布尔值即：布尔值转为数字，其中（false默认为0，true默认为1）如0==false; 1==true;
  - 数字==undefined 即：结果为假；
  - 数字==对象即：对象转为数字，[]默认转为0；[12]转为12；如[]==0,[12]==12;均为真；
    - 0==![]为真；即当[]添加!后，先执行！，即转换为数字与布尔值的比较，[]为真，![]则为假；变成数字与布尔值的比较，不再是数字与对象的比较；
  - 总结：数字与任何基本数据类型或引用数据类型非严格计较，其他类型全部转化为数字，再进行比较；
- 字符串与其他类型比较
  - 字符串与布尔值即：都转为数字，进行比较。如""==false;"1"==true;
  - 字符串与对象（数组）即：都转化为字符串进行比较，如 ""==[];"12"==[12];"12"==["12"]均为真；
- 布尔值与其他类型进行比较
  - 布尔值与对象（数组）即：都转化为数字，再进行比较；如：false==[];false==[0];false==["0"];true==[1];true==["1"]均为真；
  - 布尔值与对象比较实例：[]==![],![]添加!后，就变成布尔值，即转化为对象与布尔值的比较，二者全部转化为数字，前者[]转化为数字0；后者![]中[]为对象，为真，加非后为假，false转化为数字为0；所以[]==![]为真；
- null与undefined比较
  - null==undefined为真；
  - null与任何其他类型都不等；
  - null与数字比较为假，即：null==0为假；但是null+10==10为真;
  - undefined与任何其他类型都不等；只与null相等；
- NaN与任何其他类型都不等，跟自身也不相等；
- 对象与对象的比较：即[]==[]为假，因为引用数据是对地址的引用，不同的地址比较，不同；
- 优先级：在数据类型比较中，一旦遇到!，立即或优先进行布尔值的转换；
DOM节点属性
- 分为：nodeName,nodeValue,nodeType;
  - 元素节点：nodeName：大写的标签名；nodeValue：null；nodeType:1;
  - 文本节点：nodeName:#text;nodeValue:文本内容；nodeType:3;
  - 注释节点：nodeName:#comment;nodeValue:注释内容；nodeType:8;
  - 文档节点：nodeName:#document;nodeValue:null;nodeType:9;
遍历DOM树
- elementNode.childNodes:获取元素节点下所有的子节点；
  - 兼容性不同：IE7/8浏览器中不存在空白节点；而在firefox/chrome/opera/safari浏览器中存在空白节点；
- nodeObject.previousSibling/nextSibling：获取本节点的上、下一个同级节点；若无，则返回null；
- nodeObject.previousElementSibling：返回给定子节点的上一个哥哥元素子节点；
  - 兼容性不好，IE浏览器不支持；
- 封装兼容函数：获取指定子节点的上一个哥哥和下一个弟弟元素节点；
  - 判断浏览器是否支持node.previousElementSibling;
  - 若不支持，则筛选节点类型nodeType；筛选条件while(pre && pre.nodeType!==1){ pre=pre.previousSibling }；
判断对象属性是否存在的两种方法
- in:属性名 in 对象,存在,返回true,不存在，返回false;
- ".":对象.属性名,存在，返回属性值，为真；不存在，返回undefined;
- "hasOwnProperty":obj.hasOwnProperty("xx"),判断xx是否为obj的私有属性；判断普通对象身上的属性是否存在；若存在，则返回true，不存在，返回false;
可视区域的宽高
- 浏览器可视区域的宽高的兼容处理:不包括滚动条；默认17px滚动条；
  - 可视区域的宽度：document.documentElement.clientWidth || document.body.clientWidth;
  - 可视区域的高度：document.documentElement.clientHeight || document.body.cilentHeight;
  - 兼容性问题分析：
    - document.documentElement.clientWidth/Height：除了IE5浏览器不支持，其他的都支持；
    - document.body.clientWidth/Heigth：在IE5浏览器中作为浏览器的可视区域宽高获取；
    - document.body.clientWidth
      - 在IE8以上浏览器中，与document.documentElement.clientWidth差16px，即body元素默认的margin值(8px);
      - 在IE7浏览器中，与document.documentElement.clientWidth差20px,即body元素默认的margin值(10px);
      - 在IE5浏览器中作为浏览器的可视区域宽度获取；document.documentElement.clientWidth失效；
    - document.body.clientHeight
      - 在IE7及以上浏览器中，用于获取body标签的高度；
      - 在IE5浏览器中，作为浏览器的可视区域高度获取；
- HTML中body标签的可视区域宽高
  - body标签的可视区域宽度：document.body.clientWidth;指body标签的宽度；
  - body标签的可视区域高度：document.body.clientHeight;除IE5以外，均指body标签的高度；
- window.innerWidth/Height
  - 作用：IE9及以上浏览器支持；与document.documentElement.Width/Height的唯一区别是，它包含滚动条，若页面生成滚动条，则包含滚动条的默认17px，而document.documentElement.Width不包含滚动条；
children与childNodes的区别
- children：获取元素节点的所有子元素节点；除IE8浏览器外，获得所有的元素子节点；在IE8中会将注释节点算入，会出错；
- childNodes:获取元素节点的所有子节点，子节点包含：元素节点，空白文本节点，文本节点，注释节点等；
- 封装函数：获取指定元素节点的所有元素子节点；判断条件为：判断浏览器的种类；
判断浏览器种类
- window.navigator.userAgent：获取当前浏览器的信息；
- 通过字符串方法indexOf()来判断浏览器种类；其中谷歌为Chrome，火狐为FireFox；IE浏览器为MSIE 8.0/7.0/10.0；
DOM操作
- 节点克隆：node.cloneNode(true/false);
  - node:为被克隆的节点；
  - 返回值为克隆后的新节点；
  - 参数：true:深度克隆，此节点的子孙节点均克隆；false:浅克隆，只复制本节点，不复制子孙节点；false为默认值；
元素节点设置属性和获取属性的两种方式及对比
- .或[]设置和获取属性；设置的自定义属性不显示在标签上；
- getAttribute/setAttribute:获取和设置属性；设置的自定义属性显示在标签上；
- 区别：
  - 通过点设置的自定义属性，不能在标签上显示，而setAttribute设置的自定义属性可以在标签上显示；
  - 元素身上已经设置的自定义属性，通过点获取不到，只能通过getAttribute来获取；
- 注意：二者不能混搭，即通过点设置的自定义属性，不能通过getAttribute来获取；
数据类型检测
- in:用于检测对象上是否存在某属性；
- obj1 instanceof Object :检测前面的对象是否属于后面的类；
- typeof xxx：检测xxx所属的数据类型；
- obj.constructor：拿到所属的构造函数；
数据类型转换
- Number(null)为0，Number(undefined)为NaN;
- Number("")为0，Number("空格")为0；
- Number(new Date())为距格林尼治时间的毫秒数；为数字类型，则isNaN()为false;
- Number(new Date().toString())为NaN;
- if条件语句中，条件会默认转化为布尔值；
类数组：htmlCollection元素集合，arguments：实参类数组；
arguments.callee()：拿到函数本身；
通过setTimeout()来实现setInterval()
- 需要一个setTimeout()来实现，setInterval()的开始时延迟效果；
- 需要第二个setTimeout()来实现函数的递归思想，自己调用自己，可以通过arguments.callee来获取函数体自身；

第五周

git的基本操作：上传文件到Github，从Github上克隆东西；
预解释
- 只有带var和function的进行预解释；
- 同级作用域下同一个变量名不能重复声明，但可以重新赋值；
- function进行预解释后，自上而下运行到function定义函数时，跳过不做任何操作；
- 自执行函数不会提前进行预解释，只有在执行到它时，才开始声明+定义+调用同步完成；
- 函数中return后面的语句不会进行预解释，而下面的语句会进行预解释，但不会执行；
- IE10及10以下浏览器中，在条件判断语句中，不管条件是否成立，只要存在function定义函数，就都会进行预解释，声明加定义，当运行到function函数时，跳过不做任何操作；
- IE11和其他非IE浏览器，不管条件是否成立，if和else语句中的function定义函数会进行预解释，但不同的是，预解释函数只会声明，但不定义，意思是在私有作用域中，预解释会存在私有变量名，但不会赋值，所以在未赋值之前，获取变量名值为undefined，不会向上级作用域查找该变量名；当运行到定义阶段时，就会给变量赋值；
- 回调函数中，function的定义阶段作为值赋给变量后，不再进行预解释；
作用域链：
- 作用域：函数调用后，会形成一个私有作用域，两个独立的私有作用域之间无联系；
- 上级作用域：私有作用域对应的堆地址的开辟空间；
- 作用域与上级作用域组成作用域链；
内存及内存释放
- 堆内存释放：
  - 如var a=[1,2,3],释放a=null;
- 栈内存包含全局作用域和私有作用域；
  - 全局作用域的形成和释放
  - 私有作用域的形成和释放
this指向
- 元素身上的事件触发时，匿名函数中的this指向当前元素；
- 自执行函数中的this指向window;
- 回调函数：函数体作为参数传入另一个函数中，此函数称为回调函数；
  - 回调函数中的this指向，赋给另一个函数点前面的对象，如果没有，则为window；
  - 回调函数的几种情况：定时器
面向对象
- 面向对象的oop,oo思想：封装，继承，多态；
- 设计模式
  - 单例模式：多个独立的对象，对象自身属性的调用，和对象间的属性调用；
    - 缺点：对象需要全部定义，重复设置对象属性，非常麻烦；
  - 工厂模式：封装函数，函数内创建新对象，通过形参赋值，添加属性，来获取不同的对象；
    - 缺点：当对象属性值为函数时，会在创建对象时，形成新的堆地址；内存量会很大，不利于优化；
  - 构造函数模式：精简工厂模式中的创建对象和返回对象两个步骤，其他的没有实质改变；
    - 缺点：与工厂模式类同，每创建一次实例对象，则对象中属性值为函数的情况下，都会形成新的堆地址；
  - 构造函数原型模式：在构造函数基础上，将公共的属性和方法，放在了类函数的原型上，原型只有一个，里面设置的属性名为函数时，只建立一个堆地址，通过实例对象调用公共属性方法；
    - 优点：解决了单例模式的重复创建属性方法的麻烦，解决了工厂模式和构造函数模式的属性名为函数时，堆地址的重复创建问题；
- 类函数的实质：创建一个函数，返回一个对象；
形成的三个条件反射
- 看到构造函数——存的是私有属性和方法；
- 看到protoType——存的是公共属性和方法；
- 看到_ _proto_ _——指的是原型链；
数据类型判断
- 在JavaScript里使用typeof来判断数据类型，只能区分六种，即"number","string","undefined","boolean","object","function";
- 对于数组，null，对象来说，使用typeof都会统一返回"object"字符串；
- 要区分数组，null，对象可以使用对象原型上的toString()方法；
  - 对象可以直接调用toString()使用；但数组和null不能直接使用；会出错；
  - 通过Object.prototype.toString.call(xxx);来判断xxx的具体数据类型；
  - 对象返回的结果为"[object Object]";数组返回的结果为："[object Array]";null返回的结果为："[object Null]"
原型链
- 通过__proto__来查找所属类的原型；
- 通过obj1.isPrototypeOf(obj2)来判断obj1是否在obj2的原型链上；如Function.prototype.isPrototypeOf(Object);

函数的三种角色

普通函数：函数的调用执行；需注意的是当函数定义阶段，如果添加返回值，可能会影响实例this的返回，如果返回值为基本数据类型，不会影响this，如果返回值为引用数据类型，函数不再返回this，而是该引用数据类型的地址；
类函数：实例，原型，原型链
普通对象：函数名作为对象名，拥有对象的功能，添加的属性称为静态属性；通过Fn.xx来设置和获取；
三种角色的实际考察题

 <script>
     function Foo() {
         getName=function () { alert(1);};
         return this;
     }
     Foo.getName=function () { alert(2);};//将函数当做对象添加属性名及属性值；
     Foo.prototype.getName=function(){ alert(3);};//将函数作为类，添加公共的属性及方法，只有当函数被作为类调用时，才进行这步；
     var getName=function (){alert(4);};//预解释：只声明不赋值，var getName;
     function getName(){ alert(5);}//预解释：声明加定义，由于名字一样，所以会覆盖var的声明；
     Foo.getName();//结果为2；考察的是将函数作为普通对象使用；
     getName();//结果为4；考察的是全局变量；
     Foo().getName();//结果为1；
      //1）考察函数执行中自己私有作用域中查找不到变量，去上级作用域中查找；并重新赋值；考察作用域链；
     // 2）考察的是Foo()函数执行中的this指向，为window;再进行window.getName()执行；
     getName();//结果为1；此时的全局变量已经被重新赋值，考察全局变量；
     new Foo.getName();//结果为2；考察：先执行Foo.getName，对象属性，在通过new把Foo.getName看作类；
     new Foo().getName();//结果为3；考察：先执行new Foo(),把Foo看作类；然后再查找实例对象中的getName属性，没有去所属类的原型中查找；考察原型链；
 </script>

基类（Object类）原型上的属性方法
- obj.hasOwnProperty("xxx")：用于判断obj对象身上是否存在xxx私有属性，一般用于实例对象的判断；
  - 对比in方法，in方法也是判断对象身上是否存在某属性，但in判断属性时，私有和公有属性都会返回true；
- toString()：输出this所属类的详细信息；通过call来改变this；就可以输出其他数据的详细信息；
  - Object.prototype.toString.call(xxx)：利用call方法，来使用对象原型上的方法；来判断xxx的详细种类；输出结果如"[object Array]"
  - 代码验证：
```
 console.log(Object.prototype.toString.call(123)) //[object Number]
 console.log(Object.prototype.toString.call('123')) //[object String]
 console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
 console.log(Object.prototype.toString.call(true)) //[object Boolean]
 console.log(Object.prototype.toString.call({})) //[object Object]
 console.log(Object.prototype.toString.call([])) //[object Array]
 console.log(Object.prototype.toString.call(function(){})) //[object Function]
```
- isPrototypeOf()：判断原型链的关系，如obj1.isPrototypeOf(obj2)则代表，判断obj1是否在obj2的原型链上；如Function.prototype.isPrototypeOf(Object);
对象的遍历（for..in）
- 通过for..in..循环来遍历对象：
  - 遍历对象自定义的私有属性；
  - 遍历对象原型上自定义的公有属性；(不包括constructor属性)
  - 遍历对象所属基类(Object类)上自定义的属性；
Function类原型上三个改变this执行的属性
- call(arg1,arg2,arg3,...):改变this指向为arg1,给函数传参数，剩余的参数从左向右依次传参；
- apply(arg1,ary):改变this指向为arg1,给函数传参，ary为数组，将数组中的元素依次传参；
- bind(arg1,arg2,arg3,...):函数的预处理，即函数定义阶段预处理，方法与call相同，不过，函数不会立即执行，需要出发执行，多与事件一起使用；
  - 注意：bind不兼容，IE8及其以下浏览器不支持；
- 若不需要改变this指向，则必须赋值为null；
继承
- call继承：通过在子类构造函数中，调用父类函数，改变父类函数中的this指向为子类的实例对象this，然后调用函数执行，即对this进行赋值；
  - 结果：继承了父类函数的私有属性；即，父类构造函数中进行的操作，在子类函数中再做了一遍；
- 拷贝继承：封装函数，通过for-in循环遍历父类原型对象，将属性赋值给子类原型对象；
  - 优点：1）for-in循环遍历对象，只会遍历其自定义的私有属性和公有属性，不会遍历其系统属性，即不会遍历父类原型上的constructor属性，这样子类原型上的constructor不会被重新赋值；2）可以在遍历函数类的静态属性，将函数类作为普通对象遍历，然后赋给子类函数，拷贝类函数的静态属性；
  - 缺点：比较麻烦，需要自己封装函数；
- 原型继承：子类的原型作为父类的实例；实质：通过原型链查找属性和方法；
  - 缺点：1）子类的原型被重新赋值地址，自带的constructor没有了，需要重新设置；2）子类原型上会存在父类的私有属性，所以可以省去call来继承私有属性，可以通过原型链使用父级身上的私有属性；二者取其一，避免重复；
- 寄生式组合继承：添加中间介质，新建类函数，让类函数的原型等于父类的原型；然后子类原型作为新建类的实例；
  - 优点：可以解决原型继承中的问题，子类的原型上会存在父类的私有属性；但是必须通过call来获取父类私有属性；
  - 缺点：子类原型上的constructor，需要重新设置；

第六周

数组的平均值
- 规则：删除数组中的最大值和最小值，然后剩下的求和取平均值；
- 方法：sort(),pop(),shift(),join(),eval(),toFixed();
类数组
- 类数组的类型分为两种：htmlCollections(元素集合)，arguments(函数中获取的所有实参组成的数组)；
- 类数组不能使用数组的方法；
  - 通过数组拿到原型上的方法，可以通过call来改变this，将类数组传入方法中就可以使用该方法，如Array.prototype.slice.call(arguments);
- 类数组转数组
  - 核心：就是将类数组中的属性复制一份返回一个新的数组，这样新的数组就可以使用数组原型上的属性和方法了；
  - 如何做：通过循环遍历类数组，然后进行赋值；——这种方法太low；
  - 方法：与数组克隆的知识相结合，以及通过call来使类数组调用数组的方法；
    - 运用silce方法：[].slice.call(arguments)或Array.prototype.slice.call(arguments);
    - 运用splice方法：[].slice.call(arguments,0)或Array.prototype.splice.call(arguments,0);兼容性不好，不采用;
    - 不能使用concat方法；
  - 兼容性：
    - 针对于arguments类数组转数组；slice方法所有浏览器都兼容，splice方法IE8及其以下浏览器不兼容；
    - 针对于htmlCollections类数组转数组；slice方法在IE8及其以下浏览器下不支持；splice方法都不支持；
- 封装类数组转数组的兼容函数
  - 在IE8及其以下浏览器，用循环遍历赋值，IE8以上浏览器，用slice方法；
  - 判断条件：利用try{}catch(e){}来进行条件判断；
    - 因为，两种类数组的兼容性不同，slice方法在arguments转化时，所有浏览器都兼容，而htmlCollections转化时，IE8及其以下浏览器不兼容，会报错；
    - 所以，判断条件只能是用报错捕获try{}catch(e){};
浏览器异常捕获
- 代码：try{...}catch(e){...}finally{...};
- 解读：
  - 当try里面的语句不报错时，不走catch，走finally内语句；
  - 当try里面的语句报错后，走catch，也finally内语句；
  - catch语句处理错误e
    - 代码：console.log(e);输出结果：打印出黑色的报错代码；
    - 代码：console.error(e);输出结果：打印出红色的报错代码；
    - 代码：throw new Error(e);输出结果，阻断下面代码执行(不会阻断finally中代码执行)，将错误抛出；
    - 总结：finally内的语句不会受影响，都会运行；
window为Window的实例对象；JSON为window的私有属性；
JSON对象
- JSON对象中的属性名也要写成字符串的类型；
- 属性方法
  - JSON.parse():将json格式的字符串转化为json格式的对象；
  - JSON.stringify():将json格式的对象转化为json格式的字符串；
- 兼容性：在IE7以下浏览器中，window不存在JSON属性；window.JSON得到的值为undefined;
封装兼容性函数：将json格式的字符串转化为json格式的对象；
- 兼容性：IE7及其以下浏览器，window中JSON属性不存在；
- 判断条件：window.JSON是否存在，若不存在，返回undefined;
  - 存在：使用JSON.parse(str)获取；
  - 不存在：使用eval("("+str+")");
sort排序
- 数组内容为数字，数字的升序降序,ary.sort(function(a,b){ return a-b; })
- 数组内容为数字开头+汉字或字母，通过内容前面的数字进行排序，即
```
 ary.sort( function(a,b){
    a=parseInt(a);
    b=parseInt(b);
    return a-b;
  }
```
- 数组内容为汉字，按照内容汉字的首字母进行排序；
```
 ary.sort( function(a,b){
    return a.localeCompare(b);//按照从a-z排列；
  }
```
DOM映射
- 定义：html页面中DOM结构，跟通过JS获取到的元素集合htmlCollection之间，存在一一对应的关系；
- 改变DOM结构的方法：appendChild(),insertBefore(),removeChild(),replaceChild();
页面绑定数据的两种方式
- 字符串拼接：将元素标签以字符串的形式进行拼接为一个大的字符串，然后将字符串添加到指定元素内；通过innerHTML+=str；
- DOM动态插入：创建元素节点，给元素节点插入内容，最后统一将元素节点插入到指定元素节点中；通过appendChild()等；
  - 存在问题：如果创建一个节点，就插入DOM中，会对页面产生影响；不利于优化；
  - 解决方案：创建一个文档碎片，作为所有操作的容器；创建的节点全部插入到此文档碎片节点中；最后统一将文档碎片插入到DOM中，插入后，将文档碎片释放（赋值为null），进行性能优化；
    - 创建文档碎片：var frg=document.createDocumentFragment();
    - 文档碎片释放：frg=null;
ajax请求
- 基础的四步；
  - 创建xml对象；
  - 打开文件；
  - 发送请求；
  - 响应请求；
表格中元素的获取
- thead元素：只有一个，获取的为一个元素otHead=oTab.tHead;
- tbody元素：可以有多个，获取的为一个元素集合atBody=oTab.tBodies;
- 行tr元素：多个，获取的为一个元素集合aRow=otHead.rows;
- 列th/td元素：多个，获取的为一个元素集合aCell=otBody[0].rows[0].cells;
正则
- 正则表达式的创建：实例创建和字面量创建；
- 实例创建和字面量创建的区别；
- 正则表达式的组成
  - 元字符：特殊含义元字符（18个）和量词元字符（6个）；
  - 修饰符：3个；
- 正则是针对字符串进行操作的；
- 正则RegExp类原型上的两个方法：test,exec;
- 正则RegExp类的私有属性lastIndex属性，也是实例对象的私有属性
- 正则的两个方法，都是在lastIndex的基础上执行的；默认为0；
  - 正则表达式不添加全局g，lastIndex不会变化，一直为0；
  - 正则表达式中添加全局g后，lastIndex才会改变；两个方法，都会对lastIndex产生影响，二者混合使用时，要避免出错；
- 使用正则的两个方法时，必须要注意lastIndex属性值，lastIndex属性值绝对了方法开始查找的位置；
- 正则RegExp类作为普通对象时，身上的私有属性，即静态属性；
  - 代码：RegExp.$1，指的是获取正则表达式中的小分组内容；其中 $1指的是第一个小分组的内容，$ 2指的是第二个小分组的内容；
  - 使用条件：
    - 必须正则查找匹配后，才能获取值；否则，为空；
    - 查找匹配的方式：可以是test,exec方法，也可以是match,replace方法；只要进行正则匹配查找，才会有值；
    - 值会被重新赋值，值为最后一次进行匹配查找后的小分组的内容；
- 重复子项：\1代表第一个小分组的内容；\2代表第二个小分组的内容；
- 正则只匹配不捕获：
  - 针对小分组；
  - 在小分组括号中添加?:，即只作为提高优先级作用，作为分组效果，只匹配内容，不获取小分组的内容；
  - 代码：var reg=/tiankong(?:\d+)/;;
- 正则表达式里，中括号和小括号的区别和应用；
字符串配合正则使用的方法
- 四个方法：match,replace,search,split;
- 主讲：replace();
  - 通过正则来查找被替换的内容（添加全局g）；
  - 通过回调函数的返回值作为待替换的内容；
  - 通过回调函数中的参数来对正则查找的内容进行操作；
统计字符串中字符的重复次数的方法；
- 对象不重名的特性来统计；
- 重复子项方法来统计；
封装urlParse()方法
- 作用：将url地址中传给服务端的键值对参数，以对象的形式输出；
- 封装位置：封装到String类的原型上；字符串均可使用；
- 正则表达式：var reg=/([^?&=]+)=([^?&=]+)/g；
封装formatDate()方法
- 作用：将字符串格式的日期，转化为指定模板的字符串日期；
- 封装位置：封装到String类原型上；
- 思想：
  - 使用||来设置默认模板；
  - match()方法：获取原字符串中的日期数字；
  - repalce方法；将日期数字替换模板中的指定位置；
  - 返回字符串，此时实例this就是字符串，所以可以返回字符串；
注：类函数原型上的方法中，this为实例对象，但不默认返回this；根据功能返回相应的数据；在自定义公共属性时，如果不设置返回值，则函数执行后返回值为undefined;
数组遍历的forEach()和map()方法
- 在IE8及其以下浏览器都不兼容；不支持forEach和map方法；
- 封装兼容的方法；

第一周到第六周复习笔记

第一周到第六周知识复习笔记

第一周到第四周

第五周

第六周

猜你喜欢

热点阅读