前端实习面试记录

最新推荐文章于 2023-03-13 15:02:50 发布

huangq_qiao

最新推荐文章于 2023-03-13 15:02:50 发布

阅读量1k

点赞数 1

分类专栏：前端实习

本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/113942433

版权

前端实习专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1、自我介绍

做了多久的前端, 用的技术主要是什么

2、进程与线程

(1) 进程与线程的关系

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
在当代面向线程设计的计算机结构中，进程是线程的容器。程序是指令、数据及其组织形式的描述，进程是程序的实体。

线程（thread）是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程并行执行不同的任务。

我们简单总结下：

进程：指在系统中正在运行的一个应用程序；程序一旦运行就是进程；进程——资源分配的最小单位。
线程：系统分配处理器时间资源的基本单元，或者说进程之内独立执行的一个单元执行流。线程——程序执行的最小单位。

掘金-进程与线程之间的区别与联系

3、编程题

判断是否是回文数
在这里插入图片描述

https://www.cnblogs.com/weiqinl/p/10968659.html

4、vue数据双向绑定

https://segmentfault.com/a/1190000006599500
在这里插入图片描述

https://www.jianshu.com/p/e7ebb1500613

写发布者订阅者模式
https://www.jianshu.com/p/2ec316ca0f8b
在这里插入图片描述

5、jquery和vue react的区别

考察对框架的对比，源码，原理
Jquery和vue对比https://www.cnblogs.com/lgx5/p/10857516.html
在这里插入图片描述
1、jquery：轻量级的js库

2、vue：前端js库，是一个精简的MVVM，它专注于MVVM模型的viewModel层，通过双向数据绑定把view和model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。

3、vue和jquery对比：

vue是通过vue对象将数据和view完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据

jQuery是使用选择器（$）选取DOM对象，并对其进行赋值、取值、事件绑定等操作；主要是操作DOM

改变一：有了前端工程化

为什么这么说呢？之前开发都是前端做静态页面，把页面给到后台程序员改成jsp、php、asp等等…一顿乱改，一顿塞变量，做完以后页面样式乱七八糟，最后你再调整css。说白了你会html，css就行了，基本没什么门槛，可以这么说。有了Vue和Node的前端工程化以后，前端工程师能做的事情越来越多，后台人员只需要抛过来一个Api，剩下的就可以都交给前端了
改变二：服务端渲染VS客户端渲染

传统的jsp、php或是模板渲染也好，都是服务端渲染，就是客户端一个请求，服务器直接把整个页面返回给你，简单粗暴。

但是vue开发是前后端分离开发，通过api进行交互，客户端请求服务器返回json数据，由客户端进行渲染。不仅减轻了服务器的压力速度更快而且渲染更加优雅，代码更容易维护。
当然客户端渲染面临一个首屏加载慢的问题，服务端渲染则刚好能解决这个问题，因此现在ssr并没有没落，一个项目更好的技术选择才是王道。
改变三：渲染优雅，代码易维护

jQuery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，而 Vue是通过数据来控制状态，通过控制数据来控制渲染，变量可以直接写在标签中，渲染更加优雅。因为前端代码和后台代码都是分开的，所以项目更容易维护，开发效率更高。
改变四：项目工程化，结合npm直接安装第三方库

Vue让前端项目更加工程化，同时也规范了前端工程师的代码，而node和npm的加入才是vue能蓬勃发展的重要原因，node为vue提供了本地server和模块化开发的思路，npm更能安装vue项目需要的模块，配合vue使用，比如Moment.js Element ui vuex等等，这些第三方库让Vue有了无限的可能。
改变五：跨平台

随着前端技术水平的越来越高，跨平台这件事儿已经变得越来越靠谱，从之前的react native 到现在的weex和uniapp，许多大厂越来越倾向基于Vue的更高级框架开发，如uniapp框架，它基于Vue语法，不仅能编译小程序、H5还能一套代码编译成原生App，未来跨平台的趋势是必然的，学好Vue等于做好了准备。

6、function和var的作用域提升看题写输出

7、跨域(必考)

1-什么是跨域？跨域解决方法

2-什么是跨域？跨域问题怎么解决？

3-不要再问我跨域的问题了

4-阮一峰-跨域资源共享cors详解
在这里插入图片描述

8、promise

9、cookie，session和localStorage，sessionStorage的区别

cookie，session和localStorage，sessionStorage的区别
在这里插入图片描述

10、http与https的区别

HTTP与HTTPS的区别, HTTPS的原理/优缺点/切换
在这里插入图片描述

11、get、post、put、patch与delete之间的区别

(1)
URL是什么:
统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

