前端面經第二更(加更)

2021-09-12 18:42:36 字數 3717 閱讀 8746

我的前言

1、手寫ajax(原生js)

var xhr = new xmlhttprequest();

xhr.open('get','');

//send方法,放在事件前後沒有區別

xhr.send(); //post請求的時候,send中放引數,get請求一般放在url位址中

xhr.onreadystatechange(function()

})

如果大家面試中遇到類似的問題,千萬不要使用其他庫,我剛開始使用的庫,然後問我原生js咋寫,寫著寫著就忘記單詞了?,在看的時候一定要動手寫寫,防止眼高手低。。。

在這裡也順便說一下裡面的狀態值:

status:是伺服器返回的狀態碼,200代表響應成功,大家也要記著一些常用的狀態碼:200、301、302、304、307、400、401、403、404、500等一些常見的。

readystate:

0:(未初始化)還沒有呼叫send()

1:(載入)開始呼叫send(),傳送內容

2:(載入完成)send()傳送完畢,開始解析內容

3:(互動)正在解析內容

4:(成功)解析完成,可以呼叫資料

2、get、post區別

引數區別:get請求引數放在url或cookie,post的引數放在body中

長度問題:get的引數一般瀏覽器都會有限制,不宜過長

作用:get無***,一般用於關鍵字查詢、資料查詢;post有***,比如新增資料,操作了資料庫改變了資訊。

3、深拷貝問題

這個問題我寫過一篇部落格,大家可以去看一下。我的那一篇部落格寫的拷貝都是js中的一些基本型別的資料,沒有考慮到undefined、null等一些特殊的問題。如果要封裝乙個函式的話最好考慮一下,因為我寫的時候面試官問這種情況怎樣處理了。

function deepcopy(obj)

var res;

if(object.prototype.tostring.call(obj)=='[object array]')

async function async2()

console.log("d");

settimeout(function () ,0);

async1();

new promise(function (resolve) ).then(function () );

console.log('h');

答案是什麼呢,什麼呢 ?   輸出:d a c f h g b e

理解這題首先要知道瀏覽器的執行順序是怎樣的。一次弄懂event loop 分享這篇文章,寫的很詳細。瀏覽器將你的檔案分為同步任務和非同步任務,同步任務就按順序直接執行,非同步任務就會被放進任務佇列中。

其中又分為巨集任務和微任務,執行順序是這樣的:js**為巨集任務會首先執行,等執行棧為空後,就會去任務佇列中把所有的微任務全部執行,等到執行隊列為空時再次執行下乙個巨集任務,這樣迴圈執行。

6、頁面首次載入時執行了什麼事件

這到題我沒有答上來,只說了個load載入事件,然後就說不清啦,面試官一聽不知道也沒有繼續往下問,也沒有說說這題的思想(?),事後我查和搜尋了各種資料,只找到了蛛絲馬跡,如果有讀者清楚,一定要告訴我哦?

7、居中方式、js資料型別(區別)

8、盒子模型、position的值以及區別

9、將類陣列轉為陣列

10、防抖和節流

這個題目面試官不是直接問我這兩個是什麼意思,我發現越是大神越從小問題問你,然後看你會不會運用到知識,巧了,我就是那個不會運用的?,推薦個大神的一篇部落格 。

防抖:有個特點是延時執行 就是帶著前面的一起做,如果在我規定的時間內,又觸發了新的,就從頭開始計算時間,只關心使用者的最後一次操作,比如搜尋框輸入時。

節流:是在規定的時間內觸發,如果時間未到就不觸發事件

不清楚的問題(望解答)?

ajax和伺服器互動的過程

兩中盒子模型怎樣相容??(我回答了個display:content-box,好像不對,是不是在檔案開頭宣告 !doctype ?)

absolut的父元素設定為static可以定位嗎?為什麼(肯定是不可以的,why??)更新:我理解的是:static是position的預設值,它會忽略top、bottom、left、right 這一些列的值,而定位就是根據這些值來計算位置的,所以子元素不能根據父元素設定了static的值進行定位。(個人理解,望解答?)

上一題中解決resizse頻繁觸發(應該用節流吧,resize()和scroll()差不多都應該使用節流吧)

基本上也就這些知識了,和大家分享一下,共同進步?

第四題:使用節流

對於視窗的滾動事件、onresize事件,可以使用節流,使用定時器讓事件在規定的時間後觸發這樣不會頻繁的觸發時事件,影響頁面的整體效能。

簡單的**:

var timer = null;

function throttle(),500)

}window.onresize = throttle;

陣列去重:(出現的頻率超高)

我已經把陣列去重和資料的深拷貝給弄混了,我也是醉了,所以我在這裡好好總結總結:

1、利用es6的 set

let arr = [1,2,5,3,2,1,4,2,5];

let set = new set(arr);//去重

array.from(set); //轉為陣列,也可以利用擴充套件運算子(...)

2、利用 indexof

let arr = [1,2,2,3,1,5];

let newarr=;

for(let i = 0;i3、物件+陣列

function unique(arr);

for(var i = 0;i4、利用物件的key值不能重複(物件陣列)

let arrs = [

, ,, ,

]function unique(arrs);

let res = ;

for(let i = 0;i判斷是不是空物件:

json.stringify(obj) === 「{}」

object.keys(obj) ===; //返回的是陣列,判斷是不是空陣列

object.getownpropertynames(obj) === ; //同上

1、 object.keys() 和 object.getownpropertynames() 的區別:

兩個方法返回值都是陣列,不包含symbol屬性

object.keys() 是遍歷物件自身所有可列舉的屬性,可以遍歷到原型上的值。

而object.getownpropertynames()是遍歷物件無論是否可列舉

2、json的語法:

let obj =

json.parse(json.stringify(obj));// c不會輸出

json的語法值,可以是true/false、number、string、null、物件、陣列。除此之外不能是其他型別的值(undefined、nan、函式…)

2018 8 20 360 前端面經

1.自我介紹 2.專案試玩 難點 技術棧 3.如何實現地圖 分層 一層如何實現 資料結構,類似 4.如何實現元件間通訊 on,emit,全域性變數 5.websocket遇到的問題,如何除錯 6.碰撞檢測如何實現 資料結構 8.兩欄布局 越多越好 9.settimeout原理 事件迴圈 10.事件繫...

小公尺 前端面經

二分查詢,返回查詢元素的索引function binary search arr,low,high,key var mid parseint high low 2 if arr mid key else if arr mid key else if arr mid key var arr 1,2,3...

作業幫前端面經

實習做的事情以及收穫 webpack優化 為什麼webpack可以識別es6的import es6 模組化 common.js特點 盒模型js基本資料型別 接下來就是 題 附加乙個url解析為object function urltoobj url let arr2 url.split arr2.m...