前端面試題

時間 2019-11-29

標籤端面試題简体版

原文原文鏈接

一、Javascript包括哪些數據類型，請分別編寫3種以上類型的判斷函數，如：isString()?javascript

字符串、數字、布爾、數組、對象、null、undefinedphp

typeof, instanceof, isArray()?css

二、編寫一個JavaScript函數，實時顯示當前時間，格式」年—月—日時：分：秒？html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="show" style="width:300px;"/>
<script>
function getTime(){
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = (nowDate.getMonth() + 1) > 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1);
var day = nowDate.getDate() > 10 ? nowDate.getDate() : '0' + nowDate.getDate();
var hour = nowDate.getHours() > 10 ? nowDate.getHours() : (nowDate.getHours() == 0 ? 24 : '0' + nowDate.getHours());
var minutes = nowDate.getMinutes() > 10 ? nowDate.getMinutes() : '0' + nowDate.getMinutes();
var seconds = nowDate.getSeconds() > 10 ? nowDate.getSeconds() : '0' + nowDate.getSeconds();
var str="當前時間爲：" + year + "年" + month + "月" + day + "日" + " " + hour + ":" + minutes + ":" + seconds;
document.getElementById("show").value = str;
}
window.setInterval("getTime()", 1000);
</script>
</body>
</html>前端

三、如何顯示/隱藏一個DOM元素？java

答案：顯示：object.style.display="block";node

隱藏：object.style.display="none";web

四、如何添加html元素的事件處理，有幾種方法？ajax

答案：html的元素的事件就只用控件自帶的的那麼幾個，如onclick,onmouserdown ,..等等都是調用腳本執行跨域

方法：一、在空間上寫直接激發事件

二、在頁面加載的時候就調用腳本激發控件的某個事件

三、在後臺利用後臺代碼強行執行控件的事件。

或：

（1）爲HTML元素的事件屬性賦值

（2）在JS中使用ele.on*** = function() {…}

（3）使用DOM2的添加事件的方法 addEventListener或attachEvent

五、如何控制alert中的換行？

答案：\n alert("text\ntext");

alert("再打個招呼。這裏演示了" + "\n" + "如何在消息框中添加折行。")

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var str = "abcdefgaddda";
var obj = {};
for(var i = 0; i < str.length; i++){
var key = str[i];
if(typeof obj[key] === 'undefined'){
obj[key] = 1;
}else{
obj[key]++;
}
}
var max = -1;
var max_key = obj[key];
for(var key in obj){
if(max < obj[key]){
max = obj[key];
max_key = key;
}
}
document.write("字符:" + max_key + ",出現次數最多爲:" + max + "次")
</script>
</body>
</html>

七、判斷字符串是不是這樣組成的，第一個必須是字母，後面能夠是字母、數字、下劃線，總長度爲5-20.

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

八、請編寫一個Javascript函數parseQueryString，它的用途是把URL參數解析爲一個對象，如 var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function parseQueryString(url){
var result = {};
var arr = url.split("?");
if (arr.length <= 1){
return result;
}else{
arr = arr[1].split("&");
for(var i=0; i<arr.length; i++){
var a = arr[i].split("=");
result[a[0]] = a[1];
}
return result;
}
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
document.write(ps['key0'] + '<br>' + ps['key1'] + '<br>' + ps['key2']);
</script>
</body>
</html>

九、在頁面中有以下html : <div id="firld">

<input type="text" value="User Name"/>

</div>

<span class="red"></span>

需求用閉包方式寫一個JS,從文本框中取出值，並在標籤 span中顯示出來。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="firld">
<input type="text" value="User Name"/>
</div>
<span id="red" class="red"></span>
<script>
var result = (function(){
var value = document.getElementById("firld").children[0].value;
var all = document.getElementsByTagName("span");
for(var i = 0; i < all.length; i++){
if(all[i].className == 'red'){
all[i].innerHTML = value;
break;
}
}
})();
</script>
</body>
</html>

十、在 IE 6.0下面是不支持position:fixed 的，請寫一個JS使用<div id="box"></div>固定在頁面的右下角。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit{position:absolute; width:100px; height:100px; background:red;}
</style>
</head>
<body>
<div id="box" class="tit"></div>
<script>
window.onscroll= window.onresize = window.onload = function (){
var getDiv = document.getElementById('box');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
getDiv.style.left= document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight +scrollTop +'px';
}
</script>
</body>
</html>

十一、請實現，鼠標移到頁面中的任意標籤，展現出這個標籤的基本矩形輪廓。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit{display:block; width:100px; height:100px; background:yellow;}
</style>
</head>
<body>
<div id="box" class="tit"></div>
<p class="tit">555</p>
<a class="tit" href="www.baidu.com" alt="www.baidu.com"></a>
<script>
function mouseBorder(t){
var c = t.childNodes;
for(var i = 0 ; i < c.length; i++){
var d = c[i];
if(d.nodeType == 1){
d.onmouseover = function(){
this.style.border='1px solid red';
};
d.onmouseout = function(){
this.style.border='';
};
mouseBorder(d);
};
}
}
mouseBorder(document.body);
</script>
</body>
</html>

十二、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,

1三、javascript 中如何對一個對象進行深度clone

1四、js 中如何定義class ,如何擴展prototype ?

Ele.className = 「***」; //***在css中定義，形式以下：.*** {…}

A.prototype.B = C;

A是某個構造函數的名字

B是這個構造函數的屬性

C是想要定義的屬性的值

1五、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/）

AJAX交互模型

同步：腳本會停留並等待服務器發送回覆而後再繼續

異步：腳本容許頁面繼續其進程並處理可能的回覆

跨域問題簡單的理解就是由於JS同源策略的限制，a.com域名下的JS沒法操做b.com或c.a.com下的對象，具體場景以下：

PS：（1）若是是端口或者協議形成的跨域問題前端是無能爲力的

(2) 在跨域問題上，域僅僅經過URL的首部來識別而不會嘗試判斷相同的IP地址對應的域或者兩個域是否對應一個IP

前端對於跨域的解決辦法：

(1) document.domain+iframe

(2) 動態建立script標籤

1六、請給出異步加載js方案，很多於兩種。

默認狀況javascript是同步加載的，也就是javascript的加載時阻塞的，後面的元素要等待javascript加載完畢後才能進行再加載，對於一些意義不是很大的javascript，若是放在頁頭會致使加載很慢的話，是會嚴重影響用戶體驗的。

異步加載方式：

(1) defer，只支持IE

(2) async：

(3) 建立script，插入到DOM中，加載完畢後callBack，見代碼：function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script);}

1七、多瀏覽器檢測經過什麼？

（1） navigator.userAgent

（2）不一樣瀏覽器的特性，如addEventListener

1八、講述一下你所瞭解的前端開發的優化方式