慕課網-前端JavaScrpt基礎面試技巧-學習筆記

 

 

章節目錄：

• JS基礎知識（上）——講解 JS 基礎語法相關的面試題，分析原理以及解答方法。這一章節講解了基礎知識的第一部分：變量的類型和計算。以及JS 「三座大山」 —— 原型、做用域和異步中的第一座大山：原型。
• JS基礎知識（中）——講解 JS 基礎語法相關的面試題，分析原理以及解答方法。這一章節講解了JS 「三座大山」 —— 原型、做用域。
• JS基礎知識（下）——講解 JS 基礎語法相關的面試題，分析原理以及解答方法。這一章節講解了基礎知識的第三部分：JS 「三座大山」 —— 做用域，閉包及異步。
• JS-Web-API（上）——講解 JS 在瀏覽器中具體應用的面試題。包括 DOM 操做，BOM 操做，事件綁定，ajax 和 存儲，這些類別的題目。
• JS-Web-API（下）——講解 JS 在瀏覽器中具體應用的面試題。包括 DOM 操做，BOM 操做，事件綁定，ajax 和 存儲，這些類別的題目。
• 開發環境——講解在面試過程當中，面試官可能會問及的前端開發環境的問題，例如 IDE，Git，模塊化，打包工具，上線流程，這些類別的題目。
• 運行環境——講解 JS 代碼在瀏覽器中運行的相關問題，例如頁面加載和渲染，性能優化，安全性，這些類別的題目。

第一部分：JS基礎知識(ECMA262標準)

　　ECMA262標準：

　　　　a 變量類型和計算

　　　　b 原型和原型鏈

　　　　c 閉包和做用域

　　　　d 異步和單線程

　　　　e 其餘（日期、Math、各類經常使用API）

　　1 變量類型和計算

　　　　變量類型：值類型、引用類型。

　　　　值類型：值之間不相互影響，包括：number、string、布爾。

　　　　引用類型：由指針指向對象，包括：對象、數組、函數。

　　　　引用類型特色：能夠無限的擴展熟悉。

　　2 typeof運算符

typeof undefined　　　   // undefined
typeof 'abc'　　　　　　 //  string
typeof 123　　　　　　   //  number
typeof true　　　　　　  //  boolean
typeof {}　　　　　　　  //  object
typeof []　　　　　　　  //  object
typeof null　　　　　　  //  object
typeof console.log　　  //  function

　　　　typeof共有五種類型：undefined string number boolean object 。

　　　　typeof只能區分值類型：undefined string number boolean 。

　　　　null：引用類型，屬於object，空的指針。

　　　　function：特殊的引用類型。

　　3 變量計算-強制類型轉換

　　　　a 字符串拼接

　　　　b ==運算符

　　　　c if語句

　　　　d 邏輯運算

　　　　==運算符比較特殊，在表達式null == undefined中，null和undefined都會被轉換成false，所以判斷結果爲true。0和空字符串''同理。

　　　　　　

console.log(10 && 0)　　　　    // 0　　　         //10被轉換成了true
console.log('' || 'abc')　　　　// 'abc'　    　  //''被轉換成了false
console.log(!window.abc)　　   //  true　　      //window.abc被轉換成了false

 

　　　　判斷一個變量會被當成true仍是false：

var a = 100;  console.log(!!a);

　　　　在if中會被當成false處理的有：0 NaN '' null undefined false 

　　4 原型和原型鏈

　　　　構造函數：函數名稱首字母大寫。

