摘要：面試時間晚上時長小時分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時都是怎么學習前端的學習前端的話，我主要是以書籍為主然后是網站視頻博客文檔等學習理論，之后再通過代碼實踐。。。

大概是在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.createClass:是最傳統、兼容性最好的方法，當是相對與其他ES6的創建方式來說代碼量偏多；

ES6 class創建：React.Component是以ES6的形式來創建react的組件的，是React目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass形式；相對于 React.createClass可以更好實現代碼復用；

無狀態組件（直接函數定義）：只傳入兩個參數props、context兩個參數；不存在state，沒有生命周期；

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

1、 無狀態函數式組件

無狀態組件的創建形式使用一個使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡至只有一個render方法，大大的增強了編寫一個組件的便利

無狀態組件不會像其它兩種方法一樣在調用時會創建新實例；它創建時始終保持了一個實例，避免了不必要的檢測和內存分配，坐到了內部的優化；

組件不能訪問this對象

無狀態組件由于沒有實例化過程，所以無法訪問組件this中的對象，例如：this.state等均不能訪問。

組件無法訪問生命周期的方法

2、React.createClass

創建有狀態的組件，這些組件是要被實例化的，并且可以訪問組件的生命周期方法。

一般需要管理組件內部的狀態、使用生命周期方法或者進行this綁定會使用這種形式創建組件。

3、React.createClass與React.Component區別

函數this自綁定

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 
{this.props.name}
    }
})
//  VS
class ItemComponent extends React.Component {
    static propTypes = {
        name: PropTypes.string
    };

    static defaultProps = {
        name: ""
    };
    constructor(props) {
        super(props)
        this.state = {
             isLogin: false
        }
    }
    render(){
        return 
{this.props.name}
    }
}

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

答：不一定

問：為什么呢？

答：。。。。（當時沒想到為啥？但問了呢肯定是有坑的）落落的回答了一點概念；

解答：React在調用render方法后只是構建出了虛擬DOM，之后還會經歷Diff算法的調和過程，找出最小差異樹，然后通過最少的DOM操作將其構建到真實的DOM中；

答：（恍悟，原來是問這個意思，趕緊補下）但是在render方法調用后，我們該是沒有辦法對其進行渲染的阻止的；這些過程只能由React內部控制。

恩恩，好好~沒有騙人

不會改變原數組的方法：

concat：拼接兩個數組，返回拼接后的數組；

filter()：接收一個函數作為參數，數組中每個元素執行函數，返回執行該函數時返回true的元素組成的數組。

map： 返回執行函數后組成的數組；

reduce：累加器；

slice() 方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象

forEach() 方法對數組的每個元素執行一次提供的函數

join() 方法將一個數組（或一個類數組對象）的所有元素連接成一個字符串并返回這個字符串。

會改變原數組

pop（）刪除尾部元素，返回刪除的元素；

push（）添加尾部元素，返回數組長度；

shift（）刪除頭部元素，返回刪除的元素；

unshift()網頭部添加元素，返回長度；

splice（）添加、刪除，

同源限制主要是為了安全，如果沒有同源限制存在瀏覽器中的cookie等其他數據可以任意讀取，不同域下DOM任意操作，Ajax任意請求，這會有很嚴重的安全隱患；

為了保護不同站點和用戶的隱私安全，個瀏覽器便制定了同源策略；

所謂同源即要求協議、域名、端口號完全相同；

一般解決跨域的方式常用的有JSONP(只支持 GET 請求)、跨域資源共享CORS（服務器端通過設置Access-Control-Allow-Origin來進行的）、服務器端設置代理請求：服務器端不受同源策略限制

1）GET：獲取數據

（2）POST：提交數據

（3）HEAD：請求頭信息

（4）PUT：上傳文檔到服務器

（5）DELETE：刪除遠程服務器上的某個文檔

（6）OPTION

發送的請求數不一樣，get發送一個TCP數據包，post兩個；

get向服務器請求數據，數據放于URL后相對不安全、post發送數據相對更加安全點；

post數據發送大小大于get；但兩種都會有限制（瀏覽器和服務器都會限制）

一個臨時重定向；一個永久重定向

冒泡排序

選擇排序

插入排序

歸并排序

快速排序

恩恩，直接傳化為二進制就知道啦？求解？？？？？

給我耐心的講解了，當時懂了點，現在再多研究下吧

還好不是太難，想想看……………………

整個過程CSS、Js沒怎么問，感覺側重于框架、網絡、算法這些；相比之前的面試問題沒有很多，就是涉及的比較廣，偏向于問實踐；然后面試官挺好的，不同的或者不足的都會給指出，給解釋

說一個禮拜左右給結果，恩恩~不過怎樣數據結構偏弱，補補再說！

大概能想起這么多了

往期經典JavaScript面試題