高级前端必会的300个知识点（1）

1. Vue 常用的修饰符

• .lazy：v-model 在每次 input 事件触发的时候都会去进行数据同步，添加 lazy 修饰符后就转变为 change 事件触发时再进行数据同步。
• .number：可以自动将用户输入的值转为数值类型
• .trim：可以自动过滤用户输入的守卫空白字符

事件修饰符：

• .stop：阻止冒泡， event.stopPropagation() 或 cancelBubble
• .prevent：拦截默认事件，等同于 event.preventDefault()
• .passive：不拦截默认事件告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。与 prevent 冲突，不能同时使用。
• .capture：事件在捕获阶段执行
• .self：只会触发自身事件，不包含子元素的事件
• .once：事件只会触发一次

2. 函数节流和防抖

• 节流：说白了就是减少执行频率，自定义一个时间间隔，如果多次去触发一个函数让这个函数每隔这个时间就执行一次，在时间间隔内触发这个方法的均无视。最常见的像scroll这种操作，没必要执行频率那么高，十分影响性能，搞个几百毫秒执行一次就够意思的了，当然具体执行时间间隔还得视业务需求而定
• 防抖：说白了就是你还在操作我就不执行它，等你停下来我才执行。还是拿滚动scroll来说事，你监听了文档的scroll，但希望在滚动过程中不执行定义的方法，等停下来才执行，那就是典型的防抖

3. map，filter，reduce 各自有什么用

• map：就是遍历原数组，执行一些操作后放入新数组，最后返回新数组。有三个参数分别是，当前项、索引、原数组
• filter：过滤器，取出数组中符合要求的项放入新数组。在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素。
• reduce：reduce 就是一个累加器，reduce 为数组的每一项都执行一次回调函数，我们可以对每一项都进行操作，可以接受四个参数分别是上一次回调返回的结果、当前项、当前索引，原数组。
• map 为迭代器，通常用于处理数据结构的所有数据，并进行数据结构的重构；reduce 为累加器，虽然 reduce 也可以完成 map 的一些工作但是并不提倡这么做。

4. js 的基本数据类型判断方法

• typeof：其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括以下 8 种：number、boolean、symbol、string、object、undefined、function、bigInt 等。
  但是 typeof 有一定的缺陷。typeof NaN 的返回值是 number，typeof [] 返回值是 object，typeof null 结果也是 object。所以用typeof除了string和boolean其他的都不太靠谱

• instanceof：一般用来判断引用数据类型的判断，比如 Object、Function、Array、Date、RegExp等等。实现原理主要就是判断右边变量的 prototype 在不在左边变量的原型链上，判断对象和构造函数在原型链上是否有关系，如果有关系，返回真，否则返回假。所以使用 instanceof 来判断类型的话只能知道是不是要判断的这个类型，如果不是就不能知道其准确的类型。

• Object.prototype.toString.call：toString 是 Object 原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString 运行时 this 指向的对象类型, 返回的类型格式为 [object,xxx]，xxx 是具体的数据类型，包括 String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument,…

5. Vue 中 computed 和 watcher 的区别

• watcher 顾名思义就是监听数据变化，它监听的数据来自 props、data、computed 的数据。他有两个参数分别是 newValue 和 oldValue。watcher 默认是浅监听，如果想要深度监听的话可以加一个deep:true;
• computed 用于处理复杂的逻辑运算，比较适合对多个变量或者对象进行处理后返回一个结果值
• computed 支持缓存，只有依赖数据发生改变，才会重新进行计算；watcher 不支持缓存，数据变，直接会触发相应的操作
• computed 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。watch 支持异步。

6. React state 和 props 有什么不同

props 是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props 以及展现形式不会改变。

state 是组件自身的状态，的主要作用是用于组件保存、控制以及修改自己的状态的一些数据，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。

• state 是组件自己管理数据，控制自己的状态，可变；
• props 是外部传入的数据参数，不可变；

7. git 怎么删除远程和本地分支

• 删除本地分支：git branch -D 分支名
• 删除远程分支：git branch origin -D 分支名

8. 闭包是什么？闭包的 this 指向？

闭包是指有权访问另外一个函数作用域中的变量的函数。一般是在一个函数内返回一个函数，这个被返回的函数就是一个闭包函数。

this对象是在运行时基于函数的执行环境绑定的，谁调用this就是谁。一般的闭包我们调用第一层时是像全局返回一个函数，所以当再调用第二层时里边的this就是指向全局。

因为闭包并不属于这个对象的属性或方法。所以在闭包中的this是指向window的

9. webpack 中 loader 和 plugin 的区别

• loader 用于加载某些资源文件。因为 webpaack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css 、图片、jsx 、视频等等是没有办法加载的，就需要对应的 loader 将资源转化加载进来。字面意思三个可以看出，loader 适用于加载的，它作用域一个个文件上。
• plugin 用于拓展 webpack 的功能。针对是loader结束后，webpack打包的整个过程。它并不直接操作文件，而是基于事件机制工作。目的在于解决loader无法实现的其他事，从打包优化和压缩。

10. vue 中的 key 有什么作用？不加会怎样？

• key 就是给每个节点一个唯一的标识，key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。
• 如果不加 key ，在更新的时候 vue 会去比较所有的项，然后把全部的元素进行替换，造成性能的降低。

11. React 的路由懒加载怎么实现？

• 使用传统的 import 的方式。可以在函数内 return 一个 import， 添加 webpackChunkName 的注释，这样 webpack 打包时就会将对应的文件单独打包，当函数执行时再去加载这个包。

return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {}

• 使用 React.lazy 实现。导入时调用 React.lazy 并给他一个函数参数，函数中返回 import React.lazy(() => import("./XXX"))。配合 Suspense 可以实现在模块未加载完成的时候给用户一个提示。

12. cookie storage 的区别？什么时候使用

• cookie 数据始终携带在请求中，storage 不会主动的发送给服务器。
• cookie 数据一般限制为大小不超过 4k ，sessionStore 和 localStorage 虽然也有大小限制，但是比 cookie 大的多，可以达到 5M 或更大。
• 有效期不同，sessionStorage 仅在当前窗口关闭前有效，不能持久保存，localStorage 不会主动失效，可以保存持久数据。 cookie 在设置的过期时间之前一直有效
• 作用域不同。sessionStorage 在不同的窗口中是不共享的，即使是打开的同一个页面也不会共享。localStorage 对所有同源的窗口都是共享的。cookie 也是对同源的窗口共享

使用场景：

• cookie 比较小所以不会存大量的数据，一般当你有一些信息在每次请求中都需要携带的时候才会放到 cookie 比如登录信息、设置信息等。
• localStorage 一般用于前端缓存一些数据，这些数据只在前端使用不在后端使用，比如一些网站的编辑器自动保存草稿的功能就可以保存在 localStorage 中。