閉包.定時器和Bom

題目1: 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法

    var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //10
//方法1:立即執(zhí)行函數(shù)
var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] = (function(){
            return i;
        })()
    }
    console.log( fnArr[3]);  //3
//方法2:閉包
var fnArr = [];
    for (var i = 0; i < 10; i ++) {
      ! function(i){
          fnArr[i] = function(){
              return i;
          }
       }(i)
    }
    console.log( fnArr[3]());  //3
//方法3ES6的方法let
var fnArr = [];
    for (let i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //3

題目2: 封裝一個汽車對象,可以通過如下方式獲取汽車狀態(tài)

var Car = (function(){
    var speed = 0;
    function setSpeed(s){
        speed = s
    }
    function getSpeed(){
        console.log(speed)
    }
    function accelerate(){
        speed += 10
    }
    function decelerate() {
        if (speed >= 10){
            speed -=10
        }else{
            speed = 0
        }
    }
    function getStatus() {
       if (speed === 0){
           console.log( 'stop')
       }else {
           console.log( 'running')
       }
    }
    return {
        setSpeed: setSpeed,
        getSpeed: getSpeed,
        accelerate:accelerate,
        decelerate:decelerate,
        getStatus:getStatus,
        speed:'error'
}
})()
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
Car.speed;  //error

題目3:下面這段代碼輸出結(jié)果是? 為什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);

// 輸出結(jié)果是1,3,2.setTimeout啟動一個計時器,計時器到期后運行代碼,但是計時器要在主代碼執(zhí)行完后才會執(zhí)行。所以計時器中代碼執(zhí)行時間通常比設(shè)定時間要長。

setTimeout和setInterval的運行機制是,將指定的代碼移出本次執(zhí)行,等到下一輪 Event Loop 時,再檢查是否到了指定時間。如果到了,就執(zhí)行對應(yīng)的代碼;如果不到,就等到再下一輪 Event Loop 時重新判斷。
這意味著,setTimeout和setInterval指定的代碼,必須等到本輪 Event Loop 的所有任務(wù)都執(zhí)行完,才會開始執(zhí)行。由于前面的任務(wù)到底需要多少時間執(zhí)行完,是不確定的,所以沒有辦法保證,setTimeout和setInterval指定的任務(wù),一定會按照預(yù)定時間執(zhí)行。

題目4:下面這段代碼輸出結(jié)果是? 為什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

輸出結(jié)果是true,setTimeout會等到代碼執(zhí)行完再啟動計時器,主代碼中while是死循環(huán),setTimeout中的代碼不會執(zhí)行,flag一直為true
題目5: 下面這段代碼輸出?如何輸出delayer: 0, delayer:1...(使用閉包來實現(xiàn))

for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log('delayer:' + i );
    }, 0);
    console.log(i);//0,1,2,3,4
}
//setTimeout輸出結(jié)果為'delayer:5''delayer:5''delayer:5''delayer:5''delayer:5'
for(var i=0;i<5;i++){
    !function(i){
        setTimeout(function(){
            console.log('delayer:' + i );
        }, 0);
    }(i)
    console.log(i);//0,1,2,3,4
}

題目6: 如何獲取元素的真實寬高
使用offseHeight和offsetWidth

var o = document.getElementById("view");
var h = o.offsetHeight;  //高度
var w = o.offsetWidth;  //寬度

題目7: URL 如何編碼解碼?為什么要編碼?
encodeURI/decodeURI

它著眼于對整個URL進行編碼,因此除了常見的符號以外,對其他一些在網(wǎng)址中有特殊含義的符號"; / ? : @ & = + $ , #",也不進行編碼。編碼后,它輸出符號的utf-8形式,并且在每個字節(jié)前加上%。


bg2010021113.png

它對應(yīng)的解碼函數(shù)是decodeURI()。


bg2010021114.png

需要注意的是,它不對單引號'編碼。

encodeURIComponent/decodeURIComponent

最后一個Javascript編碼函數(shù)是encodeURIComponent()。與encodeURI()的區(qū)別是,它用于對URL的組成部分進行個別編碼,而不用于對整個URL進行編碼。
因此,"; / ? : @ & = + $ , #",這些在encodeURI()中不被編碼的符號,在encodeURIComponent()中統(tǒng)統(tǒng)會被編碼。至于具體的編碼方法,兩者是一樣。


bg2010021115.png

它對應(yīng)的解碼函數(shù)是decodeURIComponent()。

為什么要編碼
URL只能使用英文字母、阿拉伯?dāng)?shù)字和某些標(biāo)點符號,不能使用其他文字和符號。。這是因為網(wǎng)絡(luò)標(biāo)準RFC 1738做了硬性規(guī)定:

"...Only alphanumerics [0-9a-zA-Z], the special characters "$-.+!*'()," [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."
"只有字母和數(shù)字[0-9a-zA-Z]、一些特殊符號"$-
.+!*'(),"[不包括雙引號]、以及某些保留字,才可以不經(jīng)過編碼直接用于URL。"
參考

題目8: 補全如下函數(shù),判斷用戶的瀏覽器類型

function isAndroid(){
      return  /Android/i.test(navigator.userAgent)
}
function isIphone(){
      return  /Iphone/i.test(navigator.userAgent)
}
function isIpad(){
      return  /Ipad/i.test(navigator.userAgent)
}
function isIOS(){
      return  /Iphone|ipad|Ipod/i.test(navigator.userAgent)
}

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 題目1: 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 方法一: 方法二: 方法三...
    南山碼農(nóng)閱讀 292評論 0 1
  • 題目1: 下面的代碼輸出多少?修改代碼讓 fnArr[i]() 輸出 i。使用 兩種以上的方法 var fnArr...
    saintkl閱讀 378評論 0 0
  • 題目1: 下面的代碼輸出多少?修改代碼讓 fnArr[i]() 輸出 i。使用 兩種以上的方法 題目2: 封裝一個...
    QQQQQCY閱讀 288評論 0 0
  • 題目1: 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 輸出10 修改為1var ...
    我是一只_魚閱讀 220評論 0 1
  • 說來有些孤陋寡聞,聽孫老師的課才知道有簡書∩_∩,看到群里的朋友們都注冊了簡書,心動不已,我也注冊,以后向群里的兄...
    三月小女子閱讀 479評論 3 2