【前端領域高頻筆試面試】—— JavaScript相關（一）

目錄

1.已知數組var stringArray = [“This”, “is”, “Baidu”, “Campus”]

2.已知有字符串foo=”get-element-by-id”,寫function將其轉化成駝峰表示法

3.已知數組var numberArray = [3,6,2,4,1,5]；應用數組API進行操作

4.以YYYY-MM-DD格式輸出今天的日期

5.使用正則表達式將字符串"{$id}{$name}"中的{$id}替換成10，{$name}替換成Tony

6.為了保證頁面輸出安全，我們經常需要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將<, >, &, “進行轉義

7.foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？

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

9.用js實現隨機選取10–100之間的10個數字，存入一個數組，并排序

10.把兩個數組合并，并刪除第二個元素

11.javascript的typeof返回哪些數據類型

12.例舉3種強制類型轉換和2種隱式類型轉換

13.常見API與數組方法

14.IE和DOM事件流的區別

15.call和apply的區別

16.b繼承a的方法

17.添加 刪除 替換 插入到某個節點的方法

18.javascript的本地對象，內置對象和宿主對象

19.window.onload 和document.ready的區別

20.”==”和“===”的不同、javascript的同源策略是指？

21.JavaScript是一門什么樣的語言，它有哪些特點？

22.JavaScript的數據類型都有什么？

23.已知ID的Input輸入框，如何獲取這個輸入框的輸入值？

24.如何獲取到頁面中所有的checkbox？

25.設置一個已知ID的DIV的html內容為xxxx，字體顏色設置為黑色

26.當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎么做？

27.以下代碼輸出結果為？原因是？

28.以下代碼輸出結果為？原因是？

29.以下代碼輸出結果為？原因是？

30.看代碼給答案

31.怎樣添加、移除、移動、復制、創建和查找節點

32.正則表達式構造函數var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什么不同？正則表達式如何匹配郵箱？

33.以下代碼輸出結果為

34.Javascript中callee和caller的作用

36.如何讓頁面的狀態欄中顯示“已經選中該文本框”？

37.以下哪條語句會產生運行錯誤？

38.以下哪個單詞不屬于javascript保留字？

39.以下代碼輸出結果為

40.補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之后關閉窗口

1.已知數組var stringArray = [“This”, “is”, “Baidu”, “Campus”]

Alert出”This is Baidu Campus”：

alert(stringArray.join(" ")) ?//將數組轉化為字符串并用空格隔開

2.已知有字符串foo=”get-element-by-id”,寫function將其轉化成駝峰表示法

function combo(msg){

var arr=msg.split("-");

for(var i=1;i

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

3.已知數組var numberArray = [3,6,2,4,1,5]；應用數組API進行操作

（1）實現對該數組的倒排，輸出[5,1,4,2,6,3]；

numberArray.reverse( )

（2）實現對該數組的降序排列，輸出[6,5,4,3,2,1]；

numberArray.sort(function(a,b){return b-a})

4.以YYYY-MM-DD格式輸出今天的日期

var d = new Date();

// 獲取年，getFullYear()返回4位的數字

var year = d.getFullYear();

// 獲取月，月份比較特殊，0代表1月，11代表12月

var month = d.getMonth() + 1;

// 變成兩位

month = month < 10 ? '0' + month : month;

// 獲取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

5.使用正則表達式將字符串"{$id}{$name}"中的{$id}替換成10，{$name}替換成Tony

"{$id}{$id}_{$name}".replace(/{\$id}/g,'10').replace(/{\$name} /g,'Tony');

在正則表帶式中的直接量的形式：/要匹配的字符串/，/^ 嚴格模式 $/，/g默認在全局下找到所有匹配該字符串的元素，replace替換匹配到的字符串，特殊符號用 \ 轉義。

6.為了保證頁面輸出安全，我們經常需要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將<, >, &, “進行轉義

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function(match) {

switch (match) {

case “<”:

return “<”;

case “>”:

return “>”;

case “&”:

return “&”;

case “\””:

return “"”;

}

});

}

7.foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？

如果foo存在，值為foo，否則把bar的值賦給foo。

短路表達式：作為”&&”和”||”操作符的操作數表達式，這些表達式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。

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

var foo = 1;

(function(){

console.log(foo);

var foo = 2;

console.log(foo);

})()

//變量聲明提升后，以上代碼相當于：

var foo = 1;