HTTP定义了与服务器交互的不同的方法，最基本的是POST、GET、PUT、PATCH、DELETE，而URL描述了一个网络上资源，而post(增)、delete(删)、get(查)、put、patch(改)就是对这个资源进行增、删、查、改的操作!

幂等操作: 在编程中，一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。幂等函数，或幂等方法，是指可以使用相同参数重复执行，并能获得相同结果的函数。这些函数不会影响系统状态，也不用担心重复执行会对系统造成改变。例如，“setTrue()”函数就是一个幂等函数，无论多次执行，其结果都是一样的。更复杂的操作幂等保证是利用唯一交易号(流水号)实现。

get 从服务器端获取数据，请求body在地址栏上, 数据库select操作
用于获取资源，是幂等的，无副作用
post:向服务器端提交数据，请求数据在报文body里, 数据库insert操作
发送一个修改数据的请求，需求数据要从新创建, 创建新内容
用于创建，更新，删除资源，查询资源都可以，是不幂等的
几乎目前所有的提交操作都是用POST请求的。
put:向服务器端提交数据，请求数据在报文body里, 数据库update操作
发送一个修改数据的请求，需求数据更新（全部更新）
用来修改数据的内容，但是不会增加数据的条数
PUT类似于将某条(某行)数据全部提出进行修改后全部提交.
patch:向服务器端提交数据，请求数据在报文body里
发送一个修改数据的请求，需求数据更新（部分更新）
用于局部更新资源, 比如：user对象，只更改了name属性，那么user其他属性值不变，如果用post，那么其他属性值会被设置为null（全局更新）
PATCH 类似于将某列或某几列的内容修改后提交,该请求是一个局部更新，后端仅更新接收到的字段。如果进行部分修改显然PATCH是更优的选择!
delete:向服务器端提交数据，请求数据在报文body里, 数据库delete操作
发送一个删除数据的请求,用于删除资源

在这里插入图片描述

axios常见传参方式get/post/put/patch/delete

12、如何判断是pc端还是移动端, 判断浏览器- navigator.userAgent

在这里插入图片描述
javascript的navigator对象

navigator为Window对象的一个属性，指向了一个包含浏览器相关信息的对象。navigatot中包含了一些常用到的属性，如

navigator.appVersion 浏览器的版本号

navigator.appName 浏览器的名称

navigator.language 浏览器使用的语言

navigator.platform 浏览器使用的平台

navigator.userAgent 浏览器的user-agent信息

其中userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

判断pc端和移动端

function browserRedirect() {
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsAndroid = sUserAgent.match(/android/i) == "android";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  document.writeln("您的浏览设备为：");
  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    document.writeln("phone");
  } else {
    document.writeln("pc");
  }
}

判断浏览器

// 各主流浏览器
function getBrowser() {
    var u = navigator.userAgent;
 
    var bws = [{
        name: 'sgssapp',
        it: /sogousearch/i.test(u)
    }, {
        name: 'wechat',
        it: /MicroMessenger/i.test(u)
    }, {
        name: 'weibo',
        it: !!u.match(/Weibo/i)
    }, {
        name: 'uc',
        it: !!u.match(/UCBrowser/i) || u.indexOf(' UBrowser') > -1
    }, {
        name: 'sogou',
        it: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1
    }, {
        name: 'xiaomi',
        it: u.indexOf('MiuiBrowser') > -1
    }, {
        name: 'baidu',
        it: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1
    }, {
        name: '360',
        it: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1
    }, {
        name: '2345',
        it: u.indexOf('2345Explorer') > -1
    }, {
        name: 'edge',
        it: u.indexOf('Edge') > -1
    }, {
        name: 'ie11',
        it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
    }, {
        name: 'ie',
        it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
    }, {
        name: 'firefox',
        it: u.indexOf('Firefox') > -1
    }, {
        name: 'safari',
        it: u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1
    }, {
        name: 'qqbrowser',
        it: u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1
    }, {
        name: 'qq',
        it: u.indexOf('QQ') > -1
    }, {
        name: 'chrome',
        it: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1
    }, {
        name: 'opera',
        it: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1
    }];
 
    for (var i = 0; i < bws.length; i++) {
        if (bws[i].it) {
            return bws[i].name;
        }
    }
 
    return 'other';
}

判断设备系统

// 系统区分
function getOS() {
    var u = navigator.userAgent;
    if (!!u.match(/compatible/i) || u.match(/Windows/i)) {
        return 'windows';
    } else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {
        return 'macOS';
    } else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) {
        return 'ios';
    } else if (!!u.match(/android/i)) {
        return 'android';
    } else {
        return 'other';
    }
}