前端基础常问的面试题

前端基础常问的面试题

1.自我介绍

长大了我想去当太空人，爷爷奶奶可高兴了，给我爱吃的大嘴巴子

2.js的作用域和作用域链

• 规定变量和函数的可使用范围称作作用域
• 每个函数都有一个作用域链，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作作用域链。

3.解释闭包，闭包的用法

函数执行，形成私有的执行上下文，使内部私有变量不受外界干扰，起到保护和保存的作用。

作用：

• 保护
  • 避免命名冲突
• 保存
  • 解决循环绑定引发的索引问题
• 变量不会销毁
  • 可以使用函数内部的变量，使变量不会被垃圾回收机制回收

应用：

• 设计模式中的单例模式
• for循环中的保留i的操作
• 防抖和节流
• 函数柯里化

缺点

• 会出现内存泄漏的问题

4.解释防抖、节流

• 防抖
  • n秒后在执行该事件，若在n秒内被重复触发，则重新计时
• 节流
  • n秒内只运行一次，若在n秒内重复触发，只有一次生效

// ---------------------------------------------------------防抖函数
	function debounce (func, delay) {
	  let timeout
	  return function () {
	    let args = arguments
	    let _this = this
	    if (timeout) clearTimeout(timeout)
	    timeout = setTimeout(() => {
		  func.apply(_this,args)
		}, delay)
	  }
	}

// ---------------------------------------------------------节流 ，时间戳版
	function throttle (func, delay) {
	  let previous = 0
	  return function () {
	    let now = Date.now()
	    let args = arguments
	    let _this = this
	    if (now - previous > delay) {
		  func.apply(_this, args)
		  previous = now
		}
	  }
	}

5.解释Vue里的虚拟DOM

虚拟DOM在vue中主要提供与真实节点对应的虚拟节点vnode,然后需要将vnode和oldVnode进行比对，然后更新视图，对比两个虚拟节点的算法是patch算法

6.Vue的生命周期

• beforeCreate
  • 创建之前，此时还没有data和Method
• created
  • 创建完成，此时data和Method可以使用了
    -在created之后beforeMount之前如果没有el选项的话那么此时生命周期结束，停止编译，如果有则继续
• beforeMount
  • 在渲染之前
• mounted
  • 页面已经渲染完成，并且vm实例中已经添加完$el了，已经替换掉那些DOM元素了（双括号中的变量），这个时候可以操作DOM了（但是是获取不了元素的高度等属性的，如果想要获取，需要使用nextTick()）
• beforeUpdate
  • data改变后，对应的组件重新渲染之前
• updated
  • data改变后，对应的组件重新渲染完成
• beforeDestory
  • 在实例销毁之前，此时实例仍然可以使用
• destoryed
  • 实例销毁后

7.Vue组件之间的通信方式

• 父传子
  • 子组件设置props + 父组件设置v-bind:/:
• 子传父
  • 子组件的$emit + 父组件设置v-on/@
• 任意组件通信，新建一个空的全局Vue对象，利用emit发 送 ，$on接收
  • 传说中的$bus，任意组件

	Vue.prototype.Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});

• 父组件通过v-bind:/:传值，子组件通过this.$attrs获取
  • 父传子
  • 当子组件没有设置props的时候可以使用
  • this.$attrs获取到的是一个对象（所有父组件传过来的集合）
    祖先组件使用provide提供数据，子孙组件通过inject注入数据
• parent/children
• refs—$ref
• Vuex
  • 里面的属性有：
    • state
      • 存储数据的
      • 获取数据最好推荐使用getters
      • 硬要使用的话可以用MapState， 先引用，放在compute中…mapState([‘方法名’,‘方法名’])
    • getters
      • 获取数据的
      • this.$store.getters.xxx
      • 也可使用mapGetters 先引用，放在compute中，…mapGetters([‘方法名’,‘方法名’])
    • mutations
      • 同步操作数据的
      • this.$store.commit(“方法名”,数据)
      • 也可使用mapMutations ，使用方法和以上一样
    • actions
      • 异步操作数据的
      • this.$store.dispatch(“方法名”,数据)
      • 也可使用mapActions ，使用方法和以上一样
    • modules
      • 板块，里面可以放多个vuex

