一些前端基础知识点自我总结！！！（实习面试准备）

我不是女神ヾ 2022-03-15 11:36 251阅读 0赞

*  **虚拟dom和diff算法相关？**  
    https://www.jianshu.com/p/595a13040055
 *  **JS中EventLoop事件循环机制**  
    总结如下，[点击此处][Link 1]
 *  **Promise、Generator以及Async/await相关？**  
    看了一篇文章总结的很全面，[点击此处][Link 2]
 *  **设计模式相关的一些？**  
    以下这篇博文总结了常用的十五种设计模式。（不过只了解了其中几种）  
    [点此了解][Link 3]
 *  **防抖和节流？**  
    还是推荐一篇博文，很详细[点击此处][Link 4]
 *  **session相关？**  
    session和cookie都是用来保存用户数据，相对来说session存储在服务器上更安全。

Session结束生命周期的几种情况：

> （1）客户端关闭浏览器（只针对session机制都使用会话cookie来保存session  
> id，其实也属于Session过期这种情况，这里单说，是因为大部分的会话机制是这样。）  
> （2）Session过期。  
> （3）服务器端调用了session对象的invalidate()方法。  
> 其中（1）（2）是属于自动失效，即后台中的session timeout设置的时间过了  
> （3）是属于手动调用了失效方法。

区别于cookie过期：

> （1）cookie是保存在客户端，session保存在服务器端，cookie保存着session相关信息  
> （2）如果cookie没有超时，那么浏览器每次请求都会使用cookie信息，服务器端  
> 根据cookie信息从session缓存中获取相对应的session。这两个信息有一个超时，用户连接即宣告关闭。  
> （3）cookie一般分两种。1.不设置过期时间，会存在内存里，浏览器关闭即失效。2.设置过期时间，会存在硬盘里，一直到过期时间才失效。

