JavaScript變量聲明如何提升

這篇文章主要講解了“JavaScript變量聲明如何提升”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript變量聲明如何提升”吧！

變量

• 一個變量只定義但沒有賦初值，默認值是 undefined

• 定義變量時必須寫var（不用var定義，而直接將值賦給它，隨不引發報錯，但會產生作用域問題）

• 你可以提前使用一個稍后才聲明的變量，而不會引發異常

• 再執行所有代碼前，js有預解析階段，會預讀所有變量的定義

• 注意：變量聲明提升只提升定義不提升值

console.log(a);   // 先使用變量var a = 12;     // 后定義變量

• 基本數據類型

• 當我們需要將對象銷毀、數組銷毀或者刪除事件監聽時、通常將他們設置為null

• undefined既是值又是一種類型，這種類型只有它自己一個值

• 字符串常用方法

• substring(a, b) 從a開始到b結束的子串，不包括b處；如果省略第二個參數，返回的子串會一直到字符串的結尾，若a > b，會自動調整為小數在前

• substr(a, b) 從a開始長度為b的子串；如果省略第二個參數，返回的子串會一直到字符串的結尾；a可以是負數，表示倒數位置

• slice(a, b) 從a開始到b結束的子串，不包括b處；兩個參數都可以是負數；a必須小于b，否則沒有結果（空串）

• 所有數字部分大小、不分整浮、不分正負，都是數字類型

• 較大或較小數（絕對值較小）可以寫成科學計數法3e8就是3^8

• 二進制數值以0b開頭，八進制以0開頭，十六進制以0x開頭

• NaN，not a number，即“不是一個數”，但它是一個數字類型的值（數學運算中，若結果不能得到數字，結果往往都是NaN，NaN == NaN結果為false）

• Infinity無窮大或無窮小

• Number

• String

  方法	功能
  charAt()	得到指定位置字符(越界為空串)
  substring()	提取子串
  substr()	提取字串
  slice()	提取子串
  toUpperCase()	將字符串變為大寫
  toLowerCase()	將字符串變為小寫
  indexOf()	檢索字符串（模式匹配）

• Boolean

• Undefined

• Null

• 復雜數據類型

• Object

• Array

• Function

• RegExp

• Date

• Map

• Set

• ……

可以用來檢測值或變量的類型

typeof 5;          // numbertypeof 'niubi';   // string

使用**Number()**函數

// 字符串 --> 數字Number('123');        // 123Number('123.4');      // 123.4Number('123年');       // NaNNumber('2e3');         // 2000Number('');            // 0Number('1 + 1');       // NaN// 布爾值 --> 數字Number(true);         // 1Number(false);        // 0// undefined 和 null --> 數字Number(undefined);    // NaNNumber(null);         // 0

**parseInt()**函數將字符串轉為整數

將自動截掉第一個非數字字符之后的所有字符

parseInt('3.14');       // 3parseInt('3.14是圓周率');   // 3parseInt('圓周率是3.14');    // NaNparseInt('3.99');           // 3

**parseFloat()**函數將字符串轉為浮點數

自動截掉第一個非數字字符、非小數點之后的所有字符

parseFloat('3.14');         // 3.14parseFloat('3.14是圓周率');   // 3.14parseFloat('圓周率是3.14');   // NaNparseFloat('3.99');          // 3.99// 會自動將true和false轉為字符串，結果為NaN

**String()**函數

變成“長得相同”的字符串。科學計數法和非10進制數字會轉為10進制的值

String(123);       // '123'String(123.4);     // '123.4'String(2e3);       // '2000'String(NaN);       // 'NaN'String(Infinity);  // 'Infinity'String(0xf);       // '15'String(true);      // 'true'String(false);     // 'false'String(undefined);   // 'undefined'String(null);        // 'null'

**Boolean()**函數

// 數字 --> 布爾值    0和NaN轉為false，其他轉為trueBoolean(123);    // trueBoolean(0);      // falseBoolean(NaN);    // falseBoolean(Infinity);    // trueBoolean(-Infinity);    // true// 布爾值 --> 布爾值     空串轉為false，其他轉為true;Boolean('');     // falseBoolean('abc');    // trueBoolean('false');  // true// undefined 和 null --> 布爾值      轉為falseBoolean(undefined);      // falseBoolean(null);           // false

**prompt()**函數函數彈出輸入框

