JavaScript let声明与模版字符串

1.let声明

1.let不像var有变量声明提升，未声明直接使用会报错

console.log(a);    //undefined
var a;
console.log(b);   //报错
let b;

2.在ES5中，全局变量是挂载在顶层对象（浏览器是window）中。而let不会

var a = 1;
console.log(window.a);  //1
let b = 2;
console.log(window.b); //undefined

3.在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。而let可以声明块级作用域的变量。

if(true){
    var num = 10;
}
console.log(num); //10   var定义的变量没有块级作用域
if(true){
    let num2 = 10;
}
console.log(num2); //报错 num2 is not defined

4.let变量不能重复声明，而var声明的变量可以

let num = 10;
let num = 11;
console.log(num);  //报错 Identifier 'num' has already been declared

var num = 10;
var num = 11;
console.log(num);  //11 var可以重复声明

5.let 配合for循环的独特应用

<ul id="ul1">
    <li>11111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
</ul>

window.onload = function(){
    var allLis = document.getElementsByTagName("li");
    for(var i=0;i<allLis.length;i++){
        allLis[i].onclick = function(){
            console.log(i);
        }
    }
//无论点击哪个元素都是输出4
   for(let j=0;i<allLis.length;j++){
        allLis[j].onclick = function(){
            console.log(j);
        }
    }
}
//依次点击各个li元素分别输出0/1/2/3

2.模版字符串

传统的方式拼接字符串和变量时，如果拼接内容很多的话，会变得很复杂。需要大量的双引号 +号变量名组合在一起，很不方便，极易出错。
ES6的模版字符串为此而生
用法：用反引号（tab顶上那个键）标识将模版包裹起来。${}里面既可以放变量，也可以放函数，还可以放表达式

<script>
    var str = "我是谁，我在哪"
    var n = 16
    document.body.innerHTML += `<h1>${str}?你就少说两句吧</h1>`
    document.body.innerHTML += `<h1>2的16次方=${Math.pow(2,n)}</h1>`
</script>

运行结果：

<h1>我是谁，我在哪?你就少说两句吧</h1>
<h1>2的16次方=65536</h1>

JavaScript let声明与模版字符串

1.let声明

2.模版字符串

猜你喜欢