函數的擴展、字符串的擴展方法和正則的擴展

函數的擴展和正則的擴展

<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>