(function(){

var foo;

console.log(foo); //undefined

foo = 2;

console.log(foo); // 2;

})()

函數聲明與變量聲明會被JavaScript引擎隱式地提升到當前作用域的頂部，但是只提升變量名不提升值。該代碼輸出undefined 和 2。

9.用js實現隨機選取10–100之間的10個數字，存入一個數組，并排序

function randomNub(aArray, len, min, max) {

if (len >= (max - min)) {

return '超過' + min + '-' + max + '之間的個數范圍' + (max - min - 1) + '個的總數';

}

if (aArray.length >= len) {

aArray.sort(function(a, b) {

return a - b

});

return aArray;

}

var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);

for (var j = 0; j < aArray.length; j++) {

if (nowNub == aArray[j]) {

randomNub(aArray, len, min, max);

return;

}

}

aArray.push(nowNub);

randomNub(aArray, len, min, max);

return aArray;

}

var arr=[];

randomNub(arr,10,10,100);

10.把兩個數組合并，并刪除第二個元素

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1); ? //在數組的第（參數1）個索引值開始，刪除（參數2）個數組元素，返回剩余的含有數組值的數組

slice()

常用數組API：

11.javascript的typeof返回哪些數據類型

alert(typeof [1, 2]); //object

alert(typeof 'leipeng'); //string

var i = true;

alert(typeof i); //boolean

alert(typeof 1); //number

var a;

alert(typeof a); //undefined

function a(){;};

alert(typeof a) //function

12.例舉3種強制類型轉換和2種隱式類型轉換

強制轉換：parseInt()、parseFloat()、Number()

隱式轉換：==、!!(!!常用于判斷非空)

if(!!a){

//a有內容才執行的代碼...

}

13.常見API與數組方法

Push()

pop()

Unshift()

shift()

split()

join()

14.IE和DOM事件流的區別

（1）執行順序不一樣；

（2）參數不一樣；

（3）事件加不加on；

（4）this指向問題。

15.call和apply的區別

call方法：

語法：call(thisObj，Object1,Object2...)

定義：調用一個對象的一個方法，以另一個對象替換當前對象，改變當前的this指向的問題。

說明：call 方法可以用來代替另一個對象調用一個方法，可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。 如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。

apply方法：

語法：apply(thisObj，[argArray])

定義：應用某一對象的一個方法，用另一個對象替換當前對象。

說明： 如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。 如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。

16.b繼承a的方法

function A( age, name ){

this.age = age;

this.name = name;

}

A.prototype.show = function(){

alert('父級方法');

}

function B(age,name,job){

A.apply( this, arguments );

this.job = job;

}

B.prototype = new A();

var b = new A(14,'俠客行');

var a = new B(15,'狼俠','俠客');

17.添加 刪除 替換 插入到某個節點的方法

obj.appendChid()

obj.removeChild()

obj.replaceChild()

obj.insertBefore()

18.javascript的本地對象，內置對象和宿主對象

本地對象為array、obj、regexp等可以new實例化；

內置對象為gload、Math等不可以實例化的；

宿主為瀏覽器自帶的document、window 等。

19.window.onload 和document.ready的區別

引入js文件的兩種方式：一種原生的，一種是jQuery庫的入口函數。

window.onload 是在dom文檔樹加載完和所有文件加載完之后執行一個函數Document.ready原生種沒有這個方法，jquery中有 $(document).ready(function(){代碼}),在dom文檔樹加載完之后執行一個函數（注意，這里面的文檔樹加載完不代表全部文件加載完）。

$(document).ready要比window.onload先執行，執行的上下文不同，window.onload只能出來一次，$(document).ready可以出現多次。

20.”==”和“===”的不同、javascript的同源策略是指？

前者會自動轉換類型，只是比較數值，不比較數據類型，后者即比較數據類型也比較數值。

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協議端口號的組合。

21.JavaScript是一門什么樣的語言，它有哪些特點？

javaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。JavaScript兼容于ECMA標準，因此也稱為ECMAScript。特點如下：

（1）是一種解釋性腳本語言（代碼不進行預編譯）；

（2）主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為；

（3）可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離；

（4）跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。

22.JavaScript的數據類型都有什么？

基本數據類型：String、boolean、Number、Undefined、Null；

引用數據類型：Object(Array、Date、RegExp、Function)；

//如何判斷某變量是否為數組數據類型？

if(typeof Array.isArray==="undefined")

