什么是ES6
ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准。
我们本着二八原则，掌握好常用的，有用的~能让我们更快的上手~~~
1 声明变量const let var
ES6以前 var关键字来声明变量，无论声明在何处都存在变量提升这个事情~~会提前创建变量~
let 特点： 1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const 特点： 1.局部作用域 2.不会存在变量提升 3.不能重复声明，只声明常量 不可变的量
2 模板字符串
ES6引入了反引号``, 来看看它的神奇之处吧~~~
tab键上面的反引号 ${变量名}来插值 let name = '未来'; let str = `我是${name}` ```
3 函数
function(){} === ()=>{} this的指向发生了改变
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> /* function add(x){ return x } add(5); */ // let add = function (x) { // return x; // } // add(10); // let add2 = (x)=>{ // return x // } // let add2 = x => x; // console.log(add2(30)); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script> let person = { name: "日天", age: 30, fav: function () { console.log(this); //this指向 当前的对象 console.log(this.name); } } /* let person2 = { name: "日天2", age: 30, fav: () => { console.log(this); //this指向 发生了改变。this指向 定义person2的父级对象(上下文) console.log(this.name); } } person2.fav() */ // 对象的单体模式 let person3 = { name:'日天', fav(){ console.log(this); } // fav:function () { // // } } person3.fav(); </script> </body> </html>
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") class extends super