1. js面試整理 · 面試寶典

[TOC] ### 1. js中使用typeof 能得到哪些數據類型 ~~~ 1. typeof是用來查看數據的所屬類型。 2. 能夠區分基本數據類型和引用數據類型， 3. 總共得到6種數據類型。其中包括4種基本數據類型（number，string，boolean，undefined）和2種引用數據類型（Object， Function） ~~~ ### 2. js內置函數有哪些 ~~~ 1. 內置函數是數據封裝類對象。里面封裝有屬性和方法供其他類（函數）繼承 2. 有11種 Number，String，Boolean，Math，Object， Function，Array，Date，Error，Ergexp（正則） ~~~ ### 3. ==和===的區別 ~~~ 1. == 1.值比較，不用考慮左右兩邊類型，比較時要進行類型轉換（轉換方式如下） 2.倘若有一邊的值為boolean,那么先將boolean-->number再比較 3.倘若一邊為字符串,一邊為number,那么string-->number再比較 4.null==undefined 5.NaN與任何值計算,結果都為NaN 除非 NaN!=NaN-->true 6.null和undefined比較之前不能將其轉為其它類型 2. === 1.安全等，左右兩邊的的值和類型完全相同才返回true 2.比較時不需要轉換類型直接進行比較 ~~~ ### 4. js中this的指向 ~~~ javascrip的頂級作用域是window，全局變量是window的屬性，函數是window的方法； this的指向： 1.在事件中，this指向正在執行事情的當前對象 2.在方法中，誰調用方法，this指向誰 this作為普通函數調用時指向window 例1： var a=10; //window.a=10; function b(){ console.log(this.a); } //window.b(); b(); console.log(window.a); 例2： <input type="text" value="hello" id="test"> <script> var value = "change" var test = document.getElementById("test"); test.onclick = function () { go(); //在事件中，this指向正在執行事情的當前對象 console.log(this.value);//hello } //因函數是window的方法，故調用它的肯定是window中的value function go() { console.log(value);//change } </script> ~~~ ### 5. 原生ajax ~~~ 1.創建ajax核心對象 2.與服務器建立連接 3.向服務器發送請求 4.服務器響應 ~~~ 示例： ~~~ <script> var url= "https://www.easy-mock.com/mock/5bad81fca1b7f6239a61664d/dataTest/pcTest"; var xhr = new XMLHttpRequest(); xhr.open("get",url); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var reponse = xhr.responseText; console.log(reponse); // JSON.parse 可以將字符串轉為JSON對象 var name = JSON.parse(reponse).data.name; console.log(name); } } </script> ~~~ ### 6. jquery-ajax 1.$.ajax() ~~~ window.onload = function(){ $.ajax({ type:"get", url:"xx", dataType:"json", success:function(res){ console.log(res); }, error:function(xhr){ document.body.innerHTML = xhr.status; } }) ~~~ 2.$.get() ~~~ //$.get()語法 $.get(url,function(data,status){ //獲取的data是一個JS對象 }).fail(function(data){ console.log(data.status) }) //取到的數據已json的方式打開 //$.get()語法 $.get(url,function(data,status){ //獲取的data是一個JS對象 },"jsonp").fail(function(data){ console.log(data.status) },"jsonp") ~~~ 3.$.post() ~~~ //$.post()語法 $.post(url,data,function(data,status){ }).fail(function(data){ console.log(data.status) }) ~~~ ### 7. axios ~~~ <script src="https://unpkg.com/axios/dist/axios.min.js"></script> ~~~ 1.get ~~~ //通過給定的ID來發送請求 axios.get(url).then(function (response) { }).catch(function (err) { console.log(err); }); ~~~ 2.post ~~~ //post axios.post(url, { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (res) { console.log(res); }) .catch(function (err) { console.log(err); }); ~~~ ### 8. 原型和原型鏈原型： ~~~ 原型是一個對象，原型中封裝一些方法和屬性可供其他對象繼承。原型對象-->Prototype (可被繼承的類和構造函數才有對象中沒有) __proto__(雙下劃線屬性)（除了根父類object中沒有其他的都有） ~~~ 原型鏈： ~~~ js中每一個引用數據類型都有__proto__(雙下劃線屬性)，且指向它的原型對象Prototype，同時共享原型上的方法所有的對象中都有一個雙下劃線屬性而雙下劃線屬性指向上一級的原型對象而上一級原型對象又指向根父類object通過一個__proto__來鏈接起來形成鏈 ~~~ ### 9. 正則正則概念： ~~~ 規定字符串出現規則的表達式實現獲取字符串中所有相同元素 ~~~ 正則使用方法 ~~~ 1. 正則使用/正則內容/ 2. 在后面加g 表示全局搜索（在整個使用了正則表達式的字符串中進行搜索） 3. 在后面加i 表示全局搜索且忽略大小寫 ~~~ [正則的其他內容](http://www.hmoore.net/tjs5945111/javascrip/778219) ### 10.promise [參考筆記](http://www.hmoore.net/tjs5945111/wxxcx/823757) ### 11. js的DOM操作 [DOM操作](http://www.hmoore.net/tjs5945111/javascrip/759035) ### 12. js數組 [參看筆記](http://www.hmoore.net/tjs5945111/javascrip/768562) ### 13. 操作字符串的方法 ~~~ 1. length-->獲取字符串的長度 2. concat-->增加的方法 3. charAt(index);-->查詢指定下標的值 4. indexOf; 5. lastIndexOf(value))--> 從后開始查找. 6. slice 7. subString(startIndex,endIndex) 8. split(separator)-->將字符串按指定格式分割成數組 9. search(value)-->返回搜索值的下標 10. match(value)-->被搜索到的值返回一個數組 11. replace() -->替換 ~~~ ### 14. Ajax請求總共有八種Callback ~~~ 　　onSuccess 　　onFailure 　　onUninitialized 初始化前　　onLoading 　　onLoaded 　　onInteractive 數據交互　　onComplete 完整的　　onException 例外 ~~~ ### 15. 字符串與數組之間的轉換 1\. 數組轉字符串 ~~~ 使用join(/)函數 ~~~ 2\. 字符串轉數組 ~~~ 1.split（） var a ="adskflhsdkfh/asdjfh" console.log(a.split("/")) ~~~ 3\. 將對象轉為數組 ~~~ var arr =[ {name:"zhang"}, {name:"zhan"}, {name:"zha"}, ] 1. 方法1 var ar =[]; arr.forEach(ele=>{ ar.push(ele.name) }) var newarr=ar.join("/"); console.log(newarr); ~~~ ### 16.**判斷一個對象是否為數組：** > 問題來源于，typeof {}和typeof \[\]的結果都是object； > 怎么通過typeof去判斷一個對象是不是數組類型呢？對象是對象，數組也是對象，**js中萬物皆對象** * **1、從原型入手，Array.prototype.isPrototypeOf(obj);** 利用isPrototypeOf()方法，判定Array是不是在obj的原型鏈中，如果是，則返回true,否則false。 * **2、從構造函數入手，obj instanceof Array** instanceof只會返回一個布爾值 ~~~ [] instanceof Array ==> true ~~~ * **3、根據對象的class屬性(類屬性)，跨原型鏈調用toString()方法。** ?Object.prototype.toString.call(obj)； ~~~ Object.prototype.toString.call([]); ==> "[object Array]" ~~~ * **4、Array.isArray()方法。** ~~~ rray.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false ~~~ ### 17. 談談你對sass理解 ~~~ 1. sass是css預處理器 2. sass是基于ruby開發的 3. 能夠使用嵌套語法使用變量和代碼塊減少重復代碼并能實現代碼復用 ~~~ ### 18. call、apply、bind的區別 ~~~ call、apply、bind用來改變this指向。 bind調用后不會直接執行，會改變函數的執行順序 call和apply是直接執行 ~~~ ### 19.call 和 apply 1. call\-->改變函數內部this,關鍵字的指向call(thisObj,params) ~~~ var cheng={ name:"cheng" } var jiang = { name:"jiang", sayName(a,b){ console.log(this.name); console.log(a+b); } } jiang.sayName.call(cheng,1,2); ~~~ 2. apply-->改變函數內部this關鍵字的指向 apply(thisObj,\[params\]) ~~~ var cheng={ name:"cheng" } var jiang = { name:"jiang", sayName(a,b){ console.log(this.name); console.log(a+b); } } jiang.sayName.apply(cheng,[1,2]) ~~~ 3. call\-->改變函數內部this,關鍵字的指向call(thisObj,params) ### 20. 使用`解構語法`實現引用數據類型的賦值 ~~~ //對象 var a={ name:'tong', age:18 } var b={...a} b.name='li' console.log(a.name) ; //tong //數組 var a = [1, 2, 3, 4, 5] var b = [...a] b[0] = 66 console.log(a); //[1, 2, 3, 4, 5] ~~~ ### 21. 深淺拷貝 ~~~ 1. 淺拷貝只是對指針的拷貝，拷貝后兩個指針指向同一個內存空間， 2. 深拷貝不但對指針進行拷貝，而且對指針指向的內容進行拷貝，經深拷貝后的指針是指向兩個不同地址的指針。 ~~~ ### 22.js 判斷是自有屬性還是共有屬性 ~~~ 　　1、判斷自有屬性 ?　　　　var boolean = obj.hasOwnProperty("屬性名");//返回布爾值　　2、判斷共有屬性　　　　var bool = !?obj.hasOwnProperty("屬性名") && obj.屬性名!==undefined; ~~~