5、ES6新特性


1 let与const、块级作用域

  • 在ES6之前JS是没有块级作用域的,const与let填补了这方便的空白,分别使用let、const声明变量和常量,const与let都是块级作用域。

  • 使用var定义的变量为函数级作用域:

  • 使用let与const定义的变量为块级作用域:

    
    
        
            
            Title
            
        
        
    
        
    

     

2 函数参数默认值

  • ES6支持在定义函数的时候为其设置默认值:传值覆盖,空值默认

    格式:function 函数名称(参数名称1=值1,参数名称2=值2, ......){}

    
    
        
            
            Title
            
        
        
    
        
    

     

3 箭头函数

  • 箭头函数=>不只是关键字function的简写,类似于部分强类型语言中的lambda表达式

  • 箭头函数用 => 符号来定义。

  • 箭头函数相当于匿名函数,所以采用函数表达式的写法。

  • 基本结构

    匿名函数:function(参数){}

    箭头函数:(参数)=>{}

  • 箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

  • 箭头函数例子:某些情况进一步简写

    (1)当要执行的代码块只有一条return语句时,可省略大括号和return关键字:

    (2)当传入的参数只有一个时,可以省略小括号:

    (3)当不需要参数时,使用空的圆括号:

    
    
        
            
            Title
            
        
        
    
        
    

     

4 对象属性缩写

  • 在ES6中允许我们在设置一个对象的属性(函数)的时候不指定属性名(函数名)。

  • 当对象属性(函数)名称和外部变量(函数)名称,同名的情况下,可以省略属性名的重复书写以及冒号。

    
    
        
            
            Title
            
        
        
        
    

     

5 模板字符串

  • ES6支持模板字符串,使得字符串的拼接更加的简洁、直观。

  • 不使用模板字符串:

    在ES5中字符串拼接通过【+】实现

  • 使用模板字符串:

    ES6中使用反引号【``】来拼接字符串,使用【${}】来包含变量

    
    
        
            
            Title
            
        
        
        
    

     

6 模块化(Module)

  • 导出(export)ES6允许在一个模块中使用export来导出多个变量或函数。

    • 导出变量

      ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个或多个变量。

    • 导出函数

  • 导入(import)

    定义好模块的输出以后就可以在另外一个模块通过import引用。

  • ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。

  • 在js文件中通过import引入另外的js文件,提示Uncaught SyntaxError: Unexpected string,或者Uncaught SyntaxError: Unexpected identifier错误,原因是import属于es6的语法,但是浏览器不支持es6语法,所以需要转换。后期的Vue中会接解决这个问题。