javascript高级程序设计阅读总结

5章 引用类型

1、object类型

• 创建
  
  1、var obj ={} ---对象字面量
  
  2、var obj = new Object(); ---new操作符

2、Array类型

• 创建
  
  1、var arr = new Array();
  
  2、var arr = [];

检测数组

• instanceof
• Array.isArray()

转换方法

• 所有对象都具有 toLocaleString() 、 toString() 和 valueOf() 方法
• join() ----数组转为字符串

栈方法、队列方法

• push() 和 pop() ---向后推入(返回值为长度) 和 弹出(返回值为弹出值)
• unshift() 和 shift() ---向前推入(返回值为长度) 和 弹出(返回值为弹出值)

重排序方法

• reverse() ---反转数组项的顺序
• sort() ---按升序排列数组项

    //比较函数（数字排序）
    function compare1(value1, value2){
        return value2 - value1;
    }
    //对象按照对应的属性排序
    var arr =[{
        'name': 'ccc',
        'age': 12,
    },{
        'name': 'bbb',
        'age': 8,
    },
    {
        'name': 'aaa',
        'age': 45,
    }]
    function compare(propertyName){
        return function(obj1,obj2){
            var value1 = obj1[propertyName];
            var value2 = obj2[propertyName];
            if(value1<value2){
                return -1;
            }else if(value1>value2){
                return 1;
            }else{
                return 0;
            }
        }
    }
    var resulte = arr.sort(compare('name'));
    console.log(resulte)

操作方法

• concat()---基于当前数组中的所有项创建一个新数组（数组拼接）
• slice()---接受一或两个参数，即要返回项的起始和结束位置(数组切割)
• splice()
  • 删除 需提供第一项的位置，第二项为删除的个数
  • 插入 需提供第一项的位置，第二项为0，第三项为插入的内容
  • 替换 需提供第一项的位置，第二项为需替换的个数，第三项为插入的内容

位置方法

• indexOf() 和 lastIndexOf() ---这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引

迭代方法

• every() ：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true 。
• some() ：对数组中的每一项运行给定函数，如果该函数对任一项返回 true ，则返回 true 。
• filter() ：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
• map() ：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• forEach() ：对数组中的每一项运行给定函数。这个方法没有返回值。

归并方法

• reduce() 和 reduceRight():这两个方法都会迭代数组的所有项，然后构建一个最终返回的值

    //reduceRight() 从右开始
    var values = [1,2,3,4,5];
    var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
    });
    alert(sum); //15

3、Date类型

• 创建
  
  var date = new Date();

• 日期格式化方法：

  • toDateString() ——以特定于实现格式显示星期几、月、日和年；
  • toTimeString() ——以特定于实现的格式显示时、分、秒和时区；
  • toLocaleDateString() ——以特定于地区的格式显示星期几、月、日和年；
  • toLocaleTimeString() ——以特定于实现的格式显示时、分、秒；
  • toUTCString() ——以特定于实现的格式完整的 UTC 日期。

• 日期/时间组件方法：

  • getTime() 返回表示日期的毫秒数；与 valueOf() 方法返回的值相同
  • getFullYear() 取得4位数的年份（如2007而非仅07）
  • getMonth() 返回日期中的月份，其中0表示一月，11表示十二月
  • getDate() 返回日期月份中的天数（1到31）
  • getDay() 返回日期中星期的星期几（其中0表示星期日，6表示星期六）
  • getHours() 返回日期中的小时数（0到23）
  • getMinutes() 返回日期中的分钟数（0到59）
  • getSeconds() 返回日期中的秒数（0到59）
  • getMilliseconds() 返回日期中的毫秒数
    
    set表示设置

4、RegExp类型

• 创建
  
  1.var expression = /pattern/flags;
  
  2.var expression2 = new RegExp("pattern","flags");
• 实例属性：
  • global ：布尔值，表示是否设置了 g 标志。
  • ignoreCase ：布尔值，表示是否设置了 i 标志。
  • lastIndex ：整数，表示开始搜索下一个匹配项的字符位置，从 0 算起。
  • multiline ：布尔值，表示是否设置了 m 标志。
  • source ：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。
• 实例方法：
  • exec() 接受一个参数，即
    
    要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回 null 。
  • test() 它接受一个字符串参数。在模式与该参数匹配的情况下返回true ；否则，返回 false
• RegExp 构造函数属性
  • input 属性返回了原始字符串；
  • leftContext 属性返回了单词 short 之前的字符串，而 rightContext 属性则返回了 short
    
    之后的字符串；
  • lastMatch 属性返回最近一次与整个正则表达式匹配的字符串，即 short ；
  • lastParen 属性返回最近一次匹配的捕获组，即例子中的 s 。

5、function类型

• 创建
  
  1、function fn(){}
  
  2、var fn = function(){};
  
  3、var fn = new Function(); //不推荐
