前端面试题3

KJ_Jesus
209 阅读10分钟

JS iterator迭代器

JS ES6 新特性

let const / var 的区别

1.块级作用域

  • 块级作用域由{}包括
  • let / const 具有块级作用域
  • var 不存在块级作用域
  • 块级作用域解决了两个问题
    • 内层变量可能覆盖外层变量
    • 用来计数的循环变量泄漏为全局变量

2.变量提升

  • var存在变量提升
  • let / const不存在变量提升
  • 变量只能在声明之后使用, 否则会报错

3.给全局添加属性

  • 浏览器全局对象是window / node全局对象是 global
  • var声明的变量为全局变量, 并且会将该变量添加为全局对象的属性
  • let / const并不会

4.重复声明

  • var声明变量时, 可以重复声明, 后声明的变量会覆盖之前声明的
  • const / let 不允许重复声明变量

5.暂时性时区

  • let / const 声明变量之前, 该变量不可用

6.初始值设置

  • var / let 不用设置初始值
  • const 声明变量必须设置初始值

7.指针执行

  • let 创建的变量可以更改指针指向(重新复制)
  • const 声明的变量不可以改变指针指向

TDZ - 暂时性死区

当程序的控制流程在新的作用域(module function 或 block 作用域)进行实例化时, 在此作用域中用let/const声明的变量会先在作用域中被创建出来, 但因此还未进行词法绑定,所以是不能访问的, 访问会抛出错误. 因此, 在这运行流程进入作用域创建变量, 到变量可以被访问之间的这一段时间, 就称之为暂时死区.

ES6规定，let/const 命令会使区块形成封闭的作用域。若在声明之前使用变量，就会报错。总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为  “暂时性死区” （ temporal dead zone，简称 TDZ）

箭头函数

  • 箭头函数没有 arguments
  • 箭头函数没有 prototype 属性, 不能用作构造函数
  • 箭头函数没有自己的 this, 它的this是词法的, 引用的是上下文中的 this.
  • 箭头函数的 this 指向即使使用 call,apply,bind 也无法改变（这里也验证了为什么 ECMAScript 规定不能使用箭头函数作为构造函数，因为它的 this 已经确定好了无法改变）

方便操作的一些方法

解构赋值 解构赋值可以直接使用对象的某个属性, 而不需要通过属性访问的形式使用.

扩展运算符 可以扩展数组 [...arr]

剩余运算符

  • 剩余运算符最重要的一个特点就是替代了以前的 arguments
  • 剩余运算符和扩展运算符的区别就是，剩余运算符会收集这些集合，放到右边的数组中，扩展运算符是将右边的数组拆分成元素的集合，它们是相反的
  • function(...rest)把形参放到rest数组里

for...of循环

  • for ... of 是作为 ES6 新增的遍历方式,允许遍历一个含有 iterator 接口的数据结构并且返回各项的值

  • ES3 中的 for ... in 的区别如下 ：

    1、for ... of 只能用在可迭代对象上,获取的是迭代器返回的 value 值,for ... in 可以获取所有对象的键名

    2、for ... in 会遍历对象的整个原型链,性能非常差不推荐使用,而 for ... of 只遍历当前对象不会遍历它的原型链

    3、对于数组的遍历,for ... in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for ... of 只返回数组的下标对应的属性值

Module

  • ES6 Module使用Import关键字导入模块, export关键字导出模块
  • ES6 Module是静态的, 在编译运行阶段, 和var/function一样具有提升效果(支持tree-shaking)
  • 自动采用严格模式(等层的this返回undefined)
  • ES6 Module支持使用export{<变量>}导出具名的接口,或者export default导出匿名的接口

Cookie / Session / LocalStorage /SessionStorage

Cookies

原因: HTTP协议本身是无状态的, 服务器无法判断用户身份 Cookie: 是一小段的文本信息(key-value格式), 大小一般不超过4K

image.png

Cookie机制
1.客户的发送一个请求给服务器
2.服务器发送Http Response响应给客户端, 其中包含Set-Cookie头部
3.客户端保存cookie, 之后发送时, http request 请求头会包含一个Cookie头部
4.服务端检查cookie, 辨认用户状态

Expires失效

  1. Cookie中使用maxAge来表示该属性, 单位为秒，通过getMaxAge() / setMaxAge来读写该属性
  2. maxAge有三种值, 正数 负数 0
  • 正数: 表示该Cookie会在maxAge秒之后自动消失, 浏览器也会为正数的Cookie持久化,即写到对应的Cookie文件中. 无论客户关闭浏览器或电脑, 只要还在maxAge秒之前,登录仍然有效
  • 负数: 表示Cookie只是一个临时Cookie,不会被持久化, 仅在本浏览器或者本窗口打开的子窗口中有效, 关闭浏览器立即失效.
  • 0: 表示立即删除Cookie

Cookie修改

  • 提供的Cookie操作只有一个addCookie()
  • 修改: 使用一个同名的Cookie来覆盖原先的Cookie
  • 删除: 使用一个同名的Cookie, 将maxAge设置为0, 并覆盖原来的Cookie
  • 新建的Cookie: name / path / domain都必须和原来的一致, 不然会视为两个不同的Cookie

Cookie应用

  • 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为等

Session

Session是另一种记录客户状态的机制 Session保留在服务器上

