前端面試日記（二）

時間 2019-11-16

標籤前端面試日記欄目快樂工作简体版

原文原文鏈接

大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時間，剛開始說是13號晚上7點；後面可能時間有變，中午來了個電話說改到9-10點；怎麼說算是第一次面試本身目標公司之一吧，記錄下無論過沒過，也是一份寶貴經歷。

（面試時間：2018-6-12 晚上：9.00；時長：1小時11分鐘；公司：6666，（一面））

（一）簡單的介紹下本身

介紹的真的很簡單。。。。。。

（二）平時都是怎麼學習前端的？

me：學習前端的話，我主要是以書籍爲主、而後是網站視頻、博客、文檔等學習理論，以後再經過代碼實踐。。。
H:前端的學習的話通常是得經過實踐的，平時有本身作過項目嗎？
me：學習基礎的js階段的話主要是經過實現一些基本特效和模塊功能；在學習jQuery的時候作過一個

（三）作過哪些項目，你在其中主要工做

說了下使用JQuery階段，作過一個比較簡單的商場；
在接觸React是，也就是最近作的項目是一個徹底使用React全家桶搭建的二手商場；
其中主要的工做的話就是負責前端的大部分工做，包括界面的規劃，還有就是先後端交互等；
估計是一面，以後並無很深刻的問項目了，直接轉到談實習經歷。

（四）看你有在淘寶美工的實習經歷，說說你的工做

當時是在深圳的一家小型的電商公司實習的，主要工做的話，包括一些簡單的PS圖片處理；
還有就是店鋪的代碼美工優化，由於在淘寶和阿里的平臺上店鋪的裝修能夠經過代碼進行書寫；可是都會有對應的使用限制（簡單的說了下本身的平常工做）

（五）React組件的建立方式和區別

React組件在本質上就是一個類，建立方式能夠說用三種形式：

React.createClass:是最傳統、兼容性最好的方法，當是相對與其餘ES6的建立方式來講代碼量偏多；
ES6 class建立：React.Component是以ES6的形式來建立react的組件的，是React目前極爲推薦的建立有狀態組件的方式，最終會取代React.createClass形式；相對於 React.createClass能夠更好實現代碼複用；
無狀態組件（直接函數定義）：只傳入兩個參數props、context兩個參數；不存在state，沒有生命週期；

說的優缺點不是太詳細，這裏科普下：

一、 無狀態函數式組件前端

無狀態組件的建立形式使用一個使代碼的可讀性更好，而且減小了大量冗餘的代碼，精簡至只有一個render方法，大大的加強了編寫一個組件的便利
無狀態組件不會像其它兩種方法同樣在調用時會建立新實例；它建立時始終保持了一個實例，避免了沒必要要的檢測和內存分配，坐到了內部的優化；
組件不能訪問this對象react
- 無狀態組件因爲沒有實例化過程，因此沒法訪問組件this中的對象，例如：this.state等均不能訪問。
組件沒法訪問生命週期的方法

二、React.createClass面試

建立有狀態的組件，這些組件是要被實例化的，而且能夠訪問組件的生命週期方法。
通常須要管理組件內部的狀態、使用生命週期方法或者進行this綁定會使用這種形式建立組件。

三、React.createClass與React.Component區別算法

函數this自綁定segmentfault
- React.createClass建立的組件，其每個成員函數的this都有React自動綁定；
- React.Component建立的組件，其成員函數不會自動綁定this，須要開發者手動bind綁定，不然this不能獲取當前組件實例對象。
組件屬性類型propTypes及其默認props、state屬性配置不一樣

const ItemComponent = React.createClass({
    propTypes: { 
        name: React.PropTypes.string
    },
     getInitialState(){ 
        return {
            isLogin: false
        }
    },
    getDefaultProps(){ 
        return {
            name: 'li'    
        }
    }
    render(){
        return <div>{this.props.name}</div>
    }
})
//  VS
class ItemComponent extends React.Component {
    static propTypes = {
        name: PropTypes.string
    };

    static defaultProps = {
        name: ''
    };
    constructor(props) {
        super(props)
        this.state = {
             isLogin: false
        }
    }
    render(){
        return <div>{this.props.name}</div>
    }
}

（六）說說React生命週期

好像面試問道React都會問生命週期，以前都被問到過，詳情React生命週期詳解

（七）React中無論在生命狀況下只要調用了Reader方法，界面都會從新渲染嗎？

答：不必定
問：爲何呢？
答：。。。。（當時沒想到爲啥？但問了呢確定是有坑的）落落的回答了一點概念；
解答：React在調用render方法後只是構建出了虛擬DOM，以後還會經歷Diff算法的調和過程，找出最小差別樹，而後經過最少的DOM操做將其構建到真實的DOM中；
答：（恍悟，原來是問這個意思，趕忙補下）可是在render方法調用後，咱們該是沒有辦法對其進行渲染的阻止的；這些過程只能由React內部控制。

（八）問個簡單的CSS基礎，說說相對佈局和絕對佈局

恩恩，好好~沒有騙人

（九）問下js基礎，數組的操做

不會改變原數組的方法：後端
- concat：拼接兩個數組，返回拼接後的數組；
- filter()：接收一個函數做爲參數，數組中每一個元素執行函數，返回執行該函數時返回true的元素組成的數組。
- map：返回執行函數後組成的數組；
- reduce：累加器；
- slice() 方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象
- forEach() 方法對數組的每一個元素執行一次提供的函數
- join() 方法將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。
會改變原數組跨域
- pop（）刪除尾部元素，返回刪除的元素；
- push（）添加尾部元素，返回數組長度；
- shift（）刪除頭部元素，返回刪除的元素；
- unshift()網頭部添加元素，返回長度；
- splice（）添加、刪除，

（十）你怎麼理解同源策略？

同源限制主要是爲了安全，若是沒有同源限制存在瀏覽器中的cookie等其餘數據能夠任意讀取，不一樣域下DOM任意操做，Ajax任意請求，這會有很嚴重的安全隱患；
爲了保護不一樣站點和用戶的隱私安全，個瀏覽器便制定了同源策略；
所謂同源即要求協議、域名、端口號徹底相同；
通常解決跨域的方式經常使用的有JSONP(只支持 GET 請求)、跨域資源共享CORS（服務器端經過設置Access-Control-Allow-Origin來進行的）、服務器端設置代理請求：服務器端不受同源策略限制