最终题目准备
1，vue的列表组件为什么要加key？
增加diff算法的同级比较效率， key是唯一索引，可以一目了然的看到同一级的是否变化，如果没有key， 那就只能一个个的去进行比较了。
2， ['1', '2', '3'].map(parseInt)结果是多少？ [1, NaN, NaN];
map函数的默认参数为 item，index和arr， parseInt的参数为 字符串 和 进制数。 所以转换为求 parseInt('1', 0) parseInt('2', 1) parseInt('3', 2)的值。
关于求进制数： parseInt(str, radix)
radix的范围是在 2和36之间， 当进制数为0的时候，默认为10进制。 str的值从第一个开始不能大于对应的进制数。如果第一个数大于对应的进制数，则返回NaN。 如果第一个数一旦小于进制数，就开始做运算，直到碰到大于进制数的就停下来。
exp： parseInt('43256789', 5); 4*5*5 + 3* 5 + 2 = 117
3，节流和防抖， 有什么区别， 怎么实现？
节流： 限制一段时间内函数只执行一次。
防抖： 函数一段事件执行一次， 如果在这段时间内被触发，则重新计算时间。
参考 ： https://www.cnblogs.com/wjyz/p/10225193.html
4， 介绍下 Set Map WeakSet WeakMap的区别
set 对应的是数组， 类似数组， 允许存储任何类型的值，但没有重复的成员。set内部的比较是用全等。 size是数量， 方法有keys， values， entries和forEach。
weakset： 只能储存对象引用。 由于是弱引用， 只要没被其他的变量或者属性引用，就会被回收。 所以无法被遍历，无法拿到所有的元素，也没有size属性。
Map： 对应的是obj对象。 是以key，value的形式存储的。 key可以为任意数据结构， 而对象的key只能为字符串。
weakmap： 键值对的集合，只接受对象作为键名。弱引用，不能遍历。
5，深拷贝
function isObject(obj) { return typeof obj === 'object' && obj !== null; } function deepClone(target, hash = new WeakMap()) { if (!isObject(target)) return target; if (hash.has(target)) return hash.get(target); let clone = Array.isArray(target) ? []: {}; hash.set(target, clone); for (let key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { if (isObject(target[key])) { clone[key] = deepClone(target[key], hash); } else { clone[key] = target[key]; } } } return clone; }
6，setTimeout， promise ， async await 有什么区别
setTimeout ： 定时器的回调函数是 属于 宏任务， 当前执行栈清空后执行。
promise： promise的then函数是微任务， 放在微任务队列， 当前同步任务执行完之后就立马执行微任务队列。
async / await： async函数返回promise， 正常情况下await后面也是promise，如果不是promise，则会被变为promise，并且立即resolve。
7， async / await 使如何通过同步写法的方式来实现异步的。
async/await是 generator的语法糖， 在遇到异步的操作时， 会暂停该函数， 交出执行权， 当该异步完成后， 再继续执行。
8， var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 扁平化数组并且去重 按顺序排列
[...new Set(arr.flat(Infinity))].sort((a,b) => a-b);
9，js异步解决方案的发展历程 以及优缺点
1，callback： 回调地狱， 强耦合，不能用try catch捕获错误。不能return
2， promise： 解决回调地狱， 采用链式调用。 不过语义很不清楚，一眼看去都是then的堆积。无法取消promise
3，generator：可以控制函数的执行， 也可以进行函数内外的数据交换和错误的处理。
4，async： 代码简洁，符合语义。因为有自动执行器，所以代码量少。
10， 如何实现一个new
function _new(fn, ...args) { let obj = Object.create(fn.prototype); let result = fn.apply(obj, args）; return Object.prototype.toString.call(result) === '[object Object]' ? result : obj; }
11， 简单讲解一下http2的多路复用
多路复用代替了http1的序列和阻塞机制，所有相同域名的请求都通过一个tcp连接并发完成。 http1并发多个请求需要多个tcp连接，浏览器一般会限制为6个。 http2的多路复用会消除因多个tcp连接带来的延时和内存消耗，而且单个连接上可以进行并行交错的请求和响应，互相不干扰。
12，tcp的三次握手和四次挥手
三次握手： 客户端发送一个带SYN标志的数据包给服务器，服务器收到后返回一个带有SYN/ACK标志的数据包表示确认，客户端再回传一个带ACK标志的数据包表示握手结束。
四次挥手： 客户端进程发出连续释放报文，并停止发送数据。 服务器收到连续释放报文，发出确认报文。 服务器将最后的数据发送完毕，向客户端发送连续释放报文。 客户端收到后，发出确认。 服务器收到客户端的确认， 进入closed状态。
13， cookie和token都放在header中， 为什么不劫持token呢
token是为了防止csrf跨站请求攻击的。 浏览器在发送http时会自动带上cookie， 但是不会自动带上token。
14， var a = ? , if (a == 1 && a == 2 && a== 3) { console.log(1)} a在什么情况下 会打印1；
因为用 == 号比较的时候，会进行隐式转换， 对于对象来说，隐式转换会调用自身的toString或者valueof方法。
var a = { n: 1, toString() { return this.n++ } }
a==1 && a==2 && a==3 ; true
toString 改为valueof也可以
如果a为数组 有一种方法更简单
var a = [1,2,3];
a.toString = a.shift;
a == 1 && a==2 && a==3 ; true
15，bfc及其应用
bfc为块级格式化上下文，bfc内部的元素无论怎样都不会影响外部元素。
触发条件： html元素， display为inline-block table-cell和table-caption，position不为relative或static overflow为 auto scroll或hidden float的值不为none
基本用途： 去除margin重叠， 清除浮动 ， 流体布局。
16，在vue中，为何子组件不能修改父组件传递的prop，如果修改了，vue是如何监控到属性的修改并给出警告的？
如果传递的prop为引用类型，子组件修改的话不会报错，如果是基本类型，子组件修改的时候会失败，并且vue会给出警告。
因为在修改prop的时候，触发set会判断是否在根组件或者是更新子组件。 如果不是那就说明更新的是props， 会给出警告。
17，双向绑定和vuex是否冲突
在严格模式下，的确冲突， 因为在数值改变时，v-model会直接修改属性值，但是这个修改不是在mutaition中操作的，所以会报错。 解决方法：
1，在input中绑定vuex的state， 监听input或change事件，在回调中操作mutation
2，使用带有setter的双向绑定计算属性。
18，为什么通常在发送数据埋点请求的时候使用的是1×1像素的透明gif图片
此方法主要应用于只需向服务器发送数据，无需服务器回复。
避免跨域， 不会阻塞页面， gif在所有格式中体积最小。
19，vue的响应式原理 Object.defineProperty有什么缺陷， 为什么vue3改用了proxy？
Object.defineProperty无法监控到数组下标的变化，所以vue内部重写了数组的一些操作方法，但也只是针对了这几种方法做了hack，通过下标操作数据的话，vue就监听不到。
Object.defineProperty只能劫持对象的属性，因此需要对对象的每个属性进行遍历来进行数据的监听，如果属性也是对象，还需要进行深度遍历。
es6的proxy有以下两个优点： 1，可以劫持整个对象，提高性能， 那么当然数组新加的属性就可以监听到了。
20，div垂直水平居中
参考 https://www.cnblogs.com/wjyz/p/11389519.html
21，如何实现冒泡排序，时间复杂度是多少， 如何改进
function bubble(arr) { const len = arr.length - 1; for (let i = 0; i < len; i++) { let isOk = true; for (let j = 0; j < len - i; j++) { if (arr[j] > arr[j+1]) { [arr[j], arr[j+1]] = [arr[j+1], arr[j]]; isOk = false; } } if (isOk) break; } return arr; }
22， 某公司1到12月份的销售额存在一个对象中 {1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
Array.from({length: 12}).map((_,index) => obj[index + 1] || null);
23，要求设计LazyMan类， 满足以下的功能
LazyMan('Tony'); // Hi I am Tony LazyMan('Tony').sleep(10).eat('lunch'); // Hi I am Tony // 等待了10秒... // I am eating lunch LazyMan('Tony').eat('lunch').sleep(10).eat('dinner'); // Hi I am Tony // I am eating lunch // 等待了10秒... // I am eating diner LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food'); // Hi I am Tony // 等待了5秒... // I am eating lunch // I am eating dinner // 等待了10秒... // I am eating junk food
class LazyClass { constructor(name) { this.eventQueen = []; this.name = name; this.init(); } init() { console.log('Hi I am ' + this.name); setTimeout(() => { this.next(); }); return this; } eat(things) { let that = this; this.eventQueen.push(function () { console.log('I am eating '+ things); that.next(); }); return this; } sleep(time) { let that = this; this.eventQueen.push(function () { setTimeout(() => { console.log('等待了' + time + 's'); that.next(); }, time*1000); }) return this; } sleepFirst(time) { let that = this; this.eventQueen.unshift(function () { setTimeout(() => { console.log('等待了' + time + 's'); that.next(); }, time *1000) }); return this; } next() { let fn = this.eventQueen.shift(); fn && fn(); } } function LazyMan(name) { return new LazyClass(name); }
24，比较opacity：0， visibility：hidden， display：none的优劣和适用场景
都可以让元素不可见，
display:none: 不渲染dom，不占据空间，无法监听事件，属性改变时会引起页面回流， transition不支持。
visibility：hidden ： 占据空间，渲染dom， 无法监听事件， 属性改变引起页面重绘。
opacity：0 ： 占据空间，渲染dom， 可以监听事件， 配合transition进行显示和隐藏， 属性改变引起页面重绘
25，箭头函数和普通函数的区别是什么？ 构造函数可以使用new生成实例，箭头函数可以吗？
箭头函数和普通函数的区别： 箭头函数没有this， 箭头函数使用的是箭头函数所在函数的this，因为也无法使用call apply和bind来绑定和改变this。
箭头函数没有arguments属性，如果要使用可以用rest参数， 不可以使用yield命令，因此不能用作Generator函数。
箭头函数不能当做构造函数，因为不能使用new命令，否则会报错。
26，给定两个数组，计算他们的交集； 例如：给定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。
function getSame(arr1, arr2) { let result = []; let newArr2 = [...arr2]; arr1.forEach(item => { let index = newArr2.indexOf(item); if (index > -1) { newArr2.splice(index, 1); result.push(item); } }); return result; }
27，已知代码： <img src="1.jpg" style="width:480px!important;”> 如何修改才能让图片宽度为300px？ 下面的代码不能修改...
max-width: 300px;
28， token加密的步骤
后端通过随机数加签名来生成一个token， 前端拿到token后在接口调用的时候添加token，后端判断请求中携带的token进行验证。
29，模拟实现一个promise.finally
Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), error => P.resolve(callback()).then(()=> { throw error}) ) }
30，随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20]，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]]。
function getNewArray(arr) { let newArr = [...new Set(arr)]; let hash = {length: 0}; newArr.forEach(item => { let index = Math.floor(item / 10); if (!hash[index]) { hash[index] = []; hash.length++; } hash[index].push(item); }); return Array.from(hash); }
31，实现一个字符串匹配算法，从长度为n的字符串s中，查找是否存在字符串t，t的长度是n，若存在则返回位置
function findStr(str, part) { if (part.length > str.length) return -1; for (let i = 0; i < str.length - part.length; i++) { if (str.slice(i, i+part.length) === part) { return i; } } return -1; }
32，数组里面有10万个数据，取第一个元素和第十万个元素时间相差多少
数组本质上也是对象，其索引是字符串，查找数组的元素就是通过索引查找哈希表的过程，所以消耗的时间大致一样。
33，vue的父组件和子组件生命周期钩子执行顺序是什么
渲染： 父 beforeCreate --> 父created --> 父beforeMount --> 子beforeCreate --> 子created --> 子beforeMount --> 子mounted --> 父mounted
更新： 父 beforeUpdate --> 子beforeUpdate --> 子updated --> 父updated
销毁： 父beforeDestroy --> 子beforeDestroy --> 子 destroyed --> 父 destroyed
34，promise.all的使用、原理和错误处理
promise.all的参数必须有Iterator接口，参数的所有子元素都必须是promise示例，如果不是则自动调用promise.resolve转为promise示例。
promise.all的状态由子元素的状态决定，只有子元素的状态都变成fulfilled，promise.all的状态才变为fulfilled，此时子元素的返回值组成一个数组，传给promise.all的回调函数。只要子元素有一个变为rejected，promise.all就变成rejected，返回第一个被rejected的子元素的返回值。
35，axios、fetch和ajax有什么区别
ajax： XMLHttpRequest对象，最早出现的发送请求的技术。
axios： 使用promise对ajax的封装。
fetch：fetch是es6的用来代替ajax的异步请求技术。是原生的js，基于promise，为了扩展其他应用。
36，vue组件的通信方式
1，props、$emit
2，$emit 、$on
3，$attrs和$listeners
4，provide、inject
5，vuex
37，vuex工作原理
vuex是专门使用于vue的状态管理工具，它集中管理所有组件的状态，并提供一系列方法来获取和操作状态。
读取的数据和状态存放在state里面， getter为state的计算属性，state的值发生变化它也会被重新计算，改变状态就是提交mutations，如果是异步的任务则需要封装在action里面。 module是将store分割成模块，每个模块都具有上面的各个属性。
38，什么是虚拟dom， 为什么虚拟dom会提高性能
虚拟dom其实就是js的一个对象，通过对象来描述真实的dom。
频繁的操作真实dom，效率是很低的。 virtual dom通过使用数据对象来描述dom树，在每次视图更新的时候，比较与真实dom的差异， 只需要一次性更新有变化的dom，减少很多不必要的dom操作。 所以说 virtual是用来减少大范围频繁的重绘。
39，vue计算属性和方法的区别
计算属性是基于响应式依赖来进行缓存的，只有在相关的依赖发生变化的时候才进行求值。 而方法的话就不会进行缓存，总是会执行该函数。
40，vue事件总线
var bus = new Vue(); 定义事件 : bus.$on('事件名称', fn); 触发事件： bus.$emit('事件名称', fn);
41，spa单页面的理解，优缺点是什么
在页面初始化时加载相应的html、css和js，一旦页面加载完成，spa不会因为用户的操作而进行页面的重新加载或者跳转，而是使用路由机制实现内容的切换。
优点： 用户体验好，内容的改变不需要加载整个页面，避免了重复的渲染。 对服务器压力小。 前后端分工明确。
缺点： 初次加载耗时多， 前进后退路由管理， seo难度较大
42，npm run dev之后的执行过程
首先会在项目的根目录下寻找 package.json文件， 找到scripts对象对应的dev，执行对应的命令， webpack-dev-server 为一个node服务器，然后就会把当前的页面展示在node服务器的对应端口上。
43，为什么组件中的data是一个函数
因为组件是用来复用的，如果组件中的data是一个对象，那么每一个组件都是公用的一个data对象，data的值会相互影响，而当data为一个函数，那么每个示例可以维护一份被返回的对象，互相独立，互不影响。
44，vue是如何实现双向数据绑定的
https://www.cnblogs.com/wjyz/p/11419073.html
45，var、let和const的区别
let和const不存在变量提升， 并且只在当前的代码块中有效。 而且还存在暂时性死区， 不允许重复的声明。 const 声明的常量不能改变值，不过当值 为对象时可以改变内容。
46，vue-router的router-link和a标签有什么区别
router-link渲染出来的也是a标签，看vue-router的源码，router-link接管了渲染的a标签的行为， click的时候阻止了a标签默认的跳转，取得to的属性，通过history或者hash来进行页面的切换，并不会刷新页面。
47，实现convert方法，将数组的list转换为tree结构
var list = [ {id:1,name:'部门A',parentId:0}, {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:4,name:'部门D',parentId:1}, {id:5,name:'部门E',parentId:2}, {id:6,name:'部门F',parentId:3}, {id:7,name:'部门G',parentId:2}, {id:8,name:'部门H',parentId:4} ]; // 转换后的结果如下 let result = [ { id: 1, name: '部门A', parentId: 0, children: [ { id: 3, name: '部门C', parentId: 1, children: [ { id: 6, name: '部门F', parentId: 3 }, { id: 16, name: '部门L', parentId: 3 } ] }, { id: 4, name: '部门D', parentId: 1, children: [ { id: 8, name: '部门H', parentId: 4 } ] } ] }, ··· ];
参考了一个大佬对对象引用的操作： function convert(list) { let result = []; let map = list.reduce((prev, next) => { prev[next.id] = next; return prev; }, {}); //这时候 list 和 map里面的元素是相互引用的， for (let item of list) { if (item.parentId === 0) { result.push(item); continue; } if (item.parentId in map) { let parent = map[item.parentId]; parent.children = parent.children || []; parent.children.push(item); // 后面的新增children 都会影响到根元素的内容 } } return result; }
48，实现Promise.race
Promise._race = function (promises) { return new Promise((resolve, reject) => { promises.forEach(promise => { promise.then(resolve, reject); }) }) }
49，实现模糊查询结果的关键词高亮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color:red; } </style> </head> <body> <input type="text" id="input"> <ul id="list"></ul> <script> let list = ['ab', 'abc', 'abd', 'abcdef', 'abcef','abcdefghij']; // 模拟查询的数据 let container = document.getElementById('list'); let input = document.getElementById('input'); function debounce(fn) { // 防抖， 用户输入完成后300ms触发 let timeout; return function (...args) { if (timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(() => { fn.apply(this, args); },300) } } function handleInput(name) { let reg = new RegExp(`(${name})`); const result = list.reduce((prev, next) => { if (reg.test(next)) { let match = RegExp.$1; let str = `<li>${next.replace(match, '<b class="red">'+match+'</b>')}</li>`; prev.push(str); } return prev; }, []); if (name === '') { container.innerHTML = ''; return; } if (result.length === 0) { container.innerHTML = '暂无结果'; } else { container.innerHTML = result.join(''); } } input.addEventListener('input', debounce(e => { handleInput(e.target.value); })) </script> </body> </html>
50，已知数据格式，实现函数fn找到对应id的所有父级id
const data = [{
id: '1',
name: 'test1',
children: [
{
id: '11',
name: 'test11',
children: [
{
id: '111',
name: 'test111'
},
{
id: '112',
name: 'test112'
}
]
},
{
id: '12',
name: 'test12',
children: [
{
id: '121',
name: 'test121'
},
{
id: '122',
name: 'test122'
}
]
}
]
}];
fn（data, '121'）； // [1, 12, 121]
function find(data, id) { if (Array.isArray(data)) { while(data.length) { let item = data.shift(); if (item.id == id) { return item.hash.split('-'); } if (item.children && item.children.length) { item.children.map( one => { one.hash = (item.hash || item.id) + '-' + one.id; data.push(one); }) } } } return []; }