var num = prompt('請輸入第一個數字');    // 返回值為string

表達式與運算符

如果參與數學運算的某操作數不是數字型，那么JavaScript會自動將此操作數轉換位數字型

隱式轉換的本質是內部調用Number()函數

3 * '4' 	 // 12true + true    // 2false + 2     // 23 * '2天'     // NaN

Math.pow(2, 3)      // 2^3Math.sqrt(81)      // 9Math.ceil()        // 向上取整Math.floor()       // 向下取整

===     // 全等于!==     // 不全等于// 兩個等號 == 運算符不比較值的類型，它會進行隱式轉換后比較值是否相等1 == true      // true1===true       // false0 == false     // true0 === false    // false0 == undefined  // false0 === undefined   // falseundefined == null  // trueundefined === null    // false

**isNaN()**函數判斷變量值是否為NaN

但isNaN()也不好用，它的機理是：只要該變量傳入Number()的執行結果是NaN，則isNaN()函數都會得到true

a && b a真，值為b；a假，值為a

a||b a真，值為a，a假，值為b

邏輯運算優先級：非 --> 與 --> 或

綜合運算運算順序：非 --> 數學運算 --> 關系運算 --> 邏輯運算

隨機數函數Math.random()

得到[a, b]區間的整數，公式為 parseInt(Math.random() * (b - a + 1)) + a;

數組

var arr = ['A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4);     長度為4的數組，每一項都是undefined

下標訪問越界時返回undefined

var arr = [2, 6, 7, 3];arr[6] = 4;console.log(arr);此時下標越界，不會報錯，而是會將數組擴展，下標6處為4，中間為empty

Array.isArray()方法可以用來檢測數組

函數

函數定義

// 常規function fun() {
    // 函數體語句}// 匿名函數var fun = function () {
    // 函數體語句}

函數聲明的提升

fun();function fun() {    // 在預解析階段會被提升
    alert("函數被執行");}// 如果函數時用函數表達式的寫法定義的，則沒有提升特性fun();     // 引發錯誤var fun = function () {
    alert("函數被執行");}

函數優先提升

// 函數優先提升// 函數表達式后提升； 變量聲明提升，無法覆蓋提升的函數fun();    // 彈出Bvar fun = function () {
    alert('A');}function fun() {
    alert('B');}fun();     // 彈出A

實參與形參個數不同

1. 實參個數多于形參，沒有形參接收它

2. 實參個數少于形參，沒有接收到實參的形參值為undefined

arguments 類數組對象

1. 函數內arguments表示它接收到的實參列表，它是一個類數組對象

2. 類數組對象：所有屬性均從0開始的自然數序列，并且有length屬性，和數組類似可以用方括號書寫下標訪問對象的某個屬性值，但不能調用數組的方法

var聲明與省略

在函數外，用var聲明的變量為全局變量，不用var聲明的變量為全局變量

在函數中，用var聲明的變量為局部變量，不用var聲明的變量為全局變量

同為全局變量，同為window對象的其中一個屬性，用var聲明的變量不可以刪除，不用var聲明的變量可以刪除！

返回值

function sum(a, b) {
    return a + b;}var result = sum(3, 5);    // 返回值可被變量接收

若函數沒有返回值，則對它打印的結果是undefined

sort(a, b)方法

這個函數中的a、b分別表示數組中靠前和靠后的項，如果需要將它們交換位置，則返回任意正數；否則就返回負數

var arr = [33, 22, 11, 55];arr.sort(function (a, b) {
    if (a > b) {
        return 1;
    }
    return -1;});

變量賦值

數組深度克隆

var arr1 = [1, 2, 3, [4, 5]];function deepClone(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;}

局部函數

定義在一個函數內部的函數是局部函數

只能在函數內部調用

function fun() {
    function inner() {
        console.log('你好');
    }
    inner();   // 調用inner函數}fun();

作用域鏈

在函數嵌套中，變量會從內到外逐層尋找它的定義

var a = 10;var b = 20;function fun() {
    var c = 30;
    function inner() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d);   // 使用變量時，js會從當前層開始，逐層向外尋找定義
    }
    inner();}fun();

閉包

閉包是函數本身和該函數聲明時所處的環境狀態的組合

函數能夠”記憶住“其定義時所處的環境，即使函數不在其定義的環境中被調用，也能訪問定義時所處環境的變量