{

Array.isArray = function(arg){

return Object.prototype.toString.call(arg)==="[object Array]"

};

}

23.已知ID的Input輸入框，如何獲取這個輸入框的輸入值？

document.getElementById(“ID”).value;

$(“#id”).val();

24.如何獲取到頁面中所有的checkbox？

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length; ?//緩存到局部變量

while (len--) { ?//使用while的效率會比for循環更高

if (domList[len].type == ‘checkbox’) {

checkBoxList.push(domList[len]);

}

}

25.設置一個已知ID的DIV的html內容為xxxx，字體顏色設置為黑色

var dom = document.getElementById(“ID”);

dom.innerHTML = “xxxx”

dom.style.color = “#000”

26.當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎么做？

直接在DOM里綁定事件：

在JS里通過onclick綁定：xxx.onclick = test

通過事件添加進行綁定：addEventListener(xxx, ‘click’, test)

補充：Javascript的事件流模型都有什么？

“事件冒泡”：事件開始由最具體的元素接受，然后逐級向上傳播；

“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體的；

“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡。

27.以下代碼輸出結果為？原因是？

var a;

alert(typeof a); ?// undefined

alert(b); ?// 報錯

Undefined是一個只有一個值的數據類型，這個值就是“undefined”，在使用var聲明變量但并未對其賦值進行初始化時，這個變量的值就是undefined。而b由于未聲明所以會報錯。注意未申明的變量（a is not defined）和聲明了未賦值的是不一樣的。

28.以下代碼輸出結果為？原因是？

var a = null;

alert(typeof a); ?//object

null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，所以用typeof檢測會返回”object”。

29.以下代碼輸出結果為？原因是？

var undefined;

undefined == null; // true

1 == true; ? // true

2 == true; ? // false

0 == false; ?// true

0 == ''; ? ? // true

NaN == NaN; ?// false

[] == false; // true

[] == ![]; ? // true

數據類型的隱式轉換：

（1）數字+字符串 ? 數字轉換為字符串后拼接；

（2）數字+布爾型 ? 布爾型轉換為數字，true--1，false--0；

（3）布爾型+字符串 ? 布爾型轉換為字符串后拼接；

（4）undefined+數字 ?undefined轉為NaN；

（5）減乘除時，數據自動轉為數值。

對于0、空字符串的判斷，建議使用 “===” ，會先判斷兩邊的值類型，類型不匹配時為false。

var foo = "11"+2-"1";

console.log(foo);

console.log(typeof foo);

執行完后foo的值為111，foo的類型為Number。

30.看代碼給答案

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value);

答案：2（考察引用數據類型細節）引用數據類型，數據放在堆中，指針指向這個數據。

31.怎樣添加、移除、移動、復制、創建和查找節點

（1）創建新節點

（2）添加、移除、替換、插入

（3）查找

32.正則表達式構造函數var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什么不同？正則表達式如何匹配郵箱？

當使用RegExp()構造函數的時候，不僅需要轉義引號（即\”表示”），并且還需要雙反斜杠（即\\表示一個\），使用正則表達字面量的效率更高。

郵箱的正則匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

33.以下代碼輸出結果為

for(var i=1;i<=3;i++){

setTimeout(function(){

console.log(i);

},0);

};

//4 4 4，Javascript事件處理器在線程空閑之前不會運行

34.Javascript中callee和caller的作用

caller是返回一個對函數的引用，該函數調用了當前函數；

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

35.如何檢索當前頁面中的表單元素中的所有文本框，并將它們全部清空？

36.如何讓頁面的狀態欄中顯示“已經選中該文本框”？

A. window.status=”已經選中該文本框” √

B. document.status=”已經選中該文本框”

C. window.screen=”已經選中該文本框”

D. document.screen=”已經選中該文本框”

37.以下哪條語句會產生運行錯誤？

A.var obj = (); √

B.var obj = [];

C.var obj = {};

D.var obj = //; √

38.以下哪個單詞不屬于javascript保留字？

A.with

B.parent √

C.class

D.void

39.以下代碼輸出結果為

var arr = new Array(1 ,3 ,5);

arr[4]='z';

arr2 = arr.reverse();

arr3 = arr.concat(arr2);

alert(arr3);

//彈出提示對話框：z,,5,3,1,z,,5,3,1

40.補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之后關閉窗口

JavaScript web前端 數據結構

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。