1. 程式人生 > >02web前端筆試題

02web前端筆試題

又參加了幾場web前端的宣講會,複習了一下,感覺有點用處吧,至少沒有前幾天一臉懵逼!希望接下來,越來越好,加油!!!

對啦,如果下面有錯的地方,歡迎指出,謝謝~

1、什麼是跨域?跨域資源請求的方式有哪些? 瀏覽器從一個域名的網頁去請求另一個域名的資源時,域名、埠、協議任一不同,都是跨域 存在跨域的情況: 網路協議不同,如http協議訪問https協議。 埠不同,如80埠訪問8080埠。 域名不同,如qianduanblog.com訪問baidu.com。 子域名不同,如abc.qianduanblog.com訪問def.qianduanblog.com。 域名和域名對應ip,如www.a.com訪問20.205.28. 跨域資源請求的方式:

(1)、porxy代理 定義和用法:proxy代理用於將請求傳送給後臺伺服器,通過伺服器來發送請求,然後將請求的結果傳遞給前端。 實現方法:通過nginx代理; 注意點:1、如果你代理的是https協議的請求,那麼你的proxy首先需要信任該證書(尤其是自定義證書)或者忽略證書檢查,否則你的請求無法成功。 (2)、CORS 【Cross-Origin Resource Sharing】:跨域資源共享 定義和用法:是現代瀏覽器支援跨域資源請求的一種最常用的方式。 使用方法:一般需要後端人員在處理請求資料的時候,新增允許跨域的相關操作。 (3)、jsonp 定義和用法:通過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制,同時資源載入到頁面後會立即執行(沒有阻塞的情況下)。 特點:通過情況下,通過動態建立script來讀取他域的動態資源,獲取的資料一般為json格式。

2、請說出Vue、Angular、react的元件傳值? A、react的元件傳值: 分父親向兒子傳值, 子向父親傳值, 沒有巢狀關係的元件之間傳值,例如兄弟元件傳值。 B.Vue元件傳值: 父元件向子元件傳值 子元件呼叫父元件方法並向父元件傳值 兄弟元件之間傳值 事件匯流排:不相關元件之間傳遞資料 C、Angular元件傳值:

3、以下程式輸出的是什麼?怎麼修改才能使輸出結果為1,2,3,4,5? for(var i=1;i<=5;i++){ setTimeout(function(){ Console.log(i); },1000); } 輸出為5,5,5,5,5 修改方式: 1、將var改成let,因為let 中的i是區塊變數,每個i只能存活到大括號結束,並不會把後面的for迴圈的i 值賦給前面的setTimeout中的i;而var i 則是區域性變數,這個 i 的生命週期不受for迴圈的大括號限制;

4、同步和非同步的區別?(自己補充的) 同步,是所有的操作都做完,才返回給使用者結果。即寫完資料庫之後,在相應使用者,使用者體驗不好。(銀行轉賬系統) 非同步,不用等所有操作等做完,就相應使用者請求。即先相應使用者請求,然後慢慢去寫資料庫,使用者體驗較好。

5、簡述一下什麼是XXS(跨站指令碼攻擊)攻擊?

XSS是一種經常出現在web應用中的電腦保安漏洞,它允許惡意web使用者將程式碼植入到提供給其它使用者使用的頁面中。比如這些程式碼包括HTML程式碼和客戶端指令碼。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略。這種型別的漏洞由於被黑客用來編寫危害性更大的網路釣魚攻擊而變得廣為人知。對於跨站指令碼攻擊,黑客界共識是:跨站指令碼攻擊是新型的“緩衝區溢位攻擊“,JavaScript是新型的“ShellCode”。

6、簡述get和post請求的區別? (1)使用Get請求時,引數在URL中顯示,而使用Post請求,則不會顯示出來; (2)Post傳輸的資料量大,可以達到2M,而Get方法由於受到URL長度的限制,只能傳遞大約1024位元組. (3)Get請求需注意快取問題,Post請求不需擔心這個問題; (4)Post請求必須設定Content-Type值為:application/x-form-www-urlencoded; (5)傳送請求時,因為Get請求的引數都在url裡,所以send函式傳送的引數為null,而Post請求在使用send方法時,卻需賦予其引數; (6)GET方式請求的資料會被瀏覽器快取起來,因此其他人就可以從瀏覽器的歷史記錄中讀取到這些資料,例如賬號和密碼等。在某種情況下,GET方式會帶來嚴重的安全問題,POST方式相對來說就可以避免這些問題。

7、CSS有哪些選擇器?哪些屬性是可以繼承?哪些不可以? 在這裡插入圖片描述

在這裡插入圖片描述

優先順序:!important >行間 >id >類選擇器 > 標籤

8、用js寫一個方法,實現字串反轉,如“abc”>“cba” 方法1:

var str = '123';
   var newStr = str.split("").reverse().join("");
	alert(newStr);

解釋:split(): 用於把一個字串分隔成字串陣列 Reverse():用於顛倒陣列元素順序 Join():連線陣列元素,生成一個字串 方法2:

var str="abcdef" var i=str.length; i=i-1; for (var x = i; x >=0; x--) { alert(str.charAt(x)); } 解釋:逐個輸出字串各個位上的字元

   function reverse(str) {
			if(str.length == 0) return null;  //判斷字串是否為空
			var i = str.length;
			var dstr = "";
			while(--i >= 0) {
				dstr += str.charAt(i); //將各個位上的字元連線起來
			}
			return dstr;
		}
		var str = "abcdef";
		str = reverse(str);
		document.write(str);

9、實現div1和div2自適應視窗的高,div1定寬400px,div2隨視窗的縮放而縮放。 (額,這題不太會寫,歡迎各位大佬指教~)

10、用js寫一個方法,將字串的“a”替換成“hello”,如“abcad”>“hellobchellod”。

 function replace(str){
            	if(str.length==0) return null;
            	var dstr="";
            	dstr+=str.replace(/a/g, 'hello'); 
            	return dstr;
            }
			var str = "abcadef";
			str = replace(str);
			document.write(str);

11、var a=Math.floor(5.3).toFixed(2),那麼a=? a=5.00 解釋:floor():向下取整 toFixed():把number四捨五入為指定小數位數

12、var a=‘abcdef’;var b=a.substr(-4,2),b=?, b=cd 解釋:substr() 方法可在字串中抽取從 start 下標開始的指定數目的字元。 即:從字串中擷取一些字元 語法:stringObject.substr(start,length)

13、寫出下列程式的輸出結果:

function (){
Var a ={name:undefined};
Var b={name:a.name};
Var c={name:b.name+’jack’};
Console.log(c.name);
}

輸出結果為:undefinedjack