什么是ES6
ECMAScript 6 简称ES6，在2015年6月正式发布。ECMAScript 是 JavaScript 语言的国际标准。
我们本着二八原则，掌握好常用的，有用的就行。
1、声明变量 const、let、var
ES6以前用var关键字声明变量，无论声明在何处都存在着变量提升这个事情（变量提升：会提前创建变量，但并没有赋值）作用域也只有全局作用域以及函数作用域（所以变量会提升在函数顶部或者全局作用域的顶部）。
let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块 { } 内部。
// 全局变量的提升
console.log(global)
var global = "global"
console.log(global)
// 函数内变量的提升
function aa() {
if(1){
var test = "test"
}
console.log(test)
}
function bb() {
if(1){
let test ="test";
}
console.log(test)
}
// 在for循环中 let
var arry = [];
for(var i = 0; i<10; i++){
console.log(i)
arry[i] = function () {
console.log(i)
}
}
// 相当于
// var arry = [];
// var i;
// for(i = 0; i<10; i++){
// console.log(i)
// arry[i] = function () {
// console.log(i)
// }
// }
arry[5]()
const name = "gaoxin";
const name = "随意"
// 报错
2、模板字符串
ES6 引入了反引号
<body>
<div id="head">
</div>
<script>
// 模板字符串进行标签字符串的拼接一行搞定
let ele = `
<div>
<h1>模板字符串</h1>
<p>动态添加</p>
</div>
`;
let ele_div = document.getElementById("head");
console.log(ele_div)
ele_div.innerHTML= ele;
// 将表达式嵌入字符串
let a = 10;
let b = 5;
console.log(`结果是：${ a + b }, ${ a * b}`)
</script>
</body>
3、函数
箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。
最直观的三个特点
- 不需要function关键字来创建函数
- 省略 return 关键字
- 继承当前上下文的this关键字（因为箭头函数的调用者是当前的上下文，跟普通函数区别开）
例子：
// ES6
x => x+1
// 等同于
function test(x) {
return x+1
}
this 例子:
// 函数在哪里调用了 才决定this到底引用的是谁~~~
// 最后一个调用函数的对象才是传到函数里的上下文对象this~~~
console.log(this)
function test() {
console.log(this)
};
let obj = {
a: 1,
test: test,
};
let obj2 = {
b: 3,
obj: obj,
};
obj.test();
test();
obj2.obj.test();
4、import 和 export
import 导入模块、export导出模块
// main.js
// 导出多个声明
export var name = "gaoxin"
export var age = "18"
export function aa() {
return 1
}
// 批量导出
export {name, age, aa}
// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整个模块导入 把模块当做一个对象
// 该模块下所有的导出都会作为对象的属性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
/ 一个模块只能有一个默认导出
// 对于默认导出 导入的时候名字可以不一样
// main.js
var app = new Vue({
});
export default app
// test.js
// import app from "./main"
import my_app from "./main"
5、数据解构
数据的解构类似于Python中的‘解包’
const people = {
name: "提莫",
age: 2,
};
const person = ["瑞文", "刀妹"]
const { name, age } = people
console.log(name)
console.log(age)
const [name1, name2] = person
console.log(name1)
console.log(name2)
6、class extends super
ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。
类之间通过extends继承，继承父类的所有属性和方法。
super关键字代指父类的this对象 ，子类必须在constructor中调用super方法 ，
否则新建示例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。
class Animal{
constructor(){
this.type = "animal"
}
says(say){
console.log(this.type + "says" + say )
}
}
let animal = new Animal()
animal.says("hello")
class Dog extends Animal{
constructor(){
super();
this.type = "dog";
}
}
let dog = new Dog()
dog.says("hello")
