本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。
EcmaScript6 在 Vue 项目中常用语法
前言
今天学习的主要是关于什么是 ES6，ES6 在 vue 项目中的常用语法，包括变量声明、模板字符串、反引号、箭头函数、对象初始化、解构、导入导出等知识的理解和应用
一、什么是EcmaScript6 与 ES6 变量声明
概述：
作用：
总结：
1.1、什么 EcmaScript6
ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association）通过 ECMA-262 标准化的脚本程序设计语言, 规范定义了一种脚本语言实现应该包含的内容。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。
简单说：ECMAScript 是一种脚本语言的规范，JavaScript 是ECMAScript 规范的一种实现。
ECMAScript6（简称 ES6）是于 2015 年 6 月正式发布的
JavaScript 语言的标准，正式名为 ECMAScript 2015（ES2015） 。
1.2、变量声明
【说明】以下需要测试都可以在上章例子中的 main.js 输入相关代码，然后在终端中通过 node 命令执行(node./src/main.js）。
let 和 const 是新增的声明变量的开头的关键字，在这之前，变量声明是使用 var 关键字，let 和 const 与 var 的区别在于，它们声明的变量没有预解析（浏览器不会直接执行代码，而是加工处理之后再执行，这个加工处理的过程，我们就称之为预解析），let 和 const的区别是，let 声明的是一般变量，const 声明的是常量，不能修改。
（1）var vm = new Vue({ })//这里 var 就可以改为 let
（2）const name=“zhangsan”
（3）还可以用来定义组件：
const mycomp = {props: [‘id’, ‘name’],
template: ‘<h3>组件获取到了路由传递的参数：{ {id}}——{ {name}}，但此处并没有通过$route 去获取。 </h3>’
//此处没有通过$route.params.id 方式获取参数 id，也就不需要 router 实例}
1.3、模板字符串
用途，基本的字符串格式化。将表达式/变量嵌入字符串中进行拼接。用${ }来界定。
//es5
var name = 'xzx' console.log('hello' + name)
//es6
const name = 'xzx' console.log(`hello ${
name}`) //hello xzx，外面不能用单引号
1.4、反单引号(``)
多行字符串或者字符串一行行拼接
const template = `<div>
<span>hello world</span>
</div>`
二、箭头函数、对象初始化简写等 ES6 常用语法
概述：
作用：
总结：
2.1、箭头函数
ES6 很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。
（1）不需要 function 关键字来创建函数
（2）省略 return 关键字
（3）继承当前上下文的 this 关键字
=>箭头函数，前后必须有空格
// 看下面代码（ES6）
(resolve,reject) => {
....... }
// 相当于 ES5 代码
function(resolve,reject){
...... }
2.2、对象初始化简写
ES5 我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的，这个时候 ES 语法就有简写:
function people(name, age) {
return {
name: name,
age: age
};
}
// 以上代码可以简写为
function people(name, age) {
return {
name, age
};
}
//如：路由那章经常使用的
const router = new VueRouter({
routes
})
2.3、函数默认参数
ES6 为参数提供了默认值。
在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function action(name = "徐照兴") {
console.log(name)
}
action() //徐照兴
action("李四") //李四
2.4、 解构赋值
数组和对象是 JS 中最常用也是最重要表示形式。
为了简化提取信息，ES6 新增了解构，这是将一个数据结构分解为更小的部分的过程。
//ES5
const people = {
name: 'tom', age: 20
}
const name = people.name
const age = people.age
console.log(name + ' ‐‐‐ ' + age)
//ES6
//对象
const people = {
name: 'tom', age: 20
}
const {
name, age } = people
console.log(`${
name} ‐‐‐ ${
age}`)
//你也可以按需只导入一个
const {
name} = people
console.log(`${
name}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red' console.log(second) //'blue'
2.5、扩展运算符…
ES6 中另外一个特性就是扩展运算符，也是三个点儿…，主要用于组装对象或者数组。
//数组
const color = ['red', 'black']
//...color相当于上面的这个color数组
const colorful = [...color, 'yellow', 'green']
console.log(colorful) //[red, black, yellow, green]•
//对象
const numobject1 = {
fist: 'a', second: 'b'}
//...numobject1相当于上面的这个color对象
const numobject2 = {
...numobject1, third: 'c' }
console.log(numobject2 ) //{ "fist": "a", "second": "b", "third": "c
三、ES6 中的导入导出默认成员
概述：
import 导入模块（等价于 require）
export 导出模块（等价于 module.export）
作用：
总结：
3.1、ES6 之前写法（可认为是 ES5 写法）
上一章中的test.js,main.js文件采用的语法都是ES6之前的语法。
test.js
module.exports=function(){
console.log("大家好，我是 test 模块 ")
}
main.js
var test=require('./test.js') //扩展名.js 可以省略
//调用 test()实际执行的就是 test.js 中提供对外调用的接口函数
test()
为了更好更快的演示效果：直接把第 13 章的 webpack-demo1项目复制到第 14 章项目下，整个结构保持不变。
(一般项目复制移动都会导致失效)如果 webpack-cli 会导致失效就重新安装下。
采用 ES6 语法来改写：比如 var 可改为 let
3.2、导出默认成员为方法
（1）test.js 文件改为如下：
语法：export default 成员
//ES6
//导出默认成员。
（1）默认成员为方法，因为为默认方法，方法名可以省略
export default function(){
console.log(“大家好，我是 test 模块！——ES6”)
}
（2）main.js 文件改为如下：
语法：import xxx from 模块文件
import test from ‘./test.js’ //扩展名.js 同样可以省略，test 为自己取的名字，一般就是取 js 的文件名test()
（3）用 webpack 重新打包，即在终端输入 npm start
（4）浏览 index.html，进入控制台查看结果，运行正确。
3.3、导出默认成员为对象
（1）test.js 文件改为如下：
//ES6
//导出默认成员。默认成员为对象
export default {
name:“徐照兴”
}
（2）main.js 文件改为如下：
import test from ‘./test.js’ //扩展名.js 同样可以省略，test 为自己取的名字，一般就是取 js 的文件名
//test()
console.log(test)
console.log(test.name)
（3）用 webpack 重新打包，即在终端输入 npm start
（4）浏览 index.html，进入控制台查看结果，运行正确。
3.4、导出默认成员既为对象又为方法
注意：默认成员只能有一个，也就是说只能有一个 export defalut 成员，否则保存后就会报错。
//test.js文件代码
const t=function(){
console.log('大家好，我是 test 模块!!!!——ES6')
}
const n={
name:"徐照兴"
}
export default {
t,n
}
//main.js文件代码
import test from './test' test.t()
console.log(test.n)
console.log(test.n.name)
结果：
3.5、使用webpack --watch自动打包js文件
以上修改了每次需要手动重新打包（执行 npm start），比较麻烦，有没有不用每次手动执行打包的方法呢？ ——有。
在 package.json 的 scripts 节中增加一个命令映射
watch，用来监视 js 文件的变化，如果有变化会自动重新打包。
"scripts": {
"showVersion": "webpack -v",
"start": "webpack",
"watch":"webpack --watch"
},
然后在终端输入 npm run watch 打包，你从下面终端会发现它的运行不会终止，也就是一直处于监视状态。
这个时候你再去修改下 test.js 文件，修改之后只要保存下该文件，然后重新浏览刷新下主页文件 index.html，即可看到修改后的结果，无需再去打包。
3.6、导出默认成员为变量
（1）test.js 文件改为如下：
//ES6
//导出默认成员。2.默认成员为对象
export default ‘hello’
（2）main.js 文件改为如下：
import test from ‘./test.js’ //扩展名.js 同样可以省略，bar 为自己取的名字，一般就是取 js 的文件名
//test()
console.log(test)
（3）浏览刷新 index.html，进入控制台查看结果，看到了输出了 hello
四、ES6 中的导入导出非默认成员
4.1、导出非默认成员
语法：export 成员
说明：非默认成员必须要有成员名称。导出的为非默认成员方便按需导入
示例：
test.js 文件中输入以下内容：
//ES5 语法。exports 后面有 s
//exports.name="张三"
//exports.age=20
//ES6 语法。export 后面无 s
export const name="李四"
export const age=21
//export sex="男" 错误写法，没有数据类型，不写 const 写 var 都可以的
//此处函数名 add 不能少
export function add(num1,num2){
return num1+num2
}
4.2、导入非默认成员
import * as testobj from './test' //默认成员也会被导出
在导出的 js 文件模块中写好了要导出的成员，在入口文件中一般都要把它导出，以便使用
语法：
方式一：
按需导入指定成员，采用 解构赋值 的方式
import {成员名 1, 成员名 2, …, 成员名 n} from 模块文件
注意：成员名 1, 成员名 2, …, 成员名 n 名称要与导出模块文件对应的非成员名保持一致。如果成员太多，可以使用下面的方式一次性导入所有成员。
方式二：
一次导入模块文件中的所有成员（包含 default 成员）
import * as 别名 from 模块文件
示例：main.js 写入以下测试代码
// name 就对应 test.js 文件中的 name 成员，age 对应 test.js 文件中的 age 成员，add 对应 test.js 文件中的 add 成员。这是解构赋值方式
import {
name,age,add} from './test' // add 是一个函数，需要传入相应参数
console.log(name,age,add(1,2))
import * as testobj from './test' console.log(testobj)
console.log(testobj.name,testobj.add(2,3))