ES6基础、新特征

块级作用域

• 使用let关键字声明的变量，不存在变量的提升，不能多次声明，只能在块级作用域(使用大括号{ })下访问，不能被外部访问
• 例如 if else while do while for switch等

ES5和ES6中的区别

• ES5中只分全局和函数作用域，只有函数{ }构建局部作用域
• ES6中所有{ }都将构成局部作用域，结合let关键字使用，创建局部变量

if(true){
    //ES5中，在{ }内var声明的变量不受{ }限制，外界也可访问
    var a = 1;  
    
    //ES6中，let声明的变量只能在{ }中使用
    let b = 2; 
}

• let声明的变量不存在变量提升，不允许重复声明，只能重新赋值，带关键字是重复声明，不带是重新赋值

//不报错，先变量提升后赋值，此时是undefined
console.log(a);
var a = 1; 

//报错，不允许变量提升
console.log(b);
let b =2;

//重复声明和重新赋值
let c = 3;  
let c =5;  //报错，重复声明
c = 5;  //不报错，重新赋值

参数增强

• 可以给参数(形参)设置默认值
• 如果实参只有2个，形参有3个，可以给第三个形参设置默认值

function add(a,b,c=1){  //第三个形参设置默认值
    return a+b+c;
}
add(1,2)

箭头函数

• 匿名函数的一种简写方法，但不等同于匿名函数
• 省略了function关键字
• 语法：(形参)=>

//ES5匿名函数写法
var f1 = function (a,b){  
    console.log(a,b)
}
f1(10,23);

//ES6中箭头函数写法
var f2 = (a,b)=>{console.log(a, b)};
f2(12,34)

• 如果匿名函数的函数体只有一条return语句，可以省略

//ES5匿名函数语法
var f3 = function (a){
    return a*a;
}
console.log(f3(10));

//ES6中用箭头函数可以简写为
var f3 = (a)=>{return a*a};  //第一种简写
var f3 = (a)=>a*a;  //进一步简写
console.log(f3(10));

模板字符串

• 直接在字符串中书写JS表达式
• ` (反引号，键盘左上方第二排第一个)创建字符串，结合${JS表达式}在字符串中表示数据

//声明变量
var a = 1;
var b = 2;

//模板字符串
console.log( ` 
    标题:${a}  
    其它:${b.toFixed(2)}
` );