ES6

97 阅读2分钟

ES6

1.什么是ES6

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。

ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

2009年发布的改进版本ES5

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

1.1ES6新的语法特征

1.1.1定义变量let,常量const

var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。例如:

test();
function test(){
    var flag=false;
    if(flag){
        var a='hello,a';
        console.log(a);
    }else{
        console.log('no data...'+a);
    }    
}

在ES6中,通常用let表示变量、const表示常量。let和const都是块级作用域。

test();
function test(){
    var flag=false;
    if(flag){
        let a='hello,a';
        console.log(a);
    }else{
        console.log('no data...'+a); //此处访问不到,会抛异常,a未定义
    }    
} 
//定义常量
const name='accp';

1.1.2 模板字符串

一。字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

    //es5 
    var name = 'es5...'
    console.log('hello' + name)
    //es6
    const name = 'es6'
    console.log(`hello ${name}`) //hello es6

二。在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)非常方便实现多行字符串

    // es5
    var msg = "Hi \
    man!"
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

1.1.3 函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

看例子代码

    function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300

1.1.4 箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。

1不需要function关键字来创建函数

2省略return关键字

3继承当前上下文的 this 关键字

看下面代码(ES6)

 (response,message) => {
    .......
 }

相当于ES5代码

function(response,message){
    ......
}

1.1.5 对象初始化简写

ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如

function student(name, age) {
        return {
            name: name,
            age: age
        };
    }

以上代码可以简写为

  function student(name, age) {
        return {
            name,
            age
        };
    }

1.1.6 import导入模块、export导出模块

a.js

let fn=function(){
    console.log('fn...');
}
export {fn}

b.js

import {fn} from './a'
fn();