es6笔记

首先需设定"use strict"

一,变量

1, let

  let:  let a = 12;

与var的区别:

a,区别1:

let是块级作用域。若在代码块中定义,其他地方则不能使用。

var是函数作用域。若在函数中定义,其他地方则不能使用。

*什么叫做代码块:

代码块:被{}包起来的代码,比如if for while

b,区别2:

let不允许重复声明 let a=12; let a=5;出现在同一代码快中会报错


应用:

  • es5中 i的问题:

        for(var i=0;i<aBtn.length;i++){
             aBtn[i].onclick=function(){     
                    alert(i)
             }
        }
        >> 3  
        >> 3  
        >> 3
    
       解决办法1:
        for(var i=0;i<aBtn.length;i++){
            (function(i){
                 aBtn[i].onclick=function(){
                    alert(i)
                  }
             })(i)
        }       
    
        >> 0  
        >> 1  
        >> 2
    
       解决办法2:
        for(let i=0;i<aBtn.length;i++){
             aBtn[i].onclick=function(){
                    alert(i)
             }
        }       
    
        >> 0  
        >> 1  
        >> 2
    
      注意:1,在es6中{}相当于匿名函数自调用。 2,不能重复定义 
    

2,const:用来定义常量,一旦复制,再不能修改。

   const a = 12; a = 5;   >> 报错

   注意:1,const声明时一次性赋值。(必须给初始值)2,不能重复定义 

   用途:为了防止意外修改变量。比如:组件名,库名

二,字符串模版:

>> 以前: var str="";

   现在:var str=``;

>> 字符串连接
     以前:'a' +变量名+'c';

     现在:`a${变量名}c`;

三,解构复制:

  1,var [a,b,c]=[1,2,3];//模式匹配  左边跟右边必须一样。

  2,var {a,b,c}={1,2,3};  //无所谓顺序。     

四,复制数组

1,循环

2,Array.form(arr)

3, var arr2=[...arr]

...的用法:

  a>: var arr2=[...arr]

  b>: function show(...agus){console.log(typeof agus)//array };show(1,2,3,5)

五,循环

1,for of:循环,主要用来循环map对象。

   >>可以循环数组,但不能循环json
    
   map对象: 和json相似,也是一种key-value(键值对)形式。

       var map=new Map();

   设置:
       map.set(name,value);

   获取:
       map.get(name);

   删除:
       map.delate("name");                  

>>用法:

    1,for(var name of map.entries()){console.log(name)//key,value};循环全部.包括 key、value.

                                                或者

       for(var [key,value] of map){console.log(key)//key   console.log(value)//value};

    2,for(var name of map.keys()){}   //只循环key

    3,for(var name of map.values()){} //只循环value
        
  循环数组:

    var arr=['三国演义','水浒传','红楼梦','西游记'];

    1,for(var name of arr){console.log(name)//三国演义 水浒传 红楼梦 西游记}  默认循环value

    2,for(var name of arr.keys()){}  循环key   
         
    3,for(var name of arr.entries()){} 循环key,value

六,箭头函数

 var show = ()=>{ }

 >>注意: 
      
      1,函数中this的指向变为window;

      2,arguments,不能用了

七,对象

1,单体模式 //用来解决this指向

   var name="abb"

   var age="19"

   var json={

     name,
    
     age,

     showName(){
     
        alert(this.name)//abb

     },

     showAge(){
        
        alert(this.age)//19

     }

   }

2,面向对象

 >> 以前的写法:

    function person(name,age){ //既是构造函数也是类

        this.name=name;

        this.age=age;         

    }
    
    person.prototype.showName=function(){

        alert(this.name) 

    }
    
    person.prototype.showAge=function(){

        alert(this.age)

    }

    var p1=new person('aaa',12);

    p1.showName();   // aaa

    p1.shoeAge();    // 12


 >> es6中的写法:(类和构造函数区分开了)

   
    class person{  //类

        constructor(name,age){ //构造函数

            this.name=name;

            this.age=age                 

        }

        showAge(){

            alert(this.age)

        }

        showName(){

            alert(this.name)

        }

    }

    var p1=new person('abc',102);

        p1.showName();//abc              
        
        p1.showAge(); //102

3,面向对象继承:

   以前的继承:

    function person(name,age){ //既是构造函数也是类

        this.name=name;

        this.age=age;         

    }
    
    person.prototype.showName=function(){

        alert(this.name) 

    }
    
    person.prototype.showAge=function(){

        alert(this.age)

    }

   function Worker(name,age){
       
        person.apply(this,arguments)

   }
    
   Worker.prototype=new person();

    var p1=new person('aaa',12);

    var w1=new Worker('ddd',123);

    w1.showName();   // ddd

    w1.shoeAge();    // 123

    p1.showName();   // aaa

    p1.shoeAge();    // 12


   es6的继承:


   >> class worker extends  person{//此时worker身上就具有了person身上的属性和方法。

           constructor(name,age){

              super(name,age);   //调用父级的构造

           }      

      };   

      
      用法:

      class worker extends person{

             constructor(name,age,jop){

                 super(name,age);    //若没有这句  则会覆盖掉父级的构造函数  报错                        
                  
                 this.jop=jop

             } 
             
             showJop(){

                alert(this.jop)

             } 

      }


      var p2=new worker('bbb',5,'扫地的');

          p2.showName(); //bbb

          p2.showAge();  //5

          p2.showJop();  //扫地的 

八,面向对象的应用:

    class Queue{

       constructor(content=[]){

           this._queue=[...content]              

       }

       shift(){

           this._queue.shift();

            return this._queue                

       }

       push(n){

           this._queue.push(n) 

           return this._queue

       }

    }
   
    var q=new Queue([1,2,3,4]);

    q.shift();

    q.push(n); 

    console.log(q._queue)

九,模块化:----必须引入traceur.js和bootstrap.js,type属性必须为module。

1,如何定义(导出)模块?

2,如何使用?

 定义: >>a.js

      const a=12; 

      export default a;  

 使用:

      import 'modA' from './a.js';

十,promise:就是一个对象,用来传递异步操作的数据(消息)

     pending(等待、处理中)、Resolve(成功)、Rejected(失败)
      
     用法:
         
       var p1=new Promise(function (resolve,rejected) {

           resolve(1);

           rejected(2);

       });
   
       p1.then(function (value) {

           console.log('成功了')

       },function () {

           console.log('失败了')

       })

       1,then 

       2,catch:捕获错误的 

       3,all:用于将多个promise对象,组合,包装成一个全新的promise实例。返回的promise对象

          var p1=new Promise(fun);   

          var p2=new Promise(fun);   

          var p3=new Promise(fun);               

          用法:    Promise.all([p1,p2,p3,...]).then(sucFun,failFun); 

          注意: 都正确走成功,一个失败就会走失败。

        4,race: 返回的也是promise对象,最先能执行的promise结果。 

          用法:

           var p1=new Promise(function(resolve,reject){

                 setTimeout(resolve(),500,'one'); 

           }) 

           var p2=new Promise(function(resolve,reject){

                 setTimeout(resolve(),100,'two'); 

           }) 

           Promise.race([p1,p2]).then(function(value){
           
                   console.log(value)   //two

           })

---end.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容