面试题2.0

目录

css 动画

深拷贝和浅拷贝

ES6新特性

事件循环

vue-router原理

flex布局

session和local storage分别是用来干嘛的？  

http状态码

原型链

虚拟dom

vuex的五个属性

vue路由跳转的四种方式

vue生命周期

link和@import的区别

GET 与 POST 的区别

flex:1

---

css 动画

1. 定义动画帧
          @keyframes 动画名{
            from {
              // 开始帧
            }
            to {
              // 结束帧
            }
          }

          @keyframes 动画名{
            0% {
              // 开始帧
            }
            20% {

            }
            ...
            100% {
              // 结束帧
            }
          }
        2. 设定动画（贺卡）
          animation-name: move;
            动画名
          animation-duration: 2s;
            持续时间
          animation-timing-function: linear;
            时间曲线函数（自由落体，贝塞尔曲线）
          animation-fill-mode:forwards;
            填充模式，动画结束后保留哪一帧规则
          animation-iteration-count: 2;  
            动画迭代次数 infinite
          animation-direction: alternate-reverse;   
            动画执行的方向 from->to , to->from
          animation-play-state: paused;
            动画状态
          animation-delay: 1s;
            延迟时间
          animation: move 2s 1s 2 linear;
            动画的速写形式
      2) 案例（呼吸灯）
      3) 案例（梦幻西游）
    2. 动画库 animate.css
      动画帧、动画设定规则都有第三方完成，我们直接使用class即可
      1) 引入动画库
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
      2) 使用
        1. 直接调用动画设定类
          <div class="box animate__animated animate__infinite animate__bounce"></div>
        2. 引用关键帧
          <style>
            .bounce {
              animation: flash 10s linear infinite;
            }
          </style>
          <div class="box bounce"></div>
    3. 过渡
      过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）
      transition-property: width;
        过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
      transition-duration: 2s;
        过渡持续时间
      transition-delay: 0;
        过渡延迟时间
      transition-timing-function: linear;
        时间曲线函数
      transition:transform,background-color 2s,2s 0s linear;
        速写形式
    4. 变形
      transform:变形函数
      1. 缩放
        scale(2)
      2. 平移
        translate(100px,50px)
      3. 旋转
        rotate(360deg)
      4. 拉伸
        skew(45deg)

深拷贝和浅拷贝

深拷贝：值和引用地址一起拷贝

浅拷贝：只拷贝引用地址，不拷贝值，共用内存

浅拷贝只是增加了一个指针指向已存在的内存地址，仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。

深拷贝是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。

 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。也就是说，如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的。

深拷贝的实现方法：

json.stringify()，你可以使用JSON.stringify()方法将数组转换为JSON字符串，以及使用JSON.parse()方法将JSON字符串转换回数组

Object.create()

浅拷贝的实现方法：

1.直接赋值（=）

2.扩展运算符（...）

3.Object.assign

ES6新特性

1.let和const

let只在代码段有效，var在全局都有效

let只能声明一次，var可以声明多次

let没有变量提升，但有作用域链

const一旦声明常量的值就不能改变，必须赋值，但是如果用const来声明数组或者对象，则数组，对象下的值可以改变，原因是const指向的变量的地址没有发生改变

2.解构

3.模板字符串

通过模板字符串去保存较长的字符串数据，不需要再使用大量的""和+来拼接字符串和变量。

4.扩展运算符

合并和聚合操作

5.对象的简写

6.函数功能新增

    参数解构
    rest函数
    箭头函数

7.对象功能新增（5）

8.数组功能新增（6）

9.for-of遍历 遍历键值

for-in遍历键名

10.symbol

在对象中当做属性名使用，保证每个属性的名字都是独一无二的

11.set聚合

数组去重，Set的成员的不能通过索引的方式访问。size(个数)，不能遍历

以 [value, value]的形式储存元素，是无序的

add(value)：新增，相当于 array里的push。

delete(value)：存在即删除集合中value。

