碼上快樂

相關內容    簡體    繁體

js的一些筆試面試題

本文轉載自   查看原文   2017-12-19 11:22   3435    筆試題/ javascript

1. 判斷字符串是否是這樣組成的，第一個必須是字母，后面可以是字母、數字、下划線，總長度為5-20

  1. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
  2. reg.test("a1a__a1a__a1a__a1a__");

2. 截取字符串abcdefg的efg

  1. var str = "abcdefg";
  2. if (/efg/.test(str)) {
  3.      var efg = str.substr(str.indexOf("efg"), 3);
  4.      alert(efg);
  5. }

3. 判斷一個字符串中出現次數最多的字符，統計這個次數

  1. //將字符串的字符保存在一個hash table中，key是字符，value是這個字符出現的次數
  2. var str = "abcdefgaddda";
  3. var obj = {};
  4. for (var i = 0, l = str.length; i < l; i++) {
  5.         var key = str[i];
  6.               if (!obj[key]) {
  7.                  obj[key] = 1;
  8.             } else {
  9.                  obj[key]++;
  10.               }
  11. }
  12.  
  13. /*遍歷這個hash table，獲取value最大的key和value*/
  14. var max = -1;
  15. var max_key = "";
  16. var key;
  17. for (key in obj) {
  18.          if (max < obj[key]) {
  19.                    max = obj[key];
  20.                    max_key = key;
  21.        }
  22. }
  23.  
  24. alert("max:"+max+" max_key:"+max_key);

4. IE與FF腳本兼容性問題

(1) window.event：
表示當前的事件對象，IE有這個對象，FF沒有，FF通過給事件處理函數傳遞事件對象

(2) 獲取事件源
IE用srcElement獲取事件源，而FF用target獲取事件源

(3) 添加，去除事件
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 獲取標簽的自定義屬性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]
IE；document.getElementByName()和document.all[name]均不能獲取div元素
FF：可以

(6) input.type的屬性
IE：input.type只讀
FF：input.type可讀寫

(7) innerText textContent outerHTML
IE：支持innerText, outerHTML
FF：支持textContent

(8) 是否可用id代替HTML元素
IE：可以用id來代替HTML元素
FF：不可以

5. 規避javascript多人開發函數重名問題
(1) 可以開發前規定命名規范，根據不同開發人員開發的功能在函數前加前綴
(2) 將每個開發人員的函數封裝到類中，調用的時候就調用類的函數，即使函數重名只要類名不重復就ok

6. javascript面向對象中繼承實現
javascript面向對象中的繼承實現一般都使用到了構造函數和Prototype原型鏈，簡單的代碼如下：

  1. function Animal(name) {
  2.    this.name = name;
  3. }
  4.  
  5. Animal.prototype.getName = function() {alert(this.name)}
  6. function Dog() {};
  7. Dog.prototype = new Animal("Buddy");
  8. Dog.prototype.constructor = Dog;
  9. var dog = new Dog();

7. FF下面實現outerHTML
FF不支持outerHTML，要實現outerHTML還需要特殊處理
思路如下：

在頁面中添加一個新的元素A，克隆一份需要獲取outerHTML的元素，將這個元素append到新的A中，然后獲取A的innerHTML就可以了。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>獲取outerHMTL</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="a"><span>SPAN</span>DIV</div>
  14. <span>SPAN</span>
  15. <p>P</p>
  16. <script type="text/javascript">
  17. function getOuterHTML(id){
  18. var el = document.getElementById(id);
  19. var newNode = document.createElement("div");
  20. document.appendChild(newNode);
  21. var clone = el.cloneNode(true);
  22. newNode.appendChild(clone);
  23. alert(newNode.innerHTML);
  24. document.removeChild(newNode);
  25. }
  26. getOuterHTML("a");
  27. </script>
  28. </body>
  29. </html>
  30.  

8. 編寫一個方法 求一個字符串的字節長度
假設：一個英文字符占用一個字節，一個中文字符占用兩個字節

  1. function GetBytes(str){
  2.          var len = str.length;
  3.          var bytes = len;
  4.       for(var i=0; i<len; i++){
  5.                     if (str.charCodeAt(i) > 255) bytes++;
  6.       }
  7.          return bytes;
  8. }
  9. alert(GetBytes("你好,as"));