在js中，每次創建函數時都會創建閉包，但是閉包特性往往需要將函數”換一個地方“執行，才能被觀察出來

閉包的功能：

1. 記憶性：當閉包產生時，函數所處環境的狀態會始終保持在內存中，不會在外層函數調用后被自動清除。

   function fun() {
       var name = 'niubi';
       function innerFun() {
           alert(name);
       }
       return innerFun;}var inn = fun();inn();     // 內部函數被移動到了外部執行

2. 模擬私有變量

   function fun() {
       var a = 0;
       return function() {
           alert(a);
       }}var getA = fun();getA();

function fun() {
    var a = 0;
    return {
        getA: function () {
            return a;
        },
        add: function () {
            a++;
        }, 
        pow: function () {
            a *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

注意：不能濫用閉包，否則會造成網頁的性能問題，嚴重時可能導致內存泄漏。

立即調用函數IIFE

特殊寫法，一旦被定義，就立即被調用

函數必須轉為函數表達式才能被調用

(function () {       // 通過圓括號將函數變為表達式
    // statements})();+function() {
    alert(1);}();-function() {
    alert(1);}();

1. 可以用來給變量賦值

   var age = 12;var sex = '男';var title = (function () {
       if (age < 18) {
           return '小朋友';
       } else {
           if (sex == '男') {
               return '先生';
           } else {
               return '女士';
           }
       }})();

2. 在一些場合（如for循環中）將全局變量變為局部變量，語法更緊湊

var arr = [];for (var i = 0; i < 5; i++) {
    arr.push(function () {
        alert(i);     
    });}arr[2]();    // 彈出5

解決方法：

var arr = [];for (var i = 0; i < 5; i++) {
    (function (i)  {
        arr.push(function() {
            alert(i);
        });
    })(i);}arr[2]();   // 彈出2

DOM

nodeType常用屬性值

節點的nodeType屬性可以顯示這個節點具體的類型

document對象

訪問元素節點主要依靠document對象

幾乎所有DOM的功能都被封裝到了document對象中

document對象也表示整個HTML文檔，它是DOM節點樹的根

訪問元素節點的常用方法

document.getElementById()

如果頁面上有相同id的元素，則只能得到第一個

<p id = "box">我是一個盒子</p><p id = "para">我是一個段落</p>

var box = document.getElementById('box');var para = document.getElementById('para');

getElementsByTagName()

數組方便遍歷，從而可以批量操控元素節點

即使頁面上只有一個指定標簽名的節點，也將得到長度為1的數組

任何一個節點元素也可以調用getElementsByTagName()方法，從而的到其內部的某種類的元素節點

<p>段落</p><p>段落</p><p>段落</p><p>段落</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class = "spec">盒子</p><p class = "spec">盒子</p><p class = "spec">盒子</p><p class = "spec">盒子</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

該方法只能得到頁面上一個元素，如果有多個元素符合條件，則只能得到第一個元素

<p id = "box1">
    <p>段落</p>
    <p class = "spec">段落</p>
    <p>段落</p>
    <p>段落</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

即使頁面上只有一個符合選擇器的節點，也將得到長度為1的數組

延遲運行

使用window.onload = function() {}事件（給window對象添加事件監聽，onload表示頁面都加載完畢了），使頁面加載完畢后，再執行指定的代碼

節點的關系

注意：文本節點也屬于節點，所以我們一般情況下會排除文本節點的干擾（用只考慮元素節點）

書寫常見節點關系函數

<body>
    <p id = "box1">
        <p>段落</p>
        <p class = "spec">段落</p>
        <p>段落</p>
        <p>段落</p>
	</p>
    <script>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // 封裝一個函數，返回元素的所有子元素節點，類似children的功能
        function getChildren(node) {
            var children = [];
            // 遍歷node這個節點的所有子節點，判斷每一個字節的nodeType屬性是不是1
            // 如果是1， 就推入結果數組
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }
       
        // 封裝一個函數，這個函數可以返回元素的前一個元素兄弟節點，類似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            while (o.previousSibling != null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // 結束循環，找到了
                    return o.previousSibling;
                }
                o = o.previousSibling;
            }
            return null;
        }
        
        // 封裝一個函數，該函數可以返回元素的所有元素兄弟節點
        function getAllElementSibling(node) {
            var prevs = [];
            var nexts = [];
            var o = node;
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }
            o = node;
            while (o.nextSibling != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            return prevs.concat(nexts);
        }
    </script></body>

改變元素節點中的內容

改變元素節點中的內容可以使用兩個相關屬性

• innerHTML

  能以HTML語法設置節點中的內容

• innerText

  只能以純文本的形式設置節點中的內容

<body>
    <p id = "box"></p>
    <script>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';    // 可以解析HTML語法
        // oBox.innerText = 'niub';    // 里面只能是純文本
    </script></body>

改變元素節點的CSS樣式

相當于在設置行內style屬性

oBox.style.backgroundColor = 'red';     // CSS 屬性要寫成駝峰形式oBox.style.backgroundImage = 'url(images/1.jpg)';oBox.style.fontSize = '32px';

改變元素節點的HTML屬性

標準的W3C屬性，如src、href等，只需直接打點進行更改即可

oImg.src = 'images/2.jpg';

不符合W3C標準的屬性，要使用setAttribute()和getAttribute()來設置、讀取

<body>
    <p id = "box"></p>
    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10);    // 添加data-n屬性，值為10
        var n = box.getAttribute('date-n');
        alert(n);
    </script></body>

