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

大概是在6月11號(hào)在Boss直聘投的簡(jiǎn)歷，6月12號(hào)中午收到電話約的面試時(shí)間，剛開(kāi)始說(shuō)是13號(hào)晚上7點(diǎn)；后面可能時(shí)間有變，中午來(lái)了個(gè)電話說(shuō)改到9-10點(diǎn)；怎么說(shuō)算是第一次面試自己目標(biāo)公司之一吧，記錄下不管過(guò)沒(méi)過(guò)，也是一份寶貴經(jīng)歷。

（面試時(shí)間：2018-6-12 晚上：9.00；時(shí)長(zhǎng)：1小時(shí)11分鐘；公司：6666，（一面））

介紹的真的很簡(jiǎn)單。。。。。。

me：學(xué)習(xí)前端的話，我主要是以書(shū)籍為主、然后是網(wǎng)站視頻、博客、文檔等學(xué)習(xí)理論，之后再通過(guò)代碼實(shí)踐。。。

H:前端的學(xué)習(xí)的話一般是得通過(guò)實(shí)踐的，平時(shí)有自己做過(guò)項(xiàng)目嗎？

me：學(xué)習(xí)基礎(chǔ)的js階段的話主要是通過(guò)實(shí)現(xiàn)一些基本特效和模塊功能；在學(xué)習(xí)jQuery的時(shí)候做過(guò)一個(gè)

說(shuō)了下使用JQuery階段，做過(guò)一個(gè)比較簡(jiǎn)單的商場(chǎng)；

在接觸React是，也就是最近做的項(xiàng)目是一個(gè)完全使用React全家桶搭建的二手商場(chǎng)；

其中主要的工作的話就是負(fù)責(zé)前端的大部分工作，包括界面的規(guī)劃，還有就是前后端交互等；

估計(jì)是一面，之后并沒(méi)有很深入的問(wèn)項(xiàng)目了，直接轉(zhuǎn)到談實(shí)習(xí)經(jīng)歷。

當(dāng)時(shí)是在深圳的一家小型的電商公司實(shí)習(xí)的，主要工作的話，包括一些簡(jiǎn)單的PS圖片處理；

還有就是店鋪的代碼美工優(yōu)化，因?yàn)樵谔詫毢桶⒗锏钠脚_(tái)上店鋪的裝修可以通過(guò)代碼進(jìn)行書(shū)寫(xiě)；但是都會(huì)有對(duì)應(yīng)的使用限制（簡(jiǎn)單的說(shuō)了下自己的日常工作）

React組件在本質(zhì)上就是一個(gè)類，創(chuàng)建方式可以說(shuō)用三種形式：

React.createClass:是最傳統(tǒng)、兼容性最好的方法，當(dāng)是相對(duì)與其他ES6的創(chuàng)建方式來(lái)說(shuō)代碼量偏多；

ES6 class創(chuàng)建：React.Component是以ES6的形式來(lái)創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代React.createClass形式；相對(duì)于 React.createClass可以更好實(shí)現(xiàn)代碼復(fù)用；

無(wú)狀態(tài)組件（直接函數(shù)定義）：只傳入兩個(gè)參數(shù)props、context兩個(gè)參數(shù)；不存在state，沒(méi)有生命周期；

說(shuō)的優(yōu)缺點(diǎn)不是太詳細(xì)，這里科普下：

1、 無(wú)狀態(tài)函數(shù)式組件

無(wú)狀態(tài)組件的創(chuàng)建形式使用一個(gè)使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡(jiǎn)至只有一個(gè)render方法，大大的增強(qiáng)了編寫(xiě)一個(gè)組件的便利

無(wú)狀態(tài)組件不會(huì)像其它兩種方法一樣在調(diào)用時(shí)會(huì)創(chuàng)建新實(shí)例；它創(chuàng)建時(shí)始終保持了一個(gè)實(shí)例，避免了不必要的檢測(cè)和內(nèi)存分配，坐到了內(nèi)部的優(yōu)化；

組件不能訪問(wèn)this對(duì)象

無(wú)狀態(tài)組件由于沒(méi)有實(shí)例化過(guò)程，所以無(wú)法訪問(wèn)組件this中的對(duì)象，例如：this.state等均不能訪問(wèn)。

組件無(wú)法訪問(wèn)生命周期的方法

2、React.createClass

創(chuàng)建有狀態(tài)的組件，這些組件是要被實(shí)例化的，并且可以訪問(wèn)組件的生命周期方法。

一般需要管理組件內(nèi)部的狀態(tài)、使用生命周期方法或者進(jìn)行this綁定會(huì)使用這種形式創(chuàng)建組件。

3、React.createClass與React.Component區(qū)別

