一些前端初级面试题

前端菜鸟额
92 阅读10分钟

Javascript

js中数据类型有哪些，区别是什么？

基本数据类型和，复杂数据类型，

基本数据类型有：

number，string，boolean，undefined，null，symbol。

复杂数据类型：

array，object，function，regexp，date

手写节流和防抖

//防抖就是一段时间只执行一次，会重新计算时间
//1.设置一个定时器为null
//2.如果计时器正在执行则清空定时器，否则就执行

//节流就是用户连续点击触发事件，但是只在这一段时间中执行一次
//1.先设定一个值为false。 
//2.执行事件就设置为true。
//3.执行完成就设置为false
//4.执行事件时判断变量是否为false，false直接返回，true的话就执行

手写call

call和apply的区别无非就是传过去的参数不同的形式传过去而已，我们只需要对这些不同的类型做处理就行了，核心思路已经写出来了

function foo() {
  console.log(this);
}
Function.prototype.ycall = function (thisArgu, argu) {
  const fn = this; //因为调用这个方法的都是隐式绑定this，所以这个this就是一个函数
  thisArgu = thisArgu ? Object(thisArgu) : window; //如果传过来的不是一个对象，我们需要把它转换成对象的形式
  thisArgu.fn = fn; //给thisArgu添加一个fn的属性并把this赋值给他
  thisArgu.fn(...argu); //我们再次利用隐式绑定的方式调用这个函数this就会指向thisArgu
  delete thisArgu.fn; //调用完成后我们再把thisArgu这个属性给删除
};
foo.ycall({});

原型与原型链

:::info prototype ::: 每一个函数都会有一个属性就是prototype这个是一个显示原型 :::info proto ::: 每个实例对象都会有一个__proto__属性，是隐式原型 每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype

原型链

获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

作用域提升

  var x = 30;
  function test(){
      alert(x);
      var x = 10;
      alert(x);
      x=20;
      function x(){

      };
      alert(x);
  }
  test();
//1.由于变量提升函数的优先级是大于变量的，所以优先提升函数
2. 第二个alert中x=10
3. 第三个x=20

对象的属性可以是什么类型

  1. number //这个最终会转换成string类型
  2. string
  3. undefined
  4. null
  5. object类型 //如果你的对象属性是一个对象类型的话，它会帮你转换成toString类型Object [object]
  6. Symbol
  7. 等。。。。

浅克隆和深克隆

浅克隆只会复制对象的第一层参数，如果对象里嵌套着一个对象，我们赋值过去的是一个对象的地址，如果你更改第二层对象的值的话，则依赖着这个对象的所有都会被更改。

最原始的克隆自己想到的就是for循环克隆

const obj = {
  name:"zhangsan",
  age:18,
  friend:[
    "kob",
    "james"
  ]
}
const obj2= {}
for(let key in obj){
  obj2[key] = obj[key]   //实现最简单的浅克隆
}

//使用es6的方法浅克隆
obj3 = {...obj}
2，4，4，4，

js中的类型判断

typeof的类型判断

主要的缺点就是null检测出来时一个Object类型，和一些特定的Object类型不能检测。

console.log(
      typeof 100, //"number"
      typeof "abc", //"string"
      typeof false, //"boolean"
      typeof undefined, //"undefined"
      typeof null, //"object"
      typeof [1, 2, 3], //"object"
      typeof { a: 1, b: 2, c: 3 }, //"object"
      typeof function () {}, //"function"
      typeof new Date(), //"object"
      typeof /^[a-zA-Z]{5,20}$/, //"object"
      typeof new Error(), //"object"
      typeof new Number(100), //'object'
      typeof new String("abc"), // 'string'
      typeof new Boolean(true) //'boolean'
    );

使用Object.property.toString.call()最为准确

const toString = Object.property.toString
toString.call(123) //object number

闭包