*  **组件的划分？**  
    可以划分为两类（当然可以再细划）：基础组件、业务组件  
    基础组件不涉及业务逻辑（picker、timepicker、toast、dialog、actionsheet 、button等，也可以是页面容器header,footer等），而业务组件则是涉及业务逻辑的具体实现，可能包含若干个基础组件，处理一定的逻辑。
 *  **什么是前端的模块化，组件化，工程化？**  
    **模块化**：将某一复杂逻辑或功能的代码封装成一个文件以实现更规范化的管理、隔离及组织，以便在项目其他地方可以用到的时候引入，可以称之为模块化。js代码的模块化规范很多，有AMD/CommonJS/UMD/ES6 Module等等，css也可以采用模块化思想编写，而webpack则是一种模块打包工具。（具体的模块化编程请自行百度）  
    **组件化**：将一个网站页面想象成一个容器，里面各个独立的可视或可交互区域则可看作是各个组件。不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面。  
    （浅显见解，翻阅过许多资料，模块化组件化都有更深的含义，具体自行百度）  
    **工程化**：工程化是一种规范化的思想，将一个复杂项目明确分层组织出清晰的结构去进行开发，而不是毫无组织结构的去做。模块化和组件化可以说是工程化思想下相对较具体的开发方式及实现。
 *  **什么是原型，原型链，继承，闭包？**  
    **原型**：js中定义的每个函数都有一个显式原型属性prototype，而每一个对象都有一个隐式原型属性\_proto\_，而prototype属性值是一个对象其中的constructor属性都指向构造函数本身。（关系如下图）  
    ![属性关系][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]  
    **原型链**：访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着\_\_proto\_\_这条链向上找，依次层层往上查询直到prototype的原型对象为null，则该条查询路径为原型链。（下图中红线则为一条原型链）  
    ![原型链][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]  
    **继承**：继承是面向对象思想编程中的概念，是指子类通过继承来具有父类的属性和方法或者重新定义、追加属性和方法等。而js中的继承则有原型链继承，构造函数继承，实例继承，拷贝继承，组合继承，寄生组合继承等。这里所述的则是根据原型链确定继承关系，由于所有的对象的原型链都会找到Object.prototype，因此可以通过\_proto\_找到父级对象的prototype属性调用其方法，这就是原型链继承。  
    **闭包**：简单来说闭包就是定义在一个函数内部的函数，而闭包是为了保留函数内的变量，使函数不会被被释放，始终保持在内存中，同时可以通过闭包访问其他函数内的变量。
 *  **js中的数据类型有哪些？**  
    js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null），和一种复杂数据类型（Object）
 *  **js有哪些内置对象？**  
    Object 是 JavaScript 中所有对象的父对象  
    数据封装类对象：Object、Array、Boolean、Number 和 String  
    其他对象：Function、Arguments、Math、Date、RegExp、Error
 *  **数据类型存储额内存图？**  
    栈中的基本类型在当前执行环境结束时销毁，而堆中的引用类型不会随执行环境结束而销毁  
    ![数据类型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 2]
 *  **NULL和Undefined的区别？**  
    NULL：空值，一个空的对象  
    Undefined： 不存在这个值
 *  **同步和异步的区别?**  
    同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.  
    同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。  
    异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
 *  **call、apply和bind方法的用法以及区别**  
    js中call、apply、bind方法的作用是改变函数运行时this的指向  
    apply()方法接受两个参数，一是作用域，二是参数（可以是数组也可以是arguments对象）  
    call()的使用和apply()基本是一样的，不同的是参数的传递，call()必须明确的传入每一个参数  
    bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。  
    （很抽象，具体说明例子自行百度理解）
 *  **css3下伪类和伪元素的区别**  
    伪类是弥补了CSS选择器的不足，用来更方便地获取信息。  
    伪元素由两个冒号::开头，可以创建源文档不存在的内容，其本质上是创建了一个虚拟容器(元素)，可以添加内容或样式。  
    可以同时使用多个伪类，而只能同时使用一个伪元素。
 *  **判断一个对象属于某个类的方法**  
    使用instanceof 运算符：左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数  
    Object.prototype.toString.call()：该方法是目前为止发现的判断一个对象类型的最好的办法。
 *  **前端性能优化的方法**  
    不太了解，啃干货吧 [前端性能优化（点击进入）][Link 5].
 *  **使用匿名函数的优点**  
    非匿名函数在定义时，就已经创建函数对象和作用域对象；所以，即使未调用，也占用内存空间；  
    匿名函数，仅在调用时，才临时创建函数对象和作用域链对象；调用完，立即释放，所以匿名函数比非匿名函数更节省内存空间
 *  **主流浏览器的内核**

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>内核</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Chrome</td> 
   <td>Webkit/blink</td> 
  </tr> 
  <tr> 
   <td>IE</td> 
   <td>Trident</td> 
  </tr> 
  <tr> 
   <td>Firfox</td> 
   <td>Gecko</td> 
  </tr> 
  <tr> 
   <td>Safari</td> 
   <td>Webkit</td> 
  </tr> 
  <tr> 
   <td>Opera</td> 
   <td>presto</td> 
  </tr> 
 </tbody> 
</table>

*  **js中字符串对象的slice()方法和substring()方法的不同**  
    都是提取字符串中的一些字符  
    但是slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数
 *  **http的一些状态码**  
    1XX:表示已接受  
    2XX：成功  
    3XX：重定向，进行进一步操作（302 redirect: 302 代表暂时性转移(Temporarily Moved )）  
    4XX：表示客户端发送请求有语法或者请求无法实现的错误。  
    5XX:：表示服务器处理时发生错误，未能实现合法请求。
 *  **实现AJAX的基本步骤**

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

var xmlhttp = XMLHttpRequest

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

xmlhttp.open('get',url,async='true')
    //post请求下需要配置请求头信息
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

(3)设置响应HTTP请求状态变化的函数.

xmlhttp.onreadystatechange = function(){
    	if(xmlhttp.readystate = 4 && xml.status ==200){
    			...一些事情
    	}
    }

(4)发送HTTP请求.

xml.send()

(5)获取异步调用返回的数据.

var responseText =xmlHttp.responseText

(6)使用JavaScript和DOM实现局部刷新.

