ES6初步学习

 在ES5里只有全局作用域和函数作用域的区分，会造成一些定义的内容被覆盖掉  就像for循环定义事件这种情况会出现

        var name="output";
        var a=2;
        if(a>1){
            var name="input";
            console.log(name);
        }
        console.log(name);

ES6 let/const
let 起到了一个块级作用域的作用，再出了所在{}后在使用let所定义的东西就会失效

        let name="output";
        let a=2;
        if(a>1){
            let name="input";
            console.log(name);
        }
        console.log(name);
        利用let可以解决循环取值的问题
        for(let i=0;i<6;i++){
            document.getElementsByTagName("li")[i].onclick=function(){
                console.log(i);
            }
        }
        console.log(i);//报错——因为出了块级作用域，所以就不管用了。

const 用来定义的变量不可更改

            const i=5;
            i="s";
            console.log(i);
 const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug：

ES6中还引入了类的概念，这样面向对象的实现变得也更加容易了

class 创建一个类

class Animal{
        constructor(){//构造函数
        this.type="amimal"              
        }
        says(say){
            console.log(this.type+ "says" +say);
        }
    }
    let animal=new Animal();
    animal.says('hello');       
    class Cat extends Animal{//extends 关键字代表继承， 
        constructor(){
            super();//！子类创建必有！super指代父类的实例（this对象） ，因为子类没有自己的this对象，二是继承父类的this.——不调用则会显示 this is not defined 。
            this.type="cat";
        }
    }
    let cat=new Cat();
    cat.says("!miao!miao");

function函数运用
函数作为最常用的在这里被简化为箭头函数 =>

 var a=function(one){ return one++; }//ES5
 let b=one=>{one++};

 当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，
 实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

destructuring解构赋值
自动解析数组或对象中的值，比如若一个函数返回多个值，常规是返回一个

    /*__ES5__*/
    var send="pen";
    var receive="paper";    
    var thing={send:send,receive:receive};
    console.log(thing);//Object {send: "pen", receive: "paper"}
    /*____ES6____*/
    let senda="pen";
    let receivea="paper";
    let Thing={senda,receivea};
    console.log(Thing)//Object {send: "pen", receive: ""paper"}效果一样，但是却减少了代码量。

default 默认值

    传统指定默认参数的方式
    function sayHello(name){
        var name=name||'dude';
        console.log('hello'+name);
    }

字符串模板
字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}

    运用ES6的默认参数
    function saysHello2(name='dude'){
        console.log('hello $ {name}');
    }
    sayHello();//Hello dude 
    sayHello('wayou');//Hello wayou 
    sayHello2();//Hello dude 
    sayHello2('wayou');//Hello wayou

本文参考过其他文章，进行学习

ES6初步学习

ES6初步学习

猜你喜欢