学习Vue框架前，先学习下ES6的语法
为什么要学习 ES6
○ES6 的版本变动内容最多，具有里程碑意义
○ES6 加入许多新的语法特性，编程实现更简单、高效
○ES6 是前端发展趋势，就业必备技能
版本更新
○ES5 是 ECMAScript 第5版，2009年发布
○ES6 是 ECMAScript 第6版，2015年发布，也叫 ES2015
○从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1
ECMASript 6 新特性
1. let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点
●不允许重复声明
●块级作用域
●不存在变量提升
●不影响作用域链
应用场景：以后声明变量使用let 就对了
2. const 关键字
const 关键字用来声明常量，const 声明有以下特点
●声明必须赋初始值
●标识符一般为大写
●不允许重复声明
●值不允许修改
●块级作用域
注意：对象属性修改和数组元素变化不会出发 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let
3. 模板字符串
模板字符串（template string）是增强版的字符串，用反引号 ` 标识，特点
●字符串中可以出现换行符
●可以使用 ${xxx} 形式输出变量，近似 EL 表达式
应用场景：当遇到字符串与变量拼接的情况使用模板字符串
let name = 'jack';
console.log(`hello, ${name}`);
let ul = `<ul>
<li>apple</li>
<li>banana</li>
<li>peach</li>
</ul>`
4. 简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁
应用场景：对象简写形式简化了代码，所以以后用简写就对了
let uname = 'rick';
let age = 30;
let sayHi = function () {
console.log('Hi');
}
// 创建对象，因属性、方法 的 k v 同名，可以简化
const obj = {
uname,
age,
sayHi() { console.log('Hi'); }
}
5. 箭头函数
ES6 允许使用箭头=>定义函数
●function 写法
function fn(param1, param2, …, paramN) {
// 函数体
return expression;
}
●=> 写法
let fn = (param1, param2, …, paramN) => {
// 函数体
return expression;
}
6. rest 参数
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments，作用与 arguments 类似，将接收的参数序列转换为一个数组对象（arguments 是伪数组）
语法格式：fn(a, b, ...args)，写在参数列表最后面
应用场景：rest 参数非常适合不定个数参数函数的场景
let fn = (a, b, ...args) => {
console.log(a);
console.log(b);
console.log(args);
};
fn(1,2,3,4,5);
// 1 2 Array(4)
7. getter 和 setter
实际上，getter和setter是 ES5（ES2009）提出的特性
当属性拥有 get/set 特性时，属性就是访问器属性。代表着在访问属性或者写入属性值时，对返回值做附加的操作。而这个操作就是 getter/setter 函数
使用场景： getter 是一种语法，这种 get 将对象属性绑定到 查询该属性时将被调用的函数。适用于某个需要动态计算的成员属性值的获取。setter 则是在修改某一属性时所给出的相关提示
// get 和 set
class Phone {
get price() {
console.log("价格属性被读取了");
return 'iloveyou';
}
set price(newVal) {
console.log('价格属性被修改了');
}
}
//实例化对象
let s = new Phone();
// console.log(s.price);
s.price = 'free';
8. ES6 模块化语法
模块功能主要由两个命令构成
●export 命令用于规定模块的对外接口
●import 命令用于输入其他模块提供的功能
1 分别暴露
export let school = '尚硅谷';
export function teach() {
console.log("我们可以教给你开发技能");
}
2 统一暴露
let school = '尚硅谷';
function findJob(){
console.log("我们可以帮助你找工作!!");
}
export {school, findJob}
3 默认暴露
export default {
school: 'ATGUIGU',
change: function(){
console.log("我们可以改变你!!");
}
}
4 模块导入数据语法
5 通用导入方式
import * as m1 from './js/m1.js';
import * as m2 from './js/m2.js';
import * as m3 from './js/m3.js';
m3.default.change()
6 解构赋值导入
import {school, teach} from "./src/js/m1.js";
import {school as guigu, findJob} from "./src/js/m2.js";
import {default as m3} from "./src/js/m3.js";
7 简便方式导入，只能用于默认暴露
import m3 from "./src/js/m3.js";
