JavaScript面試題

1.下面代碼執行結果是（）

var a=123;

fn(a);

function fn(){a=456}

document.write(a);

 

A.456　　B.122　　C.報錯　　D.undefined 

考點：變量的作用域，全局變量和局部變量的轉換

2.html文檔中怎么區分節點對象的節點類型（）

A.typeof 　　B.type 　　C.nodeType 　　D.nodeName

typeof 　獲取數據類型
type    沒有這個方法
nodeType  節點類型
    元素節點 1
    屬性節點  2
    文本節點   3
    注釋節點   8
    文檔節點  9
nodeName  節點名稱
    元素節點    標簽名相同 DIV
    屬性節點    屬性名稱
    文本節點    #text

4.下面對象或數組的創建方式錯誤的是（）

A.var obj={};

B.Var obj={[]};

C.Var obk=[{}];

D.Var obj={age:123};

 

5.下面代碼的執行結果是（）

var i=12;

var sum=i++ + ++i + ++i*2 + i-- + i--

document.write(sum+’ ’+i);

A.85   13  　　B.84 12　　C.83 11　　D.85 14

 

5.數組中哪個方法不可以實現刪除數組本身中的數據（）

A.shift()　　B.pop()　　C.splice()　　D.slice()

shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值
pop() 方法用於刪除最后一個元素，並返回被刪除的元素
splice(開始位置，刪除的個數，要添加的新內容)
Slice(開始位置，結束位置)，從已有的數組中返回選定的內容

 

6.下面哪個不是javascript中的數據類型（）

A.string 　　B.number 　　C.undefined 　　D.num

 

7.下面哪個不是javascript中的關鍵字或保留字 （）

A.class　　B.var　　C.link　　D.Instanceof

object instanceod constructor   //object要檢測的對象，constructor某個構造函數。
"string" instanceof String  //返回false，檢查原型鏈會找到undefined。
new String() instanceof String  //true
new String('string') instanceof String  //true
new String() instanceof Object  //true
console.log('123' instanceof Object);  // false
console.log(new String('123') instanceof Object);  //true

 

8.下面代碼的執行結果肯定不會是（）

document.write(parseInt(Math.random()*3));

A.1 　　B.0 　　C.2 　　D.3

Math.random()*3的結果最大為2.7，所有，取整之后最大為2

9.New Date(2012,12,8).getMonth()的結果是什么

A.12   　　 B. 11 　　C.0   　　D.13

月份是從0開始到11，月12會向年進1，年變成2013，月為0

 

10.請閱讀下面代碼  var arr=[25,111,18,12,92,5,15];如何將上面數組按照降序排序

A.arr.sort()

B.arr.sort(function(a,b){return a-b;})

C.arr.sort(function(a,b){return b-a;})

D.arr.sort(b-a)

sort方法加比較函數，return a-b，做的就是升序；return b-a，做的就是降序

 

11.下面描述錯誤的是

A.document.head 返回head元素

B.document.body 返回body元素

C.document.html  返回html元素

D.document.documentElement  返回html元素

    console.log(document.head);  // head
    console.log(document.body);  // body
    console.log(document.html);  
    console.log(document.documentElement); // 整個文檔結構 

 

12.var n=’liang zi ju zhen’.indexOf(‘zi’,7); n的值為

A.-1　　B.5　　C.報錯　　D.-10

indexOf(查找的內容,開始查找的位置)查找字符串第一次出現的位置，它的取值是0到字符串的長度-1，如果省略就從字符串的首字符開始檢索，如果沒有檢索到就返回-1，對大小寫敏感

 

13. 0.1+0.7==0.8該表達式返回

　A.true　　B.false　　C.infinity　　D.NaN

 

14.哪個屬性可以獲得滾動條已經滾動的垂直距離

A.document.scrollTop

B.document.top

C.document.body.scrollTop

D.window.scrollTop

document.body.scrollTop; 對應的是 body 標簽
還可以使用
document.documentElement.scrollTop; 對應的是 html 標簽；

 

15.var arr=[1,2,3,4]; alert(arr.concat(1,2,3,[1,2,3],5).length)

A.4　　B.9　　C.11　　D.5

concat會把[1,2,3]拆分開，concat的返回值是拼接成的新數組
如果是alert(arr.length);=>4

 

