面試之旅-深圳 遇到的問題和一些本身的拓展以及答案1

❤，es6中的高級數據結構set和map的使用以及與es5中舊有的obj、array等結構的差異？
(1) Set構建函數能夠接受一個數組做爲初始化參數

var s = new Set([1,2,3,4,'1','2','3','4']);

(2) 有如下方法：add、delete、has、clear 做用如其名
(3) 能夠用Array.from方法將Set結構轉換爲數組結構

var items = new Set([1,2,3,4,5]);
var new_array = Array.from( items );

(4) Set中每一個元素只存在一個key
(4) es5中js對象只可使用字符串充當key值，必定程度上有限制。而Map結構就是爲了解決這一問題。
(5) 能夠接受一個二維數組做爲初始化參數

var s = new Map([["name","小明"],["title","Author"]])
//map.size //2
//map.has("name") //true
//map.get("name") //小明

---

❤，js中的this，好比es6箭頭函數中的this
比較基礎的來說，就是「指函數執行時，它的上一級對象，若是沒有上一級對象，則爲最高層Window」。

固然1，須要區分strict模式，由於在strict模式中，this不會指到window，而是undefined。好比：

function abc(){
  console.log(this);
}
或
var abc = function (){
  console.log(this);
}

abc(); //非嚴格模式下返回 Window
       //嚴格模式下返回 undefined

2，es6中箭頭函數會有所差別："箭頭函數中的this，繼承父級執行上下文"。在定義的時候就已經被決定了，不管使用apply仍是call都沒法改變。（其實這個改變主要意義是爲了向靜態化靠攏，由於大多數語言，好比java、php中的this，即和箭頭函數中的this指向同樣，而es5中非new+構造函數建立的函數的this，太特殊了），例子：

es5中：
var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say(); //22

而在es6中
var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say(); //11

3，有一些方法能夠改變this的指向，好比new+構造函數方式，好比apply與call等。好比：

var a=11
function test1(){
    a=22;
    let b=function(){
        console.log(this.a);
    };
    b();
}
var x = new test1();//22

若是不使用構造函數，則：
var a=11
var test1 = {
    a:22,
    b:function(){
        console.log(this.a);
    }
}
var x = test1.b;
console.log(x());//11

//call和apply是Function對象的方法，兩個方法的做用是同樣的：
//call誰,apply誰，就把this指向誰。
//call與apply的區別就在於call的參數須要一個個傳，而apply接受一個數組做爲參數。
window.color = 'red';
document.color = 'yellow';

var s1 = {color: 'blue' };
function changeColor(){
    console.log(this.color);
}

changeColor.call();         //red (默認傳遞參數)
changeColor.call(window);   //red
changeColor.call(document); //yellow
changeColor.call(this);     //red
changeColor.call(s1);       //blue

參考：https://www.cnblogs.com/pssp/... -https://blog.csdn.net/liwusen... - https://blog.csdn.net/ganying...

---

❤，前端開發幾種設計模式的概念，及典型使用場景。參考：http://garychang.cn/2017/01/1...

1，單例模式：聲明一個類，在其中使用閉包，那麼這個類中的變量是一直存在於內存中的，每次實例化這個類，都會去判斷內存中該類是否存在，即成爲單例。參考，https://www.cnblogs.com/yongl...
2，觀察者模式：設計該模式背後的主要動力是促進造成鬆散耦合。在這種模式中，並非一個對象調用另外一個對象的方法，而是一個對象訂閱另外一個對象的特定活動並在狀態改變後得到通知。參考，https://www.cnblogs.com/haoyi...
3，工廠模式。
4，裝飾者模式。
and so on..

---

❤，mvvm和mvc的架構模式的概念和區別
(1) mvc：Model-View-Controller。 model是數據，view是用戶視圖層，controller是邏輯處理層。
(2) mvvm：Model-View-ViewModel。完全切斷model和view層的聯繫，使用雙向綁定進行交互，view層若是修改，model層會修改，反之也會發生修改。好比AngularJs

---

❤，請寫出從"在瀏覽器輸入域名"到"頁面靜態資源徹底加載"的整個過程
https://www.cnblogs.com/daiji... - https://segmentfault.com/a/11...

注：我注意到這裏是問"頁面靜態資源徹底加載"，而不是"瀏覽器接收數據"，因此須要把瀏覽器解析html代碼的過程也詳述進來，即引起面試官下一問題..

---

❤，瀏覽器加載文件的方式（js是在全部靜態文件下載完以後運行，仍是下載完js即刻運行？2，<img>加載方式和js、css等同樣嗎）
https://segmentfault.com/a/11...

---

❤，冒泡排序算法將如下數組 var a = [B,A,E,C,D] 排序成a = [A,B,C,D,E]
1，冒泡算法的思想是：每一次對比相鄰兩個數據的大小，小的排在前面，若是前面的數據比後面的大就交換這兩個數的位置。
2，使用string.charCodeAt()方法來判斷一個字符的ASCII碼數值。從A-Z，依次增長。
3，本題提到了"冒泡算法"，那麼就認爲不是要使用javascript原生的sort()方法，要本身封裝一個相似功能的方法或稱函數。
4，封裝冒泡算法以下：

function sortage (arr)
{
    for (let i = 0;i<arr.length-1;i++){
        for (let j = i + 1;j<arr.length;j++){
            if(arr[i].charCodeAt(0) > arr[j].charCodeAt(0)){
                let temp_l = arr[j];
                let temp_r = arr[i];
                arr[i] = temp_l;
                arr[j] = temp_r;
            }
        }
    }
    return arr;
}

let sampleArr = ['E','A','C','F','B','D'];

sortage(sampleArr);//['A','B','C','D','E','F']

---

