javascript中let和var的區別

今天使用laravel-admin中的JS來控制頁面的操作

部分內容轉載於簡書：javascript中let和var的區別

一、背景

$script = <<<JS
                const iIndexs = "{$iIndexs}";
                $('#indexs').on('input', _debounce(ajaxVerifyIndexs, 500));
                //驗證順序值的正確性
                function ajaxVerifyIndexs(){
                    let indexs = $.trim($('.indexs').val());
                    if (!indexs) {
                        alert('請填寫順序值');
                         return ; 
                    }
                    if(!/^\d+$/.test(indexs)){
                        alert('必須是數字');
                        $('.indexs').val('');
                        return false;
                    }
                    $.post('/admin/task/ajax_verify_indexs',{indexs:indexs,_token:LA.token,iIndexs:iIndexs},function (res) {
                        if (!res.success){
                            alert(res.msg);
                            $('.indexs').val('');
                            return false;
                        }
                        alert(res.msg);
                        return true;
                    },'json');
                    return true;
                }
                // 防抖函數
                function _debounce(fn, wait) {
                    var timer = null;
                    return function () {
                        clearTimeout(timer);
                        timer = setTimeout(function () {
                            fn();
                        },wait);
                    }
                }
JS;
            Admin::script($script);

在定義變量的時候，用到的let，以往在在Html頁面中定義變量，一般都是使用var直接定義，所以就想知道兩者的具體區別

二、撥開雲霧
let是es6中新增命令，也是用來聲明變量的，可能很多小夥伴都像我一樣，定義變量的時候都會用var而很少用到let，那麼，let和var到底有什麼區別呢？
let和var的區別體現在作用域上。var的作用域被規定爲一個函數作用域，而let則被規定爲塊作用域，塊作用域要比函數作用域小一些，但是如果兩者既沒在函數中，也沒在塊作用域中定義，那麼兩者都屬於全局作用域。
全局作用域
var 和 let 聲明的變量在全局作用域中被定義時，兩者非常相似

            let bar = 'hehe';
			var baz = 'lala'; 

但是，被let聲明的變量不會作爲全局對象window的屬性，而被var聲明的變量卻可以

console.log(window.bar);  //undefined
console.log(window.baz); // 'able'

函數作用域
var 和 let 在函數作用域中聲明一個變量，兩個變量的意義是相同的。

function  aFun(){
    let bar = 'hehe'; // 函數作用域中的變量
    var baz = 'lala'; // 函數作用域中的變量
}

塊作用域
在塊作用域中兩者的區別較爲明顯， let只在for()循環中可用，而 var是對於包圍for循環的整個函數可用

function  aFun1(){
    // i 對於for循環外的範圍是不可見的(i is not defined)
    for(let i = 1; i<5; i++){
        //  i只有在這裏是可見的
    }
    // i 對於for循環外的範圍是不可見的(i is not defined)
}
function aFun2(){
    // i 對於for循環外的範圍是可見的
    for(var i = 1;i<5; i++){
        // i 在for 在整個函數體內都是可見的
    }
    // i 對於for循環外的範圍是可見的
}

let 和var 重新聲明
var允許在同一作用域中聲明同名的變量，而let不可以

let me  = 'foo';
let me  = 'bar'; //SyntaxError: Identifier 'me' has already been declared

var me = 'foo';
var me = 'bar'; //這裏me被替代了，是可以重複聲明的

es6中還有一個聲明變量的命令const，const和let都是在聲明的塊作用域中有效，但是let聲明的變量可變，值和類型都可以改變，沒有限制。const聲明額變量不能改變，所以，const一旦聲明一個變量，就必須馬上初始化，不能留到以後賦值

const hehe; //報錯，Missing initializer in const declaration

const a = 3;
a = 5; //報錯，Uncaught TypeError: Assignment to constant variable.

三、見彩虹

以上就是let和var在不同作用域下的區別
那麼在什麼情況下要用到let呢？
let 在塊作用域中有效，有的時候，我們爲了降低變量污染的風險，在塊作用域中使用let來代替var，這樣不會污染塊作用域的外部作用域，降低 bug率，使代碼更安全。

上述還順便捋清楚了兩者與const的關係，希望能一起學習進步！