節點的創建

document.createElement()方法用于創建一個指定tagname的HTML元素

var op = document.createElement('p');

新創建出的節點是”孤兒節點“，并沒有被掛載到DOM樹上，無法看見他

必須繼續使用appendChild() 或 insertBefore() 方法將孤兒節點插入到DOM樹上

任何已經在DOM樹上的節點，都可以調用appendChild() 方法，它可以將孤兒節點掛載到他的內部，成為它的最后一個子節點

父節點.appendChild(孤兒節點);

任何已經在DOM樹上的節點，都可以調用insertBefore() 方法，它可以將孤兒節點掛載到它的內部，成為它的”標桿子節點“之前的節點

父節點.insertBefore(孤兒節點, 標桿節點);

移動節點

如果將已經掛載到DOM樹上的節點成為appendChild()或者insertBefore()的參數，這個節點將會被移動

新父節點.appendChild(已經有父親的節點);新父節點.insertBefore(已經有父親的節點, 標桿子節點);// 這意味著一個節點不能同時位于DOM樹的兩個位置

刪除節點

removeChild() 方法從DOM中刪除一個子節點

父節點.removeChild(要刪除子節點);

克隆節點

cloneNode()方法可以克隆節點，克隆出的節點是”孤兒節點“

參數是boolean類型，表示是否采用深度克隆，若為true，則該節點的所有后代節點也都會被克隆，若為false，則只克隆該節點本身

var 孤兒節點 = 老節點.cloneNode();var 孤兒節點 = 老節點.cloneNode(true);

事件

• 常見的鼠標事件監聽

onmouseenter不冒泡，onmouseover冒泡

• 常見的鍵盤事件監聽

• 常見的表單事件監聽

• 常見的頁面事件監聽

當盒子嵌套時事件監聽的執行順序

<p id = "box1">
    <p id = "box2">
        <p id = "box3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = function () {
        console.log('box1');
    };
    
    oBox2.onclick = function () {
        console.log('box2');
    };
    
    oBox3.onclick = function () {
        console.log('box3');
    };
    // 點擊最里面的盒子，傳播方向是從內到外</script>

事件傳播

事件的傳播是：先從外到內，然后再從內到外（最內層不是先捕獲再冒泡，而是根據書寫代碼順序決定。同名盒子同階段與順序有關。如果給元素設置相同的兩個或多個同名事件，則DOM0級寫法后面寫的會覆蓋先寫的；而DOM2級會按順序執行）

onxxxx（DOM0級事件監聽）只能監聽冒泡階段，所以觀察出來的結果是從內到外

addEventListener()方法（DOM2級事件監聽）

