ES6 常用语法
什么是ES6
ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准。
我们本着二八原则，掌握好常用的，有用的~能让我们更快的上手~~~
1 声明变量const let var
ES6以前 var关键字来声明变量，无论声明在何处都存在变量提升这个事情~~会提前创建变量~
作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部~
let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部~
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 = "随意" // 报错 var let const
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 extends super
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")