has(value)：判断集合中是否存在 value。

clear()：清空集合。

便利方法：遍历方法（遍历顺序为插入顺序）

keys()：返回一个包含集合中所有键的迭代器。

values()：返回一个包含集合中所有值得迭代器。

entries()：返回一个包含Set对象中所有元素得键值对迭代器

12.map集合

new Map() 类似于 对象，属于键值对集合，但是此 键值 与 对象的键值 有所不同，此键值可以包含：
string / number / Object / Array 或 undefined 等等，不能遍历

一个 Map的键可以是任意值，包括函数、对象或任意基本类型，key是有序的

以 [key, value] 的形式储存

    set(key, value)：向字典中添加新元素。
    get(key)：通过键查找特定的数值并返回。
    has(key)：判断字典中是否存在键key。
    delete(key)：通过键 key 从字典中移除对应的数据。
    clear()：将这个字典中的所有元素删除。

13.类class

14.迭代器

15.promise

Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

三种状态：pending，resolved，rejected

Promise.all([p1, p2, p3])用于将多个promise实例，包装成一个新的promise实例，返回的实例就是普通的promise，它接收一个数组作为参数
数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值的数组
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

Promise.all()方法通常用于处理需要同时获取多个数据的情况，并将这些数据合并为一个结果返回。
Promise.allSettled()

allSettled在其中一个promise返回错误时还可以继续等待结果

Promise.race()方法同样是将多个Promise实例包装成一个新的Promise实例，但是只要有一个Promise 实例状态发生变化，就将新的Promise实例的状态改变，且终值由第一个完成的 Promise提供。

    Promise.then(onFulfilled[, onRejected])。当 Promise 对象成功或失败时，执行指定的函数。123

    Promise.catch(onRejected)。当 Promise 对象失败时，执行指定的函数。
    Promise.finally(callback)。无论 Promise 对象成功或失败，都会执行指定的函数

16.generator

17.async

    async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
    async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
    await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

事件循环

js是一门单线程非阻塞语言，弱类型语言，分为同步任务和异步任务

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码

JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。

异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程

（1）所有同步任务都在主线程上执行，行成一个执行栈
（2）主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
（3）一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面还有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
（4）主线程不断的重复上面的第三步

异步任务包括微任务和宏任务，微任务包括：Promise、MutaionObserver、process.nextTick

宏任务包括：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate

1) 当某个宏任务执行完后,会查看是否有微任务队列。

2) 如果有，先执行微任务队列中的所有任务，

3) 如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。

4) 栈空后，再次读取微任务队列里的任务，依次类推。

栈：先进后出，队列：先进先出

new promise 中的代码立即执行

vue-router原理

vue-router通过hash与History两种方式实现前端路由，更新视图但不重新请求页面是前端路由原理的核心之一

目前在浏览器环境中这一功能的实现主要有两种方式

hash ---- 利用URL中的hash（“#”）

History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。它提供了一些属性和方法。

History接口不继承于任何属性

主要是HTML5的History API 为浏览器的全局history对象增加的扩展方法。

flex布局

弹性布局

通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式

容器属性

justify-content控制项目在横轴上的对齐方式 flex-start(默认) | flex-end | center | space-between

align-items控制项目在纵轴上的对齐方式 flex-start | flex-end | center | baseline | stretch(默认)

默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器

baseline让项目以第一行文字的基线为参照进行排列

flex-direction项目排列的方向和顺序 row(默认) | row-reverse | column | column-reverse

flex-wrap项目是否换行 nowrap不换行（默认），wrap换行

项目属性

order用于决定项目的排列顺序

flex-grow项目在有默认空间时是否放大 0否，1是

flex-shrink项目在空间不足时是否缩小 0否，1是

flex-basis设置宽度，权重比width高，会覆盖width

session和local storage分别是用来干嘛的？  

 local storage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失,一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。只能存储字符串类型的对象，5M 大小

session:session保存状态。用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。

如果超过了超时时间没访问过服务器，Session就自动失效了。

