JS語法

問答：

1.CSS和JS在網頁中的放置順序是怎樣的？

  • CSS
    放在head標簽內，由link標簽來引入。如果放在底部，可能會造成某些瀏覽器的白屏問題或FOUC。

  • JS
    放在body標簽底部。由于瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下載，內容的呈現等等。至到JS下載、解析、執行完畢后才開始繼續并行下載其他資源并呈現內容。所以為了提高網頁性能，將JS放在底部。

2.解釋白屏和FOUC

  • 白屏
    一般情況下，HTML內容和CSS樣式表是并發同步加載的，但是某些情況下，同步出現了問題，瀏覽器無法獲得樣式來渲染內容，就會出現白屏現象：
  • 如果把樣式放在底部，對于IE瀏覽器，在某些場景下（新窗口打開，刷新等）頁面會出現白屏，而不是內容逐步展現。
  • @import需要在網頁完全載入以后加載，如果使用@import標簽，即使CSS放入link，并且放在頭部，也可能出現白屏。
  • 對于圖片和CSS，在加載時會并發加載（如一個域名下同時加載兩個文件），但在加載JS時，會禁用并發，并且阻止其他內容的下載，所以把JS放在頁面頂部也會導致白屏現象。
  • FOUC
    如果把樣式表放在底部，當頁面逐步加載時，文字首先顯示，然后是圖片，最后當樣式表完全下載并且解析之后，已經呈現的文字和圖片又要根據樣式表的樣式重新繪制，這樣就會造成FOUC(無樣式內容閃爍)。IE瀏覽器會在某些情況下（點擊鏈接，輸入URL，使用書簽進入等）會出現FOUC，而Firefox瀏覽器會一直表現出FOUC。

3.async和defer的作用是什么？有什么區別。

<script src="script.js"></script>
沒有defer或async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該script標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
<script async src="script.js"></script>
有async，記載和渲染后續文檔元素的過程將和script的加載與執行并行進行（異步）。
<script defer src="script.js"></script>
有defer，加載后續文檔元素的過程將和script.js的加載并行進行（異步），但是與async不同的是：script.js的執行要在所有元素解析完成之后，DOMContentLoaded時間觸發之前完成。

4.簡述網頁的渲染機制。

1.解析HTML標簽，構建DOM樹。
2.解析CSS標簽，構建CSSOM樹。
3.把DOM和CSSOM組合成渲染樹（render tree）。
4.在渲染樹的基礎上進行布局，計算每個節點的幾何結構。
5.把每個節點繪制到屏幕上（painting）。


瀏覽器工作原理參考：
How browsers work
前端必讀：瀏覽器內部工作原理

5.JavaScript 定義了幾種數據類型? 哪些是簡單類型?哪些是復雜類型?

JavaScript語言的每一個值，都屬于某一種數據類型。JavaScrip定義了六種數據類型，其中數組、字符串、布爾值、underfined和null為簡單類型，對象為復雜類型。：

  • 數值（number）：整數和小數（比如1和3.14）
  • 字符串（string）：字符組成的文本（比如"Hello World"）
  • 布爾值（boolean）：true(真)和false(假)兩個特定值
  • undefined:表示“未定義”或不存在，即此處目前沒有任何值
  • null：表示空缺，即此處應該有一個值，但目前為空
  • 對象(object)：各種值組成的集合，對象又可以分成為三個子類型：
  • 狹義的對象(object)
  • 數組(arry)
  • 函數(function)

通常，我們將數值、字符串、布爾值稱為原始類型（primitive type）的值，即它們是最基本的數據類型，不能再細分了。而將對象稱為合成類型（conplex type）的值，因為一個對象往往是多個原始類型的值的合成，可以看做是一個存放各種值的容器。至于underfined和null，一般將它們看成兩個特殊值。

6.NaN、undefined、null分別代表什么?

NaN是JavaScript的特殊值，表示“非數字”（Not a Number），主要出現在將字符串解析成數字出錯的場合。NaN有以下幾個運算規則：

  • NaN不等于任何值，包括它本身。
  • 由于數組的indexOf方法，內部使用的是嚴格相等運算符，所以該方法對NaN不成立。
  • NaN在布爾運算時被當作false。
  • NaN與任何數（包括它自己）的運算，得到的都NaN。
NaN的運算規則

undefined表示不存在的值，就是此處目前不存在任何值，典型用法是：

  • 變量被聲明了，但沒有賦值，就等于undefined。
  • 調用函數時，應該提供的參數沒有提供，該參數等于undefined。
  • 對象沒有賦值的屬性，該屬性的值為undefined。
  • 函數沒有返回值時，默認返回undefined。
undefined用法

null表示空值，即該處的值現在為空，典型的用法是：

  • 作為函數的參數，表示該函數的參數是一個沒有任何內容的對象。
  • 作為對象原型鏈的終點。

7.typeof和instanceof的作用和區別?

typeof運算符可以返回一個值的數據類型，可以有以下結果。
（1）原始類型
數值、字符串、布爾值分別返回number、string、boolean。

原始類型

（2）函數
函數返回function

函數

（3）undefined
undefined返回undefined

undifined

利用這一點，typeof可以用來檢測一個沒有聲明的變量，而不報錯。

利用typeof檢測

實際編程中，這個特點通常用在判斷語句。

判斷語句
  • 其他
    除此之外，其他情況都返回object。
