promise的状态以及api介绍_2019年，盘点一些我出过的前端面试题以及对求职者的建议
筆者雖然曾經(jīng)也面試過很多求職者,但是對于前端的筆試和面試,我覺得并不能體現(xiàn)一個(gè)人的真實(shí)能力,所以建議大家多修煉前端真正的技術(shù).對于前端面試題,之前也承諾過讀者要出一篇,筆者大致總結(jié)一下曾經(jīng)面試的題目.后續(xù)不會(huì)再出面試題,而是聚焦于一些真正的,有利于成長性的技術(shù)文章和思維方式,來幫助大家提高解決問題的能力.
前言
首先總結(jié)一下筆者對于前端領(lǐng)于學(xué)習(xí)的一些成長模型和學(xué)習(xí)路線,來給大家提供一些參考.
下面推薦一些不同技術(shù)選型的優(yōu)秀組件和庫,也是筆者曾今使用過的.
如果公司的前端是以vue為主的,那么你可能需要熟悉如下技能和知識(shí)點(diǎn)
- vue
- vue-router 路由管理
- vuex 狀態(tài)管理
- vue-cli3 vue項(xiàng)目優(yōu)秀的腳手架,可以配置單頁,多頁,ssr, 預(yù)渲染技術(shù)的頁面
- vue-server-renderer 服務(wù)端渲染方案
- vue-devtools vue開發(fā)調(diào)試工具,方便調(diào)試大型復(fù)雜項(xiàng)目
- antd-desigin-vue / element UI 基于vue的第三方ui組件庫
- vxe-table 優(yōu)秀的vue表格解決方案
- vue-multiselect vue強(qiáng)大的多選下拉組件
- Vuelidate 基于vue強(qiáng)大且輕量的校驗(yàn)庫
- vuex-router-sync 保持vue-router和vuex store同步
如果公司的前端是以React為主的,那么你可能需要熟悉如下技能和知識(shí)點(diǎn)
- react
- react-router
- react-thunk 異步redux解決方案
- ant design 優(yōu)秀且強(qiáng)大的react組件庫
- react-json-view JSON 顯示器
- react-quill 富文本編輯器
- rc-color-picker 拾色器
- qrcode.react 二維碼生成器
- antV 數(shù)據(jù)可視化解決方案
- react-beautiful-dnd 基于react的拖拽庫
- emoji-mart 表情庫
- react-image-crop 圖片裁切
- Ant Motion 動(dòng)畫
- react-codemirror2 代碼編輯器
- react-copy-to-clipboard 復(fù)制到剪切板
接下來言歸正傳,開始進(jìn)入正文.
正文
1. 介紹一下ES6的新特性
[參考答案]
- const和let
- 模板字符串
- 箭頭函數(shù)
- 函數(shù)的參數(shù)默認(rèn)值
- Spread / Rest 操作符
- 二進(jìn)制和八進(jìn)制字面量(通過在數(shù)字前面添加0o或0O即可將其轉(zhuǎn)為八進(jìn)制值,二進(jìn)制使用0b或者0B)
- 對象和數(shù)組結(jié)構(gòu)
- ES6中的類(class)
- Promise
- Set()和Map()數(shù)據(jù)結(jié)構(gòu)
- Modules(模塊, 如import, export)
- for..of 循環(huán)
2. 介紹Promise以及Promise的幾種狀態(tài)
[參考答案]
介紹: Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。所謂Promise，簡單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語法上說，Promise 是一個(gè)對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。 狀態(tài): pending(進(jìn)行中)、fulfilled(已成功)和rejected(已失敗)。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)。
3. 談?wù)勀銓﹂]包的理解及其優(yōu)缺點(diǎn)
[參考答案]
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù). 本質(zhì)上,閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁.
優(yōu)點(diǎn)
- 邏輯連續(xù)，當(dāng)閉包作為另一個(gè)函數(shù)調(diào)用參數(shù)時(shí)，避免脫離當(dāng)前邏輯而單獨(dú)編寫額外邏輯。
- 延長局部變量的生命周期, 更具有封裝性, 保護(hù)局部變量。
缺點(diǎn)
- 容易造成內(nèi)存溢出
- 閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值,所以可能會(huì)導(dǎo)致改變父函數(shù)的變量
4. React的生命周期
[參考答案]
- 初始化階段 defaultProps -> constructor -> componentWillMount() -> render() -> componentDidMount()
- 運(yùn)行中階段 componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> componentDidUpdate()
- 銷毀階段 componentWillUnmount()
5. componentWillReceiveProps的觸發(fā)條件是什么
[參考答案] componentWillReceiveProps會(huì)在接收到新的props的時(shí)候調(diào)用
6. vue中v-if和v-show的區(qū)別
[參考答案]
- v-show不管條件是真還是佳，第一次渲染的時(shí)候標(biāo)簽都會(huì)添加到DOM中。切換的時(shí)候，通過display: none;樣式來顯示隱藏元素,對性能影響不是很大。
- v-if在首次渲染的時(shí)候，如果條件為假，不會(huì)在頁面渲染該元素。當(dāng)條件為真時(shí)，開始局部編譯，動(dòng)態(tài)的向DOM元素里面添加元素。當(dāng)條件從真變?yōu)榧俚臅r(shí)候，開始局部編譯，卸載這些元素，也就是刪除。對性能有一定影響
7. 小程序里面開頁面最多多少
[參考答案] 小程序原生頁面存在層級限制，超過一定層數(shù)就會(huì)無法打開新頁面。一開始這個(gè)限制為不超過5層，目前是不超過10層。
8. 取數(shù)組的最大值(ES5、ES6)
[參考答案]
// es5Math.max.apply(null, arr);// es6Math.max(...arr);復(fù)制代碼9. http并發(fā)請求資源數(shù)上限
[參考答案] HTTP客戶端一般對同一個(gè)服務(wù)器的并發(fā)連接個(gè)數(shù)都是有限制的, 最大為6條
10. 如何優(yōu)化網(wǎng)站的SEO
[參考答案]
- title標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁面的title標(biāo)題中不要設(shè)置相同的內(nèi)容。
- meta keywords頁面/網(wǎng)站的關(guān)鍵字。
- meta description網(wǎng)頁描述，需要高度概括網(wǎng)頁內(nèi)容，切記不能太長，過分堆砌關(guān)鍵詞，每個(gè)頁面也要有所不同。
11. 介紹下HTTP狀態(tài)碼, 403、301、302分別代表什么
[參考答案]
當(dāng)瀏覽者訪問一個(gè)網(wǎng)頁時(shí)，瀏覽者的瀏覽器會(huì)向網(wǎng)頁所在服務(wù)器發(fā)出請求。當(dāng)瀏覽器接收并顯示網(wǎng)頁前，此網(wǎng)頁所在的服務(wù)器會(huì)返回一個(gè)包含HTTP狀態(tài)碼的信息頭(server header)用以響應(yīng)瀏覽器的請求。
- 301 (永久移動(dòng)) 請求的網(wǎng)頁已永久移動(dòng)到新位置。 服務(wù)器返回此響應(yīng)(對 GET 或 HEAD 請求的響應(yīng))時(shí)，會(huì)自動(dòng)將請求者轉(zhuǎn)到新位置
- 302 (臨時(shí)移動(dòng)) 服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求
- 403 (禁止) 服務(wù)器拒絕請求
12. RESTful常用的方法和介紹
[參考答案] rest請求方法有4種，包括get,post,put,delete.分別對應(yīng)獲取資源，添加資源，更新資源及刪除資源.
12. React16.3對生命周期的改變
[參考答案] React16.3+廢棄的三個(gè)生命周期函數(shù)
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
取而代之的是兩個(gè)新的生命周期函數(shù)
- static getDerivedStateFromProps(nextProps, prevState) 取代componentWillMount、componentWillReceiveProps和componentWillUpdate
- getSnapshotBeforeUpdate(prevProps, prevState) 取代componentWillUpdate
13. 介紹React高階組件
高階組件(HOC)是 React 中用于復(fù)用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。具體而言，高階組件是參數(shù)為組件，返回值為新組件的函數(shù).其本身是純函數(shù)，沒有副作用。
function logProps(WrappedComponent) { return class extends React.Component { componentWillReceiveProps(nextProps) { console.log('Current props: ', this.props); console.log('Next props: ', nextProps); } render() { // 將 input 組件包裝在容器中，而不對其進(jìn)行修改。Good! return ; } }}復(fù)制代碼14. 緩存相關(guān)的HTTP請求頭
[參考答案]
headers字段 解釋 案例 Expires 服務(wù)端告訴瀏覽器，先把這個(gè)文件緩存起來，在這個(gè)過期時(shí)間之前，該文件都不會(huì)變化 Expires: Mon, 1 Aug 2016 22:43:02 GMT Cache-Control 由于Expires給定的是絕對時(shí)間，而客戶端的系統(tǒng)時(shí)間可以由用戶任意修改, Cache-Control為相對時(shí)間 Cache-Control: max-age=80 Last-Modified(response header) / If-Modified-Since (request header) 服務(wù)端收到請求后會(huì)對比目前文件的最后修改時(shí)間和該請求頭的信息，如果沒有修改，那就直接返回304給瀏覽器，而不返回實(shí)際資源。如果有變化了，就返回200，并且?guī)闲碌馁Y源內(nèi)容 If-Modified-Since:Mon, 01 Aug 2016 13:48:44 GMT Etag / If-None-Match 第一次請求后響應(yīng)頭中包含了Etag，作為時(shí)間標(biāo)簽,下一次請求時(shí)會(huì)把原來的Etag標(biāo)簽帶上(在請求頭中變成了If-None-Match)作為校驗(yàn)標(biāo)準(zhǔn)，若這個(gè)文件如果發(fā)生了改變，則Etag也會(huì)改變。服務(wù)器對比瀏覽器請求頭中的的If-None-Match：如果相同就返回304，而不返回實(shí)際資源如果不同，就返回200和新的資源。
15. 如何優(yōu)化用戶體驗(yàn)
[參考答案]
- 頁面渲染前使用骨架屏或者加載動(dòng)畫,避免大塊白屏
- 使用預(yù)渲染或者ssr技術(shù)提高首屏加載時(shí)間
- 動(dòng)畫使用css3硬件加速,避免用戶操作動(dòng)畫卡頓
- 計(jì)算密集型業(yè)務(wù)使用web worker或者js分片處理,避免js線程阻塞
- 頁面狀態(tài)監(jiān)控,給用戶提供反饋機(jī)制
- 靜態(tài)資源走CDN緩存或者oss服務(wù),提高用戶訪問速度
- 避免用戶操作報(bào)錯(cuò),提供404頁面或者錯(cuò)誤提示頁面
16. 對PWA的了解
[參考答案]
progressive web app： 漸進(jìn)式網(wǎng)頁應(yīng)用.可以將 Web 和 App 各自的優(yōu)勢融合在一起：漸進(jìn)式、可響應(yīng)、可離線、實(shí)現(xiàn)類似 App 可交互、即時(shí)更新、安全、可以被搜索引擎檢索、可推送、可安裝、可鏈接。其核心技術(shù)包括 App Manifest、Service Worker、Web Push，等等。
17. 介紹下跨域
[參考答案]
同源策略/SOP(Same origin policy)是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊, 同源策略要求兩個(gè)通訊地址的協(xié)議、域名、端口號必須相同，否則兩個(gè)地址的通訊將被瀏覽器視為不安全的，并被阻擋下來. 要突破SOP的限制,我們可以使用如下方式:
- CORS 同域安全策略CORS是一種跨域資源請求機(jī)制，它要求當(dāng)前域在響應(yīng)報(bào)頭添加Access-Control-Allow-Origin標(biāo)簽，從而允許指定域的站點(diǎn)訪問當(dāng)前域上的資源
- HTML5 postMessage 可以使用 postMessage 方法和 onmessage 事件來實(shí)現(xiàn)不同域之間的通信，其中postMessage用于實(shí)時(shí)向接收信息的頁面發(fā)送消息
- HTML5 WebSocket WebSocket protocol 是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊，是server push技術(shù)的一種很棒的實(shí)現(xiàn)
- JSONP 是JSON的一種“使用模式”，主要是利用script標(biāo)簽不受同源策略限制的特性，向跨域的服務(wù)器請求并返回一段JSON數(shù)據(jù)
- iframe形式 通過設(shè)置相同的document.domain, 或者不同域通過window.name傳遞數(shù)據(jù)
- 服務(wù)器代理
18. Access-Control-Allow-Origin在服務(wù)端哪里配置
[參考答案] response header響應(yīng)頭
19. csrf跨站攻擊怎么解決
[參考答案]
CSRF, 跨站請求偽造,它可以在用戶毫不知情的情況下以用戶名義偽造請求發(fā)送給受攻擊站點(diǎn)，從而對用戶或者網(wǎng)站造成攻擊. 預(yù)防措施如下:
- 服務(wù)器端驗(yàn)證HTTP Referer字段, Referer記錄了該HTTP請求的來源地址
- 在請求地址中添加token并驗(yàn)證
- 在HTTP頭中自定義屬性并驗(yàn)證
20. 用js寫一個(gè)數(shù)組扁平化函數(shù)
[參考答案]
// reducefunction flatten(arr = []) { return arr.reduce((result, item) => { return result.concat(Array.isArray(item) ? flatten(item) : item) }, [])}// (toString | join) & split(利用數(shù)組的toString或者join,將數(shù)組轉(zhuǎn)化為字符串)function flatten(arr = []) { return arr.toString().split(',').map(item => Number(item))}復(fù)制代碼21. Promise和Callback有什么區(qū)別
[參考答案]
相比于callback，Promise 具有更易讀的代碼組織形式(鏈?zhǔn)浇Y(jié)構(gòu)調(diào)用)，更好的異常處理方式(在調(diào)用 Promise 的末尾添加上一個(gè)catch方法捕獲異常即可)，以及異步操作并行處理的能力(Promise.all()Promise.race()等)。callback最大的問題就是我們通常說的回調(diào)地獄,一旦業(yè)務(wù)邏輯復(fù)雜了,我們不得不使用大量的嵌套回調(diào)代碼,可維護(hù)性很低.
22. 如何實(shí)現(xiàn)高度自適應(yīng)
[參考答案]
- 使用絕對定位, 設(shè)置top,bottom屬性
- 使用flex布局
- float+ height:100%
23. cookie, session, storage的區(qū)別和聯(lián)系
[參考答案]
- cookie存儲(chǔ)于瀏覽器端，而session存儲(chǔ)于服務(wù)端
- cookie的安全性相比于session較弱,cookie容易被第三方劫持,考慮到安全應(yīng)當(dāng)使用session
- session保存在服務(wù)器上,當(dāng)訪問增多時(shí)，會(huì)占用服務(wù)器的資源
- cookie存儲(chǔ)容量有限制，單個(gè)cookie保存數(shù)據(jù)不能超過4k，且很多瀏覽器限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。對于session,默認(rèn)大小一般是1M
- cookie、sessionStorage、localStorage,都保存在瀏覽器端，且受同源策略影響
- cookie數(shù)據(jù)始終在同源的http請求中攜帶，而Storage不會(huì)在請求中攜帶，僅在本地存儲(chǔ)
- 存儲(chǔ)大小上, cookie一般是4k，Storage可以達(dá)到5M-10M
- 數(shù)據(jù)存儲(chǔ)時(shí)間上：sessionStorage僅僅是會(huì)話級別的存儲(chǔ)，它只在當(dāng)前瀏覽器關(guān)閉前有效，不能持久保持；localStorage始終有效，即使窗口或?yàn)g覽器關(guān)閉也一直有效，除非用戶手動(dòng)刪除；cookie只在設(shè)定的 過期時(shí)間之前有效
- 作用域上：sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面； localStorage和 cookie在所有同源窗口是共享的
- Storage支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。并且它提供增刪查api使用更方便
24. 說說你做過的前端性能優(yōu)化(JS原生,React, vue)
[參考答案] 參考周二打卡答案
25. 對web安全的理解
[參考答案]
- CSRF 攻擊和防范
跨站請求偽造,可以理解為攻擊者盜用了用戶的身份，以用戶的名義發(fā)送惡意請求，造成用戶隱私及財(cái)產(chǎn)損失 過程: 1.登錄受信任網(wǎng)站并在本地生成cookie; 2.在不登出 網(wǎng)站 的情況下訪問危險(xiǎn)網(wǎng)站 防范: 關(guān)鍵操作只接受POST請求, 使用驗(yàn)證碼, 檢測Referer, 使用token(或者JWT)
- XSS 攻擊和防范
全稱Cross-site script，跨站腳本攻擊，是Web程序中常見的漏洞。原理是攻擊者向有XSS漏洞的網(wǎng)站中輸入惡意的腳本，當(dāng)其它用戶瀏覽該網(wǎng)站時(shí)候，該腳本會(huì)自動(dòng)執(zhí)行，從而達(dá)到攻擊的目的(盜取Cookie，破壞頁面結(jié)構(gòu)，重定向到釣魚網(wǎng)站等)。 區(qū)分: 分為持久型XSS和非持久性XSS. 持久型XSS是將攻擊的腳本植入到服務(wù)器，從而導(dǎo)致每個(gè)訪問的用戶都會(huì)遭到此XSS腳本的攻擊。非持久型XSS是將惡意腳本包裝在頁面的URL參數(shù)中，通過URL鏈接騙取用戶訪問，從而進(jìn)行攻擊. 防范: 對用戶輸入進(jìn)行HTML轉(zhuǎn)義, 對敏感信息進(jìn)行過濾
- SQL 注入與防范
通過把SQL命令插入到表單中并提交或頁面請求的參數(shù)中，最終使得服務(wù)器執(zhí)行惡意的SQL命令. 防范: 對用戶的輸入進(jìn)行校驗(yàn)或限制長度；對特殊字符進(jìn)行轉(zhuǎn)換, 不要使用動(dòng)態(tài)拼裝SQL，為每個(gè)應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫連接。對隱私信息進(jìn)行加密
- DDOS 攻擊
分布式拒絕服務(wù)(DDoS:Distributed Denial of Service)攻擊指借助于客戶/服務(wù)器技術(shù)，將多個(gè)計(jì)算機(jī)聯(lián)合起來作為攻擊平臺(tái)，對一個(gè)或多個(gè)目標(biāo)發(fā)動(dòng)DDoS攻擊，從而成倍地提高拒絕服務(wù)攻擊的威力。
26. 用js實(shí)現(xiàn)數(shù)組隨機(jī)取數(shù)，每次返回的值都不一樣
[參考答案]
function getUniqueItems(arr, num) { let temp = []; for (let index in arr) { temp.push(arr[index]); } let res = []; for (let i = 0; i0) { let arrIndex = Math.floor(Math.random()*temp.length); res[i] = temp[arrIndex]; temp.splice(arrIndex, 1); } else { break; } } return res;}復(fù)制代碼27. 頁面上有1萬個(gè)button如何綁定事件
[參考答案] 事件委托, 冒泡觸發(fā)
28. base64為什么能提升性能以及它的缺點(diǎn)是什么
[參考答案] 優(yōu)點(diǎn):
- 無額外請求
- 適用于很小或者很簡單的圖片
- 可像單獨(dú)圖片一樣使用，比如背景圖片等
- 沒有跨域問題，不需要考慮緩存、文件頭或者cookies問題 缺點(diǎn):
- CSS 文件體積的增大, 造成CRP(關(guān)鍵渲染路徑)阻塞
- 頁面解析CSS生成的CSSOM時(shí)間增加
29. 介紹webp圖片文件格式
[參考答案]
WebP是一種支持有損壓縮和無損壓縮的圖片文件格式，根據(jù)Google的測試，無損壓縮后的WebP比PNG 文件少了45％的文件大小，即使這些PNG文件經(jīng)過其他壓縮工具壓縮之后，WebP 還是可以減少28％的文件大小。
- 優(yōu)點(diǎn) 更小的文件尺寸 更高的質(zhì)量——與其他相同大小不同格式的壓縮圖像比較
- 缺點(diǎn) 編碼和解碼速度比較慢,存在一定兼容性
30. react-router里的Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
[參考答案]
從渲染的DOM來看，這兩者都是鏈接，都是a標(biāo)簽，區(qū)別是： Link是react-router里實(shí)現(xiàn)路由跳轉(zhuǎn)的鏈接，配合Route使用，react-router攔截了其默認(rèn)的鏈接跳轉(zhuǎn)行為，區(qū)別于傳統(tǒng)的頁面跳轉(zhuǎn)，Link 的“跳轉(zhuǎn)”行為只會(huì)觸發(fā)相匹配的Route對應(yīng)的頁面內(nèi)容更新，而不會(huì)刷新整個(gè)頁面。 a標(biāo)簽是html原生的超鏈接，用于跳轉(zhuǎn)到href指向的另一個(gè)頁面或者錨點(diǎn)元素,跳轉(zhuǎn)新頁面會(huì)刷新頁面。
31. 介紹一下函數(shù)柯里化,并寫一個(gè)柯里化函數(shù)
[參考答案]
柯里化是一種將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù)。柯里化函數(shù)能夠讓我們：
32. 介紹一下從輸入U(xiǎn)RL到頁面加載全過程
[參考答案]
- 瀏覽器的地址欄輸入U(xiǎn)RL并按下回車。
- 瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過期。
- DNS解析URL對應(yīng)的IP。
- 根據(jù)IP建立TCP連接(三次握手)。
- HTTP發(fā)起請求。
- 服務(wù)器處理請求，瀏覽器接收HTTP響應(yīng)。
- 渲染頁面，構(gòu)建DOM樹。
- 關(guān)閉TCP連接(四次揮手)。
33. 說說bind、call、apply的區(qū)別
[參考答案]
call和apply的共同點(diǎn)
- 都能夠改變函數(shù)執(zhí)行時(shí)的上下文，將一個(gè)對象的方法交給另一個(gè)對象來執(zhí)行，并且是立即執(zhí)行的
- 調(diào)用call和apply的對象，必須是一個(gè)函數(shù)Function
call和apply的區(qū)別
- apply的第二個(gè)參數(shù)，必須是數(shù)組或者類數(shù)組，它會(huì)被轉(zhuǎn)換成類數(shù)組，傳入函數(shù)中，并且會(huì)被映射到函數(shù)對應(yīng)的參數(shù)上, 而call從第二個(gè)參數(shù)開始，可以接收任意個(gè)參數(shù)
bind
- bind()方法創(chuàng)建一個(gè)新的函數(shù)，與apply和call比較類似，也能改變函數(shù)體內(nèi)的this指向。不同的是，bind方法的返回值是函數(shù)，并且需要稍后調(diào)用，才會(huì)執(zhí)行。而apply和call 則是立即調(diào)用
34. ES6中的map和原生的對象有什么區(qū)別
[參考答案]
object和Map存儲(chǔ)的都是鍵值對組合。區(qū)別：object的鍵的類型是字符串；map的鍵的類型可以是任意類型；另外，object獲取鍵值使用Object.keys(返回?cái)?shù)組)Map獲取鍵值使用map變量.keys() (返回迭代器)。
35. 說說H5手機(jī)端的適配的幾種方案
[參考答案]
- js實(shí)現(xiàn)一
- css @media媒介查詢(蘇寧易購實(shí)現(xiàn)方式)
- 手淘的lib-flexible實(shí)現(xiàn)方式
36. 用js如何去除url中的#號
[參考答案]
- 情景一: 單純將hash路由改變成history路由即可去除hash的#號,此時(shí)需要服務(wù)器做路由重定向,比如nginx, node重定向
- 情景二: 單純?nèi)コ?
37. Redux狀態(tài)管理器和變量掛載到window中有什么區(qū)別
[參考答案] redux通過制定一套嚴(yán)格的規(guī)范，提供一種規(guī)范式的api和使用方式來處理狀態(tài), 適合大型項(xiàng)目和多人協(xié)同開發(fā)的項(xiàng)目，雖然代碼編寫有些繁復(fù)，但整體數(shù)據(jù)流向清楚，便于問題跟蹤和后期維護(hù),并且支持狀態(tài)回溯.而window的變量管理比較混亂,維護(hù)不當(dāng)還會(huì)造成變量污染,不適合中大型項(xiàng)目的開發(fā).
38. webpack和gulp的優(yōu)缺點(diǎn)
[參考答案]
gulp webpack 定位 基于任務(wù)流的自動(dòng)化打包工具 模塊化打包工具 優(yōu)點(diǎn) 易于學(xué)習(xí)和理解, 適合多頁面應(yīng)用開發(fā) 可以模塊化的打包任何資源,適配任何模塊系統(tǒng),適合SPA單頁應(yīng)用的開發(fā) 缺點(diǎn) 不太適合單頁或者自定義模塊的開發(fā) 學(xué)習(xí)成本低,配置復(fù)雜,通過babel編譯后的js代碼打包后體積過大
39. 說說jsonp為什么不支持post方法
[參考答案]
瀏覽器的同源策略限制從一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互,jsonp跨域本質(zhì)上是通過動(dòng)態(tài)script標(biāo)簽, 本質(zhì)上也是對靜態(tài)資源的訪問,所以只能是get請求
40. 說說棧和堆的區(qū)別, 垃圾回收時(shí)棧和堆的區(qū)別以及棧和堆具體怎么存儲(chǔ)
[參考答案]
1.從定義和存取方式上說:
- 棧stack為自動(dòng)分配的內(nèi)存空間, 它由系統(tǒng)自動(dòng)釋放, 特點(diǎn)是"LIFO，即后進(jìn)先出(Last in, first out)"。數(shù)據(jù)存儲(chǔ)時(shí)只能從頂部逐個(gè)存入，取出時(shí)也需從頂部逐個(gè)取出,js的基本數(shù)據(jù)類型(Undefined、Null、Boolean、Number和String). 基本類型在內(nèi)存中占據(jù)空間小、大小固定 ，他們的值保存在棧空間，按值訪問
- 對heap是動(dòng)態(tài)分配的內(nèi)存，大小不定也不會(huì)自動(dòng)釋放. 特點(diǎn)是"無序"的key-value"鍵值對"存儲(chǔ)方式. 比如js的對象,數(shù)組. 引用類型占據(jù)空間大、大小不固定, 棧內(nèi)存中存放地址指向堆(heap)內(nèi)存中的對象。是按引用訪問的
2.從js數(shù)據(jù)的存取過程上說:
棧內(nèi)存中存放的是對象的訪問地址，在堆內(nèi)存中為這個(gè)值分配空間。這個(gè)值大小不固定，因此不能把它們保存到棧內(nèi)存中。但內(nèi)存地址大小的固定的，因此可以將內(nèi)存地址保存在棧內(nèi)存中。這樣，當(dāng)查詢引用類型的變量時(shí)，先從棧中讀取內(nèi)存地址，然后再通過地址找到堆中的值。
3.棧內(nèi)存和堆內(nèi)存與垃圾回收機(jī)制的聯(lián)系和清除方式:
- 垃圾回收機(jī)制: JavaScript中有自動(dòng)垃圾回收機(jī)制，會(huì)通過標(biāo)記清除的算法識(shí)別哪些變量對象不再使用，對其進(jìn)行銷毀。開發(fā)者也可在代碼中手動(dòng)設(shè)置變量值為null(xxx = null)進(jìn)行清除，讓引用鏈斷開，以便下一次垃圾回收時(shí)有效回收。其次, 函數(shù)執(zhí)行完成后，函數(shù)局部環(huán)境聲明的變量不再需要時(shí)，就會(huì)被垃圾回收銷毀(理想的情況下，閉包會(huì)阻止這一過程)。全局環(huán)境只有頁面退出時(shí)才會(huì)出棧，解除變量引用。所以工程師們應(yīng)盡量避免在全局環(huán)境中創(chuàng)建全局變量，如需使用，一定要在不需要時(shí)手動(dòng)標(biāo)記清除，將內(nèi)存釋放。
- 棧內(nèi)存和堆內(nèi)存通常與垃圾回收機(jī)制有關(guān)。之所以會(huì)區(qū)分棧內(nèi)存和堆內(nèi)存,目的是使程序運(yùn)行時(shí)占用的內(nèi)存最小。當(dāng)某個(gè)方法執(zhí)行時(shí)，都會(huì)建立自己的內(nèi)存棧，在這個(gè)方法內(nèi)定義的變量將會(huì)逐個(gè)放入棧內(nèi)存里，隨著方法的執(zhí)行結(jié)束，這個(gè)方法的內(nèi)存棧也將自然銷毀了。因此，所有在方法中定義的變量都是放在棧內(nèi)存中的；當(dāng)我們創(chuàng)建一個(gè)對象時(shí)，對象會(huì)被保存到運(yùn)行時(shí)數(shù)據(jù)區(qū)中，以便反復(fù)利用(因?yàn)閷ο蟮膭?chuàng)建內(nèi)存開銷較大)，這個(gè)運(yùn)行時(shí)數(shù)據(jù)區(qū)就是堆內(nèi)存。堆內(nèi)存中的對象不會(huì)隨方法的結(jié)束而銷毀，即使方法結(jié)束后，這個(gè)對象還可能被另一個(gè)引用變量所引用，則這個(gè)對象依然不會(huì)被銷毀，只有當(dāng)一個(gè)對象沒有任何引用變量引用它時(shí)，系統(tǒng)的垃圾回收機(jī)制才會(huì)在循環(huán)收集的過程中回收。
41. ES6中l(wèi)et塊作用域是怎么實(shí)現(xiàn)的
[參考答案]
可以通過閉包自執(zhí)行函數(shù)實(shí)現(xiàn)塊作用域
42. 介紹排序算法和快排原理
[參考答案]
排序算法有:冒泡排序, 希爾排序, 快速排序, 插入排序, 歸并排序, 堆排序, 桶排序等.
快速排序原理:
通過一趟排序?qū)⒁判虻臄?shù)據(jù)分割成獨(dú)立的兩部分，其中一部分的所有數(shù)據(jù)都比另外一部分的所有數(shù)據(jù)都要小，然后再按此方法對這兩部分?jǐn)?shù)據(jù)分別進(jìn)行快速排序，整個(gè)排序過程可以遞歸進(jìn)行，以此達(dá)到整個(gè)數(shù)據(jù)變成有序序列。
43. 說說node文件查找的優(yōu)先級
[參考答案] 從文件模塊緩存中加載 > 從原生模塊加載 > 從文件加載
44. WebView和原生是如何通信的
[參考答案]
- 使用Android原生的JavascriptInterface來進(jìn)行js和java的通信
- UrlRouter(通過內(nèi)部實(shí)現(xiàn)的框架去攔截前端寫的url，如果符合UrlRouter的協(xié)議的話，就執(zhí)行相應(yīng)的邏輯)
- WebView 中的 prompt/console/alert 攔截，通常使用 prompt避免副作用
- API注入，通過Native獲取JavaScript環(huán)境上下文，并直接在上面添加方法，使js可以直接調(diào)用
45. pm2怎么做進(jìn)程管理，如何解決進(jìn)程崩潰問題
[參考答案]
- 通過pm2 start去開啟一個(gè)進(jìn)程, pm2 stop去停止某個(gè)進(jìn)程, pm2 list去查看進(jìn)程列表, pm2 monit查看每個(gè)進(jìn)程的cpu使用情況, pm2 restart重啟指定應(yīng)用等
- 進(jìn)程奔潰可以用過設(shè)置自動(dòng)重啟或者限制應(yīng)用運(yùn)行內(nèi)存max_memory_restart(最大內(nèi)存限制數(shù)，超出自動(dòng)重啟)
46. 直接給一個(gè)數(shù)組項(xiàng)賦值，Vue 能檢測到變化嗎,為什么？
[參考答案] vue中的數(shù)組的監(jiān)聽不是通過Object.defineProperty來實(shí)現(xiàn)的，是通過對'push', 'pop','shift','unshift','splice', 'sort','reverse'等改變數(shù)組本身的方法來通知監(jiān)聽的,所以直接給數(shù)組某一項(xiàng)賦值無法監(jiān)聽到變化,解決方案如下:
- 用vue的set方法改變數(shù)組或者對象
- 用改變數(shù)組本身的方法如splice, pop, shift等
- 用深拷貝,解構(gòu)運(yùn)算符
總結(jié)
面試只是進(jìn)入公司的第一步,如何走好它,需要自身的不斷努力和學(xué)習(xí),所以不要沉迷于走捷徑,踏踏實(shí)實(shí)的學(xué)技術(shù)吧. 年前筆者會(huì)總結(jié)一下筆者2019年的技術(shù)成長與規(guī)劃, 希望能和大家繼續(xù)分享真正的前端技術(shù).
最后
如果想了解更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn)，歡迎在《趣談前端》學(xué)習(xí)討論，共同探索前端的邊界。
總結(jié)
以上是生活随笔為你收集整理的promise的状态以及api介绍_2019年，盘点一些我出过的前端面试题以及对求职者的建议的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 做计算机工作的要专用手机吗,怎么在手机上
- 下一篇： 360浏览器查看html文件在哪里,36