初级web前端面试题

一、JS

1、js基本类型和引用类型

• 基本数据类型：undefined，null，Boolean，string，number，symbol(es6新特性)
• 引用数据类型：object。Object可以细分为：Object 类型、Array 类型、Date 类型、RegExp 类型(正则)、Function 类型

解释一下symbol：具有静态属性和静态方法；从symbol()返回的symbol值都是唯一的，作为对象属性的标识符

→由其引出第二题

2、如何判断js数据类型

• typeof

有些时候，typeof 操作符会返回一些令人迷惑但技术上却正确的值：
1.对于基本类型，除 null 以外，均可以返回正确的结果;
2.对于引用类型，除 function 以外，一律返回 object 类型。
3.对于 null ，返回 object 类型;
4.对于 function 返回 function 类型。
null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型，没有错，但不是我们想要的结果。

• instanceof :用来判断 A 是否为 B 的实例，instanceof 检测的是原型

instanceof 能够判断出 [ ] 是Array的实例，但它认为 [ ] 也是Object的实例，为什么呢？
从 instanceof 能够判断出 [ ].proto 指向 Array.prototype，而 Array.prototype.proto 又指向了Object.prototype，最终 Object.prototype.proto 指向了null，标志着原型链的结束。因此，[]、Array、Object 就在内部形成了一条原型链：
从原型链可以看出，[] 的 proto 直接指向Array.prototype，间接指向 Object.prototype，所以按照 instanceof 的判断规则，[] 就是Object的实例。依次类推，类似的 new Date()、new Person() 也会形成一条对应的原型链 。因此，instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型

• Object.prototype.toString.call()
  也可以用apply()

toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]]

call()和apply()的区别：
自己百度吧，不想写了。。。

3、js 拷贝

分为深拷贝和浅拷贝。

浅拷贝： 只对基本数据类型进行拷贝，方法有：Object.assign() 、es6的结构赋值、数组的slice、concat方法、展开运算符、Array.from。

深拷贝：对所有数据类型进行真正的拷贝，方法有：利用JSON.stringify() 和JSON.parse()、利用递归实现。

4、事件处理机制

事件处理机制有三个阶段：事件捕获、目标阶段、冒泡阶段

5、原型和原型链

JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype ）（只有函数对象才有prototype）。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。（即Object.prototype.proto = null）

6、什么是闭包

要了解闭包，要先了解什么是作用域，函数内部可以直接读取全局变量，但是函数外部是无法读取函数内的局部变量，那么如何可以在外部读取到函数内部的变量，可以通过函数内部的函数实现，在这个内部函数中去访问函数内部的变量，并将其返回，这就形成了闭包，即能够读取其他函数内部变量的函数。

7、事件循环机制（event loop）

想要更了解的可以看我另一篇：https://blog.csdn.net/Jenny_ljj/article/details/116602898

（1）js代码执行时，先按代码顺序将同步任务压入主执行栈中执行 （2）遇到异步任务则先将异步任务压入对应的任务队列中（宏队列或微队列） （3）同步任务执行完毕后，查看微队列，将微任务一一取出进入主执行栈中执行 （4）微任务队列清空后，再查看宏队列，只取出第一个宏任务执行，执行完一个宏任务后，回到第三步的操作 这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

8、前端模块化

commonJS、CMD 和 sea.js、AMD 和 require.js、ES6（可能会问require和import区别

9、es6新增特性

1.let代替var关键字；

• 变量不允许被重复定义
• 不会进行变量声明提升
• 保留块级作用域

2.const

• 常量不允许被改变
• 不会进行变量声明提升

3.箭头函数

• 代替function函数
• 普通函数this指向window；箭头函数this指向定义时的那个对象，而不是运行时的对象

4.字符串模板 ： `` 反引号

5.字符串和数组新增了一些方法(感觉没怎么用过，自己去了解叭)

6.新增基本数据类型symbol（前面介绍过了）

7.set集合和map集合

8.promise规范

• 什么是promise
  异步操作的同步代码
• promise的基本使用
  通过new promise创建一个promise对象，里面有一个参数，参数是一个回调函数，回调函数中有2个参数，resolve，reject resolve()当异步执行成功的时候调用的方法，reject()当异步失败的时候调用的方法。
  　　除此之外promise有一个then方法，当成功的时候执行第一个回调函数，当失败的时候执行第二个回调函数。第二个回调函数也可以通过promise对象.catch调用
• Promise.all():当所有的异步代码都执行完毕以后才会执行.then中的操作
• Promise.race():只要有一个promise执行完毕后就会执行.then操作

9.类的支持

二、css和c3

1.盒子模型

• .IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border
• .w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分

ie盒子模型和w3c盒子模型转换可以利用 box-sizing： border-box / content-box；

2.有哪些行内元素、块级元素

• 行内元素：a, b, i, abbr, span, sub, sup, strike, strong
• 块级元素：div, p, h1-h6, ul, textarea, table, button
• 空元素：hr, input, br, img, link, meta

3.水平垂直居中

• .水平居中：

行内或类行内元素：text-align: center;

块级元素：margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）

多个块级元素：display:flex; justify-content: center;

