ES6的模板字符串和let与const

现阶段前端行业发展迅猛，前端技术也在高速迭代，ES6-ES11规范增加了很多JavaScript新特性。ES新 特性已经成为前端技术发展的趋势，语法简洁，功能丰富，部分特性还有性能提升。 本章节课程主要讲 解ES6的基础、ES6新特性、Promise 和 Class（类）、Module模块与Babel编译，课程由浅入深，通俗 易懂，学习后会有较大的技术提升
let与const：let 和 const是用来声明变量与常量，声明变量 let 代替var 声明变量，const 声明常量。
let 和 const 的用法：var name = “姓名”; let sex = “nan”; const STR = “这是一个常量”;//常用是不可以修改的 console.log(STR); 说明：var与let声明的就是变量，变量初始化之后，还可以重新赋值。 const声明的就是常量，常量一旦初始化，就不能重新赋值，否则就会报错 const声明常量的使用，一般用大写命名(潜规则)；const就是为了那些一旦初始化就不希望重新赋值的情况设计的。const声明的常量，允许在不重新赋值的情况下修改他的值；//基本数据类型 const age=12; age=23;//报错 //引用数据类型 const person={ name:‘zhangsan’, age:12 } person.age=23；我们可以在实际的开发中总结出来：例如我们可以先使用const声明一个常量，如果这个在后面需 要修改，那么你可以回来修改它的声明方式。这个对于大部分初级程序员，对于有一定开发经验的 程序员，大部分的情况下，你是可以判断出哪些是用常用，哪些使用变量。let、const 与 var 的区别: 重复声明：已经存在的变量或常量，有声明一遍。var 允许重复声明，但let 与const不允许。var a=1; var a=2 console.log(a) let b=1; let b=2;//报错，不允许重复声明 //同样const也是不允许的 const c=1; const c=2;//报错，不允许重复声明；变量提升：var会提升变量的声明到当前作用于的顶部console.log(a);//undefined var a = 2;// 变量的提升。et与const 不存在变量的提升，养成好的编程习惯，所有的变量与常量都需要先声明在使用console.log(b); let b=1; //报错 必须先声明再使用。暂时性死区：暂时性死区 只用let与const有只要作用域内存在let const 他们所声明的变量或者常量就自动“绑定”这个区域，不在受到外部作用域的影响；let b = 1; function fun() { console.log(b); let b=32; //报错 原因 let b 作用域的一个死区 } fun()；。window对象的属性与方法：全局作用域中,var 声明的变量、通过function 声明的函数，会自动变成window对象的属性或方法，而 let与const声明的不会。var a=1; function add(){ console.log(‘add方法’) } console.log(window);//输出window对象就可以看到。块级作用域：什么是块级作用域？变量或常量的作用范围；var 没有块级作用域，典型的用法可以看下面的案例。for (var i = 0; i < 3; i++) { console.log(i);// } console.log(i);。let/const 有块级作用域for (let index = 0; index < 4; index++) { console.log(index);// } // console.log(index); //报错 index的作用域在 for循环中。作用域链:内层作用域–>外层作用域–>…–>全局作用域let b=12; function fun2() { console.log(b); for (let j = 0; j < 3; j++) { console.log(j); } } fun2(); // console.log(j); 有哪些块级作用域//例如 { let name=“zhangsan”; console.log(name) } console.log(name);//报错 {} for(){} while(){} do()while{} if(){}… switch(){} function(){} //等等 都是由块级作用域的 //但是注意了：对象不具有作用域 person={name:‘zhangsan’}
使用let声明的一个案例；html与样式部分

JavaScript：点击上面的按钮弹出每个按钮的索引index

解决方法一：使用let之前的解决方法

解决方法二: 使用let声明变量

模板字符串：模板字符串的基本使用
//使用"" ''声明字符串 //使用反引号声明字符串 let a="234234"; let b='asdfasdf'; let c=`<p>段落标签</p>`; 模板字符串与一般字符串的区别: 模板字符串的注入 const person={ name:"zhangsan", sex:'male', age:23 } //普通字符串需要拼接 var str="姓名"+person.name+"性别"+person.sex; //模板字符串 可以通过注入的方式 var str1=`姓名：${person.name}，性别：${person.sex}` 模板字符串的注入方式： ${...} 以上的案例中和其他的字符串拼接，使用模板字符串，方便注入。其他情况下使用模板字符串或一 般字符串都行 模板字符串的注意事项: a.输出多行字符串 普通字符串，需要使用\n 、\t等进行换行 模板字符串中，所有的空格、换行或者缩进都会被保留在输出之中//普通字符串 const info = '第1行\n第2行'; //模板字符串中，所有的空格、换行或者缩进都会被保留在输出之中 const templetStr = ` 第一行 第二行 第三行`; b.输出和\等特殊字符串 需要转义
模板字符串的应用(我们之前的项目中用字符串拼接的地方，都可以使用模板字符串，更加的方便与 简洁)
const person={ name:“zhangsan”, sex:‘male’, age:23 } const infor=姓名：${person.name},性别：${person.sex},是否成年： ${print(person.age)};