zoukankan      html  css  js  c++  java
  • Vue-es6基础语法

    什么是ES6

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

    我们本着二八原则,掌握好常用的,有用的~能让我们更快的上手~~~

    1  声明变量const  let  var

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

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

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

    变量提升:只是提升变量名,赋值还在原位置赋值
    var : 全局作用域
    let : 块级作用域,不能被重复定义
    const : 变量不可改,不能被重复定义

    2  模板字符串

    <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里面的**解包

    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)

    4  函数

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

    最直观的三个特点

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

      -- 省略return关键字

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

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

    5  this

    // 函数在哪里调用了 才决定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();

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

     7 Spread Operator 展开运算符

    1 组装对象或者数组

    2 想获取数组或者对象除了前几项或者除了某几项的其他项

  • 相关阅读:
    C# 中的委托和事件
    SQLserver2000与2005同时安装的问题
    又到毕业时
    WCF服务发布和调用IIS服务
    进销存取项目总结
    URL
    undefined reference to `android::Mutex::lock()'
    关于 ffmpeg ‘UINT64_C’ was not declared in this scope 的错误
    Ti 的 OMX_Core
    linux Perforce 使用
  • 原文地址:https://www.cnblogs.com/benson321/p/9606791.html
Copyright © 2011-2022 走看看