ES6常用语法

Posted 2021-01-01 chenrun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6常用语法相关的知识，希望对你有一定的参考价值。

1, 声明变量const　　let　　var

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

作用域也只有全局作用域以及函数的作用域,所以变量提升再函数顶部或全局作用域顶部

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

<script>
    //全局变量的提升
    console.log(global);
    var global = "global";
    console.log(global);

    //函数内变量的提升
    function aa() {
        if(1) {
            var test = "test";
        }
        console.log(test)
    }
    aa();//打印test因为var变量提升
    function bb() {
        if(1) {
            let test = "test";
        }
        console.log(test)
    }
    bb();//报错,因为let在局部作用域中

    // 在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)
    //     }
    // }

</script>

变量提升

2,模板字符串

<body>
<div id="app"></div>
<script>
    //模板字符串进行标签字符串的拼接一行搞定
    let ele = `<div>
                    <h1>模板字符串</h1>
                    <p>动态添加</p>
                </div>`;
    let ele_div = document.getElementById("app");
    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关键字

x => x+1;
//等同于
function test(x) {
  return x+1      
}

箭头函数

<script>
    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()
</script>

上下文this

注意: 函数在哪里调用了才决定this到底引用的是谁~~~,最后一个调用函数的对象才是传到函数里的上下文对象this

4,imort和export

import导入模块, export导出模块

//main.js
//导出多个声明
export var name = "chenrun";
export var age    = "18";
export var 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
//text.js
//import app from "./main"
import my_app from "./main"

默认导出

5 数据结构

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

<script>
    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);
</script>

解构

6,class extends super

ES6引入关键字class来定义一个类,constructor是构造方法,this代表实例对象.

类之间荣国extends继承,继承父类的所有属性和方法.

super关键字,它代指父类的this对象,子类必须在constructor中调用super()方法,否则新建实例会报错,因为子类没有自己的this对象, 调用super()得到this,才能进行修改

<script>
    class Animal{
        constructor(){
            this.type = "animal"
        }
        says(say){
            console.log(this.type + "say" + say)
        }
    }
    
    let animal = new Animal();
    animal.say("hello");
    class Dog extends Animal{
        constructor(){
            super();
            this.type = "dog";
        }
    }
    let dog = new Dog();
    dog.says("hello")
</script>

class extends super

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