初识ES6

前一段时间学习了ES6，不过现在ES7都有啦，哈哈哈。。。。今天进来总结一下学习成果。

ES6大概分为以下几个方面：1、变量  2、函数  3、、数组方法   4、字符串   5、面向对象  6、Promise  7、generator----生成器

8、 JSON  9、模块化

一：变量

JS中：用var声明变量          特点：可以重复声明、无法限制修改、没有块级作用域

ES6中：声明变量

             （1）let   特点：不能重复声明、变量---可以不断得修改、是块级作用域

             （2）const  特点：不能重复声明、常量---不可以修改、是块级作用域

二：函数

特点：a、方便     如果只有一个参数，（）可以省；如果只有一个return，{}可以省              b、修正this

 箭头函数：1、如果只有一个参数，（）可以省             2、如果只有一个return，{}可以省

 例：function   名字(){}  ------------------   ()=>{}         

函数的参数：

      1.参数的展开/扩展  和 数组的展开：

             作用 ：（1）收集剩余的参数      show(a,b,...args){}   注：...args必须是最后一个

                         （2）展开一个数组          展开后的效果，跟直接把数组的内容写在定义出一样       例：...args   =>  1,2,3

      2.默认参数

            结构赋值：1.左右两边结构必须一样     2.右边必须是合法的      3.声明和赋值不能分开（必须在一句语句里完成）

                        例如：let  [a,b,c]=[1,2,3];          let  {a,b,c}={a:12,b:5,c:6};

            粒度：let [json,arr,num1,str1]=[{a:12,b:5},[12,5,8],8,'cxzcv'];
                       let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:5},[12,5,8],8,'cxzcv'];

三：数组

map----------------------映射----------------------------一个对一个

    例：    [12,58,99,45,91]    -------------------------     [不及格,不及格,及格,不及格,及格]

        [45,57,135,28]       -------------------------      [
                                                                                 {name:'novermber0',level:0,role:0},
                                                                                 {name:'novermber1',level:1,role:1},
                                                                                 {name:'novermber2',level:2,role:2},
                                                                                 {name:'novermber3',level:3,role:3}
                                                                            ]

reduce------------------------汇总--------------------------一堆出来一个

     算个总数：[12,4444,5555]=>10011

 filter--------过滤器----------

    let result6=arr3.filter(json=>json.price>=10000);

  foreach-------循环(迭代)------

四.字符串

   (1).多了两个新方法
        startsWith
        endsWith
   (2).字符串模板
        字符串连接

        i.直接把东西塞到字符串里面   $(东西)
        ii.可以折行

五.面向对象

     1.class关键字、构造器和类分开了
     2.class里面直接加方法

     继承：super---超类
  /*老版本的面向对象   function User(name,pass){
                this.name=name;
                this.pass=pass;
            };
            User.prototype.showName=function(){
                alert(this.name);
            };
            User.prototype.showPass=function(){
                alert(this.pass);
            };
            function VipUser(name,pass,level){
                User.call(this,name,pass);
                this.level=level;
            }
            VipUser.prototype=new User();
            VipUser.prototype.constructor=VipUser;

            VipUser.prototype.showLevel=function(){
                alert(this.level);
            };*/

            /*ES6的面向对象*/
            class User{
                constructor(name,pass){
                    this.name=name;
                    this.pass=pass
                }
                showName(){
                    alert(this.name);
                }
                showPass(){
                    alert(this.pass);
                }
            }
            class VipUser extends User{
              constructor(name,pass,level){
                  super(name,pass);
                  this.level=level;
              }
              showLevel(){
                  alert(this.level);
              }
            }
    面向对象应用---React
      1.组件化---class
      2.JSX
      JSX==babel==browser.js

六.Promise

   

异步：操作之间没啥关系，同时进行多个操作、代码更复杂
  同步：同时只能做一件事、代码更简单
 异步： 
  ajax('/banners',function(banners_data){
       ajax('/hots',function(hots_data){
          ajax('/sliders',function(sliders_data){

          },function(){
            alert("读取失败");
          });
       },function(){
         alert("读取失败");
       });
   },function(){
     alert("读取失败");
  });
 
  有了Promise之后的异步：
    Promise.all([$.ajax(),$.ajax()]).then(function(){
       //成功了
    },function(){
       //失败了
    });
  
 Promise的其他用法：
  Promise.reace()

同步：
 let banners_data=ajax_async('/banners');
 let hots_data=ajax_async('/hots');
 let sliders_data=ajax_async('/sliders');

 Promise---清除异步操作
  *用同步一样的方法，来书写异步代码

七.generator---生成器
  (1)是一个函数  普通函数---一路到底   generator函数---中间能停(相当于踹一脚走一步)

  (2)yield传参
   <script>
            function *show(num1,num2){
                alert(num1,num2);
                alert('a');
                let a=yield;
                alert('b');

                alert(a);//返回5

            }
            let gen=show(99,88);
            gen.next();//第一个next没法给yield传参
            gen.next(5);
        </script>
  yield返回
  <script>
            function *show(){
                alert('a');

                 let a = yield 12;
                 alert(a);
                alert('b');
                return 44;
            }
            let gen=show();
            let res1=gen.next();
            console.log(res1);  //{value:12,done:false}
            let res2=gen.next(4);

            console.log(res2);//当没有return44的时候返回结果：{value:undefine,done:true}   当有return44的时候返回结果： {value:44,done:true}
        </script>

异步操作：
  1.回调
  2.Promise    适合：一次读一堆  
  3.generator  里面适合掺杂一些逻辑(逻辑性强)

八.JSON

     1.JSON对象  JSON.stringify()把json变成字符串   JSON.parse()把字符串解析成JSON形式
     2.简写  名字一样(key和value一样  留一个)   方法  :function一块删  show:function(){}   show(){}
     JSON的标准写法：1.只能用双引号  2.所有的名字必须用引号括起来