❤，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源碼典範部份剖析。