函数的扩展、字符串的扩展方法和正则的扩展

函数的扩展和正则的扩展

<script>
    /*
    * ES6正则的扩展
    * RegExp构造函数
    * */
    //获取修饰符flags
    {
        //如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。
        let a=new RegExp(
                /abc/ig,'g'
        ).flags;
        console.log(a);//g
    }
    /*
    * 函数的扩展
    * */
    /*
    * 严格模式
    * 优点提高代码的安全性  优化代码  提高运行速度
    * */
    {
        "use strict";
        x=10;//报错 (x 未定义)
        console.log(x);
    }
    /*
    * 箭头函数
    * 箭头函数不适合用在对象里面的函数 dom对象事件
    * */
    {
        /*var f= v=>v;
        //等同于
        var f=function(v){
            return v;
        }*/
    }
    //函数带多个参数
    {
        let f=(v,m)=>m+v;
        /*let f=function(v,m){
         return v+m;
         }*/
        console.log(f(2, 3));
    }
    /*
     *不带返回值的es6函数
     */
    {
        let f = ()=>
        {
            console.log("1");
        }
        f();
    }
    /*
    * 箭头函数加解构赋值
    * */
    {
        let f=({a,b})=>{
        console.log(a, b);
    }
        f({a:'a',b:4});
    }
    /*
    * 箭头函数简化回调函数
    * */
    {
       /*[1,2,3].map(function(x){
            return x*x;
        });
        //箭头函数写法
        [1,2,3].map(x=>x*x);

        var result=value.sort(function(a,b){
            return a-b;
        })
        //箭头函数写法
        var result=value.sort((a,b) => a-b);*/
    }
    /*
    * 箭头函数的嵌套
    * */
    {
        function Data(){
            return{
                getInfo:function(){
                    return "你好";
                }
            }
        }
        let Date=()=>({getin:()=>"你好"});
    console.log(Date().getin());
    }
    /*
    * 箭头函数有几个使用注意点。
     （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
     （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
     （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
     （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
    * */
    {
        //异常问题
        $("button").click(function(){
            try{
                //抓住异常的语句
                // 出现异常 会抛出异常 catch
                let num=$("input").val();
                if(num<0){
                    throw new Error("输入的值不能小于0！");
                }
                else{
                    alert(Math.sqrt(num));
                }
            }
            catch(err){
                console.log(err);
            }
            finally{
                console.log("最后执行");
            }
        })
    }
</script>

字符串的扩展

<script>
    /*
    * ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
    *
    * */
    //数组的解析赋值
    {
        /*let a=1;
        let b=2;
        let c=3;*/
        let [a,b,c]=[1,2,3];
        console.log(a, b, c);
        //嵌套数组
        let [foo,[[bar],baz]]=[2,[[3],4]];
        console.log(foo, bar, baz);
        //如果解构不成功，变量的值就等于undefined。
        let [e,f,g]=[1,2]
        console.log(e, f, g);//1 2 undefined
        //如果等号的右边不是数组 那么将会报错。
        //报错
        /*let [foo]=1*/
        //对于set结构，也可以使用数组的解析赋值
        /*let [x,y,z]=new Set(['a','b','v']);
        console.log(x, y, z);*/
        //解构赋值允许指定默认值
        let [o,p='a']=['a'];
        console.log(o, p);//o=a p=a
        //ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
        let [x = 1] = [undefined];
         // x =1
        console.log(x);
        let [y = 1] = [null];
         // y =null
        console.log(y);
    }
    //对象的解析赋值
    {
        let {foo,bar}={foo:'aaa',bar:'bbb'}
        console.log(foo, bar);
    }
    /*
    * 对象的解构与数组有一个重要的不同。
    * 数组的元素是按次序排列的，变量的取值由它的位置决定；
    * 而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
    * */
    {
        let { baz } = { foo: 'aaa', bar: 'bbb' };
        console.log(baz); // undefined
        let obj = { first: 'hello', last: 'world' };
        let { first: f, last: l } = obj;
        console.log(f);// 'hello'
        console.log(l);// 'world'
        let obj1 = {
            p: [
                {x:'Hello'},
                { y: 'World' }
            ]
        };

        let { p, p:[x, { y }] } = obj1;
        console.log(x, y, p);//x  "Hello" y  "World" p["Hello", {y: "World"}]
    }
    //嵌套赋值
    {
        let obj = {};
        let arr = [];
        ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
        console.log(obj); // {prop:123}
        console.log(arr); // [true]
    }
    //对象解构也可以指定默认值
    {
        var {x=3}={};
        console.log(x);
        var {z = 3} = {z: undefined};
        console.log(z); // 3
        var {y = 3} = {y: null};
        console.log(y);// null
    }
    //字符串的解构赋值
    {
        const [a, b, c, d, e] = 'hello';
        console.log(a); // "h"
        console.log(b); // "e"
        console.log(c); // "l"
        console.log(d); // "l"
        console.log(e); // "o"
    }
    /*
    * 变量的解构赋值的用途
    * 交换变量的值
    * 从函数返回多个值
    * 函数参数的定义
    * 提取json数据
    * 函数参数的默认值
    * 遍历map结构
    * 输入模块的指定方法
    * */
    /*
    * 字符串遍历
    * */
    {
        let a="abcdefg";
        /*for(let i=0;i< a.length;i++){
            console.log(a.charAt(i));
        }
        for(let key in a){
            console.log(a.charAt(key));
        }*/
        //字符串的遍历
        /*for(let char of a){
            console.log(char);
        }*/
        //模板字符串 `${}`  `反引号
        let m=10;
        let str=`abc${m}`;
        console.log(str);
    }
    /*
    * 模板编译
    * */
    {
        let template="<ul><li>菜单一</li><li>菜单二</li></ul>";
        console.log(template);
        let data=['小猫','小狗','小猪']
        console.log(data);
        let m=`
        <ul>
                <% for(let i=0; i < data.length; i++) { %>
                <li><%= data[i] %></li>
                <% } %>
        </ul>
        `;
        console.log(m);
    }

</script>