oBox.addEventListener('click'，function() {
 // 這里是事件處理函數}, true);     // 第三個參數若為true，監聽捕獲階段，為false，監聽冒泡階段

事件對象

事件處理函數提供一個形式參數，它是一個對象，封裝了本次事件的細節

這個參數通常用單詞event或字母e來表示

oBox.onmousemove = function (e) {
 // 對象e就是這次事件的“事件對象”};

對象相關屬性

• 鼠標位置相關屬性

觸發這次事件時鼠標的位置的屬性

• e.charCode和e.keyCode屬性

e.charCode屬性通常用于onkeypress事件中，表示用戶輸入的字符的“字符碼”

字符	字符碼
數字0 ~ 數字9	48 ~ 57
大寫字母A ~ Z	65 ~ 90
小寫字母 a ~ z	97 ~ 122

e.keyCode屬性通常用于onkeydown和onkeyup事件中，表示用戶按下的按鍵的“鍵碼”

按鍵	鍵碼
數字0 ~ 數字9	48 ~ 57
字母部分大小寫 a ~ z	65 ~ 90
四個方向鍵 ← ↑ → ↓	37、38、39、40
回車鍵	13
空格鍵	32

阻止默認事件

e.preventDefault()方法用來阻止事件產生的“默認動作”

e.stopPropagation()方法用來阻止事件繼續傳播

批量添加事件監聽性能問題

• 每一個事件監聽注冊都會消耗一定的系統內存，而批量添加事件會導致監聽數量太多，內存消耗會很大

事件委托

每一個事件監聽注冊都會消耗一定的系統內存，而批量添加事件會導致監聽數量太多，內存消耗會很大（當有大量類似元素需要批量添加事件監聽時，使用事件委托可以減少內存開銷）

利用事件冒泡機制，將后代元素事件委托給祖先元素

注意：不能委托不冒泡的事件給祖先元素

當有動態元素節點上樹時，使用事件委托可以讓新上樹的元素具有事件監聽

相關屬性

定時器

setInterval()函數可以重復調用一個函數，在每次調用之間具有固定的時間間隔

setInterval(function () {
    // 這個函數將自動被以固定間隔時間調用}, 2000);    // 第二個參數為間隔時間，單位為毫秒// 該函數可以接收第3、4……個參數，他們將按順序傳入函數setInterval(function (a, b) {
    // 形式參數 a 的值是88，形參b的值是66}, 2000, 88, 66);     // 從第三個參數開始，表示傳入函數內的參數// 具名函數也可以傳入setIntervalvar a = 0;function fun() {
    console.log(++a);};setInterval(fun, 1000);

清除定時器

clearInterval() 函數可以清除一個定時器

// 設置定時器，并用timer變量接收這個定時器var timer = setInterval(function () {
    }, 2000);// 點擊按鈕時，清除定時器oBtn.onclick = function () {
    clearInterval(timer);    };

延時器

setTimeout() 函數可以設置一個延時器，當指定時間到了之后，會執行函數一次，不再重復執行

var timer = setTimeout(function () {
    // 這個函數會在 2 秒后執行一次}, 2000);clearTimeout(timer);    // 清除延時器

異步

異步： 不會阻塞CPU繼續執行其他語句，當異步完成時，會執行 ”回調函數“（callback）

setInterval() 和 setTimeout() 是兩個異步語句

setTimeout(function () {
    console.log('A');}, 2000);  // 異步語句console.log('B');    // 異步語句不會阻塞程序的正常執行// 運行結果BA

函數節流

一個函數執行一次后，只有大于設定的執行周期后才允許執行第二次

var lock = true;function 需要節流的函數() {
    // 如果鎖時關閉狀態，則不執行
    if(!lock) return;
    // 函數核心語句
    
    // 關鎖
    lock = false;
    
    // 指定毫秒數后將鎖打開
    setTimeout(function () {
        lock = true;
    }, 2000);}

BOM

BOM（Browser Object Model，瀏覽器對象模型）是JS與瀏覽器窗口交互的接口

ｗindow對象

window對象是當前 js 腳本運行所處的窗口，而這個窗口中包含DOM結構，window.document屬性就是document對象

在有標簽頁功能的瀏覽器中，每個標簽都擁有自己的window對象；也就是說，同一個窗口的標簽頁之間不會共享一個window對象

1. 全局變量會成為window對象的屬性

   var a = 10;console.log(window.a == a);   // true

   這意味著多個js文件之間是共享全局作用域的，即js文件沒有作用域隔離功能

2. 內置函數普遍是window的方法

   如setInterval()、alert()等內置函數，普遍是window的方法

窗口尺寸相關屬性

獲得不包含滾動條的窗口寬度，要用document.documentElement.clientWidth

resize事件

在窗口大小改變之后，就會觸發resize事件，可以使用window.onresize或者window.addEventListener(‘resize’)來綁定事件處理函數

已卷動高度

window.scrollY屬性表示在垂直方向已滾動的像素值

document.documentElement.scrollTop屬性也表示窗口卷動高度

為了更好的瀏覽器兼容行，通常將兩個一起寫

var scrollTop = window.scrollY || document.documentElement.scrollTop;

document.documentElement.scrollTop不是只讀的，而window.scrollY是只讀的

scroll事件

在窗口被卷動之后，就會觸發scroll事件，可以使用window.onscroll或者window.addEventListener(‘scroll’)來綁定事件處理函數

Navigator對象

window.navigator屬性可以檢索navigator對象，它內部含有用戶此次活動的瀏覽器的相關屬性和標識

History對象

window.history 對象提供了操作瀏覽器會話歷史的接口

常用的操作就是模擬瀏覽器回退按鈕

history.back();       // 等同于點擊瀏覽器的回退按鈕history.go(-1);       // 等同于 history.back();

Location對象

window.location 標識當前所在網址，可以通過給這個屬性賦值命令瀏覽器進行頁面跳轉

window.location = 'http://www.baidu.com';window.location.href = 'http://www.baidu.com';

• 重新加載當前頁面

  可以調用location的reload方法以重新加載當前頁面，參數true表示從服務器強制加載

  window.location.reload(true);

• GET 請求查詢參數

  window.location.search 屬性即為當前瀏覽器的 GET 請求查詢參數

offsetTops屬性

該屬性表示此元素到定位祖先元素的垂直距離

定位祖先元素：在祖先中，離自己最近的且擁有定位屬性的元素

使用這個屬性的時候，所有祖先元素不要有定位

面向對象

對象（object）是”鍵值對“的集合，表示屬性和值的映射關系

var obj = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbies: ['足球', '編程']};     // js中 花括號表示對象

注意：

• 如果對象的屬性鍵名不符合js標識符命名規范，則這個鍵名必須用引號包裹

• 如果屬性名不符合js標識符命名規范，則必須用方括號的寫法來訪問

• 如果屬性名以變量形式存儲，則必須使用方括號形式

  var obj = {
      a: 1,
      b: 2,
      c: 3};var key = 'b';console.log(obj.key);    // undefinedconsole.log(obj[key]);   // 2

對象的創建

var obj = {
    a: 10};obj.b = 40;

刪除屬性

使用delete操作符刪除某個對象的屬性

var obj = {
    a: 1,
    b: 2};delete obj.a;

對象的方法

如果某個屬性值是函數，則它被稱為對象的方法

var xiaoming = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbys: ['足球','游泳','編程'],
    'favorite-book': '舒克和貝塔',
    sayHello: function () {
        console.log('hello');
    }};

對象的遍歷

對象的遍歷需要使用for…in…循環，可是遍歷對象的每個鍵

for (var k in obj) {
    console.log('屬性' + k + '的值是' + obj[k]);}

對象的深克隆

var obj1 = {
    a: 1, 
    b: 2, 
    c: [33, 44, {
        m: 55,
        n: 66,
        p: [77, 88]
    }]};function DeepClone(o) {
    if (Array.isArray(o)) {
        var result = [];
        for (var i = 0; i < o.length; i++) {
            result.push(DeepClone(o[i]));
        }
    } else if(typeof o == 'object') {
        var result = {};
        for (var k in o) {
            result[k] = DeepClone(o[k]);
        }
    } else {
        var result = o;
    }
    return result;}

函數的上下文

函數中可以使用this關鍵字，它表示函數的上下文

同一個函數，用不同的形式調用它，則函數的上下文不同

函數只有被調用，他的上下文才能被確定

相關規則

函數.call(上下文);函數.apply(上下文);

區別：

function sum(b1, b2) {
    alert(this.c + this.m + this.e + b1 + b2);}sum.call(xiaoming, 5, 3);    // call要用逗號羅列參數sum.apply(xiaoming, [5, 3]);  // apply要把參數寫到數組中

new操作符調用函數

new 函數()

js規定，使用new操作符調用函數會進行“四步走”：

1. 函數體內會自動創建出一個空白對象

2. 函數的上下文（this）會指向這個對象

3. 函數體內的語句會執行

4. 函數會自動返回上下文對象，即使函數沒有return語句

function fun() {   // {}   this指向這個空對象
    this.a = 3;
    this.b = 5;    // {a: 3, b: 5}
    // 自動補充return this;}var obj = new fun();console.log(obj);

構造函數

將之前的函數進行一小步改進

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}var xiaoming = new People('小明', 12, '男');var xiaoming = new People('小紅', 10, '女');var xiaogang = new People('小剛', 13, '男');

• 用new調用一個函數，這個函數就被稱為“構造函數”，任何函數都可以是構造函數，只需要用new調用它

• 構造函數用來“構造新對象”，它內部的語句將為新對象添加若干屬性和方法，完成對象的初始化

為對象添加方法

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHello = function () {
        console.log('我是' + this.name);
    };}var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

