• ES6 新特性(笔记)


    1.定义变量
        let
            a).块作用域 , 不同于var的函数作用域
            b).不可以重复定义同一个变量名
     
            注: 
                {} + let 组合使用,
                可以替代以前的封闭空间 : (function(){})();
     
        const  
            a).常量赋值 :需要立即初始化 且 初始化后不可以修改。
            b).和let一样 , 不可重复声明同一变量。
     
     
    2.字符串 拼接
        let str = `my english ${x} ` ;
     
    3.解构赋值
        let [a,b,c] = [10,20,30];          // 和顺序有关
        let [a,[b,c],d] = [1,[2,3],4] ;
        let {a,b,c} = {b:12 , a:6 , c:4}; // 和顺序无关
     
        let {a = 1, b = 2} = {};             // 赋了默认值
     
    4.复制数组
        let arr1 = [1,2,3];
        let arr2 = Array.from(arr1);  //方式一
        let arr3 = [...arr1] ;              //方式二
        
        补:‘...’的其他小技巧
            function method_1(...args){
                arguements.push(99);// 报错,没有push方法
                args.push(99); //这样就是个数组 可以push
            }
     
     
    5. for-of 循环
        a).可以循环数组 ,不可以循环json
        b).是用于循环map的
            for( let [k,v] of xx_map){
                console.log(k,v);
            }
     
    6.Map 
        map.keys() ; 
        map.entries();
        map.values();
        map.get();
        map.delete();
     
    7.箭头函数 =>
        写法 :let show = () => {}
        注意 :
            箭头函数中的this指向window
            不能使用arguments 实例
     
    8.面向 对象语法
        选项卡例子 继承方式实现 自动切换 // todo
        
    9.函数给默认值 
        function move(a = 1 , b){}
     
    10.模块化
        导出模块
            const a = 12 ;
            export default a ;
        引用模块
            先引入bebel.js/traceur.js等编译器
            再引入bootstrap.js(和css中的bootstrap无关)
            <!-- 并且 type 必须为 module -->
            <script type = 'module' >
                import modA from './xxx.js' ;
            </script>
     
        多模块导出 及引入
            导出
                const a = 5 ;
                const b = 12 ;
            
                export default {a,b};
     
            引入并使用
                import xxx from './xx.js' ;
                console.log(xxx.a + xxx.b);
     
    11. Promise
        用来传递异步操作的数据(消息)
     
        pending(等待,处理中) --> Resolve (完成,fullFilled)
                                             --> Reject (拒绝,失败)
     
     
        var p1 = new Promise(function(resolve,reject){
            if(成功了){
                resolve('成功数据');
            }else{
                reject('失败原因');
            }
        });
     
        后续 : p1.then(成功func(resolve),失败func(reject));
     
        例如:
            p1.then(function(val){
                alert(`成功了${val}`);
                return `${val}恩恩` ;
            },function(val){
                alert(`失败了${val}`);
                return `${val}呜呜` ;    
            });
     
            如果p1走到了 if语句 , 那么结果就是 : 成功了成功数据
            反之,走到else , 那么结果就是 : 失败了失败原因
            也就是说 new Promise() 中的函数 只是用来 自定义成功失败逻辑的
            而真实的对 成功/失败的数据的 处理 是放在后续的then中操作的。
            注意then中的函数如果有返回值,这个值会返回到下一个then的对应参数中。
     
        catch的用法:
             p1.then(function(val){
                alert(val);
                throw '强行抛出';
             }).catch(function(ex){
                alert(ex);
             });
     
        Promise.all()用法:
            var p2 = Promise.resolve(3);
            var p3 = Promise.reject();
     
            //all()中所有的promise对象都成功了,才会走成功函数
            // 由于p3是失败了的 Promise对象, 所以,会走失败的分支;和true/false无关
            Promise.all([false,p2,p3]).then(function(){
                alert('成功了');
            },function(val){
                alert('失败了');
            });
     
     
        Promise.race() --挑最快的用
            
            var p4 = new Promise(function(){
                setTimeout(resolve,500,'one');
            });
     
            var p5 = new Promise(function(){
                setTimeout(resolve,100,'two');
            });
     
            Promise.race([p4,p5]).then(function(val){
                console.log(val); //display 'two'
            });
     
        Promise.resolve(value);
        Promise.resolve(promise);
        Promise.resolve(array);
     
     
     
    12.Generator --生成器
        是一个函数 , function紧接着加个*
        可以遍历,所以就是个迭代器
        语法:
            function* show(){
                yield 'Hello';
                yield 'World';
                yield 'ES6';
            }
     
            var res = show();
            console.log(res.next());//{value:Hello , done:false}
            console.log(res.next());
            console.log(res.next());
            注意:yield本身没有返回值
            next()可以带参数,给上一个yield了
     
        for-of可以循环generator函数:
            function* fn(){
                yield 1 ; yield 2 ;yield 3 ;
                return 6;
            }
     
            for(var r of fn()){
                r.next();
            }
     
        generator在json对象中写法:
            var json = {
                * show(){
                    yield 'xx' ;
                }
            };
     
  • 相关阅读:
    前端下拉复选框的使用(这里只有讲述新增时获取值以及查看详情时对他进行赋值)
    layui实现图片上传
    WPF中DataGrid前面加上序号
    Excel导出时出现字符串转换为日期
    redis基础
    Redis安装与集群搭建
    ngnix在Linux下的安装与使用
    redis面试题
    redis持久化的几种方式
    理解乐观锁与悲观锁
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/11131831.html
Copyright © 2020-2023  润新知