ES6简单用法

概述

ES6以前 var关键字来声明变量，无论声明在何处都存在变量提升这个事情，会提前创建变量；

let声明的变量是块级作用域,不能重复声明,不存在变量提升

const声明一个只读的常量,一旦声明,常量的值不能改变

模板字符串

ES6引入了反引号``，使用 ${} 的方式
如果想用输入反引号用(反斜杠)转义
例子:

a b 是提前定义好的变量

`哈哈${a}嘻嘻${b}`

箭头函数

var f = (a) => {return a;}
// function(){} === ()=>{}            (等价)

　　function 体内的this对象,就是定义时所在的对象
坑1:箭头函数体内的this对象,指向了定义是所在的对象(window),

　　function函数中arguments是函数传的参数
坑2:箭头函数中,arguments不能使用

对象的单体模式

// 在对象里直接写
    fav(){
        console.log(this)
    }
    
// 等价于    
    fav:function(){
        console.log(this)
    }

面向对象

ES6

class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }        // 这里不写逗号
    
    showName(){}
        console.log(this.name)
}

var d = new Animal('张三',19);
d.showName();

模块化

导出
export default xxx

导入
import xxx from xx 导入

名字导出

// main.js
// 导出多个声明
export var name = "ggg"
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"

例子

// 导出多个声明
export var name = 'ggg';
export var age = 18;

export function aa(value) {
    console.log(value)
}

// 批量导出
var name1 = "sun";
var age1 = 18;

export {name, age};


// 默认导出
// 先建一个类
class Vue{
    say(){
        console.log("hello world")
    }
}

app = new Vue();

export default app;

main.js

// 整个模块导入，把模块当成一个对象
import * as obj from "./main";

console.log(obj.name);
console.log(obj.age);

// 单独导入
import {name} from "./main";
console.log(name);

// 默认导入
import app from "./main";

app.say();

run.js