• 垂直居中

行内元素：父节点：display: table; 居中元素：display: table-cell; vertical-align: middle;

未知元素的高度：父节点： position: relative; 居中元素： position: absolute; top: 50%; transform: translateY(-50%);

块级元素：display:flex; item-align：center;

4.position属性

position主要的属性值：static（默认值）、relative、fixed、absolute、sticky。（每个属性的布局方式）

5.css3新特性

圆角border-radius
边框border
背景background-image
线性渐变background-image: linear-gradient(#e66465, #9198e5);
过渡transition
文本效果text-shadow
2D 3D transform
动画 animation
弹性盒子 flex

三、网络知识

1.get、post区别

GET产生一个TCP数据包，请求时浏览器会把http header和data一并发送出去，服务器响应200（返回数据）

POST产生两个TCP数据包，浏览器先发一个tcp包然后发送header，服务器响应100 continue，浏览器再发一个tcp包然后发送data，服务器响应200 ok（返回数据）

（get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。）

2.cookie、localStorage与sessionStorage区别

• 相同点：都存储在服务器
• 不同点：
  • localStorage和sessionStorage的大小都在5mb左右；cookie是4kb
  • localStorage如果不清除永远都在；sessionStorage关闭浏览器的时候会自动清除；cookie可以设置过期时间，不然关闭浏览器就会自动清除
  • cookie可以通过http协议进行传递，前提是同源

3.http缓存机制

强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。

两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

4.跨域问题

什么是跨域：浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问

（协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。）

跨域的解决方法：（1）response 添加 header：resp.setHeader(“Access-Control-Allow-Origin”, “*”);（2）jsonp （原理即利用script标签可以跨域）（3）代理

四、框架问题vue

框架问题主要会根据简历中涉及到的框架和面试的公司用到的框架来问，目前比较热门的就是vue和react。如果不会其中一个的话，直接告诉面试官就可以。我只熟悉vue，所以这里只总结vue相关的内容。

一般面试管会问到的主要有两种类型：

一类是api相关的：（1）路由有哪些方式。（2）vue生命周期。（3）watch和computed区别。（4）solt有哪些（5）路由有哪些钩子

一类是原理相关的：（1）vue数据双向绑定原理（高频）。（2）keep-alive原理。（3）nextTick原理。（4）diff算法。（5）列表数组中key的作用。（6）vue的Virtual DOM。

api相关

（1）路由有哪些方式

一、标签路由 router-link
注意：router-link中链接如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。

1、不传参

　   <router-link :to="{name:'Home'}"> 
　   <router-link :to="{path:'/home'}">

2、传参

　　<router-link :to="{name:'Home', params: {id:1}}">
　　<router-link :to="{path:'/home', params: {id:1}}"> 
　　// params传参数
　　// 路由配置 path: "/home/:id"
　　// 不配置path ,第一次可请求,刷新页面id会消失
　　// 配置path,刷新页面id会保留
　　// html 取参 $route.params.id
　　// script 取参 this.$route.params.id

　　<router-link :to="{name:'Home', query: {id:1}}">
　　// query传参数 (类似get,页面url后面会显示参数)
　　// 路由可不配置
　　// html 取参 $route.query.id
　　// script 取参 this.$route.query.id

二、编程式路由 this.$router.push()

1、不传参
　　this.$router.push('/home')
　　this.$router.push({name:'Home'})
　　this.$router.push({path:'/home'})

2、传参
　　this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
　　// params传参数
　　// 路由配置 path: "/home/:id"
　　// 不配置path ,第一次可请求,刷新页面id会消失
　　// 配置path,刷新页面id会保留
　　// html 取参 $route.params.id
　　// script 取参 this.$route.params.id

　　this.$router.push({name:'Home',query: {id:'1'}})　　
　　// query传参数 (类似get,页面url后面会显示参数)
　　// 路由可不配置
　　// html 取参 $route.query.id
　　// script 取参 this.$route.query.id

三、this.$router.go(1);

     <button @click="upPage">[上一页]</button>
     <button @click="downPage">[下一页]</button>

---------------------------------------------------------
	 upPage() {
      //  后退一步记录，等同于 history.back()
      this.$router.go(-1);
    },
 
    downPage() {
      // 在浏览器记录中前进一步，等同于 history.forward()
      this.$router.go(1);
    }

（2）vue生命周期

（3）watch和computed区别

计算属性computed:

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；
3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
   　　immediate：组件加载立即触发回调函数执行，
   　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

（4）solt有哪些

slot详解

（5）路由有哪些钩子

路由钩子

定义：在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化。

1、全局路由钩子：每一次页面跳转前后都会执行

router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  //
  next()
})
//
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

2、单个路由钩子：beforeEnter

routes: [
    {
      path: '/foo',
      component: Foo,
      //只有beforeEnter，在进入前执行，to参数就是当前路由
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

3、路由组件钩子：这个可以写在对应的vue页面中，用来相应路由变化。

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

原理相关

（1）vue数据双向绑定原理（高频）

原理总结

（后面几种原理就不详细了，有兴趣自己百度，我自己也没弄明白）

五、git

自己百度叭~