1.面试题总结

发布于 2022年 04月 08日 23:37

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.跨域资源共享 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状态一旦改变就不会再变,任何时候都可以得到这个结果。它的状态改变只有两种结果:
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(",")

推荐文章