技術標籤：javascriptjs

文章目錄

• 前言
• 一、var？
• 二、let
• 三、const
• 四、字面量的增強寫法
• 總結
• 今日推薦

前言

前端技術日新月異，從ES5到ES6，語法不斷完善更新。
var的設計可以看成JavaScript語言設計上的錯誤，但是這種錯誤多半不能修復和移除。
十年前, Brendan Eich就決定修復這個問題, 於是他添加了一個新的關鍵字: let
今天我們一起來學習var/let/const他們分別有什麼區別。
來鞏固我們對於JavaScript的理解。

一、var？

在JavaScript中我們使用var來宣告變數
列如：

var name = "Hello World"
 

var number = 1
var people = {name:"xxx",age:18}
var array = ["男","女"]

JS中使用var來宣告一個變數時，變數的作用域主要是和函式的定義有關。
這樣就帶來了一系列的問題：
對於其他塊定義來說就不存在作用域，比如if/for等。
列如：

    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <script>
 

        var btn = document.getElementsByTagName('button');
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener('click', function() {
                console.log('第' + i + '個按鈕被點選');
            })
        }
    </script>

我們這裡點選的是1號按鈕，卻出現的是3號按鈕被點選，說明for裡面var定義的i沒有塊級作用域，是全域性都可以使用的。

var i = 0;
{
	btn[i].addEventListener('click', function() {
		console.log('第' + i + '個按鈕被點選');
	})
}
{
	btn[i].addEventListener('click', function() {
		console.log('第' + i + '個按鈕被點選');
	})
}
{
	btn[i].addEventListener('click', function() {
		console.log('第' + i + '個按鈕被點選');
	})
}

在ES6之前，我們可以採取一些方式來解決這個問題：閉包

    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for (var i = 0; i < btn.length; i++) {
            (function(i) {
                btn[i].addEventListener('click', function() {
                    console.log('第' + i + '個按鈕被點選');
                })
            })(i)
        }
    </script>

為什麼閉包能解決var作用域帶來的問題：
因為閉包採用了函式，函式自帶塊級作用域，大致會像下面這樣：

{
	function(i = 0){
		btn[i].addEventListener('click', function() {
			console.log('第' + i + '個按鈕被點選');
		})
	}
{
	function(i = 1){
		btn[i].addEventListener('click', function() {
			console.log('第' + i + '個按鈕被點選');
		})
	}
}
{
	function(i = 2){
		btn[i].addEventListener('click', function() {
			console.log('第' + i + '個按鈕被點選');
		})
	}
}

閉包的書寫方式過於麻煩，於是到ES6，就引入了:let

二、let

現在我們再將之前的程式碼修改為：

    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <script>
        var btn = document.getElementsByTagName('button');
        for (let i = 0; i < btn.length; i++) {
            btn[i].addEventListener('click', function() {
                console.log('第' + i + '個按鈕被點選');
            })
        }
    </script>

let就會擁有自己的塊級作用域：

三、const

	<script>
        const name = "haha"
    </script>

const主要用於定義常量，定義之後就無法對其進行修改，因為const定義後的這個記憶體地址就無法進行修改。
注意：const定義的變數必須開始就進行初始化
但我們定義的是物件時，我們可以對其中的值進行修改，記憶體地址依舊沒有發生改變。

    <script>
        const obj = {
            name:"skt"
        }
        obj.name = "dwg"
    </script>

四、字面量的增強寫法

ES6之後我們更是引入了字面量增強寫法：
1.屬性的增強寫法
ES5：

    <script>
        const name = "lck"
        const obj = {
            name: name
        }
    </script>

ES6：

    <script>
        const name = "lck"
        const obj = {
            name
        }
    </script>

2.方法的增強寫法
ES5：

    <script>
        let obj1 = {
            test: function() {
                //程式碼塊
            }
        }
    </script>

ES6：

    <script>
        let obj1 = {
            test() {
                //程式碼塊
            }
        }
    </script>

總結

本篇，我們學習了var/let/const,在定義變數的時候根據功能做好更好的進行選擇。

今日推薦

工具：將圖片轉化為非常清晰的向量圖：每45分鐘可使用一次