16.下面結果返回值為4的有(多選)

A.Number(‘4’)

B.parseInt(‘4aa11’)

C.Math.floor(3.5)

D.Math.round(3.5)

 

17.以下返回結果為類數組對象的語句為(多選)

A.document.getElementById()

B.document.getElementsByClassName()

C.document.querySelector()

D.document.querySelectAll() 

document.getElementById是通過id查找元素；
document.querySelector是ES5新方法，能夠根據id，類名，標簽名查找元素，如果參數寫的是類名或者標簽名，找到的是第一個元素，這兩個方法找到的都是單個元素
document.getElementByClassName()和document.querySelectAll()找到的是集合，是多個元素

 

18.var now=new Date(),設置3天后的事件正確寫法是（多選）

A.now.setDate(now.getDate()+3);

B.now.setTime(now.getTime()+3);

C.now.setTime(now.getTime()+3*1000*3600*24);

D.now.setTime(now.getDate()+3*1000*3600*24);

now.getDate()獲取的是當前時間的天；
now.getTime() 獲取的是時間戳
now.setTime() 以毫秒設置 Date 對象
var d = new Date()
d.setTime(77771564221)
document.write(d)

 

19.下面對字符串的描述正確的是（多選）

A.字符串的長度可以通過length屬性獲取

B.字符串可以通過charAt()獲取某個字符對應的索引

C.字符串可以通過indexOf()獲取某個字符對應的索引

D.字符串可以通過join()轉為數組

length 獲取常速
charAt() 獲取下標值
indexOf() 自字符串第一次出現的位置
Join 數組轉為字符串
Split 字符串轉為數據

 

20.下面那些是屬於DOM操作的方法(多選)

A.removeChildren()

B.appendChild()

C.children

removeChild()

removeChildren是錯誤方法，應該是removeChild
children是選擇器，是獲取元素的，不能操作元素
appendChildren 插入節點

 

21.請選擇結果為真的表達式 （）

A. null  instanceof  Object

B. null == undefined

C. NaN == NaN

D.  false == undefined

A instanceof B 判斷A是否是B類型
NaN（不是一個數字），任何一個NaN !=NaN

 

22. 下面程序的執行結果是（）

var name = 'world';
(function(){
    if(typeof name === 'undefined'){
        var name = 'Jack';
        console.log("Goodbye " + name );
    }else{
        console.log('hello '+name);
    }
})(); 

A. Goodbye  Jack

B. Hello Jack

C. Hello undefined

D. Hello World

在函數外聲明的是全局變量，在函數內部聲明的是局部變量
var 擁有預先聲明的作用

 

23. 下面關於DOM事件流的表述哪些是正確的

A. 時間流包括兩個階段：事件捕獲階段、事件冒泡階段

B. IE跟標准瀏覽器對於DOM事件流實現不一樣

C. 假設parentEle是childEle的父節點 綁定事件：parentEle.addEventListener('click', fn1, false); 和  childEle.addEventListener('click', fn2, false); 當點擊childEle的時候，fn1將先於fn2觸發

D. addEventListener 第三個參數true代表支持捕獲，false代表不支持捕獲

 

24. 當鏈接指向下列哪一種文件時，不打開該文件，而是提供給瀏覽器下載（）

A. ASP

B. HTML

C. ZIP

D. CGI

ZIP，rar，7Z這幾種都屬於壓縮格式，直接點擊的時候，執行的是下載功能而不是打開的方式

 

25. 下列哪一項表示的不是按鈕（ ）

A. type=‘button’

B. type=‘reset’

C. type=‘image’

D. type=‘button’

type=image可以用來作為表單的圖片按鈕
表面上 type=image和type=submit都可以相應回車，並且都能提交。
不過唯一的區別就是type=image的input提交方式會把按鈕點擊的位置坐標x,y提交過去。
對於通常的表單應用來說，這樣多一兩個參數並沒有問題，因為我們在接收端中都是按照指定的名稱來處理參數，所以即使多了兩個參數也不會有任何問題。

 

26.下列哪一項是在新窗口中打開網頁（ ）

A. _self

B. _blank

C. _top

D. _parent

 

27.在html中，一下選項不是鏈接的目標屬性（ ）

A. self

B. new

C. blank

D. top

 

 

JavaScript面試題 - 簡答題