9. 編寫一個方法 去掉一個數組的重復元素

  1. var arr = [1 ,1 ,2, 3, 3, 2, 1];
  2. Array.prototype.unique = function(){
  3.          var ret = [];
  4.          var o = {};
  5.          var len = this.length;
  6.          for (var i=0; i<len; i++){
  7.                    var v = this[i];
  8.                    if (!o[v]){
  9.                                 o[v] = 1;
  10.                                 ret.push(v);
  11.                   }
  12.        }
  13.         return ret;
  14. };
  15. alert(arr.unique());

10. 寫出3個使用this的典型應用
（1）在html元素事件屬性中使用，如:

  1. <input type=”button” onclick=”showInfo(this);” value=”點擊一下”/>

（2）構造函數

  1. function Animal(name, color) {
  2.          this.name = name;
  3.          this.color = color;
  4. }

（3）

  1. <input type="button" id="text" value="點擊一下" />
  2. <script type="text/<a href="http://www.bairuiw.com/tag/javascript" class="st_tag internal_tag" rel="tag" title="Posts tagged with Javascript">javascript</a>">
  3. var btn = document.getElementById("text");
  4. btn.onclick = function() {
  5. alert(this.value); //此處的this是按鈕元素
  6. }
  7. </script>

（4）CSS expression表達式中使用this關鍵字

  1. <table width="100px" height="100px">
  2.      <tr>
  3.               <td>
  4.              <div style="width:expression(this.parentNode.width);">div element</div>
  5.              </td>
  6.      </tr>
  7. </table>

12. 如何顯示/隱藏一個DOM元素？

  1. el.style.display = "";
  2. el.style.display = "none";

el是要操作的DOM元素


13. JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現

String類型有兩種生成方式：
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);

  1. function IsString(str){
  2.            return (typeof str == "string" || str.constructor == String);
  3. }
  4. var str = "";
  5. alert(IsString(1));
  6. alert(IsString(str));
  7. alert(IsString(new String(str)));

14. 網頁中實現一個計算當年還剩多少時間的倒數計時程序，要求網頁上實時動態顯示“××年還剩××天××時××分××秒”

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.    <title>倒計時</title>
  6. </head>
  7. <body>
  8. <input type="text" value="" id="input" size="1000"/>
  9. <script type="text/javascript">
  10.    function counter() {
  11.       var date = new Date();
  12.       var year = date.getFullYear();
  13.       var date2 = new Date(year, 12, 31, 23, 59, 59);
  14.       var time = (date2 - date)/1000;
  15.       var day =Math.floor(time/(24*60*60))
  16.       var hour = Math.floor(time%(24*60*60)/(60*60))
  17.       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  18.       var second = Math.floor(time%(24*60*60)%(60*60)%60);
  19.       var str = year + "年還剩"+day+"天"+hour+"時"+minute+"分"+second+"秒";
  20.       document.getElementById("input").value = str;
  21.    }
  22.    window.setInterval("counter()", 1000);
  23. </script>
  24. </body>
  25. </html>
  26.  

15. 補充代碼，鼠標單擊Button1后將Button1移動到Button2的后面

  1. <div> <input type=”button” id =”button1″ value=”1″ onclick=”???”>
  2. <input type=”button” id =”button2″ value=”2″ /”> </div>
  1. <div>
  2.           <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
  3.            <input type="button" id ="button2" value="2" />
  4. </div>
  5. <script type="text/javascript">
  6. function moveBtn(obj) {
  7.           var clone = obj.cloneNode(true);
  8.           var parent = obj.parentNode;
  9.           parent.appendChild(clone);
  10.           parent.removeChild(obj);
  11. }
  12. </script>

16. JavaScript有哪幾種數據類型
簡單：Number，Boolean，String，Null，Undefined
復合：Object，Array，Function

17. 下面css標簽在JavaScript中調用應如何拼寫，border-left-color，-moz-viewport
borderLeftColor
mozViewport