*  **了解过哪些常见的web注入攻击？**  
    sql注入，XSS（跨站脚本），CSRF（跨站请求伪造）
 *  **列举一些常用的长度单位？**  
    （1）绝对长度单位  
    彼此固定，不会因为其他元素的尺寸变化而变化。主要有 **px cm mm**  
    （2）相对长度单位  
    指定相对于另一长度的长度。主要有em rem %和可视区百分比长度单位 **vm vh vmin vmax**
 *  **一个200\*200的div在不同分辨率屏幕上下左右居中，用css实现？**

div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left:-100px;
      margin-top:-100px;
    }

*  **写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽?**

#left {
      width: 200px;
      background-color: aqua;
    }
    #center {
      flex: 1;
      background-color: rgb(255, 0, 0);
    }
    #right {
      width: 200px;
      background-color: rgb(43, 255, 0);
    }

*  **数组的克隆复制应该怎么处理？**  
    最近遇到一个问题，就是数组复制时直接赋值为浅拷贝。如下:

// 此方法为删除数组其中一个元素
    function permutation(arr) {
        arr.forEach(element => {
            ar = arr
            //改写之后 ar = [...arr]
            ar.splice(ar.indexOf(element),1)
            console.log(ar) 	// 此处循环输出的为下图
        });
    }
    var arr = [[1,2],[3,4],[5,6]]
    permutation(arr)

![输出][20190403133144912.png]  
很明显输出有问题，之后便发现是浅拷贝的问题，改变被赋值后的值其原来的数组也会变。所以改用了es6的方法进行深拷贝。

*  **下面哪个选择器的优先级最高？**  
    A: \#nav  
    B: \#nav a  
    C: \#nav .current-active  
    **D:** \#nav \#special  
    （选择器优先级： id选择器 > class选择器 > html元素选择器 > 通配符选择器 && **子级高于父级**）

> 持续更新中。。。  
> 记录这段时间遇到的一些晦涩不懂的概念，直到实习面试！

**-------------------------以下是第一次面试部分内容总结-------------------------** （面试公司：成都享宇金服的前端实习岗位）

1.  图片常见的一些格式？  
    PNG，JPG，JPEG，GIF，SVG，BMP，TIF。
2.  gif是怎么实现的？  
    动态图，主要是多张照片组合成帧调整时间间隔形成动画。
3.  jpg图片和png图片有哪些区别？  
    png存在透明度背景，也就是rgba所构成，未压缩，jpg则是rgb，一种压缩位图。
4.  列举一些es6的一些语法？  
    let,const,Promise,Symbol,class,module,proxy代理，还有一些数组对象函数等的扩展内容······ [es6语法][es6]
5.  具体说一说promise对象？  
    简略介绍了下，这里具体请看 [promise对象详解][promise]
6.  说一下es6中数组新增的一些方法？  
    forEach()，find()，findIndex()，Array.from()，Array.of()等等等等······
7.  用过vue是吧，知道他的作者吗？  
    尤雨溪
8.  大致说一下vue全家桶中vuex,vue-router等等，为什么要用（基本是围绕vue问了一下）？  
    vuex状态管理器集中式存储管理，vue-router路由控制页面跳转（有点像锚点）至于为什么要用请百度。
9.  为什么浏览器会有跨域限制？  
    浏览器为了保证用户的信息安全，具有一种安全策略叫同源策略，因此不允许不同域的页面资源相互访问。
10. 什么是不同的域？  
    即 域名，协议，端口号其中有一个不同都算不同的域。
11. 如何解决跨域问题？  
    （1）使用jsonp（通过在script标签中访问不同域的URL实现跨域）  
    （2）WebSocket（HTML5提供的一种在单个 TCP 连接上进行全双工通讯的协议）  
    （3）CORS（跨站点资源共享，它是w3c官方推荐的一种跨域方案）  
    （4）配置代理实现跨域访问。（vue-cli+webpack创建的项目下设置config/index.js文件中的proxyTable如下：

proxyTable: {
          '/api': { // 匹配所有以'/api'开头的请求路径
            target: 'https://elm.cangdu.org', // 代理目标的基础路径
            changeOrigin: true, // 支持跨域
            pathRewrite: { // 重写路径：删除路径中开头的'/api'
              '^/api': ''
            }
          }
        }