Session机制

  • 浏览器第一次向服务器发起请求时
  • 服务器会为当前会话创建一个session，并且把对应的 session-id 写入 cookie 中，用来标识 session
  • 此后，每次用户的请求都会携带一个包含了 session-id 的 cookie
  • 服务器解析出了 session-id，便能定位到用户的用户信息

Session生命周期与有效期

为了获得更高的存取速度，服务器一般把session放在内存里。每个用户都会有一个独立的session。如果session内容过于复杂，当大量客户访问服务器时可能会导致内存溢出

session在用户第一次访问服务器的时候自动创建。session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该session。

为防止内存溢出，服务器会把长时间内没有活跃的session从内存中删除。这个时间就是session的超时时间。如果超过了超时时间没访问过服务器，session就自动失效了

Cookie / Session 区别 1.作用范围不同: cookie存储在客户浏览器上, session放在服务器上 2.存取方式不同: cookie只能保持ASICC，session可以是任意数据类型 3.有效期不同: cookie可设置长时间保持->默认登录, session一般失效时间较短, 客户的关闭/session超时都会失效 4.存储大小不同: cookie-4K, session远高于cookie

LocalStorage & SessionStorage

WebStorage是本地存储, 存储在客户端, 包括LocalStorage & SessionStorage, 提供了cookie之外存储会话的途径, 提供一种存储大量会话存在的数据的机制. getItem(key) - 获取数据 setItem(key,value) - 保存数据 removeItem(key) - 删除单个数据 clear() - 删除所有数据

LocalStorage

  • 生命周期是永久的, 需要用户自己清除
  • 大小为5M
  • 不参与服务端通信

SessionStorage

  • 仅在当前会话有效, 关闭页面或浏览器后清除
  • 大小为5M
  • 不参与服务端通信

WebStorage优点

  • 存储空间大: Cookie=4KB, WebStorage=5MB
  • 节省网络流量: WS不会传送到服务器, 本地读取
  • 安全性: 不会随着HTTP header发送到服务器端, 安全性较高

作用域

  • 不同的浏览器无法共享localStorage / sessionStorage
  • 相同的浏览器的不同页面可以共享相同的localStorage(页面属于相同域名 端口)
  • 不同页面或标签页面无法共享sessionStorage的信息

Cookie vs WebStorage 1.cookie的作用是与服务器进行交互, 作为http规范的一部分存在. Webstorage仅仅是为了本地存储而生 2.都保存在浏览器端 并且同源 3.cookie和localStorage在同源的窗口中共享, sessionStorage在不同的浏览器中不能共享 4.有效期不同, cookie设置有效期之前可用, sessionStorage:仅在当前浏览器关闭之前有效,localStorage: 始终有效, 窗口浏览器关闭也一直保存.

传token用cookie不太好是为啥吗？

后端拿前端有两个同名的cookie，这是什么原因?

Vue nextTick 原理/作用/应用

segmentfault.com/a/119000001… 用法: nextTick的本质就是执行延迟回调的钩子，接受一个回调函数作为参数, 在下次DOM更新循环结束之后执行延迟回调. 修改数据之后立即使用这个方法, 获取更新后的DOM.

Vue异步更新 Vue 的异步更新，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的

CSS 三栏布局

1.浮动布局

  • 基于float实现三栏布局, 中间的内容要放在HTML结构的最后, 否则右侧会沉在中间内容的下侧
  • HTML结构中,中间栏置于同级末尾
  • 两侧栏设置浮动布局float: left 和 float: right
  • 两侧栏设置固定宽度 width
  • 利用中间元素的 margin 值控制两边的间距

注意

  • 因为浮动脱离文档流，所以中间栏一定要放到最后面
  • 如果有文字出现，布局就会错乱，导致扩展性不好
  • 主要内容无法最先加载，当页面内容较多时会影响用户体验
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .left{
      float: left;
      width: 35%;
      height: 200px;
      background-color: aquamarine;
    }
    .right{
      float: right;
      width: 35%;
      height: 200px;
      background-color: cadetblue;
    }
    .main{
      margin-left: 35%;
      margin-right: 35%;
      height: 200px;
      background-color: bisque;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>
</body>
</html>

2.双飞翼布局

前提 main外有一层包裹

  1. main外包裹wrapper设置宽高
  2. main设置margin值 -> 左右为两部分的各自width
  3. left设置 margin-left: -100%
  4. right设置 margin-right: -宽度

3.圣杯布局

前提 main在最上面, 依次left, right

  1. 三栏都添加浮动 float: left
  2. 设置外包裹container padding的值 -> 左右分别为各自部分的width -->
  3. 左侧设置
  • margin-left: -100% 上移
  • position: relatvie 相对定位
  • right: 宽度 左移
  1. 右侧设置
  • margin-right: -宽度 左移

4. Flex布局

  • 定义 header 和 footer 样式，使之横向撑满
  • container 中的 left、center、right 依次排布即可
  • 设置 container 为弹性布局 display: flex
  • left 和 right 区域定宽，center 设置为 flex: 1 即可

5. 绝对定位

  • 外部容器设置相对定位 position: relative
  • 三栏设置绝对定位 position: absolute
  • 两侧栏设置固定宽度 width
  • 两侧分别设置至两侧边距 left: 0 和 right: 0
  • 中间栏左右边距设置为上面的固定宽度 left: width 和 right: width
avatar
文章
阅读
粉丝