8.Vuex(楼上)

9.解释Vue的数据绑定原理

数据劫持： vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调

10.编写一个数组去重的方法

    var arr = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]

    // 最low1
    let newArr2 = []
    for (let i = 0; i < arr.length; i++) {
      if (!newArr2.includes(arr[i])) {
        newArr2.push(arr[i])
      }
    }
    console.log(newArr2);
    
    // 最low2
    let arr2 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
    for (let i = 0; i < arr2.length; i++) {
      var item = arr2[i]
      for (let j = i + 1; j < arr2.length; j++) {
        var compare = arr2[j];
        if (compare === item) {
          arr2.splice(j, 1)
          j--
        }
      }
    }
    console.log(arr2);


    // 基于对象去重
    let arr3 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
    let obj = {}
    for (let i = 0; i < arr3.length; i++) {
      let item = arr3[i]
      if (obj[item]) {
        arr3[i] = arr3[arr3.length - 1]
        arr3.length--
        i--
        continue;
      }
      obj[item] = item

    }
    console.log(arr3);
    console.log(obj);

    // 利用Set
    let newArr1 = new Set(arr)
    console.log([...newArr1]);


    let arr4 = [1, 2, 1, 1, 1, 2, 3, 3, 3, 2]
    //利用reduce
    newArr4 = arr4.reduce((prev, curr) => prev.includes(curr)? prev : [...prev,curr],[])
    console.log(newArr4);

11.localStorage、SessionStorage、cookie、session三者的区别

• localStorage
  • 生命周期：关闭浏览器后数据依然保留，除非手动清除，否则一直在
  • 作用域：相同浏览器的不同标签在同源情况下可以共享localStorage
• sessionStorage
  • 生命周期：关闭浏览器或者标签后即失效
  • 作用域：只在当前标签可用，当前标签的iframe中且同源可以共享
• cookie
  • 一开始cookie 不是用来存储的，而是为了弥补 http 的状态的不足，http 是无状态协议。每当向服务器发起请求、请求结束，下次发送请求的时候服务端就不知道是谁了，所以 cookie 是用来弥补这个不足的
  • cookie 有很多缺陷，比如：
    • 容量缺陷。cookie 的存储空间只有4KB
    • 性能缺陷。有时候 cookie 我们用不到，但是不管用的到用不到，http 在发送请求的时候一定会带着 cookie，这就造成了性能的浪费
    • 安全缺陷。cookie 在 http 下很容易被非法用户获取。尤其是设置了 http-only 为 false 的情况下，这个时候 js 可以读取到 cookie，很容易受到 xss攻击。
  • cookie 是保存在客户端的，一般由 server 设置值及过期时间
    • cookie 没有提供删除的 API，如果想要删除的 的话可以把 max-age 设为0或者把 expire 设置为当前时间（立刻过期）即可
  • cookie 的属性有
    • http-only
      • 不能被客户端更改访问，防止 XSS 攻击
    • max-age
      • 生效后存活的时间
    • Secure
      • 是否只允许在 https 下传输
    • expire
      • 过期时间
• session
  • session 是保存在服务端的
  • session 的运行依赖 sessionId，sessionId 又保存在 cookie 中，所以禁用了 cookie之后 session 也是用不了的，如果硬要用也可以，可以把 sessionId 存储在 url 中
  • session一般是用来跟踪用户状态的
  • session 比较安全，因为存储在服务器中，不过为了减少服务端的压力，很多信息还是推荐存在 cookie 中的

12.有项目的话，问项目的问题比较多（出现的问题，你负责的是什么）

吧啦吧啦吧啦

13.自己的规划

长大了我想去当太空人，爷爷奶奶可高兴了，给我爱吃的大嘴巴子

后续想到继续更新…


个人博客 : https://zhuangweixin.github.io/Blog