为了让大家分清哪些是JavaScript的ES6语法，哪些是Vue的API，特意写了这一章。

    Vue2.x是JavaScript 框架，JavaScript用的是ES6语法。而Vue3.0将使用Typescript。

    编程语言JavaScript是ECMAScript的实现和扩展 。

    ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

      · [语言语法]    - 语法解析规则、关键字、语句、声明、运算符等。

      · [类型]           - 布尔型、数字、字符串、对象等。

      · [原型和继承] - 内建对象和函数的

      · [标准库]        - [JSON]、[Math]、[数组方法]、[对象自省方法]等。

    ECMAScript 6在2015年发布，es6 又称 es2015。

▪  ES6的语法：

  • 使用let来声明变量   

    · 以前，使用 var 来声明变量，用let声明的变量相当于局部变量。

var name = '小鸭鸭'

    · 现在

let name2 = '隔壁的泰山'

  • 使用const来声明常量 

    · 以前，使用 var 来声明变量，用const声明的常量不能修改。

var name = '隔壁的泰山'
name = '火辣辣'

    · 现在，用const声明的常量不能修改，如果修改报错：TypeError: Assignment to constant variable。

const name = '鸭鸭'
name = '猪猪'

  • 模板字符串``        

    · 以前，使用''或者""来把字符串套起来，换行需要用/，变量用'+name+'；

    · 现在，使用``，可以支援回车换行，变量用${name}表示)

  • 函数的默认参数

function add(a=0,b=0){
    return a+b
}
console.log(add(2,3))

  • 箭头函数  

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

    (2) 省略return关键字

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

    · 以前

function add(a,b){
    return a+b
}
console.log(add(3,4))

    · 现在，使用箭头函数：省略 function和return关键字   

add= (a,b) => a+b

  • 对象初始化简写      

    · 以前

function person(name,age){
      return {
          name: name,
          age: age
      }
  }
  console.log(person('小飞飞',16))

    · 现在，如果对象的名称和传入的参数名称一样，可以不写参数的名称。

function person2(name,age){
    return {
        name,
        age
    }
}
console.log(person2('小鸭鸭',18))

     · 升级版，配合箭头函数

person3 = (name,age) => {name,age}

  • 对象解构

    · 定义一个对象

var person = {
    name: '小飞飞',
    age: 16
}

    · 以前，需要这样赋值：

var aaa = person.name
var bbb = person.age
console.log(aaa+'====='+bbb)

    · 现在，可以这样赋值:

var {name,age} = person
console.log(name+'========'+age)

  • 传播操作符(...)      

    把一个对象的属性传播到另外一个对象中，...写在前面。

var addr1 = ['aaa','bbb','ccc']
var addr2 = [...addr1,'ddd']

  • 导入(import)和导出(export)

    ·  ES6+语法比较新，很多高级功能node是不支持的，就需要使用babel转换成ES5

    (1) babel转换配置,项目根目录添加.babelrc 文件

{
  "presets" : ["es2015"]
}

    (2) 安装es6转换模块

> cnpm install babel-preset-es2015 --save-dev

    (3) 全局安装命令行工具

> cnpm install babel-cli -g

    (4) 使用

> babel-node js的文件名

    · 以前的导出

exports.add = function(a,b){
    return a+b
}

    · 以前的导入

var demo = require('./demo09_lib')
console.log(demo.add(4,5))

    · 现在 - 第一种导出方式

     导出方法的名称。

export function add(a,b) {
return a+b
}
export function info(str) {
    console.log('日志：'+str)
}

    · 现在 - 第二种导出方式

    直接用default，里面带有很多方法。

export default {
    add(a,b){
        return a+b
    },
    info(str) {
        console.log('日志：'+str)
    }
}

    · 现在 - 第一种导入方式

    用{}解构里面的方法。

import {add,info} from './demo09_lib'
console.log(add(5,5))

    · 现在 - 第二种导入方式

    直接把整个导出的对象，起一个别名。

import demoApi from './demo09_lib'
console.log(demoApi.add(1,2))
demoApi.info('小飞飞真的好纯')

此外:

    (1) Node.js中使用ES6。

    (2) 具体的ES6语法，可以参考以下这篇文章，讲得比较全面，就不粘贴内容了。

    https://www.jianshu.com/p/69330a18bff3