es6中let和const介绍

责编:menVScode 2018-02-21 19:17 阅读(510)

        let 命令:用来声明一个变量,和 var 非常类似。

        const 命令:用来声明一个变量,常量就是不可以变化的量。

        用 let 声明变量的注意事项

        1、使用 let 声明的变量,所声明的变量只在命令所在的代码块内有效。代码块就是一对大括号“{}”。

{
    var a = 1;
    let b = 2;
    console.log(b); // 2
}
console.log(a); // 1
console.log(b); // 报错:b is not defined

        

        2、使用 let 声明的变量,在域解析的时候不会被提升。

        [1] var 代码示例

console.log(a); // undefined
var a = 1;

        [2] let 代码示例

console.log(a); // 报错:a is not defined
let a = 1;

        [3] 代码示例

typeof c; // 报错:c is not defined
let c = 1;

        [4] 代码示例

let f = 10;
function fn(){
    f = 7; // 暂时性死区
    let f = 2;
}
fn() // f is not defined

        

        3、let 不允许在同一作用域下声明已经存在的变量。

let f = 10;
let f = 5;
// Uncaught SyntaxError: Identifier 'f' has already been declared


        4、let 在 for 循环中的应用

        html代码

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>

        js代码

var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function(){
        console.log(i)
    }
};
//这是点击四个按钮显示的i的值都为4

        解决方案

//添加索引值方式
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].index = i
    btns[i].onclick = function(){
        console.log(this.index)
    }
};

//闭包方式
for (var i = 0; i < btns.length; i++) {
    (function(i){
        btns[i].onclick = function(){
            console.log(i)
        }
    })(i)
};

//使用let声明方式
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function(){
        console.log(i)
    }
};


        5、在for循环使用let初始化变量的时候,要注意在循环语句之内是一个父作用域,在循环体之中是一个子作用域。

for (let i = 0; i < 3; i++) {
    let i = 10;
    console.log(i)
};
console.log(i)

        在for循环中,i 三次打印的结果都为10;for循环外部的打印的 i 则报错:Uncaught ReferenceError: i is not defined。


        const命令同样拥有上面 let 的1、2、3条特点,第一:所声明的常量只在其所在的代码块内有效;第二:生命的变量不会被提升;第三:不能声明已经被声明过的常量或者变量。除了这些,在使用const声明变量的时候需要注意以下两点:

        1、const声明变量的时候必须赋值,var 和 let 声明可以不用赋值。

const a;
//报错:Uncaught SyntaxError: Missing initializer in const declaration

        2、const声明的常量存储简单的数据类型的时候不可改变其值,如果存储的是对象,那么引用不可以改变,至于对象里面的数据如何变化,是没有关系的。

const obj = {a:22};
obj = {}; // Uncaught TypeError: Assignment to constant variable.
标签: const let es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码