ES6系列一：变量

曾经终败给现在 2022-02-01 07:53 208阅读 0赞

一、var 的问题：  
1、可以重复声明，没有报错和警告  
2、无法限制修改，没有常量

var a=12;
    var a=5;
    alert(a);  //结果：5

3、没有块级作用域， \{ \}

if(true){
    var a=12;
    }
    alert(a);  //结果：12

二、let 和 const：  
1、不能重复声明

let a=12;
    let a=5;
    alert(a);  //报错：Uncaught SyntaxError: Identifier 'a' has already been declared
    
    const a=12;
    const a=5;
    alert(a);  //报错：Uncaught SyntaxError: Identifier 'a' has already been declared

2、都有块级作用域, \{ \} 块内声明的，块内有效，块外无效

if(true){
    	let a=12;
    }
    alert(a);  //报错：Uncaught ReferenceError: a is not defined
    
    if(true){
     	const a=12;
    }
    alert(a);  //报错：Uncaught ReferenceError: a is not defined

3、let 是变量，可以修改

let a=12;
    a=5;
    alert(a);  //结果：5

4、const 是常量，不能修改

const a=12;
    a=5;
    alert(a);  //报错：Uncaught TypeError: Assignment to constant variable

三、块级作用域举例  
 原来用 var 的方式，结果弹出的都是 3  
 或者将变量 封装到函数里，限制作用域，但比较麻烦  
 用 let 最简单，直接 var 改 let，解决作用域问题

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块级作用域的用处</title>
        <script>
            window.onload= function () {
               /* var aBtn = document.getElementsByTagName('input')
                for (var i=0; i < aBtn.length; i++) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                }*/
               /*var aBtn = document.getElementsByTagName('input')
               for (var i = 0; i < aBtn.length; i++) {
                   // 封装到函数里，限制作用域
                   (function (i) {
                       aBtn[i].onclick = function () {
                           alert(i)
                       }
                   })(i)
               }*/
                var aBtn = document.getElementsByTagName('input')
                for (let i = 0; i < aBtn.length; i++) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="按钮1">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
    </body>
    </html>