前端面試題集錦——程式題
程式題
1、看下列程式碼輸出為何？解釋原因。
var a;
alert(typeof a); // undefined
alert(b); // 報錯
解釋：Undefined是一個只有一個值的資料型別，這個值就是“undefined”，在使用var宣告變數但並未對其賦值進行初始化時，這個變數的值就是undefined。而b由於未宣告將報錯。注意未申明的變數和聲明瞭未賦值的是不一樣的。
2、看下列程式碼,輸出什麼？解釋原因。
var a = null;
alert(typeof a); //object
解釋：null是一個只有一個值的資料型別，這個值就是null。表示一個空指標物件，所以用typeof檢測會返回”object”。
3、看下列程式碼,輸出什麼？解釋原因。
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
- undefined與null相等，但不恆等（===）
- 一個是number一個是string時，會嘗試將string轉換為number
- 嘗試將boolean轉換為number，0或1
- 嘗試將Object轉換成number或string，取決於另外一個對比量的型別
- 所以，對於0、空字串的判斷，建議使用 “=” 。“=”會先判斷兩邊的值型別，型別不匹配時為false。
4、看下面的程式碼，輸出什麼，foo的值為什麼？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
執行完後foo的值為111，foo的型別為String。
5、看程式碼給答案。
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
答案：2（考察引用資料型別細節）
6、已知陣列var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“”))
7、已知有字串foo=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”。
function combo(msg){
var arr=msg.split("-");
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
(考察基礎API)
8、var numberArray = [3,6,2,4,1,5]; （考察基礎API）
1) 實現對該陣列的倒排，輸出[5,1,4,2,6,3]
2) 實現對該陣列的降序排列，輸出[6,5,4,3,2,1]
function combo(msg){
var arr=msg.split("-");
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
9、輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26
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);
10、將字串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10，{$name}替換成Tony （使用正則表示式）
答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10’).replace(/{\$name}/g, ‘Tony’);
11、為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
12、foo =foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？
答案：if(!foo) foo = bar; //如果foo存在，值不變，否則把bar的值賦給foo。
短路表示式：作為”&&”和”||”操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。
13、看下列程式碼，將會輸出什麼?(變數宣告提升)
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
答案：輸出undefined 和 2。上面程式碼相當於：
var foo = 1;
function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
}
函式宣告與變數宣告會被JavaScript引擎隱式地提升到當前作用域的頂部，但是隻提升名稱不會提升賦值部分。
14、用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));
}
iArray.sort();
15、把兩個數組合並，並刪除第二個元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
16、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
function serilizeUrl(url) {
var result = {};
url = url.split("?")[1];
var map = url.split("&");
for(var i = 0, len = map.length; i < len; i++) {
result[map[i].split("=")[0]] = map[i].split("=")[1];
}
return result;
}
17、正則表示式建構函式var reg=newRegExp(“xxx”)與正則表達字面量var reg=//有什麼不同？匹配郵箱的正則表示式？
答案：當使用RegExp()建構函式的時候，不僅需要轉義引號（即\”表示”），並且還需要雙反斜槓（即\表示一個\）。使用正則表達字面量的效率更高。
郵箱的正則匹配：
var regMail = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
18、看下面程式碼，給出輸出結果。
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
};
答案：4 4 4。
原因：Javascript事件處理器線上程空閒之前不會執行。追問，如何讓上述程式碼輸出1 2 3？
for(var i=1;i<=3;i++){
setTimeout((function(a){ //改成立即執行函式
console.log(a);
})(i),0);
};
1 //輸出
2
3
19、寫一個function，清除字串前後的空格。（相容所有瀏覽器）
使用自帶介面trim()，考慮相容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
20、.Javascript中callee和caller的作用？
答案：
caller是返回一個對函式的引用，該函式呼叫了當前函式；
callee是返回正在被執行的function函式，也就是所指定的function物件的正文。
21、如果一對兔子每月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）
var result=[];
function fn(n){ //典型的斐波那契數列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
22、var a=[];a[0]=0;a[1]=1;a[4]=4;請問a.length的值是多少？a[3]的輸出結果是什麼？
5 undefined
23、var a=[5,6];var b=a;b[0]="hello";alert(a[0]);請問值是多少？
“hello”
24、typeof(null),typeof(undefined),typeof(NaN),typeof(NaN==NaN),說出上面程式碼執行結果？
object
undefined
number
boolean
25、請寫出下面輸出的值
function doSomething(){
for(var i = 0; 4 > i; i++) {
var k = 100;
aMrg +=’,’ + (k + i);
}
}
var k = 1,aMrg = k;
doSomething();
aMrg +=k;
log(aMrg);
1,100,101,102,1031
26、請寫出下面輸出的值
Console.log(undefined || 1);//值___1__
Console.log(null || NaN);//值__NaN___
Console.log(0 && 1);//值__0___
Console.log(0 && 1 || 0);//值__0___
27、看下列程式碼，<p>標籤內的文字是什麼顏色的？紅色
<style>
.classA{color: blue};
.classB{color: red};
</style>
<body>
<p class=”classB classA”>123</p>
</body>
28、你面前有一座高塔，這座高塔有N(N > 100)個臺階，你每次只能往前邁1個或者2個臺階，請寫出程式計算總共有多少種走法？
這個案例滿足斐波那契定律 1，1，2，3，5，8，13，21, 34, 55, 89, 144
var n1 = 1;
var n2 = 1;
var n3 = n1 + n2;
for (var i = 3; i <= n; i++) {
n3 = n1 + n2;
n1 = n2;//往後推一項
n2 = n3;//往後推一項
}
console.log(n3);
29、請閱讀下面的CSS程式碼
#left {
color: white !important;
}
#container #left {
color: red;
}
#left {
color: green !important;
}
.container #left {
color: blue;
}
則在如下html中
<div class=”container” id=”container”>
<span id=”left”>left</span>
</div>
#left最終color屬性值為？綠色
30、下面這段程式碼想要迴圈延時輸出結果0 1 2 3 4，請問輸出結果是否正確，如果不正確說明為什麼，並修改迴圈內的程式碼使其輸出正確的結果。
for (var i = 0; i < 5; ++i) {
setTimeout (function () {
console.log(i + ‘’);
},100*i);
}
不正確，先執行FOR迴圈。for迴圈完成後，在去執行setTimeout。但是這個時候I已經是5了，所以輸入了5次5
for(var i = 0; i <5; ++i) {
var a = 0;
setTimeout (function () {
console.log(a++);
},100*i);
}
31、完成函式showlmg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示
<body>
<script type=”text/javascript”>
Function showImg (oSel) {
};
</script>
<img id=”pic” src=”img1.jpg” width=”200” height=”200”>
<br/>
<selectid=”sel” onchange=”showImg(this)”>
<optionvalue=”img1”>城市生活</option>
<optionvalue=”img2”>都市早報</option>
<optionvalue=”img3”>青山綠水</option>
</select>
</body>
varpic=document.getElementById('pic')
function showImg (oSel) {
pic.src=oSel.options[oSel.selectedIndex].value
console.log(pic.src);
};
答案說明：當select發生改變的時候呼叫showImg函式，實參為this（select物件本身），可以通過select物件的屬性來為pic的src賦值實現圖片切換
32、完成foo()函式的內容，要求能彈出對話方塊提示當前選中的是第幾個單選框
<html>
<head>
<meat http-equiv=”Content-Type”content=”text/html; charset=utf-8”>
</head>
<body>
<scripttype=”text/javascript”>
functionfoo() {
};
</script>
<form name=”form1” onsubmit=”retuen foo()”>
<inputtype=”radio” name = “radioGroup”>
<input type=”radio” name = “radioGroup”>
<inputtype=”radio” name = “radioGroup”>
<input type=”radio” name = “radioGroup”>
</form>
</body>
</html>
var a=document.getElementsByTagName('input')
function foo() {
for(var i=0;i<a.length;i++){
if(a[i].checked){
alert(i+1)
}
}
}
題出的有問題，onsubmit只有在提交的時候才會觸發這裡面沒有submit按鈕，在提交事件觸發的時候遍歷哪個input表單是選中狀態然後alert出來
33、計算下面程式執行結果
var msg = ‘hello’;
function great(name, attr) {
name = ‘david’;
var greating = msg + name + ‘!’;
var msg = ‘您好’;
For (var i = 0 ; i < 10;i++) {
var next = msg + ‘您的id是’ + i*2 + i;
}
console.log(arguments[0]);
console.log(arguments[1]);
console.log(greating);
console.log(next);
}
geat(‘Tom’);
答案：david //引數1
hellowworld 01.html:20 undefined //引數2 未傳入為未定義
hellowworld 01.html:21 undefineddavid! //name雖然是引數，但是引數重新賦值為david了，msg因為變數宣告提升，所以值為undefined
您好您的id是189//因為number+string=string，所以for迴圈最後一次宣告next=****18+9
34、下面這段JS輸出什麼，並簡述為什麼？
function Foo() {
var i = 0;
return function () {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
console.log(i);
0 //f1=Foo() 相當於f1賦值為函式Foo()的返回值f1=function（）{console.log(i++)}
1 //因為f1=了一個function所以有了作用域，f2和f1不同，不在一個記憶體中
0
報錯 //i為Foo內部的變數全域性不可訪問，全域性中沒有i變數所以會報錯
35、請寫出下面輸出的值
a)
var num = 1;
var fun = function () {
console.log(num);//值___undefined___
var num = 2;
console.log(num);//值___2___
}
fun();
b)
var num = 1;
function fun () {
console.log(num);//值___1____
num = 2;
console.log(num);//值___2____
}
fun();
36、寫出以下程式執行的結果
1)
var a = 10;
a.pro = 10;
console.log(a.pro + a);//NAN
number物件不可以定義私有屬性 namber+非數字和字元的值就等於NaN
2)
var s = ‘hello’;
s.pro = ‘world’;
console.log(s.pro + s); //undefined
hello s位字串，字串不可以自定義屬性，所以s.pro為undefined 字串做加運算會強制拼接位字串
3)
console.log(typeof fn);
function fn() {};
var fn;
//function 函式提升優先於變數提升
4)
var f = true;
If(f === true) {
var a = 10;
}
function fn() {
var b = 20;
c = 30;
}
fn();
console.log(a);
//10
37、請看如下的程式碼，寫出結果
var a = 5,b = 3;
function test() {
alert(b++);
var a = 4;
alert(--a);
alert(this.a);
}
1)tese(),三次alert()的值依次是什麼？335 435 535
2)new test()，三次alert()的值依次是什麼？ 33undefined 43undefined53undefined //this更改了指向原來是指向window 用了new關鍵字後指向test test木有a屬性所以為undefined
38、p最後顯示什麼顏色。怎麼讓p的顏色變成黑色，並簡要說明css選擇器優先順序關係
<style>
#classA{color:yellow};
p.classB(color:red);
</style>
<body>
<p id=”classA” class=”classB”>123</p>
</body>
//p#classA{color：black}
39、關於正則表示式宣告6位數字的郵編，一下程式碼正確的是©
A.var reg = /\d6/;
B.var reg = \d{6};
C.var reg = /\d{6}/;
D.var reg = new RegExp (“\d{6}”);
40、關於JavaScript裡xml處理，一下說明正確的(A)
A.xml是種可擴充套件標記語言，格式更規範，是作為未來html的替代 //貌似XML是被替代的
B.Xml一般用於傳輸和儲存資料，是對html的補充，兩者的目的不同
C.在JavaScript裡解析和處理xml資料時，因為瀏覽器的不同，其做法也不同
D.在IE瀏覽器裡處理xml，首先需要建立ActiveXObject物件
41、請選擇對javascript理解有誤的(B)
A.javascript是網景公司開發的一種基於事件和驅動網頁尾本語言
B.JScript是javascript的簡稱 //微軟自己的瀏覽器才支援
C.FireFox和IE存在大量相容性問題的主要原因在於他們對javascript的支援不同
D.AJAX技術一定要使用javascript技術
42、在Jquery中下面哪一個是用來追加到指定元素的末尾(B)
A.inserAfter()
B.Append()
C.appendTo()
D.After()
43、在javascript中定義變數var a=”35”,var b = “7”運算a % b 的結果為©
A.357
B.57
C.0
D.5
44、下面哪個屬於javascript的字元型C
A.False
B.你好
C.“123”
D.Null
45、下面哪個屬於javascript的布林值©
A.1.2
B.”true”
C.false
D.null
46、請選擇結果為真的表示式©
A.null instanceof Object
B.Null === undefined;
C.null == undefined
D.NaN == NaN
47、下列運算方式不屬於邏輯運算的是(D)
A.!a
B.a&&b
C.a||b
D.a>b
48、宣告一個物件，給它加上name屬性和show方法顯示其name值，以下程式碼中正確的是(D)
A.var obj = [name : “zhangsan” ,show: function(){alert(name);}];
B.Var obj = {name : “zhangsan”,show: “alert(this.name)”};
C.Var obj = {name : “zhangsan”,show: function () {alert(name);}};
D.Var obj = {name : “zhangsan”,show: function () {alert(this.name);}}
49、以下過於Array陣列物件的說法不正確的是©
A.對數組裡資料的排序可以用sort函式，如果排序效果非預期，可以給sort函式加一個排序函式的引數
B.reverse用於對陣列資料的倒序排列
C.向陣列的最後位置加一個新元素，可以用pop方法 //push吧
D.unshift方法用於向陣列刪除一個元素
50、要將頁面的狀態顯示”已經選中該文字”，下列JavaScript語句正確的是(A)
A.window.status = “已經選中該文字”
B.Document.status = “已經選中該文字”
C.Window.screen = “已經選中該文字”
D.Document.screen = “已經選中該文字”
51、點選頁面的按鈕，使之開啟一個新視窗，載入一個頁面，以下JavaScript程式碼中可執行的是(D)
A.<input type=”button” value=”new”onclick=”open(‘new.html’,’_blank’)”>
B.<input type=”button” value=”new”onclick=”window.location=’new.html’;”>
C.<input type=”button” value=”new”onclick=”location.assign(‘new.html’);”>
D.<form target=”_blank” action=”new.html”><input type=”submit” value=”new”></form>
52、下面的JavaScript語句中，實現檢索當前頁面中的表單元素中的所有文字框，並將它們全部清空(B)
A.
if(form1.elements[i].type ==”text”)
form1.elements[i].value = “”;
}
B.
if(forms[0].elements[i].type == “text”)
form[0].elements[i].value = “”;
}
C.
form.elements[i].value = “”;
D.
for(var j = 0;j <document.forms[i].elements.length;j++) {
if(document.forms[i].elements[j].type== “text”)
document.forms[i].elements[j].value= “”;
}
}
53、在表單(form1)中有一個文字框元素(fname)，用於輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個”-”，後面是8位數字。要求在提交表單時，根據上述條件驗證該文字框中輸入內容的有效性，下列語句中(A)能正確實現以上功能
A.
var str = form1.fname.value;
If(str.substr(0,4)!=”010-”||str.substr(4).length!=8||isNaN(parseFloat(str.substr(4))))
Alert(“無效的電話號碼！”);
B.
If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))
Alert(“無效的電話號碼！”);
C.
If(str.substr(0,3)!=”010-”||str.substr(3).length!=8||isNaN(parseFloat(str.substr(3))))
alert(“無效的電話號碼！”);
D.
If(str.substr(0,4)!=”010-”&&str.substr(4).length!=8&&isNaN(parseFloat(str.substr(4))))
alert(“無效的電話號碼！”);
54、關於正則表示式宣告6位數字的郵編，一下程式碼正確的是©
A.var reg = /\d6/;
B.var reg = \d{6};
C.var reg = /\d{6}/;
D.var reg = new RegExp (“\d{6}”);
55、下面關於cookie的說明正確的是(D)
A.Cookie設定的過期時間為3600s是指60分鐘過期
B.Cookie設定的過期時間為3600s是指只要在間隔60分鐘內有動作時就不過期
C.Cookie儲存在伺服器端
D.Cookie儲存在使用者本地
56、使用js程式碼實現，將下面段落中含有的連結替換成可直接點選開啟的連結
<p id=”text”>這個段落裡有連結
比如：http://www.abc.comm/和https://www.github.com/都是連結。
可是他們顯示在網頁中是，連結不可點，還得複製貼上到位址列開啟，好麻煩
</p>
57、補充按鈕事件的函式，確認使用者是否退出當前頁面，確認之後關閉視窗
<html>
<head>
<script type=”text/javasccript”>
Function closeWin() {
}
</script>
</head>
<body>
<input type=”button” value=”關閉視窗” onclick=”closeWin()” />
</body>
</html>
58、請用JavaScript實現，控制一個文字框只能輸入正整數，如輸入不符合條件則文字全部字型標紅，要求寫出完整的文字框HTML程式碼和JavaScript邏輯程式碼？
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>只能輸入正整數</title>
</head>
<body>
<inputid="txt" type="text">
<script>
var txt=document.getElementById('txt');
var color =window.getComputedStyle(txt,'').color
txt.addEventListener('keyup',function() {
var reg = newRegExp("^[0-9]*$");;
console.log(reg.test(this.value));
if(reg.test(this.value)){
this.style.color=color;
}else{
this.style.color='red';
}
});
</script>
</body>
</html>
59、請對以下程式碼進行優化
var wrap = document.getElementById(“wrap”);
for(var i = 0; i < 10; i++) {
var li = document.createElement(“li”);
var text =document.createTextNode(“hello” + i);
li.appendCChild(text);
wrap.appendChild(li);
}
60、請看下面的HTML，寫出您的CSS使左邊元素寬度為200px保持不變，右邊元素隨瀏覽器大小自適應
<div class=”outer”>
<div class=”left”></div>
<div class=”right”></div>
</div>