函數(shù)this自綁定

React.createClass創(chuàng)建的組件，其每一個(gè)成員函數(shù)的this都有React自動(dòng)綁定；

React.Component創(chuàng)建的組件，其成員函數(shù)不會(huì)自動(dòng)綁定this，需要開(kāi)發(fā)者手動(dòng)bind綁定，否則this不能獲取當(dāng)前組件實(shí)例對(duì)象。

組件屬性類型propTypes及其默認(rèn)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}
    }
}

好像面試問(wèn)道React都會(huì)問(wèn)生命周期，之前都被問(wèn)到過(guò)，詳情React生命周期詳解

答：不一定

問(wèn)：為什么呢？

答：。。。。（當(dāng)時(shí)沒(méi)想到為啥？但問(wèn)了呢肯定是有坑的）落落的回答了一點(diǎn)概念；

解答：React在調(diào)用render方法后只是構(gòu)建出了虛擬DOM，之后還會(huì)經(jīng)歷Diff算法的調(diào)和過(guò)程，找出最小差異樹(shù)，然后通過(guò)最少的DOM操作將其構(gòu)建到真實(shí)的DOM中；

答：（恍悟，原來(lái)是問(wèn)這個(gè)意思，趕緊補(bǔ)下）但是在render方法調(diào)用后，我們?cè)撌菦](méi)有辦法對(duì)其進(jìn)行渲染的阻止的；這些過(guò)程只能由React內(nèi)部控制。

恩恩，好好~沒(méi)有騙人

不會(huì)改變?cè)瓟?shù)組的方法：

concat：拼接兩個(gè)數(shù)組，返回拼接后的數(shù)組；

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

map： 返回執(zhí)行函數(shù)后組成的數(shù)組；

reduce：累加器；

slice() 方法返回一個(gè)從開(kāi)始到結(jié)束（不包括結(jié)束）選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對(duì)象

forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)

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

會(huì)改變?cè)瓟?shù)組

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

push（）添加尾部元素，返回?cái)?shù)組長(zhǎng)度；

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

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

splice（）添加、刪除，

同源限制主要是為了安全，如果沒(méi)有同源限制存在瀏覽器中的cookie等其他數(shù)據(jù)可以任意讀取，不同域下DOM任意操作，Ajax任意請(qǐng)求，這會(huì)有很嚴(yán)重的安全隱患；

為了保護(hù)不同站點(diǎn)和用戶的隱私安全，個(gè)瀏覽器便制定了同源策略；

所謂同源即要求協(xié)議、域名、端口號(hào)完全相同；

一般解決跨域的方式常用的有JSONP(只支持 GET 請(qǐng)求)、跨域資源共享CORS（服務(wù)器端通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的）、服務(wù)器端設(shè)置代理請(qǐng)求：服務(wù)器端不受同源策略限制

1）GET：獲取數(shù)據(jù)

（2）POST：提交數(shù)據(jù)

（3）HEAD：請(qǐng)求頭信息

（4）PUT：上傳文檔到服務(wù)器

（5）DELETE：刪除遠(yuǎn)程服務(wù)器上的某個(gè)文檔

（6）OPTION

發(fā)送的請(qǐng)求數(shù)不一樣，get發(fā)送一個(gè)TCP數(shù)據(jù)包，post兩個(gè)；

get向服務(wù)器請(qǐng)求數(shù)據(jù)，數(shù)據(jù)放于URL后相對(duì)不安全、post發(fā)送數(shù)據(jù)相對(duì)更加安全點(diǎn)；

post數(shù)據(jù)發(fā)送大小大于get；但兩種都會(huì)有限制（瀏覽器和服務(wù)器都會(huì)限制）

一個(gè)臨時(shí)重定向；一個(gè)永久重定向

冒泡排序

選擇排序

插入排序

歸并排序

快速排序

恩恩，直接傳化為二進(jìn)制就知道啦？求解？？？？？

給我耐心的講解了，當(dāng)時(shí)懂了點(diǎn)，現(xiàn)在再多研究下吧

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

整個(gè)過(guò)程CSS、Js沒(méi)怎么問(wèn)，感覺(jué)側(cè)重于框架、網(wǎng)絡(luò)、算法這些；相比之前的面試問(wèn)題沒(méi)有很多，就是涉及的比較廣，偏向于問(wèn)實(shí)踐；然后面試官挺好的，不同的或者不足的都會(huì)給指出，給解釋

說(shuō)一個(gè)禮拜左右給結(jié)果，恩恩~不過(guò)怎樣數(shù)據(jù)結(jié)構(gòu)偏弱，補(bǔ)補(bǔ)再說(shuō)！

大概能想起這么多了

往期經(jīng)典JavaScript面試題