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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,009评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,808评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,891评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,283评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,285评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,409评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,809评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,487评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,680评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,268评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,815评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2 341

推荐阅读更多精彩内容