ES6(一)--let和const

let

let用来声明一个变量

1.let声明的变量只在所在的代码块里面有效

{
    let a = 1;
    var b = 2;
}
console.log(a);
console.log(b);

打印a的时候会报错a is not defined

2.let声明的变量在预解析的时候变量名不会提升

console.log(a);//变量名提升,打印undefind
var a = 1;

console.log(b);//变量名不会提升,报错b is not defined
let b = 2;

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

let a = 1;
let a = 2;

报错

4.在循环语句之内是一个父作用域,在循环体中是一个子作用域

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

以上并不会报错,console.log每次打印的都是10

let的应用

现在做一件事情,当点击button的时候,打印当前循环i变量的值

html结构:

<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>

ES5代码

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);
    }
}

或者闭包

var btns = document.querySelectorAll("button");
for(var i = 0 ;i < btns.length; i++){
    (function(i){
         btns[i].onclick = function(){
            console.log(this.index);
        }
    })(i)       
}

ES6使用let声明变量,可以直接使用

var btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        console.log(i);
    }
}

关于const

const用来声明一个常量,具有上面let的1,2,3的特点。

1.const声明的常量值不能再改变

const a = 1;
a = {};//报错

标签: es6

添加新评论