前端八股文---常问精简版（三件套与es6）

ArlenCling
948 阅读9分钟

1. H5新特性

  • 语义化标签
  • Canvas图形容器
  • Video和audio标签
  • 数据存储--
    • Localstorage,SessionStorage 本地存储
  • 新的表单控件与属性
    • 控件 calendar、date、time、email、url、search
    • 属性autocomplete、autofocus、form、list、placeholder

2. Localstorage、session和Cookie的区别？（需要背诵，倒是没问到）

  • localstorage 和sessionStorage 本地存储，localstorage 浏览器关闭之后不会销毁 必须手动销毁，sessionStorage 浏览器关闭之后就销毁，存储大小5M，用于浏览器缓存，不与服务器通信；
  • cookie一般由服务器生成，可设置失效时间，如果浏览器生成，默认关闭后失效。一般数据存储大小为4kb，每次都携带在 http头中，保存过多数据会带来性能问题。

3. 深拷贝和浅拷贝原理，分别如何去实现？

  • 浅拷贝---浅拷贝是指复制对象的时候，只对第一层键值对进行独立的复制，如果对象内还有对象，则只能复制嵌套对象的地址
  • 深拷贝---深拷贝是指复制对象的时候完全的拷贝一份对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。其实只要递归下去，把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可；
  • 浅拷贝: 解构语法，例如...arg
  • 深拷贝: JSON.parse(JSON.stringify())

4. 盒子模型

Css中将每个元素都设置成了一个矩形的盒子，页面的布局也就成了不同的盒子摆放到相应的位置，每个盒子都有内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成，而IE的盒子模型区别于W3C盒子模型，它的content包含了padding和border。此外box-sizing可以设置盒子尺寸的计算方式，可选值有content-box--宽度高度用来设置内容区的大小，border-box--宽度高度用来设置整个盒子可见框的大小。

5. 选择器的权重

内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器

6.盒子水平垂直居中

  • Position：absolute 需要知道子盒子具体宽高

    • 大盒子relative；小盒子absolute，top-left 50%，margin-top/left-小盒宽度一半

  • Margin：auto 宽高得有

    • 同上，top、right、left、bottom：0，margin：auto；

  • Display:flex

    • Display:flex; justify-content:center; align-items:center;

7. Css3新特性（这个要背一些）

  • Box-shadow
  • Box-radius
  • css3选择器 last-child、nth-child
  • 渐变
  • 弹性盒flex
  • 过渡、动画、变形

8. 数组（对象、字符串）的方法（必须背）

  • Push，向数组末尾一个或多个元素，并返回数组新的长度；
  • Pop，删除数组最后一个元素，被删除的元素作为返回值返回；
  • Unshift，向数组开头添加一个或多个元素，并返回数组新的长度；
  • Shift，删除数组第一个元素，被删除的元素作为返回值返回；
  • splice，删除数组中一个或连续的元素，而且可以再删除位置添加新的元素，删除的元素作为返回值返回；
  • concat，合并多个数组，并返回一个新数组；
  • indexOf，返回置顶元素在数组中第一次出现的位置；
  • forEach，接受一个函数作为参数，遍历数组时，所有数组成员依次执行该函数，中途不可停止。

9. 数组的去重

  • 双层循环
  • IndexOf和includes
  • 排序去重
  • Filter方法
  • Key/value
  • Es6的set和map

10. 重排和重绘

  • 重排是指部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算；
  • 重绘是由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。

11. 防抖和节流

  • 防抖函数控制函数在一定时间内的执行次数。防抖意味着 N 秒内函数只会被执行一次（最后一次），如果 N 秒内再次被触发，则重新计算延迟时间；
  • 节流函数规定一个单位时间，在这个单位时间内最多只能触发一次函数执行，如果这个单位时间内多次触发函数，只能有一次生效。
  • 应用场景：
    • 防抖：输入框连续输入字符
    • 节流：鼠标不断触发事件，如点击，用节流

12. 原型和原型链

每个函数偶有一个prototype属性，这个属性会指向一个对象，就是调用该构造函数而创建的实例的原型，可以通过实例对象的_proto_访问这个原型；实例在创建时，就会默认关联原型，并从原型继承属性；每个原型对象都会存在constructor属性指向关联的构造函数；如果访问一个实例对象的属性无果，js引擎会去原型对象中寻找，原型的原型中找，一直到Object。

13. 跨域问题（必须背好吧）

  1. 跨域是由同源策略引起的，同域名，端口，协议，三个都相同才认为是同源；

  2. 常见的跨域方式有

    • Jsonp方式，很老的跨域方法，一般只处理get请求的跨域，script标签的src去访问到源的数据；
    • Cors跨域资源共享，支持所有主流浏览器；当用XMLHttpRequest发送请求时，不同源的情况下，会在请求头headers加入{ origin }，后台配置，Access-control-allow-origin：*

  3. h5，window.postMessage跨域，有两个参数，”字符串”，” * ”；

  4. Vue中跨域，代理proxy，本质上也是cors跨域

    • 需要在vue.config.js里配置：
    • Proxy：{ target ，changeOrigin ， pathRewrite }跨域目标，是否允许跨域，模拟路径
    • Proxy代理在项目上线后无法实现跨域，需要后端设置nignx代理