• 做为值的函数

    //对象按照对应的属性排序
        var arr =[{
            'name': 'ccc',
            'age': 12,
        },{
            'name': 'bbb',
            'age': 8,
        },
        {
            'name': 'aaa',
            'age': 45,
        }]
        function compare(propertyName){
            return function(obj1,obj2){
                var value1 = obj1[propertyName];
                var value2 = obj2[propertyName];
                if(value1<value2){
                    return -1;
                }else if(value1>value2){
                    return 1;
                }else{
                    return 0;
                }
            }
        }
        var resulte = arr.sort(compare('name'));
        console.log(resulte)

• 函数内部属性
  • this对象
  • arguments对象 -->arguments.callee代表函数指针
  • caller -->调用当前函数的函数的引用(arguments.callee.caller)

    //定义阶乘
    //递归算法 arguments.callee(优先使用)) 等价于 factory
    function factory(num){
        var resulte = 0;
        if(num<=1){
            return 1;
        }else{
            return num * arguments.callee(num - 1);
        }

    }
    console.log(factory(4));

• 函数的属性和方法
  • 属性
    • length 表示函数希望接收的命名参数的个数
    • prototype 保存它们所有实例方法
  • 方法
    • apply() --> 一个
      
      是在其中运行函数的作用域，另一个是参数数组(arguments 或者 数组)
    • call() --> 另一个是参数需逐个列举出来
    • bind() --> 这个方法会创建一个函数的实例，其 this 值会被绑
      
      定到传给 bind() 函数的值

6、基本包装类型

Boolean类型 -- 建议不要使用

Number类型

• toFixed() -- 保留小数
• toExponential() -- e 表示法
• toPrecision() --以上两者结合

String类型

• str.charAt(i) 等价于 str[i] -- 返回对应下标的字符
• str.charCodeAt(i) --返回对应下标的字符编码
• -----字符串操作方法-----
• concat()
• slice()、substr()、substring() --- 切割字符串方法，接收两个参数
  • 第一个开始位置，第二个结束位置。只传一个参数默认到最后，substr第二个参数指返回字符的个数
  • 如果有负数:slice()方法会将传入的负值与字符串的长度相加,----------------substr() 方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为 0,------------ substring() 方法会把所有负值参数都转换为 0
• -----字符串位置方法-----
• indexOf() 、lastIndexOf() ---查找字符，返回下标，没找到返回-1
  • 都可以接收第二个参数，表示从字符串中的哪个位置开始搜索
• trim() ---删除前置及后缀的所有空格
• -----字符大小写转换方法-----
• toLocaleUpperCase() 和 toUpperCase() ---转大写，前者针对地区
• toLocaleLowerCase() 和 toLowerCase() ---转小写，前者针对地区
• -----字符串的模式匹配方法-----
• match() --- 只接收一个参数(正则表达式、regExp对象、字符串)，返回一个符合匹配的数组,支持g,没找到返回null
• search() ---只接收一个参数(正则表达式、regExp对象、字符串)，返回一个第一次出现位置的下标，不支持g，没找到返回-1
• replace() ---接收两个参数，第一个参数可以是一个 RegExp 对象或者一个字符串，第二个参数可以是一个字符串或者一个函数

    //$& 匹配整个模式的子字符串
    //$' 匹配的子字符串之前的子字符串
    //$` 匹配的子字符串之后的子字符串
    //$n 匹配第n个捕获组的子字符串，其中n等于0～9
    //$nn 匹配第nn个捕获组的子字符串，其中nn等于01～99
    var text = "cat, bat, sat, fat";
    result = text.replace(/(.at)/g, "word ($1)");
    alert(result); //word (cat), word (bat), word (sat), word (fat)

• split() ---基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中,接受可选的第二个参数，用于指定数组的大小
• localeCompare() ---比较两个字符串 ,参数之前，返回-1，参数之后返回1，等于返回0
• romCharCode() ---接收一或多个字符编码，然后将它们转换成一个字符串

    alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

7、单体内置对象

Global 对象

• URI编码方法
• eval() 方法 ---可以执行放在字符串中的代码，简单理解就是去掉最外层的引号

Math 对象

• Math对象属性：
  
  
• min() max()方法
• 舍入方法：ceil()--向上取整 、floor()--向下取整、round()--四舍五入
• random() ---返回大于等于 0 小于 1 的一个随机数

      //获得min~max之间随机数公式
      Math.random()*(max - min) + min;
  

• 其他方法：
  
  

6 章 面向对象的程序设计

1、对象的属性

数据属性

• Configurable ：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特
  
  性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的
  
  这个特性默认值为 true 。
• Enumerable ：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定
  
  义的属性，它们的这个特性默认值为 true 。
• Writable ：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的
  
  这个特性默认值为 true 。
