es6 let、const关键字,解构赋值、模板字符串

let基本用法

//声明变量
let a;
let b,c,d;
let e = 100;
let f = 521，g = 'iloveyou' , h = [];
//1．变量不能重复声明
 let star = '易烊千玺';
 let star = '千玺';

//2．块儿级作用域全局，函数，evall
 if else while for
 {
let girl ='aa';
 }
 console.log(girl);
//3．不存在变量提升 
 console.log(song);
 let song ='恋爱达人';

//4．不影响作用域链
{
let school ='尚硅谷';
function fn(){
console.log(school);
}
fn();//尚硅谷
}

let经典案例

<div cLass="container">
<h2 cLass="page-header">点击切换颜色</h2>
<div cLass="item"></div>
<div cLass="item"></div>
<div cLass="item"></div>
</div>

<script>
//获取div元素对象
let items = document.getElementsByclassName( 'item');
//遍历并绑定事件
//for(var i = 0;i<items.length;i++){
//将var 改成let即可
for(let i = 0;i<items.length;i++){
//报错 (此时i为3)
items[i].onclick = function(){
//修改当前元素的背景颜色
/ / this.style.background = 'pink ';
items[i].style.background = 'pink ";
}
}
// {
// var i = 0;
//}
// {
// var i = 1;
//}
// {
// var i = 2;
//}
//因为var 不存在块级作用域，循环结束后i变成3
//console.log(i)//i 3


// {
// let i = 0;
//i===0
//items[i].onclick = function(){
//修改当前元素的背景颜色
//items[i].style.background = 'pink ";
}
//}
// {
// let i = 1;
//}
// {
// let i = 2;
//}

用var声明变量
console.log(i) 根据作用域链查找原则，要向上一级作用域查找，在这里上一级作用域是循环创建的全局作用域下的全局变量 i ，当for循环结束时，i=3，
找不到对应dom元素报错

用let声明变量
由于使用的是let关键字，具有块级作用域，在循环结束后，生成了三个块级作用域，产生的三个块级作用域都有各自的变量i，三个变量互不影响，根据作用域链查找原则，要向上一级作用域查找，在这里上一级作用域是循环创建的三个块级作用域都有各自的变量i，items[i]分别是0 ，1，2，点击事件能正确执行

const基本用法

<script>
//声明常量
const SCHOOL ='尚硅谷';
//1．一定要赋初始值
// const A;
//2．一般常量使用大写(潜规则)
// const a = 100;
//3．常量的值不能修改
//SCHOOL = 'ATGUIGU ';
//4．块儿级作用域
// {
//const PLAYER = "UZI';
// }
// console.log(PLAYER);

//5．对于数组和对象的元素修改，不算做对常量的修改，不会报错
const TEAM = ['UZI', 'MXLG' , 'Ming' , 'Letme' ];
//TEAM 指向的地址没有改变，不会报错
TEAM.push( ' Meiko ' );
</script>

解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

1．数组的结构

 const F4 =['小沈阳','刘能','赵四','宋小宝'];
 let [xiao, liu,zhao, song] = F4;
 console.log(xiao);
 console.log(liu);
 console.log(zhao);
 console.log(song);

2．对象的解构

//2．对象的解构
const zhao = {
name:'赵本山',
age:'不详',
xiaopin: function(){
console.1og("我可以演小品");
}
};
 let {name，age， xiaopin} = zhao;
 console.log(name);
 console.log(age);
 console.log(xiaopin);
 xiaopin();

模板字符串

<script>
// ES6引入新的声明字符串的方式 ``
//1．声明
// let str =`我也是一个字符串哦!`;
// console.log(str, typeof str);

//2．内容中可以直接出现换行符
let str = `
<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>;
`
//3．变量拼接
let lovest ='魏翔';
let out =`${lovest}是我心目中最搞笑的演员!!`;
console.log(out);
</script>