prototype

任何函數都有prototype屬性，prototype是英語”原型“的意思，prototype屬性值是個對象，它默認擁有constructor屬性指回函數

構造函數的prototype是實例的原型

原型鏈查找

實例可以打點訪問它的原型的屬性和方法，這被成為”原型鏈查找“

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}People.prototype.nationality = '中國';     // 在構造函數的prototype上添加nationality屬性var xiaoming = new People('小明', 12, '男');console.log(xiaoming.nationality);

hasOwnProperty()

該方法可以檢查對象是否真正”自己擁有“某屬性或者方法

xiaoming.hasOwnProperty('name');    // truexiaoming.hasOwnProperty('age');     // truexiaoming.hasOwnProperty('sex');     // truexiaoming.hasOwnProperty('nationality');    // false

in

in運算符只能檢查某個屬性或方法是否可以被對象訪問，不能檢查是否是自己的屬性或方法

'name' in xiaoming     // true'age' in xiaoming      // true'sex' in xiaoming      // true'nationality' in xiaoming    // true

在prototype上添加方法

將方法直接添加到實例身上的缺點：每個實例和每個實例的方法函數都是內存中不同的函數，造成了內存的浪費，可以通過將方法寫道prototype上來解決。

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}People.prototype.sayHello = function () {
    console.log('我是' + this.name);};var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

