es6 [记录]

 

将a数组 与b数组进行合并
　　a=[1,2,3]
　　b=[4,5,6]
　　c = a.concat(b);//c=[1,2,3,4,5,6]

 

this.listArr.forEach((el, i) => {
    el.is_dafault = (el.id === obj.id) ? 0 : 1;
})

 

 

ECMA ≈ js
ECMAScript = ECMA = ES

兼容性
    ES5 很少不兼容
    ES6（ES2015）：
        IE10+ 、 Google 、FireFox 、 移动端 、 NodeJs
        解决：编译 、转换

转换：
    1.在线转换
    2.提前编译（！提倡，在线转换费时间） 

    在线转换：
    babel == browser.js
    使用方式：引入browser.js+script标签（代码范围）定义type=“text/babel”
    编译需要时间

ES6
1. 变量
    let（变量，可以不断修改） / const（常量，不能修改） 不能重复声明
    块级作用域 { ... }
        div > input*3 click=function alert(i)
        解决1 for里面垫了一层作用域(function(i)){a.onclik=fn})(i);
        解决2 for(let i=0 ...)

2. 函数
    箭头函数
    function name(){}  ()=>{}    function去掉加=>
    1.如果只有一个参数 ()可以省 a=>{...}
    2.如果只有一个return {}可以省 a=>a*2;

    函数的参数
    1.参数扩展+数组展开（剩余参数）
        function(a,b,...args){  //args  可以随便取名字
            // a,b,...args,c  [X]
            alert(a);
            alert(b);
            alert(args);
        }
        show(12,15,8,9,20);
        +收集剩余参数
            *Rest Parameter必须是最后一个
        +展开一个数组
            let arr = [1,2,3];
            ...arr  相当于  1,2,3
            展开后的效果，跟直接把数组的内容写出来一样
            let arr = [...arr1,...arr2]
        不符合语法情况(以下赋值)
            let a;
            let arr = [1,2,3]
            a = ...arr; [X]   // a = 1,2,3;
            alert(a);
    2.默认参数
        如：animation 里面的时间
        function show(a,b=5,c=12){
            console.log(a,b,c)
        }
        show(99,19)    ---  99,19,12
    
3. 数组
   + map 映射  =>  一个对一个
           [12,58,86,45,91]   =>   [不及格，不及格，及格，不及格，及格]
           [12,58,86,45,91]   =>   [{...},{...},{...},{...},{...}]

           let arr=[12,5,8]
           arr.map(function(item){
               alert(item*2)
           })
           arr.map(item=>item*2)
   + reduce 汇总  =>  一堆出来一个
           算个总数 平均数 ...
           [1,2,3] => 6

           let arr =[12,69,180,8763]
           arr.reduce(function(tmp他是中间结果 临时结果用于下一次,item,index){
               return tmp+item
           })
           中间结果 return 0+12  ->  return 12+69 ->  return 81+180 ...

           平均数
           求和+最后一次单独处理if（index != arr.length-1）

   + filter 过滤器  留一部分删一部分
           let arr = [12,5,8,99,27,36,75] 能被3整除的留下
           let res = arr.filter(item=>item%3==0)

   + forEach 循环（迭代）
           arr.forEach(el=>{...})
           arr.forEach((el,index)=>{...})

4. 字符串
    1.多两个新方法
        startsWith
            str.startsWith('a') 字符串是否以a开头  
            https:// 
        endsWith
            str.endsWith('.com')
            163.com
    2.字符串模板
        反单引号 1边上 
        let a = 12;
        `uuu${a}`  ==> uuu12   把变量放到字符串
        拼接html

        普通字符串不能折行，模板字符串能折行
        let str='<div>\
            <h3>'+h3+'</h3>\
            <p>'+p+'</p>\
            </div>';

5. 面向对象
    + 面向对象
    function User(name,pass){
        this.name=name;
        this.pass=pass;
    }
    User.prototype.showName=function(){alert(this.name);}
    User.prototype.showPass=function(){alert(this.pass);}
    var  u1 = new User('n1','123456');
    alert(u1.showName);
    alert(u1.showPass);
    类和构造函数一样+散开

    新版面向对象
    class User{
        constructor(name,pass){
            this.name=name;
            this.pass=pass;
        }
        showName(){alert(this.name);}
        showPass(){alert(this.pass);}
    }
    1.class关键字、构造器和类分开
    2.class里面直接加方法

    + 继承：
    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);}

    新版本继承
    class VipUser extends User{  继承自User
        constructor(name,pass,level){
            super(name,pass);               ------  super 超类=父类   call
            this.level = level;
        }
        showLevel(){alert(this.level);}
    }

    + 面向对象实例 （应用--react）
        react：组件化-class + JSX（JSX==babel==browser.js  react依赖于JSX JSX是js扩展版）
        react.js + react-dom.js + browser.js
        script type='text/babel'
        class 新组件Name extends React.Component{
            constructor(...args){
                super(...args);
            }
            render(){
                return <span>{this.props.str}</span>;
                也可以return 组件 <新组件Name str='我想传参'></新组件Name>
            }
        }
        window.onload=function(){
            ReactDom.render(
                <新组件Name str='我想传参'></新组件Name>,
                ......
            )
        }


