javascript高級程序設計閱讀總結

時間 2019-11-09

標籤 javascript 高級程序設計閱讀總結欄目 JavaScript 简体版

原文原文鏈接

5章引用類型

一、object類型

建立
一、var obj ={} ---對象字面量
二、var obj = new Object(); ---new操做符

二、Array類型

建立
一、var arr = new Array();
二、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

三、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表示設置

四、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 。

五、function類型

建立
一、function fn(){}
二、var fn = function(){};
三、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() 函數的值

六、基本包裝類型

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"

七、單體內置對象

Global 對象

URI編碼方法
eval() 方法 ---能夠執行放在字符串中的代碼，簡單理解就是去掉最外層的引號

Math 對象

Math對象屬性：
min() max()方法
舍入方法：ceil()--向上取整、floor()--向下取整、round()--四捨五入
random() ---返回大於等於 0 小於 1 的一個隨機數
javascript //得到min~max之間隨機數公式 Math.random()*(max - min) + min;
其餘方法：

6 章面向對象的程序設計

一、對象的屬性

數據屬性

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()
- 這個方法接收兩個參數：屬性所在的對象和要讀取其描述符的屬性名稱
- 返回值是一個對象

二、建立對象

工廠模式（不要使用）

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

三、繼承

原型鏈

基本思想是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法

問題：

包含引用類型值的原型屬性會被全部實例共享
在建立子類型的實例時，不能向超類型的構造函數中傳遞參數

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)