1.面試題總結

1.簡述TCP與UDP的區別。

一、TCP面向鏈接（如打電話要先撥號創建鏈接）;UDP是無鏈接的，即發送數據以前不須要創建鏈接
二、TCP提供可靠的服務。也就是說，經過TCP鏈接傳送的數據，無差錯，不丟失，不重複，且按序到達;UDP盡最大努力交付，即不保證可靠交付
三、TCP面向字節流，其實是TCP把數據當作一連串無結構的字節流;UDP是面向報文的UDP沒有擁塞控制，所以網絡出現擁塞不會使源主機的發送速率下降（對實時應用頗有用，如IP電話，實時視頻會議等）
四、每一條TCP鏈接只能是點到點的;UDP支持一對一，一對多，多對一和多對多的交互通訊
五、TCP首部開銷20字節;UDP的首部開銷小，只有8個字節
六、TCP的邏輯通訊信道是全雙工的可靠信道，UDP則是不可靠信道
複製代碼

2.什麼是flex佈局，flex都有哪些值。

詳解：www.ruanyifeng.com/blog/2015/0…

3.解決跨域問題的方案有哪些？簡述jsonp實現的原理？

方案：
1.jsonp 跨域
2.postMessage 跨域
3.跨域資源共享 CORS
4.node 代理跨域
5.nginx 代理跨域
6.WebSocket 協議跨域
7.document.domain + iframe 跨域
8.window.name + iframe 跨域
9.location.hash + iframe 跨域
10.withCredentials 屬性

原理：
jsonp是一種跨域通訊的手段，它的原理其實很簡單：
它的基本思想是，網頁經過添加一個<script>元素，向服務器請求JSON數據，這種作法不受同源政策限制；服務器收到請求後，將數據放在一個指定名字的回調函數裏傳回來。首先，網頁動態插入<script>元素，由它向跨源網址發出請求。
複製代碼

4.實現一個方法對字符串進行處理，使字符串每一個字符之間加上空格。

1.先把字符串分割成字符串數組，再把數組中的全部元素放入一個字符串
const s = "chenlin";
function Str(obj) {
     return obj.split('').join('-');
}
console.log(Str(s));
// c-h-e-n-l-i-n

2.原型基礎方式
const s = "chenlin";
String.prototype.spacify = function() {
    return this.split('').join('-');
}
console.log(s.spacify());
// c-h-e-n-l-i-n

3.for循環和charAt，有弊端後面多一個-
const s = "chenlin";
function Str(obj) {
     let result = "";
     for(let i=0;i<obj.length;i++){
         //可返回指定位置的字符
         result += obj.charAt(i);
         result += '-'
     }
     return result;
}
console.log(Str(s));
// c-h-e-n-l-i-n-

複製代碼

5.什麼是原型對象？如何判斷一個屬性存在於實例中，仍是存在於原型中？

prototype
函數有原型，函數有一個屬性叫prototype，函數的這個原型指向一個對象，這個對象叫原型對象。這個原型對象有一個constructor屬性，指向這個函數自己。
一個實例化對象，沒有prototype屬性。
function fn(){
    console.log(1);
}
console.log(fn.prototype.constructor == fn)
//  true

__proto__
JavaScript中，萬物皆對象，任何東西都有__proto__屬性。這個叫隱式原型。
第一種狀況：
var obj = {
    name:'chenlin'
}
obj.__proto__ == Object.prototype;
// true

第二種狀況：
 function Person(){}
 var person1 = new Person();
 console.log(person1.__proto__==Person.prototype);
 // true
 
 第三種狀況：
 function Foo() {

};
console.log(Foo.__proto__==Function.prototype);
//  true

第四種狀況：
console.log(String.prototype.__proto__==Object.prototype);
//  true


如何判斷一個屬性存在於實例中，仍是存在於原型中?
1.原生js沒提供直接判斷屬性是否存在於原型對象的方法，但同時使用hasOwnProperty() 和in操做符，能實現這個功能！
obj.hasOwnProperty(attribute)：   能夠檢測一個屬性是否存在於一個實例對象中，仍是存在於原型對象中，若存在於實例對象中，則返回true，示例：
function Person() {
    // this.name="overwrite"; //構造函數中重寫屬性
}
Person.prototype = {
    name: "Nike",
    sayName: function () {
        console.log(this.name);
    }
}
var person1 = new Person();
// person1.name="overwrite";//實例中重寫屬性
console.log(person1.hasOwnProperty("name"));
複製代碼

6.什麼是Promise,它有幾種狀態？

Promise 是異步編程的一種解決方案，比傳統的解決方案 (回調函數和事件)更合理和更強大。咱們能夠簡單的把它理解爲一個容器，它裏面裝的是一個異步操做（某個將來纔會結束的事件）的結果。Promise操做後返回的對象仍是一個新的Promise對象，因此支持鏈式調用，它能夠把異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數，更便於理解與閱讀。

1.Promise對象狀態不受外界影響，它有三種狀態：
pending：進行中
fulfilled：已成功
rejected：已失敗
只有異步操做的結果才能肯定當前處於哪一種狀態，任何其餘操做都不能改變這個狀態。這也是Promise（承諾）的由來。
2.Promise狀態一旦改變就不會再變，任什麼時候候均可以獲得這個結果。它的狀態改變只有兩種結果：
一、從pending狀態變爲fulfilled狀態
二、從pending狀態變爲rejected狀態
只要有其中一種狀況發生，狀態就凝固了，不會再變，會一直獲得這個結果，後續再添加Promise的回調函數也只能拿到前面狀態凝固的結果

Promise缺點：

1.沒法取消Promise，一旦新建它就會當即執行，沒法中途取消
2.若是不設置回調函數（沒有捕獲錯誤），Promise內部拋出的錯誤，不會反應到外部
3.當處於pending狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）
複製代碼

7.es6屬性，this指向。

詳解：www.jianshu.com/p/7a06615a9…

8.v-if和v-show的區別是什麼，分別適用於什麼場景。

1.手段：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是經過設置DOM元素的display樣式屬性控制顯隱；
2.編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件；v-show只是簡單的基於css切換；
3.編譯條件：v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部編譯（編譯被緩存？編譯被緩存後，而後再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素保留；
4.性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
5.使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換
複製代碼

9.vue組件之間如何進行通訊?

詳解：mp.weixin.qq.com/s/xAsGUGOl0…

10.什麼是vuex?它有哪幾種屬性?

vuex的流程
頁面經過mapAction異步提交事件到action。action經過commit把對應參數同步提交到mutation。mutation會修改state中對於的值。
最後經過getter把對應值跑出去，在頁面的計算屬性中，經過mapGetter來動態獲取state中的值

vuex有哪幾種狀態和屬性
有五種,分別是State , Getter , Mutation , Action , Module (就是mapAction)

vuex的State特性是？
stae就是存放數據的地方，相似一個倉庫 , 特性就是當mutation修改了state的數據的時候，他會動態的去修改全部的調用這個變量的全部組件裏面的值（ 如果store中的數據發生改變，依賴這個數據的組件也會發生更新 ）

vuex的Getter特性是？
getter用來獲取數據，mapgetter常常在計算屬性中被使用

vuex的Mutation特性是？
Action 相似於 mutation，不一樣在於：

Action 提交的是 mutation，而不是直接變動狀態。
Action 能夠包含任意異步操做

vuex的優點
1 狀態管理工具 核心是響應式的作到數據管理, 一個頁面發生數據變化。動態的改變對應的頁面
兄弟之間組件有大量通訊的，建議必定要用VUEX，無論大項目和小項目
複製代碼

11.手寫冒泡排序算法，並簡述其與插入排序的區別。

冒泡排序原理

• 數組中有 n 個數，比較每相鄰兩個數，若是前者大於後者，就把兩個數交換位置；
• 這樣一來，第一輪就能夠選出一個最大的數放在最後面；
• 那麼通過 n-1（數組的 length - 1） 輪，就完成了全部數的排序。
• 一、外層 for 循環控制循環次數
• 二、內層 for 循環進行兩數交換，找每次的最大數，排到最後
• 三、設置一個標誌位，減小沒必要要的循環

let arr = [8,5,6,9,10,3,0,5]
function sort(arr) {
    var max=arr.length-1;
    for (var j=0;j<max;j++){
        // 聲明一個變量，做爲標誌位
        var done=true;
        for(var i=0;i<max-j;i++){
            if (arr[i]>arr[i+1]){
                var temp = arr[i];
                arr[i] = arr[i+1];
                arr[i+1]=temp;
                done=false;
            }
        }
        if (done){
            break;
        }
    }
    return arr;
}
 console.log(sort(arr));
複製代碼

插入排序原理

• 1.假定第一個元素是最小值，
• 2.從第二個元素開始，往該元素前面的序列比較，
• 3.若是後一個元素比前一個元素小，則交換位置

let arr = [8,5,6,9,10,3,0,5]
function sort(arr) {
    for(var i=1;i<arr.length;i++){
        for(var j=i;j>0;j--){
            if(arr[j]<arr[j-1]){
                var k=arr[j];
                arr[j]=arr[j-1];
                arr[j-1]=k;
            }
        }
    }
    return arr;
}
console.log(sort(arr));
複製代碼

十二、123456789每隔三位用逗號隔開

'123456789'.match(/\d{3}/g).join(",")
複製代碼