ES6 常用语法

Posted 2021-01-05 glh-ty

ECMAScript 6 简称ES6, 在2015年6月正式发布~  ECMAScript 是javascript语言的国际标准。

一， 变量声明 const  let  var

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

作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部；

let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部；

    // var 变量提升
    console.log(age);
    var age = 18;
    console.log(age);

    // 声明变量
    // const  let
    console.log(age);  // age is not defined
    let age = 18;
    console.log(age);

    const a = 1;
    const a = 2;  //  Identifier ‘a‘ has already been declared

    let a = 1;
    let a = 2;  // Identifier ‘a‘ has already been declared

    function test() {
        console.log(age); // age is not defined
        let  age = 18;
        console.log(age);
    }
    test()

var let const

二，模板字符串

ES6引入了反引号``，使用 ${} 的方式

// 模板字符串, 可进行简单的运算
    let name = "glh";
    let age = 18;
    let hobby = ["妹子1", "妹子2"];

    let html = `
            <ul>
                <li>${name}</li>
                <li>${age + 2}</li>
                <li>${hobby}</li>
            </ul>`;

    let ele1 = document.getElementById("app");
    let ele = document.getElementsByClassName("app")[0];
    console.log(ele);
    console.log(ele1);
    ele.innerHTML = html;
    ele.innerText = ‘sdfsfss‘

三，箭头函数

箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。

最直观的三个特点

　　-- 不需要function关键字来创建函数

　　-- 省略return关键字

　　-- 继承当前上下文的this关键字

 // 箭头函数和this
    function f(x) {
        return x+1
    }

    let aa = x => x+1;
    console.log(aa(2));

    // 关于this
    function f1() {
        console.log(this)
    }

    f1(); //this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

    let obj1 = {
        f1:f1
    };
    obj1.f1();  //this: {f1: ƒ}

    let obj2 = {
        obj: obj1
    };
    obj2.obj.f1();  // this: {f1: ƒ}
     // this取决去函数的最近调用着

箭头函数和this

四，数据解构

数据的解构类似于我们python里面的**解包

  // 数据的解构
    let arry = [1, 2, 3];
    let obj = {name: ‘glh‘, age: 18};
    let objArry = [
        {name: ‘glh‘, age: 18},
        {name1: ‘hudapao‘, age1: 28}
        ];
    let [a, b, c] = arry;
    console.log(a);
    console.log(b);
    console.log(c);
    let {name, age} = obj;  // 解构取对象的键对应的值
    console.log(name);
    console.log(age);
    let [{name, age}, {name1, age1}] = objArry;
    console.log(name);
    console.log(name1);
    console.log(age);
    console.log(age1);

数据的解构

五，类

// 类 类的继承
    class Foo{
        // 类的构造方法
        constructor(){
            this.name = "glh";
            this.gender = "   man   "
        }
        says(say){
            console.log(this.name + this.gender + "说" + say)
        }
    }
    foo = new Foo();
    foo.says(6666)

类的继承

  // 类的继承
    class Son extends Foo{
        constructor(name, gender){
            super();
            this.name = name;
            this.gender = gender;
        }
    }
    son = new Son("儿子", "man man");
    son.says(7777)

六， import 和 export

import 导入模块、export导出模块

// 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"

默认导出