6. Promise  -- 承诺
    异步：操作和操作之间没有关系 可以同时进行多个操作
        缺：代码更复杂
            ajax('/banners',function(){
                继续往下ajax 请求别的 一层层往下走
            },function(){
                alert('get Error')
            })
    同步：同时只能做一件事
        代码简单
            顺序往下写ajx代码即可

    Promise -- 清除异步操作
        * 用同步一样的方法 来书写异步代码
        需要Promise 需要new
        let p = new Promise(function(resolve解决,reject拒绝){
            // 异步代码
            // resolve -- 成功了
            // reject -- 失败了
            $.ajax({
                url:'arr.txt',
                dataType:'json',
                sucess(arr){
                    // 成功的时候调用 resolve
                    resolve(arr);
                },
                error(err){
                    // 失败的时候调用 reject
                    reject(err);
                }
            })
        })
        应用
        p.then(function(arr){
            // 成功调用的方法
        },function(err){
            // 失败调用方法
        })

        // 应用到点
        let p1 = ......  arr
        let p2 = ......  json
        Promise.all([p1,p2]).then(function(arr){
            alert('全都成功')
            cosnole.log  --- arr = [ arr , json ]
            分解
            let [res1,res2] = arr

        },function(){
            alert('至少有一个失败了')
        })
        写两个Promise 麻烦 =>  封装
        function createPromise(url){
            return new Promise(function(resolve,reject){
                $.ajax({
                    url,
                    dataType:'json',
                    sucess(arr){resolve(arr);},
                    error(err){reject(err);}
                })
            })
        }
        Promise.all([createPromise(url1),createPromise(url2)]).then(........)

        高版本jq 自带 Promise  不用自己封装
        Promise.all([
            $.ajax({url:'url1',dataType:'json'}),
            $.ajax({url:'url2',dataType:'json'})
        ]).then(res=>{
            let [arr,json] = res;
        },err=>{})

        *其他用法   
        Promise.race  竞速   用的少
        all 一个个都要成功 一个不能缺一个不能少
        race 需求 谁先来执行谁
        Promise.race([
            $.ajax({url:'url1',dataType:'json'}),
            $.ajax({url:'url2',dataType:'json'})
        ])

7. generator - 生成器
    generat - 生成

    普通函数 -- 一条路走到底
    + generator函数 -- 中间能暂停
    function *show(){   *爱贴着谁贴着谁 但是不能一起贴
        alert('a');
        和*配    yield;  暂时放弃执行
        alert('b');
    }
    不能直接show();  创建出了generator对象 踹一脚走一步
        - let genObj=show();
        - genObj.next();     a
        - genObj.next();     b
    为什么要停？
        function 函数(){
            代码...
            ajax(xxx,function(){
                代码...
            });
        }
        相当于  不用回调
        function *函数(){
            代码...

            yield ajax(xxx);// 这里配置

            代码...
        }

    + yield 既可以传参 又可以返回
        ++ 传参
        function *show(){
            alert('a');
            yield;         let a = yield;
            alert('b');
                           alert(a)  a=5
        }
        let genObj=show();
        genObj.next(12);
        genObj.next(5);
        next里面可以传参 传参的参数会到yield里面
        yield 里面接参数 let a = yield;
        a=5 解释：
            第一个next 执行开始到yeild   let a = 不包括
            第二个next 从 let a = 开始   5从这时候进去
            第一个next 传参是废的
        
        ++ 返回    中间结果 （每一步都有一个中间结果）  +  最后结果（return）
            yield后面可以跟东西
            function *show(){
                alert('a');
                yield 12;
                alert('b');
            }
            let gen=show();
            let res1 = gen.next();
            console.log(res1);
                 ---  {value:12,done:false}
                      done  还未完成
            let res2 = gen.next();
            console.log(res2)
                 ---  {value:undefined,done:true}
                      执行最后一个了undefined  = return的东西
            function *炒菜(菜市场买回来的菜){
                洗菜 --> 洗好的菜

                let 干净的菜 = yield 洗好的菜;

                干净的菜 --> 切 --> 丝

                let 切好的菜 = yield 丝;

                切好的菜  --> 炒   -->  熟的菜

                return 熟的菜;                
            }
            开始到  yield 右边  ---  一个程序
        
    + generator 实例 Runner
        需要组件支持 cnpm i yield-runner-blue   主要要js index.js
        runner.js + runner.js
        runner(function *(){
            let data1 = yield $.ajax({url:'url1',dataType:'json'});
            let data2 = yield $.ajax({url:'url2',dataType:'json'});
            let data3 = yield $.ajax({url:'url3',dataType:'json'});
            console.log(data1,data2,data3)
        })
        可以像写同步一样写异步
        $.ajax({url:'url1',dataType:'json'});-Promise对象   yield出去 给runner

        异步操作：
        1.回调
            $.ajax(.....sucess($.ajax(.....sucess(......))))
        2.Promise
            Promise.all([$.ajax,$.ajax]).then(......)
        3.generator
            runner(function *(){
                let d1 = yield $.ajax(....); * n
            })

        ++ 带逻辑处理  用户-vip------
            Promise.all([$.ajax]).then(res=>{
                if(xxx == 'vip'){
                    Promise.all......
                }else{
                    ........
                }
            },......)
            比普通回调还麻烦  

            generator （generator函数不能写成箭头函数）
            runner(function *(){
                let u = yield $.ajax(....);
                if(u=='vip'){
                    let u2 =  yield $.ajax(....);
                }else{
                    let u2 =  yield $.ajax(....);
                }
            })

            Promise - 适合 一次读一堆 没有什么逻辑
            generator - 逻辑性比较强   （他的本质就是Promise）

    + generator 实例 KOA(NodeJs框架)
        KOA里面如何用generator
        cnpm i koa
        cnpm i koa-mygsql
        const koa = require(koa)
        const koa = require(koa-mygsql)
        let db = mygsql.createPool...........
        let server = new koa();
        server.user(function *(){
            这里就是generator
            let data = yield db.query(....................)
            db 就是个异步
            this.body = data;
        })
        server.listen(8080)



