react 入门基础（一）之ES6

####ES6

let     const     var     三者的区别

### 1.    let  const    不能重复声明变量

let      a =   12  ;        let      a =   10 ;         console.log( a )   报错

var     a  =  10  ;        var     a  =  6  ;          console.log( a )--->a=6;  后者把前者覆盖了

const    a  =  10  ;      const     a  =  4  ;     console.log ( a )  报错

#### 2.let  const   块级作用域

if( true ) {  let  a  =  10 ;   console.log( a ) --->10成立}    console.log( a )--->不成立  报错

if( true )  { const   a  =  10 ;  console.log ( a ) --->10 成立}   console.log( a ) --->不成立  报错

if (true ) { var a  =  8 ;  console.log( a ) --->8} console.log( a )--->8  成立

### 3.let   const   不支持变量提升

  console.log (  a )      let   a  = 10 ;  a--->报错

console.log ( b )   const   b = 12 ;  b--->报错

console.log  ( c )    var   c =  13  ; c---->undefined

### 4. const 不能先声明，后变量

let    a   ;      a  =   10   ;        console.log (  a   )  ----->10 成立

const     b   ;      b   =   12   ;   console.log ( b ) ---->报错   只能边声明 ，边变量

var   c  ;    c  =  13  ;   console.log ( c ) --->13成立

###数组的解构 

如 ：1. 数组

var  arr=[ " css "," js "," jq "," node.js "," react "] ;

       var  [ a , b , c , d , e ] = arr ;