1.列舉javaScript的3種主要數據類型，2種復合數據類型和2種特殊數據類型。

主要數據類型：string, boolean, number

復合數據類型：function, object

特殊類型：undefined，null

 

2.思考：輸出"B" + "a" + + "B" + "a"的值

BaNaNa。

3.思考：[] == [] 的值為？

false

 4.以下代碼輸出結果為？

 

var bool=true;
setTimeout(function(){bool=false},0);
console.log(bool);

// 結果  true

 

5.請閱讀下面代碼

var arr = [1,2,3,4,5];
var arr2 = arr; arr2.push(0); arr2.concat(6); console.log(arr); // [1, 2, 3, 4, 5, 0]

6.請閱讀下面代碼

function aa(){
    return 1;
}
console.log(aa == aa());  //  false
console.log(aa || aa());  
//  ƒ aa(){
//            return 1;
//      }

 7.請描述一下cookie，sessionStrorage，和localStorage的區別

瀏覽器的緩存機制提供了可以將用戶數據存儲在客戶端上的方式，可以利用cookie,session等跟服務端進行數據交互。
1.cookie和session
    cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。
區別：
    保持狀態：cookie保存在瀏覽器端，session保存在服務器端

HTML5中與本地存儲相關的兩個重要內容：Web Storage與本地數據庫。其中，Web Storage存儲機制是對HTML4中cookie存儲機制的一個改善。由於cookie存儲機制有很多缺點，HTML5不再使用它，轉而使用改良后的Web Storage存儲機制。本地數據庫是HTML5中新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須保存在服務器端數據庫中的內容現在可以直接保存在客戶端本地了，這大大減輕了服務器端的負擔，同時也加快了訪問數據的速度。

具體來說，Web Storage又分為兩種：
    1.sessionStorage：將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。

    2.localStorage：將數據保存在客戶端本地的硬件設備(通常指硬盤，也可以是其他硬件設備)中，即使瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。

    這兩者的區別在於，sessionStorage為臨時保存，而localStorage為永久保存。

    到目前為止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的瀏覽器支持sessionStorage與localStorage的使用。

 

8. 寫一個function，清除字符串前后的空格（兼容所有瀏覽器）

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

 

9. position包含幾種屬性？absolute和relative的區別？

 

10.js中this的工作原理

1.函數默認執行 :此時this指向Window
2.函數的隱式執行 : this指向函數的直接執行對象
3.函數的顯式執行 : this指向指定對象
4.構造函數執行(通過new執行)

 

11.利用@media screen 實現網頁布局的自適應，判斷媒體類型，執行不同的css樣式屬性，重要屬性：max-width：設置最小分辨率大小；max-width：設置最大分辨率大小

 

12. 程序題

function foo(){

　　var a=2;

　　this.bar();

}

function bar(){

　　console.log(this.a);

}

A = 6;

bar();會輸出什么？為什么？

undefined 因為不存在全局變量a

 

13. data-*屬性的作用是什么，日常工作中如何使用？

 

14. call，apply，bind的區別？

 

15. 簡述css的flex布局

 

 16. 請用JS手寫快速排序

var arr = [5, 11, 23, 54, 0, 22, 12, 43, 9];

function quickSort(arr){
    if(arr.length <= 1) {
        return arr
    };
    var mNumIndex = Math.floor(arr.length/2);
    var mNum = arr.splice([mNumIndex], 1)[0];
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++){
        if (arr[i] < mNum){
            left.push(arr[i])
        }else {
            right.push(arr[i])
        };
    };
    return quickSort(left).concat([mNum], quickSort(right));
}
console.log(quickSort(arr));

 

 

17. 閱讀以下html和js代碼，分別寫出兩段代碼點擊按鈕后控制台的輸出，並簡述理由

<button id='test'>click me </button>

<script>
    function Button(){
        this.clicked = false;
        this.click = function(){
            this.clicked = true;
            console.log(this);
        }
    }
    let button = new Button();
    var elem = document.querySelector('#test');
    elem.addEventListener('click',button.click); // <button id='test'>click me </button>

    let button = {
        clicked: false,
        click:()=>{
            this.clicked = true
            console.log(this);
        }
    }
    var elem = document.querySelector('#test');
    elem.addEventListener('click',button.click); // window 對象
</script>

理由：let 和 全局function 的區別