奇葩面試題記錄

1.    var  a = {n:100};

　　var b=a; 　　　　    爲何要有這步, 由於後面對a的賦值操做會丟失a對{ n:100 } 的引用

       a.x = a = { n:200 };   這是核心考點

　　console.log( a.x );    

　　console.log( b.x );

　　解析: 

　　1). js的賦值運算順序永遠都是從右往左的，可是 a.x = a = { n:200 }中,  因爲"."是優先級高於"="賦值運算符，因此這行代碼先執行了a.x, 即 爲變量a引用的{n:100}對象中添加x屬性, 並初始化爲undefined, 此時初始化完成, 就等待賦值了  此時 a 引用的對象變成了  { n:100, x: undefined }。

　　2). 這時纔開始賦值操做, a = { n:200 } 再 a.x = { n:200 },  這時不會由於a.x 中的a的引用變了, a.x再去從新初始化, 而是接着賦值給原先的a.x,即 { n:100, x:{ n:200 }}

       總結:  最重要考點:  就是連等賦值   和   變量.屬性優先級,   還有  代碼在運行前已經編譯完畢,  後續會按先前編譯的初始化環境賦值

2.. 變量聲明提示問題, 運行前環境: AO :{ 有 var aa, function aa (){}  }  這兩個同名的變量提高, 函數優先級高於普通變量, 且是總體提高, 

　　

3.. 函數變量提高, if 中定義 變量和函數,如今標準不容許.

a = 100;
function demo(e){
    function e(){};
    arguments[0] = 2;
    console.log(e);
    if(a){
        var b = 123;
        function c(){};
    }
    var c;
    a = 10;
    var a;
    console.log(b);
    f = 123;
    console.log(c);
    console.log(a);
}
var  a;
demo(1);
console.log(a);
console.log(f);

View Code

 

 4..   優先級考點: MDN   https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

　　window.a  || ( windw.a = '1' )    這個先算括號()裏面的  ,  再算 || , 即: 先賦值 window.a ='1',  再判斷 || 左側window.a 爲真 返回, window.a 爲'1'

window.a  ||  ( window.a = '1' )
console.log( window.a )

View Code

下面是按從最高到最低的優先級列出JavaScript運算符。具備相同優先級的運算符按從左至右的順序求值。
運算符                                                描述
. [] ()                      字段訪問、數組下標、函數調用以及表達式分組
++ -- - ~ ! delete new typeof void      一元運算符、返回數據類型、對象建立、未定義值
* / %    乘法、除法、取模
+ - +    加法、減法、字符串鏈接
<< >> >>>    移位
< <= > >= instanceof    小於、小於等於、大於、大於等於、instanceof
== != === !==    等於、不等於、嚴格相等、非嚴格相等
&    按位與
^    按位異或
|    按位或
&&    邏輯與
||    邏輯或
?:    條件
= oP=    賦值、運算賦值
,    多重求值

圓括號可用來改變運算符優先級所決定的求值順序      

js運算符的優先級

下面的表將全部運算符按照優先級的不一樣從高到低排列。

優先級    運算類型    關聯性    運算符
20              圓括號       n/a    ( … )
19        成員訪問    從左到右    … . …
    需計算的成員訪問    從左到右    … [ … ]
    new (帶參數列表)       n/a          new … ( … )
             函數調用    從左到右    … ( … )
18    new (無參數列表)    從右到左    new …
17    後置遞增(運算符在後)    n/a       … ++
        後置遞減(運算符在後)                … --
16    邏輯非    從右到左    ! …
        按位非    ~ …
        一元加法    + …
        一元減法    - …
        前置遞增    ++ …
        前置遞減    -- …
        typeof    typeof …
        void    void …
        delete    delete …
        await    await …
15    冪    從右到左    … ** …
14    乘法    從左到右
     … * …
除法    … / …
取模    … % …
13    加法    從左到右
     … + …
減法    … - …
12    按位左移    從左到右    … << …
按位右移    … >> …
無符號右移    … >>> …
11    小於    從左到右    … < …
小於等於    … <= …
大於    … > …
大於等於    … >= …
in    … in …
instanceof    … instanceof …
10    等號    從左到右
     … == …
非等號    … != …
全等號    … === …
非全等號    … !== …
9    按位與    從左到右    … & …
8    按位異或    從左到右    … ^ …
7    按位或    從左到右    … | …
6    邏輯與    從左到右    … && …
5    邏輯或    從左到右    … || …
4    條件運算符    從右到左    … ? … : …
3    賦值    從右到左    … = …
… += …
… -= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2    yield    從右到左    yield …
yield*    yield* …
1    展開運算符    n/a    ... …
0    逗號    從左到右    … , …            

MDN的優先級

 5..  if ( function  b () {} ){

　　       typeof  b 　}    

function   b () {}  這個外面加括號 ()  就變在了 函數表達式, 就會忽略掉函數名b, 值是  undefined 

var fn = function ffn (){}

typeof ffn
"undefined"

考點

 6.. var  str = 'abcde' ;    str.text = 'aabb' ;   console.log( str.text ) ;

字符串str.text賦值aabb, 隱式過程是: 轉成包裝類  new String(str).text='aabb' , 可是沒變量接收保存, 就會被刪除回收了, 等於沒賦值, 仍是undefined, 

 若是想要保存,  可 使用 包裝類,  
即: var str = new String( 'aabb' ),
    str.text = '1111';
consloe.log( str.text ) ;

解釋  

 7..  function   foo (x) { console.log(arguments) ;  return x }(1, 2, 3, 4, 5)  結果：：

函數聲明後不能直接跟執行符號（）
不然會被解析爲，　一個是函數聲明，一個是另外一個括號表達式，二者不要緊

View Code

8.. 用css實現開關切換效果 ,  注意點以下: 

　　8.1  使用input框, 須要去除瀏覽器的內核默認渲染,  -webkit-appearance  : none ;  ( 有兼容問題, 須要查MDN,  移動端這個可用 )

　　8.2  使用僞類 :checked ( 選中狀態的單選或多選框 )  和 :before  , 例: 前後順序: input:checked:before { left: 40px }

　　8.3