原型鏈的終點

數組的原型鏈

繼承

1. 借助原型鏈實現繼承

讓Student的prototype屬性指向父類的實例，然后給Student的prototype添加Student的方法

通過原型鏈實現繼承的問題

• 如果父類的屬性中有引用類型值，則這個屬性會被所有子類的實例共享

• 子類的構造函數中，往往需要重復定義很多超類定義過的屬性。即，子類的構造函數寫的不夠優雅

2. 借助構造函數

為了解決原型中包含引用類型值所帶來問題和子類構造函數不優雅的問題，通常使用一種叫做 “借助構造函數” 的技術，也被稱為 “偽造對象” 或 “經典繼承”

在子類構造函數的內部調用超類的構造函數，但要注意使用call()綁定上下文

function People(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.arr = [1, 2, 3];}function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school';
    this.sid = sid;}var xiaoming = new Student('小明', '男', 12, '學校', 123456);

3. 組合繼承

將借用原型鏈和借用構造函數的技術組合到一起，叫做組合繼承，也叫做偽經典繼承

缺點：

組合繼承最大的問題就是無論在什么情況下，都會調用兩次超類的構造函數：一次是在創建子類原型的時候，另一次是在子類構造函數的內部。

原型式繼承

Object.create()方法，可以根據指定的對象為原型創建出新對象(IE9)

var obj2 = Object.create(obj1);// 寫法2var obj2 = Object.create(obj1, {    // 第二個參數為一個對象，將要補充的屬性寫在里面
    d: {    // 屬性的值仍然是一個對象
        value : 99     // 值為99
    }     // 可以遮蔽原型上的同名屬性});

在沒有必要 “興師動眾” 的創建構造函數，而只是想讓新對象與現有對象 “類似” 的情況下，使用Object.create() 即可勝任，稱為原型式繼承

Object.create() 的兼容性寫法

在低版本瀏覽器中實現Object.create()

// 道格拉斯·克羅克福德寫的一個函數// 函數功能就是以 o 為原型，創建新對象function object(o) {
    // 創建一個臨時構造函數
    function F() {}
    // 讓這個臨時構造函數的prototype指向o, 這樣它new出來的對象，__proto__指向了o
    F.prototype = o;
    return new F();}

寄生式繼承