记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。

客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了

sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。 在关闭了浏览器窗口后就会被销毁，存放数据大小为一般为5KB

cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右, 有个数限制，缺点是不能储存大数据且不易读取

http状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。

下面是常见的HTTP状态码：

1 - 服务器收到请求

2 - 请求成功

3 - 重定向

4 - 客户端错误

5 - 服务器错误

    200 - 请求成功
    201 - 已创建，请求成功并成功创建新的资源
    301 - 资源（网页等）被永久转移到其它URL
    302：请求重定向
    304 - 未修改，所请求的资源未修改，服务器不会返回任何资源，请求资源没有变，访问本地缓存
    403 - 服务器理解请求客户端的请求，但拒绝执行此请求
    401-需要用户验证
    404 - 请求的资源（网页等）不存在
    500 - 内部服务器错误

原型链

原型对象，包含所有实例共享的属性和方法

每个构造函数都有一个原型对象

原型链就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性，这个prototype属性就是我们的原型对象，我们拿这个函数通过new构造函数创建出来的实例对象，这个实例对象自己会有一个指针(_proto_)指向他的构造函数的原型对象！这样构造函数和实例对象之间就通过( _proto_ )连接在一起形成了链条。

虚拟dom

用js对象结构表示dom树的结构，当数据变化时，重新构建一颗新的对象树，通过diff算法来对比新旧dom树的差异，根据差异，对真正的dom进行增删改

原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程，浪费性能

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

vuex的五个属性

state：vuex的基本数据，用来存储变量

geeter：从基本数据(state)派生的数据，相当于state的计算属性

mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vue路由跳转的四种方式

1. router-link

2. this.$router.push() (函数里面调用)

3. this.$router.replace() (用法同push)

4. this.$router.go(n)

vue生命周期

创建 (数据初始化 挂载) 更新 销毁

beforeCreate created beforeMount mounted beforeUpdate Updated beforeDestroy destroyed

    「beforeCreate（创建前）：」

    在组件实例被创建之前立即调用。此时组件的数据和事件还未初始化。

    「created（创建后）：」

    在组件实例被创建后立即调用。组件的数据已经初始化，但此时还未挂载到 DOM。

    「beforeMount（挂载前）：」

    在组件挂载到 DOM 之前立即调用。此时模板编译完成，但尚未将组件渲染到页面上。

    「mounted（挂载后）：」

    在组件挂载到 DOM 后立即调用。此时组件已经渲染到页面上，可以进行 DOM 操作。

    「beforeUpdate（更新前）：」

    在组件数据更新之前立即调用。在此钩子函数内，你可以访问之前的状态，但此时尚未应用最新的数据。

    「updated（更新后）：」

    在组件数据更新后立即调用。此时组件已经重新渲染，可以进行 DOM 操作。

    「beforeDestroy（销毁前）：」

    在组件销毁之前立即调用。此时组件仍然可用，你可以执行一些清理工作。

    「destroyed（销毁后）：」

    在组件销毁后立即调用。此时组件已经被完全销毁，不再可用

 

link和@import的区别

1.link是XHTML标签，@import是css提供的一种方式，link除了引用css外，还可以做很多事情，定义rel连接属性

2.加载顺序的差别，页面被加载的时候，link引用的css会同时被加载，而@import引用的css要等页面都加载完才会被加载

3.兼容性，@import只有IE5以上才能被识别，而link都可以识别

4.dom 只有link可以被dom操作

GET 与 POST 的区别

get请求：请求的数据会附加在url之后，以?分割URL和传输数据，多个参数用&连接

post请求：post请求把请求的数据放置在http请求包的包体中

post比get更安全

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求在URL中传送的参数是有长度限制的,URL 的最大长度是 2048 个字符，而POST么有

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET在浏览器回退时是无害的，而POST会再次提交请求。

flex:1

就是代表均匀分配元素

flex: 1; === flex: 1 1 auto;

    第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
    第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
    第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小