❤，組件化思想是什麼意思，實際應用場景如何？與之相對應的典型前端架構思想是什麼？兩者有何區別？
參考：https://www.jianshu.com/p/944...

---

❤，大概瞭解一下移動開發的幾種css佈局，好比css3新標準的flexible佈局和grid佈局等等
1，css2.1中的佈局方式：

1）block佈局：爲了展現文檔流。
2）inline佈局：爲了展現文本。
3）table佈局：爲了展現2D信息信息。
4）定位佈局：爲了很是直接地定位元素而設計出來的佈局模式，定位元素基本與其餘元素無關。

2，css3中引入了新的佈局模式：伸縮佈局，是爲了呈現複雜的應用與頁面而設計出來的。
3，一個伸縮佈局，即Flexbox是由一個伸縮容器（flex containers）和在這個容器裏的伸縮項目（flex items）組成。
4，常見屬性：

1，flex-direction: row | row-reverse | column | column-reverse;決定浮動方向是橫向仍是縱向。
2，flex-wrap: nowrap | wrap 決定是否換行顯示
3，flex-flow: <flex-direction> || <flex-wrap>
4，justify-content: flex-start | flex-end | center | space-between | space-around;項目在主軸上的對齊方式(主軸到底是哪一個軸要看屬性flex-direction的設置了),
5，flex: 比例佔用。舉例：
    .main {
      width: 600px;
    }
    .left {
      flex: 1;
    }
    .right {
      flex: 2;
    }
    是表示中間寬度爲定寬600px,.left與.right按照1:2的比例佔用flex container的剩餘所有空間

參考：https://www.cnblogs.com/xuyun...

❤，React組件的生命週期
整體上分爲三個狀態，以及分佈於其中的鉤子：

1，實例化（掛載）
    getDefaultProps
    getInitialState
    componentWillMount
    render
    componentDidMount
2，存在期（運行）
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    render
    componentDidUpdate
3，銷燬&清理期
    componentWillUnmount

參考：http://react-china.org/t/reac...

❤，React可控組件和非可控組件分別是什麼區別，通常使用場景是什麼

❤，頁面加載速度優化方法。假若有1000萬用戶反映網頁顯示很"卡"（大於3s），如何針對此狀況立項排查？

❤，前端安全有了解嗎。
常見的前端安全問題：

1，xss: 跨域腳本攻擊
    a,反射形：主要依靠站點服務端返回腳本，在客戶端觸發執行從而發起Web攻擊。前端應對方案主要就是要過濾轉義後臺傳過來的標籤，好比script標籤，以及標籤屬性，好比onerror等屬性。後端反向一致。
    b,存儲型：https://segmentfault.com/a/1190000011459463#articleHeader3
2，csrf: 跨站請求僞造
    https://segmentfault.com/a/1190000011459463#articleHeader4

參考：https://segmentfault.com/a/11...

❤，AngularJs中雙向綁定的實現原理？髒值檢測呢？

雙向綁定是mvvm框架的核心特色。angular做爲經典mvvm框架，它內部封裝了各類事件，例如click, settimeout,xhr response等。在其中觸發$digest循環，這個循環裏會遍歷$watch列表，只要其中有值發生改變，$digest就會遞歸觸發，比較舊值和新值，直到沒有值發生改變，完成最後一次$digest循環。這個時候更新視圖，使其與數據模型一致。髒值檢測的實現原理也在其中，只要$digest循環在進行，那麼就存在$dirty髒值。

❤，AngularJs中依賴注入的實現原理？html僞屬性指令呢？
依賴注入（Dependency Injection，簡稱DI）是c#、java等語言框架設計原則中"控制反轉"的典型案例。angular把它引入到js中。它實際工做的原理以下：

1，獲得函數的依賴項（即參數）
    使用Function.prototype.toString，獲得函數的源碼字符串，而後解析其中的依賴項.
2，查找依賴項所對應的對象。
    在angular的一個對象數組中找到這個對象便可
3，執行時注入：
    經過 fn.apply方法把執行上下文，和依賴列表傳入函數並執行

angular指令本質上是對html的補充擴展。在angular運行的過程當中，會啓動一個叫$compile的服務，這個服務會對dom樹進行遍歷，找到樹上全部的指令名，而且對應運行。

參考：https://www.cnblogs.com/etoah... -

❤，講一下你理解的promise。
Promise的誕生其實一開始是爲了增強node後臺可讀性的：由於nodeJs以豐富的異步處理而提升效率著稱，可是過多的異步操做會下降代碼的可讀性，因而在es6版本中Promise應運而生。
通常表示形式：

new Promise(
    function(resolve, reject) {
        if (/* success */) {
            // ...執行代碼
            resolve();
        } else { /* fail */
            // ...執行代碼
            reject();
        }
    }
);

方法：

1，Promise.prototype.then()
2，Promise.prototype.catch()
and so on..

關於promise的resolve和reject以及promise狀態：

若是then()方法中返回了一個參數值，那麼返回的Promise將會變成接收狀態。
若是then()方法中拋出了一個異常，那麼返回的Promise將會變成拒絕狀態。
若是then()方法調用resolve()方法，那麼返回的Promise將會變成接收狀態。
若是then()方法調用reject()方法，那麼返回的Promise將會變成拒絕狀態。
若是then()方法沒有明確指定的resolve(data)/reject(data)/return data時，那麼返回的新Promise就是接收狀態，能夠一層一層地往下傳遞。

❤，Babel是如何編譯es6中的class的。
就是經過es5中 構造函數 + prototype原型鏈 繼承的方式來實現的。
參考：https://segmentfault.com/a/11...

❤，ES6中數組和對象新增的經常使用操做方法。
❤，Jquery（或zepto）和Angular源碼經典部分解析。