14. Js判断数据类型的方法有哪些？

  • Typeof运算符
  • Instanceof
  • Object.prototype.toString.call（xxx）方法

15. This的指向

  • This总是指向函数的直接调用者；
  • 如果有new关键字，指向new出来的那个对象
  • 在事件中，this指向触发这个事件的对象，ie的attachevent中的this指向window

16. 闭包

(1) 当一个嵌套的内部函数引用了外部函数的变量就产生了闭包，闭包是被嵌套的内部函数；

(2) 作用：使函数内部的变量在执行完后仍存储在内存中，函数外部也可以操纵函数内部的变量；

(3) 缺点：用多了会导致内存泄漏，触发不了垃圾回收装置，需要手动赋值null

(4) 应用场景：

① 使用return返回函数

② 函数作为参数

③ 所有的回调函数

17. 块级作用域

  • 在ES5中，有全局作用域和函数作用域，以var定义的变量没有块级作用域的概念，可以跨块访问，不能跨函数访问；
  • 在ES6中，块级作用域指的是在大括号或者if、else、for、while等语句中，以let定义的变量或const定义的常量只能在块级作用域里访问且不存在变量提升和重复声明，此外const定义的常量必须初始化赋值且不能修改。

18. Var、let、const区别？（const定义对象和数组后可以修改） （必会）

  • Let、const有块级作用域、暂时性死区；
  • Let、const不存在变量提升和重复性声明；
  • Let、const声明的全局变量不会挂在顶层对象下面；
  • Let定义变量，const定义常量且不可改变。

19. 箭头函数和普通函数的区别

  • 箭头函数语法简单，清晰；
  • 箭头函数没有prototype，所以本身没this；
  • 箭头函数不会创建自己的this；
  • Call/apply/bind无法改变this指向；
  • 不能作为构造函数使用；

20.  构造函数和普通函数的区别

  • 构造用new调用；
  • 构造内部可以使用this，普通不建议，会指向window；
  • 构造没有return返回值
  • 构造首字母大写。

21. es6的新特性

  • Let和const
  • 解构赋值
  • Includes可以判断一个数组是否包含一个指定的值，包含返回true，反之false
  • 字符串、数值、函数、数组、对象的扩展
  • Module导入模块
  • Promise和async的运用
  • Symbol
  • Set和map
  • Class

22. Promise

  • Promise是es6提出的异步编程解决方案，解决了异步编程的回调地狱问题；
  • Promise是一个构造函数，需要new关键字来生成它的实例对象；
  • Promise接受一个函数作为参数，函数中的代码在new promise的时候会立即执行，我们可以再这里执行异步操作，并存在两个参数resolve和reject，也是函数，用来标记异步执行的状态，通过.then回调异步完成的回调，.catch则是失败的回调；
  • Finally方法是最后都会执行的方法；
  • all方法是几个条件都达成才能返回成功；
  • Rice方法是几个条件都不满足才返回失败。

23. MVC和MVVM有什么区别？

  • 在MVVM模式下，视图和模型只能通过ViewModel进行交互，他能监听数据的变化，然后通知视图更新，实际上实现了双向绑定；
  • MVC是应用最广的软件架构之一，分为模型，视图，控制；MVC是单向通信；
  • 区别
    • MVC中Controller演变成MVVM的ViewModel
    • MVVM通过数据来显示视图层而不是节点操作
    • MVVM主要解决了MVC中大量的dom才做使页面渲染性能降低，加载速度变慢，影响用户体验的现象。

24. 怎么画一条0.5px的下划线以及普通的下划线怎么实现

- 缩放transform: scaleY(0.5);height: 1px;这样肯定是会变虚，
- 但是你可以指定变换的原点，加上这个transform-origin: 50% 100%;就不会有虚化
- .hr.scale-half { 
-     height: 1px;
-     transform: scaleY(0.5);
-     transform-origin: 50% 100%; 
-    }

下划线实现

- border-bottom
- ::before以及position: absolute去设置

25. 清除浮动

- .classic-clearfix::after {
-     content: ''; 
-     display: block; 
-     clear: both; 
- }

26. em和rem区别

em相对于父元素，rem相对于根元素

27. Get和 Post区别

  1. Get请求通常是用于 从服务器端获取数据，Post请求通常用于将数据发送到服务器端；
  2. get可以刷新，post请求刷新会被重新提交；
  3. Get请求可以在书签收藏，post请求不能收藏；
  4. Get请求可以被缓存，Post不能；
  5. Get的安全性比较差，因为在url里能看到；
  6. Get请求数据长度有限制，通常放在url里，限制2048个字符；post请求没有长度限制。

28. set和map的区别

  1. Map是键值对的数据结构，而set是值的集
  2. Map可以通过get方法获取值，而set不行，因为他只有值
  3. 都能通过for of遍历
  4. Set是唯一可以用来数组去重，Map则做数据存储。
avatar
文章
阅读
粉丝