18. JavaScript中如何對一個對象進行深度clone

  1. function cloneObject(o) {
  2.         if(!o || 'object' !== typeof o) {
  3.             return o;
  4.        }
  5.        var c = 'function' === typeof o.pop ? [] : {};
  6.        var p, v;
  7.        for(p in o) {
  8.                      if(o.hasOwnProperty(p)) {
  9.                          v = o[p];
  10.                                      if(v && 'object' === typeof v) {
  11.                                          c[p] = Ext.ux.clone(v);
  12.                                     }
  13.                                     else {
  14.                                        c[p] = v;
  15.                          }
  16.         }
  17.     }
  18.     return c;
  19. };

19. 如何控制alert中的換行

  1. \n alert(“p\np”);

20. 請實現，鼠標點擊頁面中的任意標簽，alert該標簽的名稱．（注意兼容性）

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>鼠標點擊頁面中的任意標簽，alert該標簽的名稱</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. <script type="text/javascript">
  12. document.onclick = function(evt){
  13. var e = window.event || evt;
  14. var tag = e["target"] || e["srcElement"];
  15. alert(tag.tagName);
  16. };
  17. </script>
  18. </head>
  19. <body>
  20. <div id="div"><span>SPAN</span>DIV</div>
  21. <span>SPAN</span>
  22. <p>P</p>
  23. </body>
  24. </html>
  25.  

21. 請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象，如：
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

  1. function parseQueryString(url){
  2.            var params = {};
  3.            var arr = url.split("?");
  4.            if (arr.length <= 1)
  5.                            return params;
  6.            arr = arr[1].split("&");
  7.            for(var i=0, l=arr.length; i<l; i++){
  8.                            var a = arr[i].split("=");
  9.                            params[a[0]] = a[1];
  10.            }
  11.            return params;
  12. }
  13.  
  14. var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
  15. var ps = parseQueryString(url);
  16. alert(ps["key1"]);

22. ajax是什么? ajax的交互模型? 同步和異步的區別? 如何解決跨域問題?
Ajax是多種技術組合起來的一種瀏覽器和服務器交互技術，基本思想是允許一個互聯網瀏覽器向一個遠程頁面/服務做異步的http調用，並且用收到的數據來更新一個當前web頁面而不必刷新整個頁面。該技術能夠改進客戶端的體驗。包含的技術：
XHTML：對應W3C的XHTML規范，目前是XHTML1.0。

CSS：對應W3C的CSS規范，目前是CSS2.0
DOM：這里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中
JavaScript：對應於ECMA的ECMAScript規范
XML：對應W3C的XML DOM、XSLT、XPath等等規范
XMLHttpRequest：對應WhatWG的Web Applications1.0規范（http://whatwg.org/specs/web-apps/current-work/）

同步：腳本會停留並等待服務器發送回復然后再繼續
異步：腳本允許頁面繼續其進程並處理可能的回復

跨域問題簡單的理解就是因為JS同源策略的限制，a.com域名下的JS無法操作b.com或c.a.com下的對象，具體場景如下：

PS：（1）如果是端口或者協議造成的跨域問題前端是無能為力的

(2) 在跨域問題上，域僅僅通過URL的首部來識別而不會嘗試判斷相同的IP地址對應的域或者兩個域是否對應一個IP
前端對於跨域的解決辦法：
(1) document.domain+iframe
(2) 動態創建script標簽

23. 什么是閉包？下面這個ul，如何點擊每一列的時候alert其index?

  1. <ul id=”test”>
  2.     <li>這是第一條</li>
  3.     <li>這是第二條</li>
  4.     <li>這是第三條</li>
  5. </ul>

兩種方案，一是給每個li加一個自定義屬性，然后在點擊事件中alert出就行，

二是利用閉包。這兩種方法各有利弊，前者簡單，但增加了自定義屬性，改變了頁面HTML代碼，后者代碼簡潔但增加了內存消耗。代碼如下：

第一種方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute("index",i);
        lis[i].onclick=function(){
            alert(this.getAttribute("index"));
        }
    }

 第二種方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(x){
            return function(){
                alert(x);
            }
        }(i);
    }

 

24. 請給出異步加載js方案，不少於兩種
默認情況javascript是同步加載的，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進行再加載，對於一些意義不是很大的javascript，如果放在頁頭會導致加載很慢的話，是會嚴重影響用戶體驗的。