編寫一個函數，它可以 “增強對象”，只要把對象傳入這個函數，這個函數將以此對象為 “基礎” 創建出新對象，并為新對象賦予新的預置方法

function f(o) {
    var p = Object.create(o);
    p.display = function () {
        console.log(111);
    }
    return p;}

缺點：

由于不能做到函數復用而降低效率（方法沒有寫到prototype上）

寄生組合式繼承

通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法

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

// 父類
function People(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}

People.prototype.sayHello = function() {
    console.log("hello");
}
People.prototype.sleep = function () {
    console.log("sleep");
}

// 子類
function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school;
    this.sid = sid;
}

inheritPrototype(Student, People);   // 讓Student類的Prototype指向以People.prototype為原型的一個新對象

Student.prototype.exam = function () {
    console.log("exam");
};

var xiaoming = new Student('小明', '男', 12, '學校', 123456);

instanceof運算符

用來檢測 ”某對象是不是某個類的實例“

xiaoming instanceof Student// 底層機理：檢查Student.prototype屬性是否在xiaoming的原型鏈上（多少層都行，只要在就行）

內置構造函數

JavaScript有很多內置構造函數，比如Array就是數組類型的構造函數，Function就是函數類型的構造函數，Object就是對象類型的構造函數

內置構造函數非常有用，所有該類型的方法都是定義在它的內置構造函數的prototype上的，我們可以給這個對象添加新的方法，從而拓展某些類型的功能

內置構造函數的關系

Object.prototype是萬物原型鏈的終點，JavaScript中函數數組皆為對象。

任何函數都可以看做是Function “new出來的”，Object是函數，所以它也是Function類的對象

包裝類

包裝類的目的就是為了讓基本類型值可以從它們的構造函數的prototype上獲得方法

Math對象

Math.pow()
Math.sqrt()
Math.ceil()      // 向上取整
Math.floor()     // 向下取整
Math.round()     // 四舍五入
Math.max()      // 參數列表的最大值
Math.min()

// 計算arr數組的最大值
var arr = [3, 6, 9, 2];
var max = Math.max.apply(null, arr);

Date對象

new Date()     // 得到當前時間的日期對象
newDate(2020, 11, 1)     // 第二個參數從0開始算
new Date('2020-12-01')

常見方法

時間戳

通過getTime()方法或者Date.parse()函數可以將日期對象變為時間戳

通過new Date(時間戳)的寫法，可以將時間戳變為日期對象

var d = new Date();var timestamp1 = d.getTime();var timestamp2 = Date.parse(d);

正則表達式

正則表達式（regular expression）描述了字符串的 “構成模式”，經常被用于檢查字符串是否符合預定的格式要求
創建正則表達式

1. 使用/內容/的語法形式

var str = '123456';var regxp = /^\d{6}$/;if (regxp.text(str)) {
	alert('符合規則');} else {
	alert('不符合規則');}

2. new RegExp(‘內容’)的形式

var regxp2 = new RegExp('^\\d{6}$')

元字符

不管一個符號有沒有特殊意義，都可以在其之前加上一個\以確保它表達的是這個符號本身

方括號表示法

使用方括號，如[xyz]，可以創建一個字符集，表示匹配方括號中的任意字符

/^[by]\d{7}$/

使用短橫-來指定一個字符范圍，^表示否定

量詞

修飾符

也叫標志（flags），用于使用正則表達式實現高級搜索

var re = /m/gi;var re = new RegExp('m', 'gi');

正則表達式相關方法

字符串的相關正則方法

var str = 'abc123def4567ghi89';
     
// search()方法，很像indexOf()，返回查找到的第一個下標，如果找不到就是-1
var result1 = str.search(/\d+/g);
var result2 = str.search(/m/g);
console.log(result1);       // 3
console.log(result2);       // -1

// match()方法，返回查找到的數組，找不到就是null
var result3 = str.match(/\d+/g);
console.log(result3);       // ["123", "4567", "89"]

// replace()方法，進行替換
var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示貪婪的，盡可能多的連續匹配小寫字母
console.log(result4);       // *123*4567*89

// split()方法，進行字符串拆為數組
var result5 = str.split(/\d+/g);
console.log(result5);       // ["abc", "def", "ghi", ""]

感謝各位的閱讀，以上就是“JavaScript變量聲明如何提升”的內容了，經過本文的學習后，相信大家對JavaScript變量聲明如何提升這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！