• Value ：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，
  
  把新值保存在这个位置。这个特性的默认值为 undefined 。
  • 要修改属性默认的特性，必须使用 ECMAScript 5 的 Object.defineProperty() 方法
  • 这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象

访问器属性

• Configurable ：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特
  
  性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为
  
  true 。
• Enumerable ：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这
  
  个特性的默认值为 true 。
• Get ：在读取属性时调用的函数。默认值为 undefined 。
• Set ：在写入属性时调用的函数。默认值为 undefined 。
  • 访问器属性不能直接定义，必须使用 Object.defineProperty() 来定义

      var book = {
          _year: 2004,
          edition: 1
      };
      Object.defineProperty(book, "year", {
          get: function(){
              return this._year;
          },
          set: function(newValue){
              if (newValue > 2004) {
                  this._year = newValue;
                  this.edition += newValue - 2004;
              }
          }
      });
      book.year = 2005;
      alert(book.edition); //2
  

定义多个属性

• Object.defineProperties()
  • 这个方法接收两个对象参数:要添加和修改其属性的对象和要添加或修改的属性一一对应

读取属性的特性

• Object.getOwnPropertyDescriptor()
  • 这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称
  • 返回值是一个对象

2、创建对象

工厂模式（不要使用）

    function createPerson(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.sayName = function(){
            alert(this.name);
        };
        return obj;
    }

    var person1 = createPerson('marry',39);
    var person2 = createPerson('jane',25);

构造函数模式

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.sayName = function(){
            alert(this.name);
        };
    }

    var person1 = new Person('marry',39);
    var person2 = new Person('jane',25);

• 构造函数名开头应该大写
• 使用new关键字(4步:创建--改指向--添加属性--返回)

原型模式

    function Person(){
    }
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
        alert(this.name);
    };
    var person1 = new Person();
    person1.sayName(); //"Nicholas"
    var person2 = new Person();
    person2.sayName(); //"Nicholas"
    alert(person1.sayName == person2.sayName); //true

3、继承

原型链

• 基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法
• 问题：
  • 包含引用类型值的原型属性会被所有实例共享
  • 在创建子类型的实例时，不能向超类型的构造函数中传递参数

    function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function () {
        return this.property;
    };

    function SubType(){
        this.subproperty = false;
    }
    SubType.prototype = new SuperType()
    // 使用字面量添加新方法，会导致上一行代码无效
    // SubType.prototype = {
    //     getSubValue:function(){
    //         return this.subproperty;
    //     },
    //     getSuperValue:function(){
    //         return false;
    //     }
    // }

    SubType.prototype.getSubValue = function(){
        return this.subproperty;
    }
    SubType.prototype.getSuperValue = function(){
        return false;
    }

    var instance = new SubType();
    console.log(instance)

借用构造函数

    function SupperType(name){
        this.name = name
    }
    function SubType(){
        //继承了 SuperType，同时还传递了参数
        SupperType.call(this,'jane');
        //实例属性
        this.age = 29;
    }
    var instance = new SubType();
    alert(instance.name); //'jane'
    alert(instance.age); //29

• 优势：在子类型构造函数中向超类型构造函数中传递参数
• 问题：方法都定义在了构造函数中，函数不能复用，很少使用

组合继承

• 原型链和借用构造函数的技术组合到一块
• 优势：没有问题

    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function () {
        alert(this.name);
    } 

    function SubType(name, age) {
        //继承属性
        SuperType.call(this, name);
        this.age = age;
    }
    //继承方法
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function () {
        alert(this.age);
    };

    var instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    var instance2 = new SubType("marry", 30);

    console.log(instance1)
    console.log(instance2)

原型式继承

• 问题：包含引用类型值的属性始终都会共享相应的值

    var person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = Object.create(person, {
        name: {
            value: "Greg"
        }
    });
    alert(anotherPerson.name); //"Greg"

寄生式继承

• 问题：由于不能做到函数复用而降低效率

    function createAnother(original) {
        var clone = new Object(original); //通过调用函数创建一个新对象
        clone.sayHi = function () { //以某种方式来增强这个对象
            alert("hi");
        };
        return clone; //返回这个对象
    }
    var person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = createAnother(person);
    console.log(anotherPerson)

寄生组合式继承

• 高效率体现在它只调用了一次 SuperType 构造函数
• 集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。

    function inheritPrototype(subType, superType) {
        var prototype = new Object(superType.prototype);
        prototype.constructor = subType;
        subType.prototype = prototype;
    }

    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function () {
        alert(this.name);
    } 

    function SubType(name, age) {
        //继承属性
        SuperType.call(this, name);
        this.age = age;
    }
    inheritPrototype(SubType,SuperType);

    var instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    var instance2 = new SubType("marry", 30);

    console.log(instance1)
    console.log(instance2)