<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                [TOC] # 1、JavaScript中如何檢測一個變量是一個String類型?請寫出函數實現 ``` typeof(obj) === "string" typeof obj === "string" obj.constructor === String ``` ## 請用js去除字符串空格? ### 方法一:使用replace正則匹配的方法 ``` 去除所有空格: str = str.replace(/\s*/g,""); 去除兩頭空格: str = str.replace(/^\s*|\s*$/g,""); 去除左空格: str = str.replace( /^\s*/, “”); 去除右空格: str = str.replace(/(\s*$)/g, ""); str為要去除空格的字符串,實例如下: var str = " 23 23 "; var str2 = str.replace(/\s*/g,""); console.log(str2); // 2323 ``` ### 方法二:使用str.trim()方法 ``` str.trim()局限性:無法去除中間的空格,實例如下: var str = " xiao ming "; var str2 = str.trim(); console.log(str2); //xiao ming 同理,str.trimLeft(),str.trimRight()分別用于去除字符串左右空格。 ``` ### 方法三:使用jquery,$.trim(str)方法 ``` $.trim(str)局限性:無法去除中間的空格,實例如下: var str = " xiao ming "; var str2 = $.trim(str) console.log(str2); // xiao ming ``` # 2、你如何獲取瀏覽器URL中查詢字符串中的參數? 測試地址為:http://www.xxxxx.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23 實例如下: ``` function showWindowHref(){ var sHref = window.location.href; var args = sHref.split('?'); if(args[0] == sHref){ return ""; } var arr = args[1].split('&'); var obj = {}; for(var i = 0;i< arr.length;i++){ var arg = arr[i].split('='); obj[arg[0]] = arg[1]; } return obj; } var href = showWindowHref(); // obj console.log(href['name']); // xiaoming ``` # 3、js 字符串操作函數 我這里只是列舉了常用的字符串函數,具體使用方法,請參考網址。 * [ ] concat() – 將兩個或多個字符的文本組合起來,返回一個新的字符串。 * [ ] indexOf() – 返回字符串中一個子串第一處出現的索引。如果沒有匹配項,返回 -1 。 * [ ] charAt() – 返回指定位置的字符。 * [ ] lastIndexOf() – 返回字符串中一個子串最后一處出現的索引,如果沒有匹配項,返回 -1 。 * [ ] match() – 檢查一個字符串是否匹配一個正則表達式。 * [ ] substr() 函數 -- 返回從string的startPos位置,長度為length的字符串 * [ ] substring() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。 * [ ] slice() – 提取字符串的一部分,并返回一個新字符串。 * [ ] replace() – 用來查找匹配一個正則表達式的字符串,然后使用新字符串代替匹配的字符串。 * [ ] search() – 執行一個正則表達式匹配查找。如果查找成功,返回字符串中匹配的索引值。否則返回 -1 。 * [ ] split() – 通過將字符串劃分成子串,將一個字符串做成一個字符串數組。 * [ ] length – 返回字符串的長度,所謂字符串的長度是指其包含的字符的個數。 * [ ] toLowerCase() – 將整個字符串轉成小寫字母。 * [ ] toUpperCase() – 將整個字符串轉成大寫字母。 # 4、怎樣添加、移除、移動、復制、創建和查找節點? ## 1)創建新節點 ```   createDocumentFragment() //創建一個DOM片段   createElement() //創建一個具體的元素   createTextNode() //創建一個文本節點 ``` ## 2)添加、移除、替換、插入 ```   appendChild() //添加   removeChild() //移除   replaceChild() //替換   insertBefore() //插入 ``` ## 3)查找 ```   getElementsByTagName() //通過標簽名稱   getElementsByName() //通過元素的Name屬性的值   getElementById() //通過元素Id,唯一性 ``` # 5、寫出3個使用this的典型應用 ## 1)在html元素事件屬性中使用,如: ``` <input type=”button” onclick=”showInfo(this);” value=”點擊一下”/> ``` ## 2)構造函數 ``` function Animal(name, color) {   this.name = name;   this.color = color; } ``` ## 3)input點擊,獲取值 ``` <input type="button" id="text" value="點擊一下" /> <script type="text/javascript"> var btn = document.getElementById("text"); btn.onclick = function() { alert(this.value); //此處的this是按鈕元素 } </script> ``` ## 4)apply()/call()求數組最值 ``` var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(this, numbers); console.log(maxInNumbers); // 458 var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); console.log(maxInNumbers); // 458 ``` # 6、比較typeof與instanceof? * 相同點:JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空,或者是什么類型的。 * typeof的定義和用法:返回值是一個字符串,用來說明變量的數據類型。 ## 細節: > 1)typeof 一般只能返回如下幾個結果:number,boolean,string,function,object,undefined。 > 2)typeof 來獲取一個變量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因為如果 a 不存在(未聲明)則會出錯。 > 3)對于 Array,Null 等特殊對象使用 typeof 一律返回 object,這正是 typeof 的局限性。 > * Instanceof定義和用法:instanceof 用于判斷一個變量是否屬于某個對象的實例。 ### 實例演示: ``` a instanceof b?alert("true"):alert("false"); //a是b的實例?真:假 var a = new Array(); alert(a instanceof Array); // true alert(a instanceof Object) // true ``` 如上,會返回 true,同時 alert(a instanceof Object) 也會返回 true;這是因為 Array 是 object 的子類。 ``` function test(){}; var a = new test(); alert(a instanceof test) // true ``` 細節,如下,得到的結果為‘N’,這里的 instanceof 測試的 object 是指 js 語法中的 object,不是指 dom 模型對象。 ``` if (window instanceof Object){ alert('Y')} else { alert('N');} // 'N' ``` # 7、如何理解閉包? ## 1)定義和用法 > 當一個函數的返回值是另外一個函數,而返回的那個函數如果調用了其父函數內部的其它變量,如果返回的這個函數在外部被執行,就產生了閉包。 ## 2)表現形式 > 使函數外部能夠調用函數內部定義的變量。 ## 3)實例如下: (1)、根據作用域鏈的規則,底層作用域沒有聲明的變量,會向上一級找,找到就返回,沒找到就一直找,直到window的變量,沒有就返回undefined。這里明顯count 是函數內部的flag2 的那個count 。 ``` var count=10; //全局作用域 標記為flag1 function add(){ var count=0; //函數全局作用域 標記為flag2 return function(){ count+=1; //函數的內部作用域 alert(count); } } var s = add() s();//輸出1 s();//輸出2 ``` ## 4)變量的作用域 要理解閉包,首先必須理解Javascript特殊的變量作用域。 變量的作用域分類:全局變量和局部變量。 ### 特點: > (1)函數內部可以讀取函數外部的全局變量;在函數外部無法讀取函數內的局部變量。 > (2)函數內部聲明變量的時候,一定要使用var命令。如果不用的話,你實際上聲明了一個全局變量! ## 5)使用閉包的注意點 1. 濫用閉包,會造成內存泄漏:由于閉包會使得函數中的變量都被保存在內存中,內存消耗很大,所以不能濫用閉包,否則會造成網頁的性能問題,在IE中可能導致內存泄露。解決方法是,在退出函數之前,將不使用的局部變量全部刪除。 2. 會改變父函數內部變量的值。所以,如果你把父函數當作對象(object)使用,把閉包當作它的公用方法(Public Method),把內部變量當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數內部變量的值。 # 8、什么是跨域?跨域請求資源的方法有哪些? ## 1)什么是跨域? 由于瀏覽器同源策略,凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況: 網絡協議不同,如http協議訪問https協議。 端口不同,如80端口訪問8080端口。 域名不同,如qianduanblog.com訪問baidu.com。 子域名不同,如abc.qianduanblog.com訪問def.qianduanblog.com。 域名和域名對應ip,如www.a.com訪問20.205.28.90. ## 2)跨域請求資源的方法: ### (1)、porxy代理 定義和用法:proxy代理用于將請求發送給后臺服務器,通過服務器來發送請求,然后將請求的結果傳遞給前端。 實現方法:通過nginx代理; 注意點:1、如果你代理的是https協議的請求,那么你的proxy首先需要信任該證書(尤其是自定義證書)或者忽略證書檢查,否則你的請求無法成功。 ### (2)、CORS 【Cross-Origin Resource Sharing】 定義和用法:是現代瀏覽器支持跨域資源請求的一種最常用的方式。 使用方法:一般需要后端人員在處理請求數據的時候,添加允許跨域的相關操作。如下: ``` res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8", "Access-Control-Allow-Origin":'http://localhost', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type' }); ``` ## (3)、jsonp ### 定義和用法 > 通過動態插入一個script標簽。瀏覽器對script的資源引用沒有同源限制,同時資源加載到頁面后會立即執行(沒有阻塞的情況下)。 ### 特點 > 通過情況下,通過動態創建script來讀取他域的動態資源,獲取的數據一般為json格式。 實例如下: ``` <script> function testjsonp(data) { console.log(data.name); // 獲取返回的結果 } </script> <script> var _script = document.createElement('script'); _script.type = "text/javascript"; _script.src = "http://localhost:8888/jsonp?callback=testjsonp"; document.head.appendChild(_script); </script> ``` ### 缺點:   1、這種方式無法發送post請求(這里)   2、另外要確定jsonp的請求是否失敗并不容易,大多數框架的實現都是結合超時時間來判定。 # 9、談談垃圾回收機制方式及內存管理 ## 回收機制方式 ### 1)定義和用法 垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程中使用的內存。 ### 2)原理 垃圾收集器會定期(周期性)找出那些不在繼續使用的變量,然后釋放其內存。但是這個過程不是實時的,因為其開銷比較大,所以垃圾回收器會按照固定的時間間隔周期性的執行。 ### 3)實例如下: ``` function fn1() { var obj = {name: 'hanzichi', age: 10}; } function fn2() { var obj = {name:'hanzichi', age: 10}; return obj; } var a = fn1(); var b = fn2(); ``` fn1中定義的obj為局部變量,而當調用結束后,出了fn1的環境,那么該塊內存會被js引擎中的垃圾回收器自動釋放;在fn2被調用的過程中,返回的對象被全局變量b所指向,所以該塊內存并不會被釋放。 ### 4)垃圾回收策略:標記清除(較為常用)和引用計數。 #### 標記清除: *   定義和用法:當變量進入環境時,將變量標記"進入環境",當變量離開環境時,標記為:"離開環境"。某一個時刻,垃圾回收器會過濾掉環境中的變量,以及被環境變量引用的變量,剩下的就是被視為準備回收的變量。 到目前為止,IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略,只不過垃圾收集的時間間隔互不相同。 #### 引用計數: 1.   定義和用法:引用計數是跟蹤記錄每個值被引用的次數。 2.   基本原理:就是變量的引用次數,被引用一次則加1,當這個引用計數為0時,被視為準備回收的對象。 ## 內存管理 ### 1、什么時候觸發垃圾回收? 垃圾回收器周期性運行,如果分配的內存非常多,那么回收工作也會很艱巨,確定垃圾回收時間間隔就變成了一個值得思考的問題。 IE6的垃圾回收是根據內存分配量運行的,當環境中的變量,對象,字符串達到一定數量時觸發垃圾回收。垃圾回收器一直處于工作狀態,嚴重影響瀏覽器性能。 IE7中,垃圾回收器會根據內存分配量與程序占用內存的比例進行動態調整,開始回收工作。 ### 2、合理的GC方案 (1)、遍歷所有可訪問的對象; (2)、回收已不可訪問的對象。 ### 3、GC缺陷 (1)、停止響應其他操作; ### 4、GC優化策略 (1)、分代回收(Generation GC); (2)、增量GC # 10、開發過程中遇到的內存泄露情況,如何解決的? ## 1)定義和用法: 內存泄露是指一塊被分配的內存既不能使用,又不能回收,直到瀏覽器進程結束。C#和Java等語言采用了自動垃圾回收方法管理內存,幾乎不會發生內存泄露。我們知道,瀏覽器中也是采用自動垃圾回收方法管理內存,但由于瀏覽器垃圾回收方法有bug,會產生內存泄露。 ## 2)內存泄露的幾種情況: ### (1)、當頁面中元素被移除或替換時,若元素綁定的事件仍沒被移除,在IE中不會作出恰當處理,此時要先手工移除事件,不然會存在內存泄露。 實例如下: ``` <div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ document.getElementById("myDiv").innerHTML = "Processing..."; } </script> ``` 解決方法如下: ``` <div id="myDiv"> <input type="button" value="Click me" id="myBtn"> </div> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ btn.onclick = null; document.getElementById("myDiv").innerHTML = "Processing..."; } </script> ``` ### (2)、由于是函數內定義函數,并且內部函數--事件回調的引用外暴了,形成了閉包。閉包可以維持函數內局部變量,使其得不到釋放。 實例如下: ``` function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } } ``` 解決方法如下: ``` function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } obj=null; } ``` # 11、javascript面向對象中繼承實現? ## 面向對象的基本特征有:封閉、繼承、多態。 ## 在JavaScript中實現繼承的方法: 1)原型鏈(prototype chaining) 2)call()/apply() 3)混合方式(prototype和call()/apply()結合) 4)對象冒充 ## 繼承的方法如下: ### (1)prototype原型鏈方式: ``` function teacher(name){ this.name = name; } teacher.prototype.sayName = function(){ console.log("name is "+this.name); } var teacher1 = new teacher("xiaoming"); teacher1.sayName(); function student(name){ this.name = name; } student.prototype = new teacher() var student1 = new student("xiaolan"); student1.sayName(); // name is xiaoming // name is xiaolan ``` ### (2)call()/apply()方法 ``` function teacher(name,age){ this.name = name; this.age = age; this.sayhi = function(){ alert('name:'+name+", age:"+age); } } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); // teacher.apply(this,arguments); } var teacher1 = new teacher('xiaoming',23); teacher1.sayhi(); var student1 = new student('xiaolan',12); student1.sayhi(); // alert: name:xiaoming, age:23 // alert: name:xiaolan, age:12 ``` ### (3)混合方法【prototype,call/apply】 ``` function teacher(name,age){ this.name = name; this.age = age; } teacher.prototype.sayName = function(){ console.log('name:'+this.name); } teacher.prototype.sayAge = function(){ console.log('age:'+this.age); } function student(){ var args = arguments; teacher.call(this,args[0],args[1]); } student.prototype = new teacher(); var student1 = new student('xiaolin',23); student1.sayName(); student1.sayAge(); // name:xiaolin // age:23 ``` ### (4)對象冒充 ``` function Person(name,age){ this.name = name; this.age = age; this.show = function(){ console.log(this.name+", "+this.age); } } function Student(name,age){ this.student = Person; //將Person類的構造函數賦值給this.student this.student(name,age); //js中實際上是通過對象冒充來實現繼承的 delete this.student; //移除對Person的引用 } var s = new Student("小明",17); s.show(); var p = new Person("小花",18); p.show(); // 小明, 17 // 小花, 18 ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看