ES6常用语法
什么是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~~~ 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")
