面试题-东方财富

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()，直接就可以得到返回值

冒泡排序

事件的向上传导，当后代元素上的事件被触发时，其祖先元素上的相同事件也会被触发

取消冒泡：

s1.onclick = function(event){
    event = event || window.event
    event.cancelBubble = true
}

padding,margin

padding是内边距，盒子与自身内容的距离

margin是外边距，盒子与盒子之间的距离

margin:

需要在border外侧添加空白时；

空白处不需要背景（色）时；

上下相连的两个盒子之间的空白，需要相互抵消时。

padding：

需要在border内测添加空白时；

空白处需要背景（色）时；

上下相连的两个盒子之间的空白，希望等于两者之和时。

v-if和v-show的区别

v-if每次切换都重建和销毁，将dom元素删除，v-show为css切换

v-if如果初始化时为假，那么直接不渲染，v-show会渲染

v-if能支持多模块切换，v-show只针对当前元素

如果频繁切换v-show更好，如果切换少就v-if比较好

px em rem

px 固定的像素大小

em 相对于父元素的大小

rem 相对于根元素的大小

vw和vh

vw是视窗的1/100的宽度，vh是视窗的1/100的高度

webpack打包过程

webpack.config.js

const path = require('path')
module.exports = {
    entry:'./src/main.js',//人口文件
    output:{
        path:path.resolve(__dirname+'/dist'),//输出文件夹路径
        filename:'bundle.js'//输出文件的名称
},//输出配置
    module:{
        rules:[
           {test:/\.vue$/,use:'vue-loader'},//处理某些类型的文件的模块
            

}
]
},
    plugins:[]//插件
}

事件循环

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对象增加的扩展方法。

选择器优先级

style 1000

id 100

class 伪类选择器 10

标签选择器伪元素选择器是 1

！important是特权，最先执行

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

保存信息

cookie是浏览器支持的一种本地存储机制。一般由服务端设置生成，在响应请求时被自动存储在浏览器(客户端)中。

用于保存用户登录态

只能在协议为 HTTPS 的请求中携带

规定浏览器不能在跨域请求中携带 Cookie

cookie用来辨别用户身份

记住用户在未登录的状态下浏览了什么，比如淘宝。这时候就需要借助我们的Cookie了。客户端请求服务器后，如果服务器需要记录用户状态，服务器会在响应信息中包含一个Set-Cookie的响应头，客户端会根据这个响应头存储Cookie信息。再次请求服务器时，客户端会在请求信息中包含一个Cookie请求头，而服务器会根据这个请求头进行用户身份、状态等较验。

VUE生命周期里有一个created和一个mounted，分别是用来干嘛的？如果要实现一个操作的话created会先执行还是mounted先执行？

created阶段渲染整个HTML文档时,dom节点、css规则树与js文件被解析后，但是没有进入被浏览器render过程，上述资源是尚未挂载在页面上。实例已经被初始化，但是还没有挂载至$el上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的。

这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。

一般可以在created函数中调用ajax获取页面初始化所需的数据。

mounted阶段vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

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 - 内部服务器错误

vue2和vue3的区别

数组去重

Set

indexOf

includes

手机端适配

meta：viewport， flexible， vw vh ，rem ，媒体查询，%百分比

盒子放在底部

1.通过绝对定位或固定定位 bottom：0

2.前面的盒子高度为100vh

prototype

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

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

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

路由器在iso的哪个层（网络层，物理层，数据链路层）

网络层

冒泡排序的时间复杂度

冒泡排序一共要进行(n-1)次循环,每一次循环都要进行当前n-1次比较
所以一共的比较次数是:
(n-1) + (n-2) + (n-3) + … + 1 = n*(n-1)/2;
所以冒泡排序的时间复杂度是 O(n2)

虚拟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，交由浏览器去绘制。

vue组件里面的data为什么是函数

组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。

querySelect返回值是什么？querySelectAll呢？

querySelector() 方法仅仅返回匹配指定选择器的第一个元素

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象，不是真正的数组

函数传参的是引用还是什么？

JS中基本类型是按值传递的，对象类型是按共享传递的

修改形参会影响实参吗？

传递值的时候不影响实参传递指针的时候能够影响实参。

如何判断变量是否是数组类型

Array.isArray

instanceof Array

css如何画三角形

width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 50px solid rebeccapurple;