object
  • instanceof
    instanceof運算符返回一個布爾值，表示指定對象是否為某個構造函數的實例。
    例如在上文中，typeof對數組（array）和對象（object）的顯示結果都是object，那么我們可以使用instanceof來區分它們
instanceof

代碼：
1.完成如下代碼判斷一個變量是否是數字、字符串、布爾、函數 （難度*）ps: 做完后可參考 underscore.js 源碼中部分實現

function isNumber(el){
    if (typeof el === "number"){
        return true;
    }else{
        return false;
    }
}
function isString(el){
    if(typeof el === "string"){
        return true;
    }else {
        return false;
    }
}
function isBoolean(el){
    if(typeof el === "boolean"){
        return true; 
    }else {
        return false;
    }
}
function isFunction(el){
    if(typeof el === "function"){
        return true;
    }else {
        return false;
    }
}

var a = 2,
    b = "jirengu",
    c = false;
alert( isNumber(a) );  //true
alert( isString(a) );  //false
alert( isString(b) );  //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true

demo

2.以下代碼的輸出結果是?（難度**）

console.log(1+1); //結果為2，數值之間的加法運算。
console.log("2"+"4"); //結果為"24"，字符串之間的連接運算。
console.log(2+"4"); //結果為"24"，有一個運算子是字符串，則執行字符串連接運算。
console.log(+new Date());//結果為1471665761733，new Date()會獲得從 1970 年 1 月 1 日至今的毫秒數。
console.log(+"4");//結果為4，只有右邊一個字符串，轉換為數值4.

在JavaScript語言里， +運算符可以完成兩種運算，既可以處理算術的加法，也可以做字符串的連接，它的算法步驟如下：

1.如果運算子是對象，先自動轉成原始類型的值（即先執行該對象的valueOf方法，如果結果還不是原始類型的值，再執行toString方法；如果對象是Date實力，則先執行toString方法）。
2.兩個運算符都是原始類型的值以后，只要有一個運算符是字符串，則兩個運算子都轉為字符串，執行字符串鏈接運算。
3.否則，兩個字符串都轉為數值，執行加法運算。
4.加法運算符一定有左右兩個運算子，如果只有右邊一個運算子，就是另一個運算符，叫做“數值運算符”，用于返回右邊運算子的數值形式。
5.如果只有左邊一個運算子，會報錯。

3.以下代碼的輸出結果是? （難度***）

var a = 1;
a+++a;

typeof a+2;
輸出結果

先了解下a++和++a的區別：

  • a++ 和 ++a的相同點都是給a+1，
  • 不同點是a++是先參加程序的運行再+1，而++a則是先+1再參加程序的運行

a+++a這一行代碼中，后置遞增的優先級高于前置遞增，所以先運行a++然后+a。
a++的運行結果為1，但此時的a等于2，最后a+++a的運行結果為3。

typeof a+2這一行代碼中，typeof的優先級更高，所以先運行typeof a，運行結果為"number"，然后再加上2，最后的運行結果為"number2"。

關于優先級的判斷參考運算符優先級。

4.歷數組，把數組里的打印數組每一項的平方 （難度**

var arr= [3,4,5];

for (var i=0;i< arr.length;i++) {
  console.log(arr[i]*arr[i]);
}
遍歷數組

5.遍歷 JSON, 打印里面的值 （難度**）

var obj = {
  name: 'hunger',
  sex: 'male',
  age:28,
};

for (var key in obj) {
  console.log(key+":"+obj[key]);
}
遍歷對象

6.下面代碼的輸出是? 為什么 （難度***）

console.log(a);
var a = 1;
console.log(a);
console.log(b);
輸出結果

輸出結果如圖，這里要說一下的是變量提升：

JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。這造成的結果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升（hoisting）。請注意，變量提升只對var命令聲明的變量有效，如果一個變量不是用var命令聲明的，就不會發生變量提升。。

所以，根據上文的解釋，本題的代碼實際運行為：

var a;
console.log(a);//變量a已聲明，但還未賦值，所以結果顯示為undefined。
a = 1;
console.log(a);//變量a已賦值1，所以結果顯示為1。
consolo.log(b);//變量b未聲明，所以顯示報錯error。

本文版權歸本人和饑人谷所有，轉載請注明來源。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • JavaScript基本概念、基礎數據類型、運算符、流程控制語句。 一、CSS和JS在網頁中的放置順序是怎樣的？ ...
    婷樓沐熙閱讀 447評論 0贊 2
  • 學習內容：JavaScript基本概念，基礎數據類型，運算符，流程控制語句 一、CSS和JS在網頁中的放置順序是怎...
    鴻鵠飛天閱讀 515評論 0贊 0
  • 1. CSS和JS在網頁中的放置順序是怎樣的？ 理論上來說，CSS和JS的放置位置并沒有嚴格要求，不過因為瀏覽器的...
    進擊的阿群閱讀 458評論 0贊 2
  • 問答 1.CSS和JS在網頁中的放置順序是怎樣的？ 一般把css放在 標簽內， 標簽的后面；js放在 標簽的尾部。...
    墨月千樓閱讀 665評論 0贊 0
  • 1.CSS和JS在網頁中的放置順序是怎樣的？ 將CSS link標簽放在html文檔靠前位置。JS代碼放在html...
    饑人谷區子銘閱讀 344評論 0贊 1