前端面试资料

js

数据类型:Undefined、Null、Number、String、Boolean、Symbol、Object、 Function(object)等

基本数据类型

• Number(ES5): typeof()返回"number"。用于任何类型的数字：整数或者浮点数。
• String(ES5): typeof()返回"string"。用于字符串。一个字符串可以包含一个或多个字符，所以没有单独的单字符类型。
• Boolean(ES5): typeof()返回"boolean"。用于 true 和 false。
• Null(ES5): typeof()返回"object"。用于未知的值 —— 只有一个 null 值的独立类型。
• Undefined(ES5): typeof()返回"undefined"。用于未定义的值 —— 只有一个 undefined 值的独立类型。
• Symbol(ES6): typeof()返回"symbol"。用于唯一的标识符。

引用数据类型

• Object(ES5): typeof()返回"object"。用于更复杂的数据结构。
• Function(ES5): typeof()返回"function"，属于object。

原型:一个简单的对象,用于实现对象的属性继承.可以简单的理解为对象的爹.

原型链:原型链是由原型对象组成的,每一个对象都有__proto__属性,指向了创建改对象的构造函数原型,__proto__将对象连起来组成了原型链,是一个用来实现继承和共享属性的对象连.

构造函数:可以通过new的方式新建一个对象的函数.

实例:通过构造函数和new创建出来的对象.

作用域分为块级作用域和函数作用域

call和apply作用是一样的,改变函数的this,不同的是传参方式,call传参是从第二个参数开始一个个传.call(this,params1,params),而apply第二个参数为数组.apply(this,[params1,params2]).
bind则是返回一个新的函数

闭包:函数在声明时会创建独立作用域,在同一个作用域中的对象可以互相访问.作用域呈现层级包含的状态,形成作用域链.子作用域可以访问父作用域的对象,反之不能.另外子作用域会使用最近的作用域对象.闭包可以在父作用域外部访问父作用域的对象.

ES6常用:

• let const
• 结构赋值let {a,b} = {a:1,b:2}
• 模板字符串 ````${}` ```
• 函数参数默认值
• 箭头函数不适用于(在定义方法时内部包含this,需要动态this)
• 数组的扩展方法
• symbol
• set所有成员的值是唯一的,不存储value
• map是一组键值对的结构,各种类型的值(包括对象)都可以当做键

数组的方法:

• map
• forEach
• filter
• some
• every
• join
• push
• pop
• unshift
• shift
• sort
• reverse(数组倒叙)
• concat
• slice
• splice
• indexOf
• reduce

Promise:解决异步编程带来的回调地域问题.可以理解为一个容器,存放着某个未来才会结束的结果.
三种状态:

1. pending: 创建后即为pending
2. fulfiled : 成功
3. rejected: 失败
   状态不受外界影响,一但改变后就不会再变.
一旦新建后会立即执行,无法中途取消.如果不设置回调函数,内部抛出的错误不会影响到外部
当处于pending状态时,无发知道目前到哪一阶段(刚刚开始还是即将结束).

把基本类型数据转换为对应的引用类型的操作成为装箱

WEB

输入url到页面展现的过程:

1. DNS解析
2. TCP三次握手建立连接(我要练接你可以吗,可以的链接我吧,好的我来了)
3. 发送请求
4. 服务器处理请求
5. 服务器返回请求的HTML
6. 浏览器渲染
   1. HTML parser(解析器) -> DOM tree
   2. CSS parser -> style tree
   3. 结合DOM tree和style tree生成渲染树
   4. layout布局
   5. GPU painting 像素绘制页面

重绘:当元素样式改变不影响布局是,浏览器将使用重绘对元素进行更新,此时只需要UI层面的重新绘制,因此损失较少.
回流:当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,成为回流.此时浏览器需要重新计算和布局,因此是比较重的操作.

跨域:当一个请求的协议、域名、端口三者之间任意一个与当前页面的url不同时,即为跨域.

1. 使用postMessage方法可以实现窗口间通信,可以解决iframe间的信息传递
2. JSONP: 网页通过添加一个script元素向服务器发送请求,服务器收到后将数据放在一个指定名字的函数的参数位置传回来.
3. CORS: 跨域资源共享. 服务器端设置Access-Control-Allow-Origin添加允许域名和常用的请求头Content-Type,浏览器检测到相应的设置就可以允许发送ajax请求.

vue

双向绑定的原理: vue2 是使用Object.defineProperty()方法劫持属性,通过GET方法收集依赖,使用SET方法劫持数据,将依赖次数据的view更新.vue3将使用Proxy()对象,进行数据代理

数组直接修改下标是监听不到变化的,只有重新赋值和push()pop()shift()unshift()splice()sort()reverse()这些方法可以

nextTick:vue实现响应式并不是数据发生变化后立即更新DOM,而是等一个事件循环后将改变的数据统一更新DOM.nextTick是在下次DOM更新循环结束后立即使用此方法获得更新后的DOM.
栗子:

<template>
  <div>
    <input ref="test" v-if="showInput" />
  </div>
</template>

<script>
export default {
  data(){
    showInput:false
  },
  methods:{
    getFocus(){
      this.showInput = true;
      this.$nextTick(()=>{
        this.$refs.test.focus()
      })
    }
  }
}
</script>

computed和watch的区别:
computed是计算属性,依赖其他属性计算值.并且computed的值有缓存,只有计算得值变化时才会重新计算.
watch监听到值得变化就会执行回调,在回调中可以进行一些逻辑操作.
需要依赖别的属性来动态获得值得时候可以使用computed.
对于监听到值得变化需要做一些复杂业务逻辑的情况可以使用watch

vuex:vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）

• state：存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。
• getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
• mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

setNowRouter(state, nowRouter) {
  state.nowRouter = nowRouter
}
this.$store.commit("setNowRouter",nowRouter);

• action：包含任意异步操作，通过提交 mutation 间接更变状态。

setStatus({commit}, status) {
  commit('SETSTATUS', status);
}
this.$store.dispatch("setStatus", status);

• module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。