function Foo(name,age){
      this.name = name;
      this.age =  age;  
      //return this;                    //默認有這一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);          //建立多個對象

　　　　new一個對象的過程：構造函數至關於一個模板，this.xx = xx; this.xxx = xxx;（賦值）固然也能夠不賦值傳參。new函數執行時，this變成空對象，而後賦值，以後return this 。　　

　　　　　　建立一個新對象->this指向這個新對象->執行代碼，即對this賦值->返回this。

　　　　構造函數擴展：

　　　　　　var a = {} 實際上是var a = new Object()的語法糖；

　　　　　　var a = [] 實際上是var a = new Array()的語法糖；

　　　　　　function Foo(){...}實際上是var Foo = new Function(...)的語法糖；

　　　　　　語法糖的構造函數易讀性和性能更好。

　　　　使用instanceof判斷一個函數是不是一個變量的構造函數。

　　　　如何判斷一個變量是否爲數組：變量 instanceof Array

　　5 原型規則和示例

　　　　5條原型規則：

　　　　　a 全部的引用類型：數組、對象、函數，都具備對象特性，便可以自由擴展屬性（除了null之外）。

　　　　　b 全部的引用類型：數組、對象、函數，都有一個__proto__屬性（隱式原型），屬性值是一個普通的對象。

　　　　　c 全部的函數，都有一個prototype屬性（顯式原型），屬性值也是一個普通的對象。

　　　　　d 全部的引用類型：數組、對象、函數，__proto__屬性值指向它的構造函數的prototype屬性值。

　　　　　e 當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的prototype）中尋找。

　　　　for(... in ...)循環對象自身的屬性：在高級瀏覽器中，已經在for in中屏蔽了來自原型的屬性，可是建議你們加上判斷，保證查詢的健壯性。

var item;
for(item in f){
    if(f.hasOwnProperty(item)){　　　　//hasOwnProperty函數方法返回一個布爾值，指出一個對象是否具備指定名稱的原生屬性，如有返回true，若無返回false.
　　　　console.log(item); 　　
　　} 
}

　　6 原型鏈

　　　　f.toString()         //要去f.__proto__.__proto__中查找。

　　　　　

　　7 instanseof

　　　　用於判斷引用類型屬於哪一個構造函數的方法。

　　　　f instanceof Foo的判斷邏輯是：f的__proto__，一層一層往上，可否對應到Foo.prototype;再試着判斷f instanceof Object（Foo的上一層是Object）。

　　8 執行上下文

　　　　範圍：一段<script>或者一個函數。

　　　　全局：變量聲明，函數聲明。    一段script

　　　　函數：變量定義，函數聲明，this,argument.    函數

　　　    注意區分函數聲明和函數表達式！

　　　　執行上下文會在執行第一行代碼前把全部變量的聲明和函數的聲明都拿出來。

　　9 this

　　　　this在執行的時候才能確認值，定義時沒法確認。

　　　　this的幾種使用場景：

　　　　　　a 做爲構造函數執行

　　　　　　b 做爲對象屬性執行

　　　　　　c 做爲普通函數執行   this是window

　　　　　　d call apply bind

　　10 做用域

　　　　沒有塊級做用域

　　　　只有函數和全局做用域

　　11 做用域鏈

　　　　自由變量：當前做用域沒有定義的變量

　　　　函數的父級做用域指的是函數定義的地方

　　　　注意函數和全局中不要混用同一變量！

　　12 閉包

　　　　閉包實際應用中主要用於封裝變量，收斂權限。

　　13 異步和單線程

　　　　由於javascript是單線程語言，只能每次執行一件事

　　　　什麼時候須要異步？前端使用一筆的場景有哪些？

　　　　　　a 定時任務：setTimeout,setInterval

　　　　　　b 網絡請求：ajax請求，動態<img>加載

　　　　　　c 事件綁定

　　　　異步和同步的區別：

　　　　　　a 同步會阻塞代碼執行，而異步不會

　　　　　　b alert是同步，setTimeout是異步　　　　　　

　　14 其餘題目

　　　　日期:

Date.now()               //獲取當前時間毫秒數
var dt = new date();
dt.getTime()             //獲取毫秒數
dt.getFullYear()         //年
dt.getMonth()            //月（0-11）
dt.getDate()             //日（0-31）
dt.getHours()            //小時（0-23）
dt.getMinutes()          //分鐘（0-59）
dt.getSeconds()          //秒（0-59）

　　　　Math:

　　　　　　獲取隨機數:Math.random()       返回0.xxx，位數不肯定

　　　　　　應用：清楚緩存。當持續訪問同一連接時，會得不到真實的訪問效果，這時在連接後面加一個random，會每次改變，達到清除緩存的效果。  

　　　　數組API：

forEach                 //遍歷全部元素
every                   //判斷全部元素是否都符合要求條件
some                    //判斷是否有至少一個元素是否符合要求條件，返回true或false
sort                    //排序
map                     //對元素從新組裝，生成新的數組
filter                  //過濾符合條件的元素

　　　　sort:

var arr = [1,3,5,2,4];
var arr2 = arr.sort(function(a,b){
   return a-b;          //從大到小排序
   //return b-a;        //從小到大排序 
})
console.log(arr);
console.log(arr2);

此例中返回的arr和arr2都是排序好的數組，sort方法執行後改變了原數組。

　　　　map:

var arr = [1,2,3];
var arr2 = arr.map(function(item,index){
   return '<b>'+item+'</b>';
})
console.log(arr2);       //["<b>1</b>","<b>2</b>","<b>3</b>"]

　　　　filter:

var arr = [1,2,3,4];
var arr2 = arr.filter(function(item,index){
   if(item>2)
        return true;
})
console.log(arr2);       //[3,4]

　　　　對象API:

var obj = {
  x:100,
  y:200,
  z:300  
}
var key
for (key in obj){
  if(obj.hasOwnProperty(key)){
     console.log(key,obj[key])
   }  
}

　　　　輸出結果：

　　　　x 100

　　　　y 200

　　　　z 300