中學(xué)生教師青春寄語(yǔ)
很多面試題是我自己面試BAT親身經(jīng)歷碰到的。整理分享出來(lái)希望更多的前端er共同進(jìn)步吧，不僅適用于求職者，對于鞏固復習前端基礎更是大有裨益。
而更多的題目是我一路以來(lái)收集的，也有往年的，答案不確保一定正確，如有錯誤或有更好的解法，還請斧正。
前面幾題是會(huì )很基礎，越下越有深度。
初級Javascript：
1.JavaScript是一門(mén)什么樣的語(yǔ)言，它有哪些特點(diǎn)?
沒(méi)有標準答案。
2.JavaScript的數據類(lèi)型都有什么?
基本數據類(lèi)型：String,boolean,Number,Undefined, Null
引用數據類(lèi)型：Object(Array,Date,RegExp,Function)
那么問(wèn)題來(lái)了，如何判斷某變量是否為數組數據類(lèi)型?
方法一.判斷其是否具有“數組性質(zhì)”，如slice()方法�？勺约航o該變量定義slice方法，故有時(shí)會(huì )失效
方法二.obj instanceof Array 在某些IE版本中不正確
方法三.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性，最好的方法如下：
if(typeof Array.isArray==="undefined")
{
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
3.已知ID的Input輸入框，希望獲取這個(gè)輸入框的輸入值，怎么做?(不使用第三方框架)
document.getElementById(“ID”).value
4.希望獲取到頁(yè)面中所有的checkbox怎么做?(不使用第三方框架)
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; /pic/p>
while (len--) { /pic/p>
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
5.設置一個(gè)已知ID的DIV的html內容為xxxx，字體顏色設置為黑色(不使用第三方框架)
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
6.當一個(gè)DOM節點(diǎn)被點(diǎn)擊時(shí)候，我們希望能夠執行一個(gè)函數，應該怎么做?
直接在DOM里綁定事件：
在JS里通過(guò)onclick綁定：xxx.onclick = test
通過(guò)事件添加進(jìn)行綁定：addEventListener(xxx, ‘click’, test)
那么問(wèn)題來(lái)了，Javascript的事件流模型都有什么?
“事件冒泡”：事件開(kāi)始由最具體的元素接受，然后逐級向上傳播
“事件捕捉”：事件由最不具體的節點(diǎn)先接收，然后逐級向下，一直到最具體的
“DOM事件流”：三個(gè)階段：事件捕捉，目標階段，事件冒泡
7.什么是Ajax和JSON，它們的優(yōu)缺點(diǎn)。
Ajax是異步JavaScript和XML，用于在Web頁(yè)面中實(shí)現異步數據交互。
優(yōu)點(diǎn)：
可以使得頁(yè)面不重載全部?jì)热莸那闆r下加載局部?jì)热�，降低數據傳輸�?/p>
避免用戶(hù)不斷刷新或者跳轉頁(yè)面，提高用戶(hù)體驗
缺點(diǎn)：
對搜索引擎不友好
要實(shí)現ajax下的前后退功能成本較大
可能造成請求數的增加
跨域問(wèn)題限制
JSON是一種輕量級的數據交換格式，ECMA的一個(gè)子集
優(yōu)點(diǎn)：輕量級、易于人的閱讀和編寫(xiě)，便于機器(JavaScript)解析，支持復合數據類(lèi)型(數組、對象、字符串、數字)
8.看下列代碼輸出為何?解釋原因。
var a;
alert(typeof a); /pic/p>
alert(b); /pic/p>
解釋?zhuān)篣ndefined是一個(gè)只有一個(gè)值的數據類(lèi)型，這個(gè)值就是“undefined”，在使用var聲明變量但并未對其賦值進(jìn)行初始化時(shí)，這個(gè)變量的值就是undefined。而b由于未聲明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的。
9.看下列代碼,輸出什么?解釋原因。
var a = null;
alert(typeof a); /pic/p>
解釋?zhuān)簄ull是一個(gè)只有一個(gè)值的數據類(lèi)型，這個(gè)值就是null。表示一個(gè)空指針對象，所以用typeof檢測會(huì )返回”object”。
10.看下列代碼,輸出什么?解釋原因。
var undefined;
undefined == null; /pic/p>
1 == true; /pic/p>
2 == true; /pic/p>
0 == false; /pic/p>
0 == ”\”; /pic/p>
NaN == NaN; /pic/p>
[] == false; /pic/p>
[] == ![]; /pic/p>
undefined與null相等，但不恒等(===)
一個(gè)是number一個(gè)是string時(shí)，會(huì )嘗試將string轉換為number
嘗試將boolean轉換為number，0或1
嘗試將Object轉換成number或string，取決于另外一個(gè)對比量的類(lèi)型
所以，對于0、空字符串的判斷，建議使用 “===” 。“===”會(huì )先判斷兩邊的值類(lèi)型，類(lèi)型不匹配時(shí)為false。
那么問(wèn)題來(lái)了，看下面的代碼，輸出什么，foo的值為什么?
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
執行完后foo的值為111，foo的類(lèi)型為String。
11.看代碼給答案。
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
答案：2(考察引用數據類(lèi)型細節)
12.已知數組var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“”))
已知有字符串foo=”get-element-by-id”,寫(xiě)一個(gè)function將其轉化成駝峰表示法”getElementById”。
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;
}
(考察基礎API)
13.var numberArray = [3,6,2,4,1,5]; (考察基礎API)
1) 實(shí)現對該數組的倒排，輸出[5,1,4,2,6,3]
2) 實(shí)現對該數組的降序排列，輸出[6,5,4,3,2,1]
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;
}
14.輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26
var d = new Date();
/pic/p>
var year = d.getFullYear();
/pic/p>
var month = d.getMonth() + 1;
/pic/>
month = month < 10 ? ”0” + month : month;
/pic/p>
var day = d.getDate();
day = day < 10 ? ”0” + day : day;
alert(year + ”-” + month + ”-” + day);
15.將字符串”{$id}{$name}”中的{$id}替換成10，{$name}替換成Tony (使用正則表達式)
答案：”{$id}{$id}_{$name}< /td>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);
16.為了保證頁(yè)面輸出安全，我們經(jīng)常需要對一些特殊的字符進(jìn)行轉義，請寫(xiě)一個(gè)函數escapeHtml，將<, >, &, “進(jìn)行轉義
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
17.foo = foo||bar ，這行代碼是什么意思?為什么要這樣寫(xiě)?
答案：if(!foo) foo = bar; /pic/p>
短路表達式：作為”&&”和”||”操作符的操作數表達式，這些表達式在進(jìn)行求值時(shí)，只要最終的結果已經(jīng)可以確定是真或假，求值過(guò)程便告終止，這稱(chēng)之為短路求值。
18.看下列代碼，將會(huì )輸出什么?(變量聲明提升)
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
答案：輸出undefined 和 2。上面代碼相當于：
var foo = 1;
function(){
var foo;
console.log(foo); /pic/p>
foo = 2;
console.log(foo); /pic/p>
}
函數聲明與變量聲明會(huì )被JavaScript引擎隱式地提升到當前作用域的頂部，但是只提升名稱(chēng)不會(huì )提升賦值部分。
19.用js實(shí)現隨機選取10–100之間的10個(gè)數字，存入一個(gè)數組，并排序。
var iArray = [];
funtion getRan dom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.ran dom() * iChoice + istart;
}
for(var i=0; i<10; i++){
iArray.push(getRan dom(10,100));
}
iArray.sort();
20.把兩個(gè)數組合并，并刪除第二個(gè)元素。
var array1 = [”a”,”b”,”c”];
var bArray = [”d”,”e”,”f”];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
21.怎樣添加、移除、移動(dòng)、復制、創(chuàng )建和查找節點(diǎn)(原生JS，實(shí)在基礎，沒(méi)細寫(xiě)每一步)
1)創(chuàng )建新節點(diǎn)
createDocumentFragment() /pic/p>
createElement() /pic/p>
createTextNode() /pic/p>
2)添加、移除、替換、插入
appendChild() /pic/p>
removeChild() /pic/p>
replaceChild() /pic/p>
InsertBefore() /pic/p>
3)查找
getElementsByTagName() /pic/p>
getElementsByName() /pic/p>
getElementById() /pic/p>
22. 有這樣一個(gè)URL：/pic/item.htm?a=1&b=2&c=&d=xxx& amp;e，請寫(xiě)一段JS程序提取URL中的各個(gè)GET參數(參數名和參數個(gè)數不確定)，將其按key-value形式返回到一個(gè)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
class="google-maps" style="width: 100%; height: 200px;">
.split("=")[0]] = map[i].split("=")[1];
}
return result;
}
23.正則表達式構造函數var reg=new RegExp(“xxx”)與正則表達字面量var reg=/pic/p>
答案：當使用RegExp()構造函數的時(shí)候，不僅需要轉義引號(即\”表示”)，并且還需要雙反斜杠(即\\表示一個(gè)\)。使用正則表達字面量的效率更高。
郵箱的正則匹配：
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
24.看下面代碼，給出輸出結果。
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
};
答案：4 4 4。
原因：Javascript事件處理器在線(xiàn)程空閑之前不會(huì )運行。追問(wèn)，如何讓上述代碼輸出1 2 3?
for(var i=1;i<=3;i++){
setTimeout((function(a){ /pic/p>
console.log(a);
})(i),0);
};
1 /pic/p>
2
25.寫(xiě)一個(gè)function，清除字符串前后的空格。(兼容所有瀏覽器)
使用自帶接口trim()，考慮兼容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
/pic/p>
var str = " \t\n test string ".trim();
alert(str == "test string"); /pic/p>
26.Javascript中callee和caller的作用?
答案：
caller是返回一個(gè)對函數的引用，該函數調用了當前函數;
callee是返回正在被執行的function函數，也就是所指定的function對象的正文。
那么問(wèn)題來(lái)了?如果一對兔子每月生一對兔子;一對新生兔，從第二個(gè)月起就開(kāi)始生兔子;假定每對兔子都是一雌一雄，試問(wèn)一對兔子，第n個(gè)月能繁殖成多少對兔子?(使用callee完成)
var result=[];
function fn(n){ /pic/p>
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
/pic/p>
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
中級Javascript：
1.實(shí)現一個(gè)函數clone，可以對JavaScript中的5種主要的數據類(lèi)型(包括Number、String、Object、Array、Boolean)進(jìn)行值復制
考察點(diǎn)1：對于基本數據類(lèi)型和引用數據類(lèi)型在內存中存放的是值還是指針這一區別是否清楚
考察點(diǎn)2：是否知道如何判斷一個(gè)變量是什么類(lèi)型的
考察點(diǎn)3：遞歸算法的設計
/pic/p>
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
/pic/p>
/**
* 克隆一個(gè)對象
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; /pic/p>
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; /pic/p>
for (var k in Obj) { /pic/p>
buf[k] = clone(Obj[k]);
}
return buf;
}else{ /pic/p>
return Obj;
}
}
2.如何消除一個(gè)數組里面重復的元素?
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){
var newArr=[];
var obj={};
var index=0;
var l=arr.length;
for(var i=0;i
if(obj[arr[i]]==undefined)
{
obj[arr[i]]=1;
newArr[index++]=arr[i];
}
else if(obj[arr[i]]==1)
continue;
}
return newArr;
}
var newArr2=deRepeat(arr);
alert(newArr2); /pic/p>
3.小賢是一條可愛(ài)的小狗(Dog)，它的叫聲很好聽(tīng)(wow)，每次看到主人的時(shí)候就會(huì )乖乖叫一聲(yelp)。從這段描述可以得到以下對象：
function Dog() {
this.wow = function() {
alert(’Wow’);
}
this.yelp = function() {
this.wow();
}
}
小芒和小賢一樣，原來(lái)也是一條可愛(ài)的小狗，可是突然有一天瘋了(MadDog)，一看到人就會(huì )每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據描述，按示例的形式用代碼來(lái)實(shí)。(繼承，原型，setInterval)
答案：
function MadDog() {
this.yelp = function() {
var self = this;
setInterval(function() {
self.wow();
}, 500);
}
}
MadDog.prototype = new Dog();
/pic/p>
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();
4.下面這個(gè)ul，如何點(diǎn)擊每一列的時(shí)候alert其index?(閉包)
這是第一條
這是第二條
這是第三條
答案：
/pic/p>
var lis=document.getElementById(”2223”).getElementsByTagName(”li”);
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
};
}
/pic/p>
var lis=document.getElementById(”2223”).getElementsByTagName(”li”);
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
alert(a);
}
})(i);
}
5.編寫(xiě)一個(gè)JavaScript函數，輸入指定類(lèi)型的選擇器(僅需支持id，class，tagName三種簡(jiǎn)單CSS選擇器，無(wú)需兼容組合選擇器)可以返回匹配的DOM節點(diǎn)，需考慮瀏覽器兼容性和性能。
/*** @param Selector {String} 傳入的CSS選擇器。* @return {Array}*/
答案：
var query = function(Selector) {
var reg = /^(#)?(\.)?(\w+)$/img;
var regResult = reg.exec(Selector);
var result = [];
/pic/p>
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
}
else {
result.push(document.getElementById(regResult[3]));
}
}
}
/pic/p>
else if(regResult[2]) {
if(regResult[3]) {
if(typeof document.getElementsByClassName === ”function”) {
var doms = document.getElementsByClassName(regResult[3]);
if(doms) {
result = converToArray(doms);
}
}
/pic/p>
else {
var allDoms = document.getElementsByTagName("*") ;
for(var i = 0, len = allDoms.length; i < len; i++) {
if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
result.push(allDoms[i]);
}
}
}
}
}
/pic/p>
else if(regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].toLowerCase());
if(doms) {
result = converToArray(doms);
}
}
return result;
}
function converToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);/pic/p>
}catch(ex){
array = new Array();
for( var i = 0 ,len = nodes.length; i < len ; i++ ) {
array.push(nodes[i])
}
}
return array;
}
【中學(xué)生教師青春寄語(yǔ)】相關(guān)文章：
老師給的青春寄語(yǔ)210句12-26
老師青春寄語(yǔ)（精選200句）06-08
青春儀式的寄語(yǔ)07-02
青春寄語(yǔ)作文12-03
青春儀式老師寄語(yǔ)160句06-08
中學(xué)生的寄語(yǔ)03-08
經(jīng)典青春寄語(yǔ)330句02-27
老師送給我的青春寄語(yǔ)260句06-08
給中學(xué)生勵志寄語(yǔ)07-26
- 相關(guān)推薦