ES6新特性——1.let , const && 模板字符串

1.let const都是块级作用域

1.1.let

1.1.1let代码块内有效

{
    let a = 30;
    var b = 20;
}
console.log(a); //a is not defined
console.log(b); //20

1.1.2 不存在变量提升

var命令会出现变量提升，变量可以在声明之前使用，值为undefined
let命令必须在声明之后使用，否则报错ReferenceError

console.log(f)
let f = 45; //报错

1.1.3不可以重复声明

不允许在相同作用域内，重复声明同一个变量

//不允许在相同作用域内，重复声明同一个变量
let c = 7;
let c = 9;
console.log(c);

1.2 const用来声明常量

声明之后不可以改变
只声明不赋值也报错

const i = 7
console.log(i)

1.2.1<注意>：const对象，对象中属性可变

可以添加修改属性

const per = {
	'name':'xiaosheng'
}
per.name = 'xs'
console.log(per.name) //xs

1.3为什么需要块级作用域

1.3.1原因一：内层变量可能会覆盖外层变量

function foo(a){
    console.log(a);
    if(1===2){
        var a = 'hello world';
    }
}
var a = 10;
foo(a);

1.3.2原因二：用来计数的循环遍历泄露为全局变量

var arr = []
for(var i = 0; i < 10; i++){
    arr[i] = function(){
        return i;
    }
}
console.log(arr[5]());

1.3.2.1解决

var arr = []
for(let i = 0; i < 10; i++){
    arr[i] = function () {
        return i;
    }
}

2.模板字符串

tab键上面的反引号

<div class='box'></div>

const box = document.querySelector('.box')
let id='xs',
	name = 'c'
let htmlStr = `
<li>
	<p id=${id}>${name}</p>
</li>
`
box.innerHtml = htmlStr;

==${}==括号里面表示变量