什么是 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")
来源: http://www.bubuko.com/infodetail-2855906.html