異步加載方式：
(1) defer，只支持IE
(2) async：
(3) 創建script，插入到DOM中，加載完畢后callBack，見代碼：

  1. function loadScript(url, callback){
  2.              var script = document.createElement("script")
  3.              script.type = "text/javascript";
  4.                             if (script.readyState){ //IE
  5.                                          script.onreadystatechange = function(){
  6.                                             if (script.readyState == "loaded" ||
  7.                                                         script.readyState == "complete"){
  8.                                                         script.onreadystatechange = null;
  9.                                                         callback();
  10.                                                      }
  11.                                           };
  12.                            } else { //Others: Firefox, Safari, Chrome, and Opera
  13.                                    script.onload = function(){
  14.                                      callback();
  15.                               };
  16.      }
  17.     script.src = url;
  18.     document.body.appendChild(script);
  19. }

25. 請設計一套方案，用於確保頁面中JS加載完全。

  1. var n = document.createElement("script");
  2. n.type = "text/javascript";
  3. //以上省略部分代碼
  4. //ie支持script的readystatechange屬性
  5. if(ua.ie){
  6.    n.onreadystatechange = function(){
  7.        var rs = this.readyState;
  8.        if('loaded' === rs || 'complete'===rs){
  9.            n.onreadystatechange = null;
  10.            f(id,url); //回調函數
  11.        }
  12. };
  13. //省略部分代碼
  14. //safari 3.x supports the load event for script nodes(DOM2)
  15.    n.addEventListener('load',function(){
  16.        f(id,url);
  17.    });
  18. //firefox and opera support onload(but not dom2 in ff) handlers for
  19. //script nodes. opera, but no ff, support the onload event for link
  20. //nodes.
  21. }else{
  22.    n.onload = function(){
  23.        f(id,url);
  24.    };
  25. }

26. js中如何定義class,如何擴展prototype?
Ele.className = “***”; //***在css中定義，形式如下：.*** {…}
A.prototype.B = C;
A是某個構造函數的名字
B是這個構造函數的屬性
C是想要定義的屬性的值

27. 如何添加html元素的事件,有幾種方法.
（1） 為HTML元素的事件屬性賦值
（2） 在JS中使用ele.on*** = function() {…}
（3） 使用DOM2的添加事件的方法 addEventListener或attachEvent

28. documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分

29. 多瀏覽器檢測通過什么？
（1） navigator.userAgent
（2） 不同瀏覽器的特性，如addEventListener

30. js的基礎對象有那些, window和document的常用的方法和屬性列出來
String,Number,Boolean

Window:
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
屬性：name,parent,screenLeft,screenTop,self,top,status

Document
方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
屬性：cookie,doctype,domain,documentElement,readyState,URL,

31. 前端開發的優化問題
（1） 減少http請求次數：css spirit,data uri
（2） JS，CSS源碼壓縮
（3） 前端模板 JS+數據，減少由於HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
（4） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能
（5） 用setTimeout來避免頁面失去響應
（6） 用hash-table來優化查找
（7） 當需要設置的樣式很多時設置className而不是直接操作style
（8） 少用全局變量
（9） 緩存DOM節點查找的結果
（10） 避免使用CSS Expression
（11） 圖片預載
（12） 避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢

32. 如何控制網頁在網絡傳輸過程中的數據量
啟用GZIP壓縮
保持良好的編程習慣，避免重復的CSS，JavaScript代碼，多余的HTML標簽和屬性

33. Flash、Ajax各自的優缺點，在使用中如何取舍？
Ajax的優勢
（1） 可搜索性
（2） 開放性
（3） 費用
（4） 易用性
（5） 易於開發

Flash的優勢
（1） 多媒體處理
（2） 兼容性
（3） 矢量圖形 比SVG，Canvas優勢大很多
（4） 客戶端資源調度，比如麥克風，攝像頭

 

 

本文轉載自http://blog.csdn.net/u010227447/article/details/45717353/


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 一些蛋疼的筆試面試題（1）：井蓋為什么是圓的？ 淘寶前端的一些面試題 關於 Kafka 的一些面試題目 設計的一些kubernetes面試題 一些Hadoop面試題及答案 Spring的一些面試題（轉） 從深圳回武漢的面試感想以及一些面試題 JAVA筆試與面試題 設計的一些kubernetes面試題目 數據庫相關------一些面試題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM