1.面试题总结

1.简述TCP与UDP的区别。

1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）4、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信5、TCP首部开销20字节;UDP的首部开销小，只有8个字节6、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

2.什么是flex布局，flex都有哪些值。

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

3.解决跨域问题的方案有哪些？简述jsonp实现的原理？

方案：1.jsonp 跨域2.postMessage 跨域3.跨域资源共享 CORS4.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-n2.原型基础方式const s = "chenlin";String.prototype.spacify = function() {    return this.split('').join('-');}console.log(s.spacify());// c-h-e-n-l-i-n3.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状态一旦改变就不会再变，任何时候都可以得到这个结果。它的状态改变只有两种结果：1、从pending状态变为fulfilled状态2、从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） 轮，就完成了所有数的排序。
• 1、外层 for 循环控制循环次数
• 2、内层 for 循环进行两数交换，找每次的最大数，排到最后
• 3、设置一个标志位，减少不必要的循环

let arr = [8,5,6,9,10,3,0]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]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));

12、123456789每隔三位用逗号隔开

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