WEB_面试题_第三阶段
第三階段面試題
一、JavaScript高級
1. 判斷以下程序的輸出結果:
??? var age=100;
??? function test(){
????? this.age=50;
????? return function(){
??????? return this.age;
????? }
??? }
??? var m=new test();
??? alert(m());
??? var n=test();
??? alert(n());
答案：
100 50
2. 判斷以下程序的輸出結果:
var name="The Window";
??? var obj={
????? name:"My obj",
????? getName:function(){
??????? return function(){
????????? return this.name;
??????? }
????? }
??? };
??? console.log(obj.getName()());
答案：
the window
3. 判斷以下程序的輸出結果:
var length=10;
??? function fn(){
????? console.log(this.length);
??? }
??? var obj={
????? length:5,
????? method:function(fn){
??????? fn();
??????? arguments[0]();
????? }
??? };
??? obj.method(fn,1)
答案：
10 2
4. 統計一個字符串中出現次數最多的字符是? 共出現多少次
答案：
var dict={};
????? var c="", max=1;
????? for(var i=0;i<str.length;i++){
??????? var char=str[i];
??????? if(dict[char]===undefined)
????????? dict[char]=1;
??????? else{
????????? dict[char]+=1;
????????? if(dict[char]>max){
??????????? max=dict[char];
??????????? c=char;
????????? }
??????? }
????? }
????? console.log(c,max);
5. 判斷以下程序的輸出結果:
for(var i=0;i<5;i++){
????? setTimeout(function(){
??????? console.log(i);
????? },0)
??? }
??? console.log(i);
答案：
5 5 5 5 5
6. 判斷以下程序的輸出結果:
window.color="red";
??? let color="green";
??? let obj={
????? color:"blue"
??? };
??? let sayColor=()=>{
????? return this.color;
??? }
??? console.log(sayColor.apply(obj));
??? let a=10;
??? console.log(window.a);
答案：
red undefined
7. 判斷以下程序的輸出結果:
var c=1;
??? function c(c){
????? console.log(c);
????? var c=3;
??? }
??? c(2);
答案：
報錯: TypeError: c不是一個函數
8. 判斷以下程序的輸出結果:
function change(){
????? alert(typeof fn)
????? function fn(){ alert('hello') }
????? var fn;
??? }
??? change();
答案：
function
9. 判斷以下程序的輸出結果:
a=3
??? a.prop=4;?? prop是從屬性對象中取值
??? alert(a+a.prop)
答案：
NaN
10. 判斷以下程序的輸出結果:
var o={
????? a:10,
????? b:{
??????? a:12,
??????? fn:function(){
????????? var a=13;
????????? console.log(this.a);
??????? }
????? }
??? }
??? o.b.fn();
答案：
12
11. HTML事件的綁定方式有哪幾種，如何綁定？
答案：
例如，鼠標單擊事件 onclick ，鼠標雙擊事件 ondouble，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等
例如，elementObject.onXXX=function(){
? ? // 事件處理代碼
}
例如，onreadystatechange=function(){
??? //事件處理代碼
}
?
?
12. 實現數組去重（元素js）？
答案:
?? 實現思路：雙層循環，外循環表示從0到arr.length，內循環表示從i+1到arr.length
將沒重復的右邊值放入新數組。（檢測到有重復值時終止當前循環同時進入外層循環的下一輪判斷）
function unique4(arr){
var hash=[];
?for (var i = 0; i < arr.length; i++) {
for (var j = i+1; j < arr.length; j++) {
if(arr[i]===arr[j]){ ++i;
?}
}
???? hash.push(arr[i]);
?}
return hash;
?}
?
?
13.平時用過ES6哪些特性，體驗如何，與ES5有什么不同？
答案：Let和const關鍵字，變量的解構賦值，字符串、數值的擴展，數組、對象的擴展，函數的擴展，for...of
與ES5的區別：
1、定義變量
?ES5中用：var / function
?ES6中用：let / const / class / import ...
?沒有變量提升
同一個作用域中不可重復聲明
不會給window增加全局屬性
?會形成塊級作用域
?const設置的變量值是不可修改的（理解為常量）
2、解構賦值
?構建一個和變量值相同結構的結構，快速獲取對象或者數組中的某一部分內容
3、箭頭函數
4、對象和數組中新增加一些屬性和方法（正則和字符串中也新增很多）
dir(Array);//=>Array.xxx()
dir(Array.prototype);//=>給實例用的 [].xxx()
dir(Object);//=>Object.xxx()
dir(Object.prototype);//=>({}).xxx()
5、模板字符串 `xxx${JS CODE}...`
6、class / extends
14. 閉包是什么，有什么特性，對頁面有什么影響？
答案：
閉包：既重用變量，又保護變量不被污染的一種機制。
特性：閉包是用外層函數包裹受保護的變量和內層函數對象，外層函數將內層函數對象返回到外部，使用者調用外層函數，獲得返回的內層函數
影響:由于閉包時，變量的值都保存到內存中，會導致頁面加載時內存消耗很大
?
15.js的原型鏈和繼承？
答案：
? ? ?原型鏈: 由多級父元素，逐級繼承，形成的鏈式結構。
???? 繼承：父對象的屬性和方法，子對象無需重復創建就可直接使用。
?
16.使用javascript打印出1-10000之間的所有對稱數（例如121,1331等）
答案：
???? function isSymmetryNum(start,end){
??? for(var i=start;i<end+1;i++){
?????? var iNumber=+(i.toString().split("").reverse().join(""));
??????
?????? if(iNumber===i&&i>10){
?????????? console.log(i);
?????? }
??? ?}
}
isSymmetryNum(1,10000);
17.已知有字符串msg=”get-element-by-id”,寫一個function將其轉化成駝峰表示法，“getElementById”。
答案：
combo("get-element-by-id");
? 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);
???????? }
???????? console.log(arr);
???????? msg=arr.join("");
???? console.log(msg);
??? }
18.解釋 jsonp 的原理，以及為什么不是真正的 ajax
?
答案：
動態創建script標簽,利用script標簽的src屬性可以獲取任何域下的js腳本,通過這個特性,服務器端不在返回json格式,而是返回一段調用，某個函數的js代碼，在src中進行了調用，這樣實現了跨域。
Ajax與JSONP這兩種技術看起來很像，目的也一樣，都是請求一個url，然后把服務器返回的數據進行處理，實際上Ajax與JSONP有著本質上的不同。Ajax的核心是通過XMLHttpRequest獲取數據，而JSONP的核心則是動態添加<script>標簽來調用服務器提供的js文件。jsonp只支持get請求，ajax支持get和post請求。
?
19. 以下代碼輸出結果是什么？請說出給你出此答案的原因。
for(var i=0;i<10;++i){
?????? ??? setTimeout(function(){
?????????? ?? console.log(i),0})
??? }
答案：輸出10次10
????? 解析：
20．使用js代碼為頁面動態添加6個按鈕，每個按鈕上的文本為“button1”…”button6”,單擊每個按鈕時，分別彈出數字1、2……6，請按要求編寫代碼。
答案：window.onload = function () {
?????????? var str = '';
??????????? for(var i =0 ;i<6;i++)
??????????? {
?????????????? ?str+='<button>button'+(i+1)+'</button>';
??????????? }
??????????? document.body.innerHTML=str;
?
?????????????? var btns=
?????????????? document.getElementsByTagName("button");
?????????????? //console.log(btns);
?????????????? for(let i=0;i<btns.length;i++){
????????????????????? btns[i].οnclick=function(){
???????????????????????????? alert(i);
????????????? ??? }
??????? ??? }
??????? }
? ??????
?
?
21. var str=" xiao ming "; var str2=str.trim();請寫出console.log(str2);的結果？
答案：xiao ming（trim()會去掉字符串前后的空格）
22.javascript 的本地對象，內置對象和宿主對象
答案JavaScript的應用環境由宿主環境和運行期環境構成。宿主環境主要是指外殼程序（shell）和Web瀏覽器等，運行期環境由JavaScript引擎內建的。
本地對象有哪些：
? ? ? ?Object、Function、Array、String、Number、Date、RegExp、Boolean、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError 。
?
內置對象：由ECMAScript提供實現的、獨立于宿主環境的所有對象，在ECMAScript程序開始執行時出現。
這意味著內置對象都是已經實例化好的，不需要我們再進行實例化了， ECMA-262定義的內置對象只有兩個：Global和Math。
?
?宿主對象：由ECMAScript實現的宿主環境提供的對象。
可能這樣不是很好理解，上面已經說過了宿主環境包括Web瀏覽器，所以我們可以這樣理解，瀏覽器提供的對象都是宿主對象。
? ? ? ?也可以這樣理解，因為本地對象是非宿主環境的對象，那么非本地對象就是宿主對象，即所有的BOM對象和DOM對象都是宿主對象。
? ? ? ?那么還有一種對象，那就是我們自己定義的對象，也是宿主對象。?最簡單的理解：ECMAScript官方未定義的對象都屬于宿主對象。
23.函數的幾種定義方法
??? 答案：
?function 函數名(參數列表){ 函數體; return 返回值}
?? ? ???問題: 會被聲明提前！
?? ? ???解決:用賦值的方式就不會被聲明提前。
? ?? 2. 賦值方式
??? ?? var函數名=function (參數列表){ 函數體; return 返回值}
??????? 優勢: 不會被聲明提前
???? 3. 用new
?? ???? var 函數名=new Function("參數1","參數2",...,"函數體;...")
?
24. this 關鍵字的指向
?
答案：
obj.foo() == obj????? //方法調用模式,this 指向 obj
?
foo() == window;?????? //函數調用模式,this 指向 window
?
new obj.foo() == obj? //構造器調用模式, this 指向新建立對象
?
foo.call(obj) == obj;//APPLY 調用模式,this 指向 obj
?
25.在 Javascript 中什么是偽數組？如何將偽數組轉化為標準數組？
?
答案：
偽數組（類數組）：無法直接調用數組方法或期望 length 屬性有什么特殊的行為，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的 argument 參數，還有像調用 getElementsByTagName,document.childNodes 之類的,它們都返回 NodeList 對象都屬于偽數組。可以使用 Array.prototype.slice.call(fakeArray)將數組轉化為真正的 Array 對象。
26.什么是”use strict”？使用它的好處和壞處分別是什么？
答案：嚴格模式，這種模式使得Javascript在更嚴格的條件下運行。
好處：
1. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；
3. 提高編譯器效率，增加運行速度；
4. 為未來新版本的Javascript做好鋪墊。（注：經過測試 IE6,7,8,9 均不支持嚴格模式）
壞處：現在網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的文件，被合并后，這個串就到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節。
?
?
二、DOM
1. 利用冒泡和不利用冒泡的差別
答案：
??????????????? 利用冒泡可讓動態添加的子元素自動獲得父元素的處理函數，無需反復綁定
2. 按HTML查找和按選擇器查找的差別
答案：
3. 列舉DOM中常用優化
答案：
4. 如何鑒別瀏覽器的名稱和版本號
答案：
var browser,version,ua=navigator.userAgent;
???? if(ua.indexOf("IE")!=-1)?????? browser="IE"
else if(ua.indexOf("Edge")!=-1)???? browser="Edge"?
else if(ua.indexOf("Firefox")!=-1)? browser="Firefox"?
else if(ua.indexOf("OPR")!=-1)????? browser="OPR"?
else if(ua.indexOf("Chrome")!=-1)?? browser="Chrome"?
else if(ua.indexOf("Safari")!=-1)?? browser="Safari"?
else if(ua.indexOf("Trident")!=-1) ?browser="IE",version=11;
?
document.write(`<h1>${browser}</h1>`);
?
if(version===undefined){
//截取: 從瀏覽器名稱所在位置，再跳過瀏覽器名稱長度+1 之后的3位
? var i=ua.indexOf(browser);
? i+=browser.length+1;
? version=parseFloat(ua.slice(i,i+3))
}
document.write(`<h1>${version}</h1>`);
?
5.document load 和 document ready 的區別
?
答案：
1.load是當頁面所有資源全部加載完成后（包括DOM文檔樹，css文件，js文件，圖片資源等），執行一個函數，問題：如果圖片資源較多，加載時間較長，onload后等待執行的函數需要等待較長時間，所以一些效果可能受到影響。
2.$(document).ready()是當DOM文檔樹加載完成后執行一個函數 （不包含圖片，css等）所以會比load較快執行，在原生的jS中不包括ready()這個方法，只有load方法就是onload事件。
6.事件是什么？IE 與火狐的事件機制有什么區別？ 如何阻止冒泡？
?
（1） 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
?
（2） 事件處理機制：IE 是事件冒泡、火狐是 事件捕獲；
?
（3） ev.stopPropagation();
三、jQuery
1. $的原理
答案：
其中自帶優化:
如果選擇器是#id，則自動調用getElementById
? 如果選擇器是.class，則自動調用getElementsByClassName
? 如果選擇器是標簽名，則自動調用getElementsByTagName
? 否則，其它選擇器，都自動調用querySelectorAll()
2. 實現動畫有幾種方式，哪種好？
答案：
優點: 由專門的排版引擎解析，效率高
缺點: 無法隨意控制交互行為
優點: 可隨意控制交互行為
缺點: 效率不如css動畫
優點: 可根據瀏覽器的刷新頻率自動優化動畫效果
缺點: 新API，有兼容性問題
3. 實現跨域訪問有幾種方式
答案：
主要有兩種
客戶端: 客戶端動態添加script元素，用script發送請求，代替ajax請求，并攜帶客戶端一個函數名到服務端
服務端: 接收客戶端發來的函數名，將函數名和要返回的數據拼接為一條可執行的js語句，返回
客戶端正常發送ajax請求，服務端定義響應頭，允許指定來源的請求跨域訪問:
res.writeHead(200,{
?? …，
?? “Access-Control-Allow-Origin”:”允許的請求來源域名”
})
?
4.添加 刪除 替換 插入到某個接點的方法
答案：
?
obj.appendChidl()
obj.removeChild
obj.replaceChild
obj.innersetBefore
?
?
?
四、Vue
1. Vue的雙向數據綁定原理是什么？
答案：
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
?
具體步驟：
?
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那么就能監聽到了數據變化
?
第二步：compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
?
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)里面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，并觸發Compile中綁定的回調，則功成身退。
?
第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。
2. 請詳細說下你對vue生命周期的理解
答案：
總共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后。
?
創建前/后： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
?
載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
?
更新前/后：當data變化時，會觸發beforeUpdate和updated方法。
?
銷毀前/后：在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
3. 封裝 vue 組件的過程
答案：
首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。
?
然后，使用Vue.extend方法創建一個組件，然后使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據后，想把數據傳遞給父組件。可以采用emit方法。
轉載于:https://www.cnblogs.com/mingdao/articles/11007903.html
總結
以上是生活随笔為你收集整理的WEB_面试题_第三阶段的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中科院分词系统大致流程
- 下一篇： JAVA标识符中含小数点可以吗_数值类型