《javaScript高級程序設計》筆記（二）

第四章 變量、作用域和內存問題

1、變量類型：

（1）基本類型： Undefined 、 Null 、 Boolean 、 Number 和 String 

var a=1
var b=a
b //1
a=2
b //1
b=3
a=2

 

（2）引用類型：Object  Function

 

var aa={a:1,b:2}
var bb=aa
bb //{a:1,b:2}
bb.a=3
aa //{a:3,b:2}
//當引用bb中的元素改變bb時，aa會隨之改變。當整體改變bb時，aa的值不受影響。

2、垃圾回收機制

（1）標記清除（比較常用）：標記變量爲“進入環境”，“離開環境”

（2）引用計數（原來IE在用，後來會出現性能問題，廢棄），當值被一個變量引用一次，則該值的引用次數+1，當變量的值被改變時，該值的引用次數-1，直至引用次數變爲0時，則說明沒有辦法再訪問這個值了，就可以將其佔用的內存空間回收回來（當代碼中存在循環引用（兩個值互相引用）現象時，該算法會導致問題）。

 

第五章 引用類型

1、訪問對象的方法：

    （1）常用，點訪問。person.name

    （2）方括號訪問。person["name"]

    方括號訪問的優點是，方括號裏面可以是變量，person[variable]

2、棧方法：對於數組的操作（後入先出），對應的方法：pop()移除數組末尾的最後一項，返回值爲最後一項。push()向數組的末尾追加值，返回值爲追加後的數組的長度。

3、隊列方法：對於數組的操作（先進先出），對應的方法：shift()移除數組的第一項，返回值爲第一項。push()。

4、數組的重排序方法：reverse()，sort()，返回值都是經過排序後的數組。reverse將當前數組逆轉。sort將當前數組進行排序。

可對sort函數進行參數傳遞來規定排序方式。

function compare(value1, value2) {
    if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 15,10,5,1,0


//爲了簡化上面的比較函數，可講上面的函數簡化爲,2-1是降序，1-2是升序

function compare(value1, value2){
    return value2 - value1;
}

5、數組的操作方法：

（1）concat()：基於當前數組的所有項創建一個新的數組，當括號中有傳參時，會將這些參數添加到數組的末尾，返回新數組，在沒有給concat傳參時，則將返回當前數組的副本。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

（2）slice()：基於當前數組中的一項或多項創建一個新數組，接受1或2個參數，即返回項的起始和結束位置（不包括結束項），若只傳遞一個參數，則返回起始項直至末尾的項。

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

（3）splice()：
       刪除：可以刪除任意數量的項，包括兩個參數，要刪除的第一項的位置和要刪除的項數。splice(0,2)會刪除數組的前兩項。

       插入：可以向指定位置插入任意數量的項，包含三個參數，插入位置，0（要刪除的項數），和要插入的項。如果要插入更多的項，則可以繼續傳遞第四，五，六等參數。

        替換：可以向指定位置插入任意數量的項，同時刪除任意數量的項，用法同上。

（4）位置方法：indexOf()和lastIndexOf()，這兩個方法都接受兩個參數，要查找的項和（可選）表示查找起點位置的索引。其中， indexOf() 方法從數組的開頭（位置 0）開始向後查找， lastIndexOf() 方法則從數組的末尾開始向前查找。這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回-1。

（5）迭代方法：

       ECMAScript 5 爲數組定義了 5 個迭代方法。每個方法都接收兩個參數：要在每一項上運行的函數和、（可選的）運行該函數的作用域對象——影響 this 的值。傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象本身。

          every() ：對數組中的每一項運行給定函數，如果該函數對每一項都返回 true ，則返回 true 。
          filter() ：對數組中的每一項運行給定函數，返回符合條件的值組成的數組。
          forEach() ：對數組中的每一項運行給定函數。這個方法沒有返回值。
          map() ：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。
          some() ：對數組中的每一項運行給定函數，如果該函數對任一項返回 true ，則返回 true 。

          以上方法都不會修改數組中的包含的值。

          every()、some()用法：判斷數組中的每一項是否符合某個條件

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});
alert(everyResult); //false，有一項不符合條件即返回false
    var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});
alert(someResult); //true，存在一項符合條件即返回true

           filter()用法：篩選出數組中符合條件的值

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

         map()用法：對數組中的每一項進行統一操作

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]

          forEach()用法：這個方法沒有返回值，只是對數組中的每一項運行傳入的函數，本質上與使用for循環迭代數組一樣

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
    //執行某些操作
});

（6）歸併方法：reduce()、reduceRight()

          這兩個方法都會迭代數組的所有項，然後構建一個最終返回的值。其中， reduce() 方法從數組的第一項開始，逐個遍歷
到最後。而 reduceRight() 則從數組的最後一項開始，向前遍歷到第一項。

        這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）作爲歸併基礎的初始值。傳給 reduce() 和 reduceRight() 的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。

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

           第一次：pre=1，cur=2

           第二次：pre=3(1+2)，cur=3

            ......

6、Date()類型：

     

var now = new Date();//無傳參

      在調用 Date 構造函數而不傳遞參數的情況下，新創建的對象自動獲得當前日期和時間。

     

var someDate = new Date("May 25, 2004");//有傳參

// 本地時間 2005 年 5 月 5 日下午 5:55:55
var allFives = new Date(2005, 4, 5, 17, 55, 55);

 

