ES6 常用语法

Posted ls13691357174

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 = "随意"
    // 报错
var let const

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();
上下文的this

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")
class extends super

 

 

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

vue2.0 代码功能片段

ES6常用语法

ES6 常用语法

ES6常用语法整理

ES6常用语法总结

ES6常用语法