8. 模块化

变量：
    var 可以重复声明   作用域为函数级
    无法限制修改  常量π PI
    没有块级作用域

解构赋值：
    1.左右两边的解构必须一样
    2.右边 必须是个东西
    3.声明和赋值不能分开（必须在一句话中完成）

    + 
        let [a,b,c] = [1,2,3]
        相当于  let a = 1; .......
        let {a,b,c} = {a:1,b:2,c:3}

    +
        注意 
            [...] = {...}   [X]
            {a,b} = {12,5}  [X]
            let [a,b]; [a,b]=[2,5]   [X]


JSON
    1.json对象
        let json={a:12,b:5};
        let str='http://apiUrl........?data='+encodeURLComponent(JSON.stringify(json))
        JSON.stringify

        let str="{a:12,b:5}"
        let json = JSON.parse(str);
        标准写法：
            1.只能用双引号 不能用单引号
            2.所有名字都必须用双引号包起来
        {"a":12,"b":56}

    2.简写
        名字一样
            let a = 5;
            let json = {a:a,b:15}    ==> json = {a,b:15}
            名字和值一样 key = value
        方法
            let json = {
                a: 12,
                // show:function(){
                //     alert(this.a);
                // }
                show(){......}
            }
            :function 一块删

 

ES7预览
Google 59+

1.数组
    includes 数组里面是否包含某个东西
        arr.includes(99);
    keys/values/entries
        for...of
            循环迭代器
            for(let i in arr)  i为值=value
            for(let i in json)  i 报错
                json对象是一个可迭代的对象，不是一个迭代器
                for...of不能用于json
        for...in
            循环json
            for(let i in arr)   i为下标=key
            for(let i in json)  i=key


        for...of
            keys=>所有的key拿出来 0,1,2,3
            values=>所有的value拿出来  12,5,99
            entries=>所有的key-value对拿出来  {key:0,value:12},{key:1,value:5}......
                * entry实体
            for(let key of arr.keys()){......}
            for(let val of arr.values()){......}    ！！！ES7
            for(let entry of arr.entries()){......}
             = for(let [key,value] of arr.entries()){......}

2.幂
    求幂    之前：Math.pow(3,8)
        3**8

3.字符串padStart/padEnd
    console.log('abc'.padStart(10))  从起始位置补10个 
    end 往后补
    第二个参数console.log('abc'.padStart(10,'0'))  不补空格 补0 时钟09

4.语法容忍度
    + 数组容忍度
        [1,2,3]   => [1,2,3,]
        ie----  [1,2,3,] 直接不认
    + 参数容忍度
        function aa(1,2,3,) {}

5.async await ！！！要求浏览器版本59+++
    async await => generator yield 的取代
    generator 需要runner
    async function show(){alert('a');await;alert('b');}
    async function readData(){
        let d1 = await $.ajax(......)
        ............
    }
    1.async可以写成箭头函数  let read = async ()=>{......}
    2.不依赖于外部的runner 统一+性能高