天天看點
傳回

var和let和const

var和let和const

var和let和const

var和let的使用：

在ES5中，if 和for的都沒有作用域，想要有作用域必須要借助function的作用域（ES5中隻有function有作用域 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</body>
<script src="let和const.js"></script>

</html>
           
{
    var func;
    if (true) {
        var name = 'why';
        func = function () {
            console.log(name);
        }
        // func()
    }
    name = 'what'
    //在中間可以修改name的值
    //ES5的缺陷
    func()
    // if 的塊級作用域必須要借助function
}

在下面代碼的第 10 行中的var i = 1，在所有地方的i都會指派為 1，無論在括号内還是括号外都是 1 

{
    // for塊級作用域必須要借用function
    var btns = document.getElementsByTagName('button')
    // for(var i = 0; i <btns.length;i++){
    //     btns[i].addEventListener('click',function(){
    //         console.log('第'+i +'個按鈕被點選');
    //     })
    // }
  
    for (var i = 0; i < btns.length; i++) {
        (function (num) {
            btns[i].addEventListener('click', function () {
                console.log('第' + num + '個按鈕被點選');
            })
        })(i)
        //而閉包可以實作，因為函數自己有自己的作用域，不會受外面的影響，隻找屬于自己的i

    }
} 
           
{
    console.log('-------ES6定義的let有塊級作用域');
    let btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '個按鈕被點選');
        })
    }

}

var和let的使用的範例 

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6]()
輸出10
若将var改成let 
var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6]()
輸出6 
for (let f = 0; f < 3; f++) {
    let f = 'abc';
    console.log(f);
}
           
function fn() {
    var a = 1;
    var a = 2;
}
           
{
    var fn = [];
    for (let i = 0; i < 5; i++) {
        fn[i] = function (x) {
            return x * i;
        };
    }
    console.log(fn[2](10));
}

const的用法

一旦給const修飾的辨別符被指派後，不能修改 

const name = 'why'
 name = 'abc'

在使用const 定義辨別符，必須進行指派 

const name,//直接寫會報錯

常量的含義是指向的對象不能修改，但是可以改變對象内部的屬性 

const obj = {
        name: 'whr',
        age: 18,
        height: 1.55
        }
    obj.name = 'ww';
    obj.age = 22;
    console.log(obj);

對象字面量的增強寫法

ES5的寫法 

const name = 'wwww';
    const age = 22;
    const height = 1.5
    //ES5的寫法
    const obj = {
        name: name,
        age: age,
        height: height,
        run: function () {
            console.log('running1');
        },
        eat: function () {
            console.log('eating1');
        }

    }
    console.log(obj);

ES6文法糖 

//ES6的寫法
    const obj = {
        name,
        age,
        height,
        run() {

        },
        eat() {

        }
    }
    console.log(obj);
i++ 作用域 指派 塊級作用域 html
上一篇: 2010年十大熱門技術私企Facebook居首
下一篇: JavaScript中 var、let、const 特性及差別詳解

繼續閱讀