只要js中的一个函数，引用了外层作用域中的变量，这个就称之为闭包。而因为window这个全局的对象，我们至少都会引用一个外层的变量，那就是window。所以广义点说，只要我们时一个函数，就可以称之为闭包

闭包的特点： 1.只要函数引用到外层的变量，外层的函数时不会销毁的。这个js中的垃圾回收机制。 2.由于上面的一个特点，闭包可能就会导致内存泄漏（如果你不使用了，对象还不回收这就是内存泄漏）

const a = "a"
function foo(){
  const b = a   //把外层的变量赋值到本变量当中
  console.log(b)
}

这里会提到垃圾回收机制，js中的垃圾回收机制分别有

  1. 引用计数法 //计算这个对象的被引用过多少次，如果引用次数为0的话就会销毁这个对象
  2. 可达性分析法 //还有一个是使用图遍历的方式，如果便利不到就会回收掉这个对象

this的指向问题

this有4种绑定规则

  1. 默认绑定
  2. 隐式绑定
  3. 显示绑定
  4. new绑定
function foo(){
 console.log(this)
}
foo()  //这样调用的话this就是window。也是就是默认绑定规则
const obj = {
  bar:foo  //
}
obj.bar()   //这个调用就是隐式绑定规则，谁调用，this就指向谁
//以下就是显示绑定 
foo.call()  
foo.aplly()
foo.bind(obj)   //这个bind是绑定一个this的指向然后返回一个函数，如果你调用返回的
//这个函数的话，this就是bind绑定的那一个

call和apply的区别，call第一个参数是传this指向的对象，后面的就是给这个函数传参数，可以使用剩余参数获取得到。 而apply第一个参数也是传this指向的对象，后面的是一个数组

this指向的优先级

new绑定> 显示绑定> 隐式绑定> 默认绑定

箭头函数的特点

  1. 箭头函数不会绑定this和argument，没有的属性，箭头函数会重上级作用域去找。
  2. 箭头函数不能作为构造函数来使用，就是不能使用new来调用箭头函数。因为箭头函数是需要有this的，而箭头函数又不绑定this

可迭代对象

一些es6的语法比如...这种展开运算符需要这个对象得有一个可迭代协议[symbol.iterable],object是没有这个方法的所以不能使用...语法但你可以给他配置一个就可以实现可迭代方法

CSS

盒子模型

标准盒模型 （content-box）

  1. image.png

IE盒模型（怪异盒模型） (border-box)

  1. image.png

主要的区别就是height和width的值是不一样的

标准盒模型的高度盒宽度是content的的高度和宽度

而IE盒模型就是border的高度和宽度

如果我们需要更改盒子的模型的话，我们需要使用box-sizing属性来更改

<style>
  body{
    box-sizing:content-box;  //标准盒模型
    box-sizing:border-box; //IE盒模型
  }
</style>

弹性伸缩盒模型

image.png

我们只需要给盒模型添加display：flex属性，这个盒子就会变成弹性伸缩盒模型

<style>
  body{
    display:flex;
  }
</style>

多列布局

主要是可以做ipad设备的布局

image.png

BFC

BFC就是block Formatting context的缩写，我们主要需要用到bfc可以解决的问题。

  1. 可以解决高度塌陷
  2. 可以解决margin的高度折叠

高度折叠是官方文档说的。在同一个bfc中margin的高度是会折叠的。

常见css开启bfc的方式

  • overflow: hidden
  • display: inline-block
  • position: absolute
  • position: fixed
  • display: table-cell
  • display: flex

盒子垂直居中

使用position定位来实现

//使用父相子绝后，子盒子的top和left属性都设置成50%即可，也可以使用transform:translate(-50%,-50%)
<style>
  .parent{
		positon:reactive;   
}
  .child{
    position:absolute;
    top:50%;
    left:50%;
    traform:traslate(-50%,-50%); //因为这个子元素的绝对定位是相对与父元素的，
    //而且是子元素的左上角的到点，所以我们需要给他添加translate移动
  }