7、Function類型：

      （1）函數聲明與函數表達式：雖然二者在定義函數上使用的效果是一樣的，但是當解析器在執行環境中加載數據時，對函數聲明和函數表達式並非一視同仁，解析器會率先讀取函數聲明，並使其在執行任何代碼之前可用（可以訪問）；而函數表達式則必須等到代碼執行到它所在行時，纔會真的被執行。（函數聲明會被提升到頂部）。

      （2）作爲值的函數：可以把函數當做參數一樣的傳遞給另外一個函數，而且可以將一個函數作爲另一個函數的結果返回。

function callSomeFunction(someFunction, someArgument){
    return someFunction(someArgument);
}

      （4）函數的內部屬性：在函數內部，有兩個特殊的屬性：arguments和this。arguments用於保存函數的參數，這個對象還有一個名叫callee的屬性，該屬性是一個指針，指向擁有這個arguments對象的函數。

        callee：

         應用實例：階乘函數，遞歸算法。

         在不使用callee屬性時，直接使用函數名稱調用函數。

function factorial(num){
    if (num <=1){
        return 1;
    }
    else{
        return num * factorial(num-1)
    }
}

         但這樣會使函數與函數名緊耦合，爲了消除這種緊耦合的現象，我們使用arguments的callee屬性：

function factorial(num){
    if (num <=1){
        return 1;
    }
    else{
        return num * arguments.callee(num-1)
    }
}

                     

         this:

         this引用的是函數據以執行的環境對象，當在網頁全局作用域中調用函數時，this對象引用的就是window。

window.color = "red";
var o = { color: "blue" };
function sayColor(){
    alert(this.color);
}
sayColor(); //"red"
o.sayColor = sayColor;
o.sayColor(); //"blue"

8、基本包裝類型：js中的數據類型包括兩大類，基本類型（string、number、null、undefined、boolean），引用類型（object，function）。不可對基本類型設置屬性，設置後再引用查看也無法訪問。

var s1 = "some text";
s1.color = "red";
alert(s1.color); //undefined

  注意：使用 new 調用基本包裝類型的構造函數，與直接調用同名的轉型函數是不一樣的。

var value = "25";
var number = Number(value); //轉型函數
alert(typeof number); //"number"
var obj = new Number(value); //構造函數
alert(typeof obj); //"object"

  9、toFixed()方法：控制保留幾位小數，四捨五入。

var num = 10.005;
alert(num.toFixed(2)); //"10.01"

10、String類型：

      （1）字符方法：用於訪問字符串中特定字符的方法：charAt()和charCodeAt()。這兩個方法都接收一個參數，即基於0的字符的位置。

       charAt()返回查詢位置所在的字符，charCodeAt()返回查詢位置所在字符對應的ASCII碼。

var stringValue = "hello world";
alert(stringValue.charAt(1)); //"e"

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); // 輸出"101"

     （2）字符串操作方法：

       concat() :用於將一個或多個字符串拼接起來，返回拼接得到的新字符串。

var stringValue = "hello ";
var result = stringValue.concat("world");
alert(result); //"hello world"
alert(stringValue); //"hello"

      slice()、substr()、substring()：這三個方法都會返回被操作字符的的一個子字符串，而且也都接受一或兩個參數。第一個參數爲指定子字符串的開始位置，第二個參數表示字符串到哪裏結束。具體來說， slice() 和substring() 的第二個參數指定的是子字符串最後一個字符後面的位置。而 substr() 的第二個參數指定的則是返回的字符個數。如果沒有給這些方法傳遞第二個參數，則將字符串的長度作爲結束位置。以上三種方法不會改變原始數組。

var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3, 7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3, 7)); //"lo worl"

       字符串位置方法：同數組中的indexOf和lastIndexOf。找到字符串所在位置時，則返回其下標，未找到時，則返回-1。第一個參數是要搜索的字符，第二個參數是規定從指定位置向後搜索。

 

 

（3）trim()方法：

        去掉字符串的前置和後綴的所有空格，返回一個新的字符串。

var stringValue = " hello world ";
var trimmedStringValue = stringValue.trim();
alert(stringValue); //" hello world "
alert(trimmedStringValue); //"hello world"

（4）match()、search()、replace()：

          match()：尋找字符串中的匹配字符。

var text = "cat, bat, sat, fat";
var pattern = /.at/;
//與 pattern.exec(text)相同
var matches = text.match(pattern);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern.lastIndex); //0
//其中matches是一個數組，0位爲第一個匹配的字符，1位是index返回匹配字符的首位置，2位爲input返回整個操作的字符串

         search()：用法同match()。返回項不同，如果搜索到，則返回匹配字符的首位置，如果沒有搜索到，則返回-1。

         replace()：接受兩個參數，要替換的字符，替換成的字符。

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result); //"cond, bat, sat, fat"
result = text.replace(/at/g, "ond");
alert(result); //"cond, bond, sond, fond"

（5）eval()方法：

         eval()方法就像是一個強大的ECMAScript解析器，它只接受一個參數，即要執行的ECMAScript字符串。它會將傳入的參數當做語句來解析執行，然後把執行結果插入到原位置，通過eval執行的代碼可以引用在包含環境中定義的變量。

          

var msg = "hello world";
eval("alert(msg)"); //"hello world"

我們也可以在 eval()調用中定義一個函數，然後再在該調用的外部代碼中引用這個函數： 

eval("function sayHi() { alert('hi'); }");
sayHi();