）  
12. 说一下你目前这段时间的规划？  
吧啦吧啦吧啦······

**-------------------------以下是第二次面试部分内容总结-------------------------** （面试公司：成都咕咚的前端实习岗位）  
第一部分：笔试题 4道

1.  如何实现数组的随机排序？

方法一：
      	var arr = [1,2,3,4,5,6,7,8,9,10];
      	function randSort1(arr){
      		for(var i = 0,len = arr.length;i < len; i++ ){
      			var rand = parseInt(Math.random()*len);
      			var temp = arr[rand];
      			arr[rand] = arr[i];
      			arr[i] = temp;
      		}
      		return arr;
      	}
      	console.log(randSort1(arr));
      	
      方法二：
      	var arr = [1,2,3,4,5,6,7,8,9,10];
      	function randSort2(arr){
      		var mixedArray = [];
      		while(arr.length > 0){
      			var randomIndex = parseInt(Math.random()*arr.length);
      			mixedArray.push(arr[randomIndex]);
      			arr.splice(randomIndex, 1);
      		}
      		return mixedArray;
      	}
      	console.log(randSort2(arr));
     
      方法三：
      	var arr = [1,2,3,4,5,6,7,8,9,10];
      	arr.sort(function(){
      		return Math.random() - 0.5;
      	})
      	console.log(arr);

1.  请问下列语句输出什么？为什么？

foo()
    var foo
    function foo(){
    	console.log(1)
    }
    foo = function(){
    	console.log(2)
    }

输出为1。因为上例中函数声明function foo()会提升，foo = function()不会提升，因此foo()输出为1。

1.  请问对js的什么特性印象比较深刻？为什么？  
    自行发挥（博主乱答了一个操作dom树吧，然后吧啦吧啦吧啦。。。）
2.  请用css实现一个左边定宽，右边自适应的布局？

html:
    
        <div class="oyfather">
            <div class="oyleft"></div>
            <div class="oyright"></div>
        </div>
    
    
        
    css:
    
    .father {
        display: flex;
        margin: 0;
        padding: 0;
    }
    .left {
        width: 200px;
        height: 500px;
        background-color: blue;
        overflow: hidden;
    }
    .right {
        flex: 1;
        height: 500px;
        background-color: red;
        overflow: hidden;
    }

第二部分：面试（emmmm…记不清了）

**-------------------------以下是第三次面试部分内容总结-------------------------** （面试公司：成都当乐网）

1.  如何实现一个div使其宽度和高度自适应浏览器窗口的大小(不能设置固定宽高)？
2.  原生js添加监听事件的方式列举几种？
3.  vue实现双向数据绑定的原理？
4.  js如果使用setTimeOut函数后再使用promise对象，那么先执行哪个？
5.  跨域的几种方式？
6.  js事件捕获和事件冒泡？如何阻止事件冒泡？及事件委托的使用场景？
7.  回忆中…

\-------------------------------------------------结束------------------------------------------------（最后去了咕咚并于5月8号辞职）

### [超全前端面试题合集总结(点击进入)][Link 6] ###

[Link 1]: https://www.cnblogs.com/hanzhecheng/p/9046144.html
[Link 2]: https://www.jianshu.com/p/1c9e9c161612
[Link 3]: https://www.cnblogs.com/imwtr/p/9451129.html#o3
[Link 4]: https://www.cnblogs.com/coco1s/p/5499469.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]: /images/20220315/9ad73917f02c4e3297069fb8c8f32966.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]: /images/20220315/6b1df64524dd4a8aa043a3121ce2d5a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 2]: /images/20220315/2a1acf6df6874a889199958ef210c59c.png
[Link 5]: https://www.cnblogs.com/lei2007/p/3262897.html
[20190403133144912.png]: /images/20220315/e12a256cf7c744b5b79f20d2f7a7c7d3.png
[es6]: http://es6.ruanyifeng.com/
[promise]: http://es6.ruanyifeng.com/#docs/promise
[Link 6]: https://www.cnblogs.com/wuguanglin/p/interview.html