</style>

flex方案

<style>
  .parent{
    display:flex;
    justify-content:center; //x轴居中
    align-items:center; //y轴居中
  }
</style>

href和src的区别

href是使用连接当前页面的标签属性

src是用于链接外部资源的属性，类似于script的src属性和img的src属性，src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

清除浮动

最简单的清除浮动的方法给上面的这个标签添加浮动的话，可以在他的后面添加一个兄弟标签，并且添加css属性clear:both;

<div class="father clearfix">
  <div class="small">
  </div>
  <div class="clear">
    
  </div>
</div>
<style>
  .clear{
    clear:both;
  }
</style>

最常用的清除浮动的方式

<style>
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
</style>

浏览器兼容问题

每个浏览器出现的样式都不一样，所以就会导致浏览器的兼容问题，我们可以使用重置样式去解决这个问题

<style>
    *{margin:0;padding:0;}
<style
//css3添加新的语法，使用前缀解决浏览器的兼容问题
-moz- /* 火狐浏览器 */
-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o- /* Opera浏览器(早期) */
-ms- /* IE */

网络基础

http常见的状态码

1表示信息
2表示成功
	200 ok成功
3表示重定向
	301 永久重定向
	302 临时重定向
4资源无法找到
	403服务器禁止访问资源
  404服务器没有该资源，无法访问资源
5表示服务器错误

TCP协议

TCP主要的任务就是连接稳定，稳定的工具就三次握手。

三次握手

所谓的握手就是客户端与服务器建立连接的过程,但为什么是三次呢?因为三次就可确保对方在线且可以接受数据,其实只要大于等于三次就可以建立可靠的连接,所以为什么tcp是一个可靠的协议

大致流程可以理解成 我是客户端,张三是服务端

  1. 我跟张三说在家吗?
  2. 张三回应在家
  3. 我要开始发送信息了

image.png

四次挥手

四次挥手也是确保客户端请求发送完成和服务端数据也发送完成

大致流程

  1. 客户端说我请求发送完了(但服务端数据没有发送完成)
  2. 服务端回复好的,我知道了
  3. 当服务端数据也发送完成时也会告诉客户端我发送完成了
  4. 客户端也说好的,然后关闭连接

UDP协议

无连接的传输协议，直接发数据不需要建立稳定的连接

无连接指的是不需要三次握手就可以建立的连接方式。

应用于直播等应用

HTTP协议1.0 1.1 2.0有什么区别

1.0

  1. 只有get和post方法，没有长连接

1.1

  1. 增加了缓存
  2. 默认长连接keep-live，通信完毕后使用connection：close关闭，也可以使用默认的超时时间自动关闭
  3. 管道机制，可以并发请求
  4. 断点续传，中间会返回206，上传成功会返回200
  5. 新的请求方法

2.0

  1. 压缩请求头
  2. 请求多路复用
  3. 服务端推送

vue

nextick

这个有关于事件循环机制，浏览器中有宏任务队列和微任务队列。js中类似于Promise就是加进微任务对队列。类似于 点击事件的都是宏任务队列。如果发现微任务中有任务的话就会优先执行微任务，然后再继续执行宏任务。

又由于 vue中页是有很多的微任务队列的。主要有以下任务队列

  1. wath preQueue
  2. 组件更新 update jobQueue
  3. 生命周期回调 postQueue

然而 nextick就是在这些微任务执行完后在执行， 意思就是放到微任务的最后执行

vue核心

模板解析

模板解析是vue的重要模块，由于vue的生态，vue也给自己的模块解析分成了几部分。vue-template和sfc。有单独引用vue的还有使用sfc编程的还有自己编写render函数的

整体的解析都需要一些库去支持。大部分核心的底层就是使用的正则表达式去解析。

模板解析的优化。把静态的部分分出来。因为静态的不需要针对静态的部分重新渲染

image.png

虚拟DOM

avatar
文章
阅读
粉丝