简述es6相对于es5的变化
let和const以及var
let和const在es6中是存在块级作用域的概念的
{
let a = 0 ;
}
console.log(a);
{
const a = 0 ;
}
console.log(a);
说这两种都是运行不了的
const a = 0 ;
a = 1;
console.log(a);
const因为是用来申明常量的所以这种先声明后更改的也是存在语法错误的
也算是const的一种特性 申明不可重复赋值,在es5中也是可以的
console.log(a);
let a = 0;
console.log(a);
const a = 0;
这里控情况如果在es5使用var关键字进行申明,应该会在控制台打印出undefined,但是使用es6中的let和const就会报错,这就是es5中的变量声明提升,正所谓,先声明后赋值
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
for(var i = 0;i < liList.length ; i ++){
liList[i].onclick=function(){
console.log(i)
}
}
这里打印出来的数据应该是六次liList.length+1,也就是6,而从代码我们大概看的出这里我们是想要打印出来i每次遍历的过程中的值而不是六次6, 因此我们这里只需要吧for循环中申明的关键字转换为let关键字即可,这也是运用了let的可以形成暂时性死区的特性
for(let i = 0;i < liList.length ; i ++){
liList[i].onclick=function(){
console.log(i)
}
}
函数变化
在es5中我们申明函数并赋值可以这么写
var fn = function(){
console.log('1');
}
在es6中出现了一个新东西叫做箭头含糊→
let fn = ()=>{
console.log('1')
}
箭头函数相对于es5的不同在与
* 箭头函数的this直接指向父级
* 箭头函数如果传如形参个数为1时可以省略小括号
let fn = a=>{
console.log(a)
}
* 如果箭头函数的右边也只有一行代码,那么也可以将函数体中的花括号去掉
let fn = a=>console.log(a)
模板字符串
es5我们拼接字符串
var a = 0 ;
var b = 10 ;
var c = 100;
var d = "a="+a+"b="+b+"c="+c
es6 模板字符串
var a = 0 ;
var b = 10 ;
var c = 100;
var d = `a=${
a}b=${
b}c=${
c}`