JavaScript語言精粹代碼總結

 /*對象索引*/
    {
        let obj = { name : 'xiaoming', sex:'man'};
        Object.create = (o)=>{
          let F = function () {};
          F.prototype = o;
          return new F();
        };
        let anoter = Object.create(obj);
        console.log(typeof anoter.name);//可以索引到原型鏈  string
        console.log(obj.hasOwnProperty('name'),anoter.hasOwnProperty('name'));//只索引本身含有的值； true false

        /*for in枚舉*/
        for(item in anoter)
        {
            console.log(item);//會枚舉出原型帶有的屬性
        }
        /*刪除對象屬性*/
        anoter.name='xiobai';
        console.log(anoter.name);//xiaohong
        delete anoter.name;
        console.log(anoter.name);//刪除屬性後暴露原型帶有的屬性  xiaoming
    }

    /*減少全局污染*/
    {
        var MYAPP={};
        MYAPP.stooge={/*最小化全局污染是爲你的應用創建唯一一個全局變量*/}
    }
    /*js的四種調用模式（決定this的值）：1.方法調用2.函數調用3.構造器調用4.apply調用*/
    /*方法調用*/
    {
        let obj={
            a:1,
            b:function(c){
                return this.a+c;
            }
        };
        console.log(obj.b(3));
    }
    /*函數調用模式*/
    {
        let obj={value:1};
        obj.double=function () {
            let that = this;
            let helper = function () {
                that.value= that.value+that.value;   //函數調用this會被綁定到全局對象
            };
            helper();
        };
        obj.double();
        console.log(obj.value);
        /*補充：箭頭函數修正*/
        obj.double2=function () {
            let helper =  ()=> {
                this.value= this.value+this.value;   //this修正
            };
            helper();
        };
        obj.double2();
        console.log(obj.value);
    }
    /*構造器調用*/
    {
        let Quo = function (name) {
            this.name = name;
        };
        Quo.prototype.get_name= function () {
            return this.name;
        };
        let one = new Quo('小明');  //new調用時，背地創建一個連接該函數的prototype成員的新對象，this則綁定到該對象上
        console.log(one.get_name());
    }

    /*Apply調用模式(傳遞一個數組)*/
    {
        function add(a,b){
            return a+b;
        }
        let arr=[5,6];
        console.log(add.apply(null,arr));  //某種方法賦予到指定對象說，另外call用法相同但傳參爲列舉而非數組
    }

    /*異常處理*/
    {
        let sum = function (a,b) {
            if(typeof a !== 'number' || typeof b !== 'number'){
                throw {                                      //拋出異常對象
                    name:'TypeError',
                    message:'a or b much be number'
                }
            }
            return a+b;
        };
        try{
            sum('abc',7)
        }catch (e) {
            console.log(e);
        }
    }
    /*遞歸 個人舉例：快速排序法*/
    {
        let sort=(arr,left = 0,right = arr.length-1)=>{
            /*關鍵*/
            if(left >= right){
                return arr
            }
            //去最後一個數爲基準數
            let val = arr[right];
            //遍歷判斷
            let i=left;
            let j=right;
            while(i<j){
                // 從前往後，比基數大則調換位置
                while(arr[i]<val){
                    i++
                }
                arr[j] = arr[i];
                //從後往前，比基數小則調換位置
                while(arr[j]>val){
                    j--
                }
                arr[i] =  arr[j];
            }
            //此時 i===j
            arr[i] = val;
            sort(arr,0,i-1);
            sort(arr,i+1,right);
            return arr;
        };
        console.log(sort([0,56,98,12,65,31]));
    }
    /*作用域*/
    //書中JavaScript不支持塊級作用域
    //補充：ES6中最新的變量什麼 let和const使得塊級作用域得到修正，在{}內部仍然可以作爲塊級作用域

    /*閉包*/
    {
        var fade = function (node) {
            var level = 1;
            var step = function () {
                var hex = level.toString(16);
                node.style.backgroundColor = '#FFFF'+hex+hex;  //使用外部變量node
                if(level<15)
                {
                    level += 1;
                    setTimeout(step,100);      //再次執行step，step內部函數的外部變量level爲此時的level值，所以level可以逐漸遞增
                }
            };
            setTimeout(step,100);
        };

        fade(document.body); //調用一次後fade函數已經返回，但由於內部函數的需要，外部變量仍然會繼續保留
    }
    {
        function func() {
            let result = [];
            let result2 = [];
            let result3 = [];
            for (var i = 0; i < 10; i++) {
                result[i] = function () {
                    return i;
                };
                result2[i] = function(num){
                    return function () {
                        return num;
                    }
                }(i);
            }
            for(let j = 0;j<10;j++){
                result3[j] = function () {
                    return j;
                };
            }
            console.log(result[5]());  //由於函數的調用在此處，for語句無塊級作用域導致返回值和預想的不一樣，此時外部變量經過for循環後爲10，所以結果均爲10
            console.log(result2[5]());  //解決方法一 ： 用匿名函數添加一個閉環境傳入值
            console.log(result3[5]());  //解決方法二 ： 用ES6語法中let生命變量，是for循環也可以擁有塊級作用域
        }
        func();
    }

    /*模塊*/
    {} //es6
    (function(){}()) //傳統閉包模塊 ：一個定義了私有變量和函數的函數，利用閉包創建可以訪問私有變量和函數的特權函數；最後返回這個特權函數或者保存到一個可訪問的地方

    /*級聯*/
    //如果讓方法的返回值爲this而不是undefined，則可以通過級聯的方式調用同意個對象的很多方法
    {
        let obj={
            name:'ss',
            age:18,
            getName() {
                console.log(this.name);
                return this;
            },
            getAge(){
                console.log(this.age);
                return this;
            }
        };
        obj.getName().getAge();
    }

    /*記憶*/
    //通過數組或者其他形式存儲結算結果，避免重複不必要的計算

    /*繼承*/
    {
        function People(name,age){
            this.name = name;
            this.age = age;
        }
        People.prototype.get_name= function(){
            return this.name;
        };
        let person1= new People('xiaoming',5);
        function Person(name,age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype= new People();  //繼承People類
        Person.prototype.get_age= function(){ //擴充原型方法
            return this.age;
    };
        let person2 = new Person('小紅',5);
        console.log(person2.get_name());
        console.log(person2.get_age());
    }
    /*es6 class語法糖繼承對比*/
    {
        class People {
            /*構造器*/
            constructor(name,age){
                this.name=name;
                this.age = age;
            }
            //方法
            get_name(){
                return this.name;
            }
        }
        let person1= new People('xiaoming',5);
        console.log(person1.get_name());
        //開始繼承
        class Person extends People{
            constructor(name,age){
            super(name,age);//必須調用super方法
            }
            get_msg(){
                return super.get_name()+' 年齡：'+this.age.toString(); //調用父類的方法
            }
        }
        let person2=new Person('小紅',80);
        console.log(person2.get_msg());
        console.log(person2.get_name()); //繼承方法成功
    }

    /*數組的刪除*/
    {
        let arr = ['a','b','c','d'];
        delete  arr[2];
        console.log(arr);
        arr = ['a','b','c','d'];
        arr.splice(2,2,'e','f','g');
        console.log(arr);
    }
    /*正則表達式*/
    {
        let reg = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
        let result = reg.exec('http://www.baidu.com:80/goodparts?q#fragement');
        console.log(result);
        console.log(reg.test('http://www.baidu.com:80/goodparts?q#fragement'));
        console.log(reg.test('http:////www.baidu.com:80/goodparts?q#fragement'))
    }

    /*sort方法*/
    {
        let arr=[12,56,12,56,3,2,15,8,21,32,655,452,'a','aa','bbb'];
        console.log(arr.sort(function(a,b){
            return a-b;
        }))
    }
    /*Number.toFixed*/
    {
        let pi = Math.PI;
        console.log(pi,pi.toFixed(2),pi.toFixed(15))
        /*toString*/
        console.log(pi.toString(2));
    }

    /*毒瘤之自動插入分號*/
    {
        function func(){
            return    //這裏自動插入分號導致返回undefined
            {
                a:'ad'
            };
        }
        console.log(func());
    }

    /*毒瘤之浮點數*/
    {
        console.log(0.1+0.2,parseInt(0.1+0.2))
    }
    /*毒瘤之Nan*/
    {
        console.log(typeof NaN,NaN===NaN,isNaN('oops'));
        let arr = [];
    }
    /*毒瘤之function語句*/
    {
        a();
        function a(){     //函數聲明提升
            console.log("a is running")
        }
    }