ES6常用语法

Posted 2021-01-21 kcwxx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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")

以上是关于ES6常用语法的主要内容，如果未能解决你的问题，请参考以下文章