console.log( a ) ;//--->css ,        console.log( b ) ;//--->js --------》数组的解构是根据数组的顺序进行解构

 2. 多维数组

 var  arr = [ "  aa" ,  " bb "  ,  " cc "  ,[  "  dd  ''  ,   ''  ee  ''  , [  ''  ff  ''  ,  ''  gg  ''  ]   ]    ];

var   [ a  ,  b  ,  c  ,  [d  ,  e  ,  [  f  ,  g  ]  ]   ]  =  arr  ;

console.log( a ) ; //--->aa      console.log( d  ) ; //--->dd  ;     console.log( f ) ; //---->ff

###对象的解构

var   obj = { id : 123 , tt : " 对象的解构  "  ,  data : "  是根据属性名来解构的  "  }   ；

var   { id  ,  tt  , data  }  =  obj ;

console.log( id ) ; //---->123  依次类推

###模板自符串

var   str  =  ` hello  world  `  ;     console.log ( str )  ;  //--->反引号

var   c = " 1904A "  ,  k  = " react " ;   var   con =  "hello 欢迎来到 "+ c +" 班  ， 我们正在学  " + k ;   console.log ( con ) ;  //--->hello 欢迎来到1904A班 ， 我们正在学 react ;

 var  con1 =` hello 欢迎来到  ${ c } 班 ， 我们正在学 ${ k }  `;  console.log ( con1 ) ; //---->跟上面输出的结果是一样的的；

用反引号时  `   `  ， es6添加的写法   ${ 内容 } ； 

### 数组新增的方法

### 1. find( ) ---->查找符合条件的方法，找到满足条件的第一条后，停止查找 ，后面的条件不再去查找

var  obj = [ {  id :  1 , title : " 张三 " , age : 19 }  ,  {  id :  2 , title : " 李四 " , age : 25 }  ,  {  id :  3 , title : " 王麻子 " , age : 26 }  ]  ;

var  arr = obj . find ( function ( value , index , array )  {  return  value . age >25   }  )  ; -------》value  ：是当前的元素的每一项      index : 是当前每一项元素的索引值，也就是下标      array  :  是当前数组的本身   他们也可以简写 v  ,   i    ,   a   

console.log ( arr ) ; //--->输出结果{ id : 3 , title : " 王麻子 " , age : 26 }

### 2. findIndex () --->跟find() 方法差不多的效果，只不过他输出的结果是当前元素的下标

引用find() 方法中的例子 var obj  ;

 var  arr1 = obj . findIndex ( function ( v  ,  i   ,   a  )   {  return   age  >25   }  )   ;  

console.log ( arr1 ) ;  //---->输出的结果是 2  

### 3. includes() --->表示当前数组中是否含有该元素， 有的话返回true ， 否的话 返回 false ；

var   arr2 = [ "aa " , " bb " , " cc " , " dd " ] ; 

var    acc = arr2 . includes ( " aa " ) ;  

console.logg( acc ) ; //---> 输入结果，有的话输出true， 没有的话输出 false  ；   

### 4. forEach( ) 数组遍历

引用find（）方法中的例子 var obj  ;

var  arr3 = obj . forEach ( function ( v , i , a ) { console.log( v )  } ) ; //--->输出每一项的元素  

### 5. filter ( ) 过滤数组 ， 返回值的是满足条件的新的数组 

引用find（）方法中的例子  

var arr4 = obj . filter ( function ( v , i , a ) { return  v . age > 20 }  ) ; 

 console.log ( arr4 ) ; // --->输出结果是 age为大于20的25,26 一个新的数组 ；

### 6. map( )  把原数组的数据修改后，返回一个新的数组

引用find ( ) 方法中的例子 

var  arr5 = obj . map (  function (  v ,  i  ,  a  ) { var p = v . age + 10 ;  v . age = p ;  return  v  ; }   ) ;

console.log( arr5 ) ; //--->输出的结果为obj中的所有的age都加了个10 ；

### 7. every ( ) 必须满足所有的条件，才能执行，返回true ，  要是有一个条件不满足，就返回一个false  

引用find（）方法中的例子

var   arr6 = obj .every (  function(  v  ,   i   ,  a  ) {  return   v . age  > 20  }  )   ;

console.log ( arr6 ) ;  //----> 输出结果为false ，  第一个条件没有满足

### 8. some( ) 只要满足一个条件，就会返回一个true ， 只有所有的条件都不满足，才会返回一个false  

引用find( )方法中的例子

var arr7 = obj . some (  function ( v , i , a ){ return  v . age > 25  }  ) ;  

console.log( arr7 ) ;  //---->输出结果为true  

### 9. 浅复制 ---->原来的数据会随着修改的数据一起改变

var  arr8  =  [ " a " , " b " , " c " ] ;    var  a = [ . . .  arr8 ] ;  console.log ( a ) ; //---> a = [ " a " , " b " , "  c " ]     

let   aa = arr8 ;   aa[ 0 ] = 100 ;  console.log ( aa ) ;//---> aa = [ " 100 " , " b " , " c " ]  

### 10. 深度复制 ---->原来的数据不会随着修改后的数据一起改变

引用 浅复制 中的 arr8 

var  cc = JSON .parse ( JSON . stringity ( arr8 ) ) ;  

console.log ( cc ) ; //---->cc = [ " a " , " b " , " c " ]  

### 函数的扩展

### 1. 参数的默认值 

function  add ( a ) {  return  a } ;   var ad = add ( ) ; console.log( ad ) ; //--->  当不给函数里面传递实参的时候， 调用函数显示 undefined    

function  add ( a = 10 ) { return  a } ; var  ad = add ( a ) ; console.log ( ad ) ; //--->当不给函数里面传递实参的时候， 调用函数显示10           

function  add ( a = 10 ) { return  a } ; var ad = add ( 2 ) ; console.log ( ad ) ; //---> 2   当给函数传入实参的时候显示实参，如果没有传入实参，就显示形参的默认值  

### 2. 多余的参数

function add ( a , b ) {

      console.log ( a )  ;  //--->2

      console.log ( b )  ; //--->4 

      console.log ( c )  ;  //--->6

       } ;   

   add ( 2 , 4 , 6 , 8 ) ;//--->多出来了一个实参8

function add1 ( a , b , ...c ) {

           console.log( a ) ; //--->1 

           console.log( b ) ; //--->2 

           console.log ( c ) ;//--->[ 3 , 4 , 5 , 6 ] 以数组形式储存

    }

add1 ( 1 , 2 , 3 , 4 , 5 , 6 ) ; 

### 箭头函数 

 箭头函数的写法 

 ###当没有参数时   

  (  )  = > {   }   < ========= >function ( ) {   }    

###当有一个参数，并且有一个返回值时   

var  ff =  a  = > a  < ======== >  var  ff  =  function ( a ) { return  a  }     

###当有多个参数的时候   

var  ff  = ( a , b ) = > { return  a + b ; } ==> console.log ( ff ( 1 , 2 ) ) ; < ====== > var  ff  =  function ( a , b ) { return a + b } ;    

 ###特点 ：1. 在箭头函数中没有arguments 对象 

     2. 不可以在构造函数中使用 

     3. this的指向问题 ，箭头函数指向定义时的对象 ，而function函数指向调用使用它的对象 

如：1.    var obj = {

                          title : " 李四 " ,

                          data : " hello " , 

                         fn : function () {

                                console.log ( this .title ) ;//---->李四 

                                console.log ( this ) ; //--->指向当前的函数obj  

                               }

           }  

   obj . fn ( ) ; //---->李四  

     2.     var  obj1 = { title : " hello world " }  ;    

             var  obj2 = {

                     title : " 你好 " ,

                     fn : function ( a , b ) {   //-------->可以直接写成是箭头函数，就可以直接改变this的指向了     ( ) = > {  }   

                          console.log( this .title ); 

                           console.log ( a )  ; 

                           console.log ( b )  ; 

                       }

             }

            obj2 . fn ( ) ; //---->你好        this的指向是当前使用它的对象obj2 

            obj2 . fn . call ( obj1 , 1 , 2  ) ; //--->hello world  a : 1    b : 2        this的指向是obj1 

            obj2 .fn . apply ( obj1 , [ 1 , 2 ] ) ; //--->hello world   a : 1    b : 2       this的指向是obj1 

            obj2 . fn = obj2 . fn .bind ( obj1 ) ; 

            obj2 . fn ( ) ;  //--->hello world  this的指向是obj1 

### 改变this的指向有 箭头函数 、call 、 apply、bind   

 call和apply的区别 ：

call 后面的参数随便写 ，apply 后面是数组 

###注：定时器里的函数this的指向是window   

###对象的扩展

### 1. 属性的简洁表示法  

var  id = 123 ,  title = " hello world " ;

var  obj = { id , title }  ;  

console.log ( obj ) ; //---->obj = { id : 123 , title : "hello world " }   

### 2. 方法名也可以简写  

  var  obj = { 

                      id : 123  , 

                      id1 : 456 ,  

                      title : " hello  world "  , 

                      [ " title " + 1 ] : "  这是多种写法 " ,  

                      code ( ) {        // ======= > code : function ( ) {   }  

                             console.log ( this .id ) ;

                           } 

           }   

    obj  . code (  )  ;  //----> 123 

     console.log ( obj [ " id " + 1 ] ) ; //---> 456 

     console .log ( obj . title1 ) ; //---->输出结果 这是多种写法 

     var t = " title1" ; //--->将obj.title1 赋值给了 t 

    console.log ( obj [ t ]  ) ; //---> 输出结果 这是多种写法  

###对象的新方法 Object . assign ( ) 用于将源对象的所有属性复制到目标对象中 

var a = Object . assign ( { } , { id : 1 , title : " one " } , { id : 2  , title : " two " , data : " hello " } )  ;

//--------------------第一个空对象是 ：目标对象   第二个和第三个是 ：源对象   

 //------------------ 源对象先进行合并 ， 相同的属性后者覆盖前者 ，不同的属性添加 ，最后在跟目标对象合并（复制）

console.log ( a ) ; // --->{ id : 2 , title : " two " , data : " hello " }  

### Es6新增的数据结构  map  set 

### set 对象允许你有储存任何类型的唯一值，无论是原始值或是对象引用  

如 ： var  arr = [ " aa " , " bb " , " cc " ] ;  

         var  myset = new  Set ( arr ) ;  //---->将数组转换为set形式的对象

         myset .add ( " dd " ) ;  

         var  str  = [ ... myset ] ;  //--->将对象形式的set在转换为数组

        console.log ( str ) ; //--->[ " aa " , " bb " , " cc " , " dd " ]     

 还有 delete ( ) 删除     clear( ) 清空    has ( ) 有true，否false      size 是他的长度

### map 对象跟set的方法都差不多  

get ( )     set ( )   clear ( )   delete ( )    size     has ( )    

var obj = { id : 1 , title : " hello " } //======>有键值对    id  , title  是键（key） ;     1  ， hello  是指（value）

### promise 对象

promise对象：是异步变成的一种解决方案  

特点：  1. 一旦改变 ， 不会再变 ；

             2. 不会受到外部因素影响 ；

缺点 ： 1. 一旦创建 ，立即执行 ， 不可以取消 ；

             2. 不给加回调函数 ， 内部执行结果 ，不会返回到外部 ；

             3. 如果执行回调函数 ， 那么promise 已经完成 ， 对上下文不太友好 ； 

promise的常用方法：1. then（ ）调用resolve方法时 ， 获取成功之后的数据 ； 

2. catch（ ）调用reject方法时 ， 获取势失败后的数据 ； 

                                    3. all（ ）调用几个promise回调成功之后的统一处理 ； 

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

推荐阅读更多精彩内容

  • 2018-06-11
    mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,689评论 0赞 3
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,050评论 1赞 10
  • js总结（！！！）
    简述JavaScript起源起源于美国的Netscape公司，原名为LiveScript，后改为JavaScrip...
    3ab670b99521阅读 2,985评论 0赞 0
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,071评论 0赞 3
  • pySpark 中文API (2)
    pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类： pyspark.sql...
    mpro阅读 9,439评论 0赞 13