css
1，盒模型 2，如何实现一个最大的正方形 3，一行水平居中，多行居左 4，水平垂直居中 5，两栏布局，左边固定，右边自适应，左右不重叠 6，如何实现左右等高布局 7，画三角形 8，link @import导入css 9，BFC理解
js
1，判断 js 类型的方式 2，ES5 和 ES6 分别几种方式声明变量 3，闭包的概念？优缺点？ 4，浅拷贝和深拷贝 5，数组去重的方法 6，DOM 事件有哪些阶段？谈谈对事件代理的理解 7，js 执行机制、事件循环 8，介绍下 promise.all 9，async 和 await, 10，ES6 的 class 和构造函数的区别 11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式, 12，介绍一下rAF(requestAnimationFrame) 13，javascript 的垃圾回收机制讲一下, 14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
开源分享：docs.qq.com/doc/DSmRnRG… copy[key] = deepClone(obj[key]) } } return copy } 复制代码
## 3、手写实现call方法
**call做了什么**
>
> 1. 将函数设为对象的属性
> 2. 执行和删除这个函数
> 3. 指定`this`到函数并传入给定参数执行函数
> 4. 如果不传入参数，默认指向为 `window`
>
>
>
Function.prototype.myCall = function(context = window, ...args) { if (typeof this !== "function") { throw new Error('type error') } let key = Symbol('key') context[key] = this; let result = contextkey; delete context[key]; return result; }; 复制代码
## 4 手写apply方法
Function.prototype.myApply = function(context = window, args) { let key = Symbol('key') context[key] = this; // let args = [...arguments].slice(1) let result = contextkey; delete context[key]; return result; } 复制代码
## 5、手写forEach方法
Array.prototype.myForEach = function(callback, context=window) {
let self = this,
i = 0,
len = self.length;
for(;i<len;i++) { typeof callback == 'function' && callback.call(context,self[i], i) } } 复制代码
## 6、手写filter方法
Array.prototype.myFilter=function(callback, context=window){
let len = this.length newArr = [], i=0
for(; i < len; i++){ if(callback.apply(context, [this[i], i , this])){ newArr.push(this[i]); } } return newArr; } 复制代码
## 7、手写reduce方法
Array.prototype.myReduce = function(fn, initialValue) { var arr = Array.prototype.slice.call(this); var res, startIndex; res = initialValue ? initialValue : arr[0]; startIndex = initialValue ? 0 : 1; for(var i = startIndex; i < arr.length; i++) { res = fn.call(null, res, arr[i], i, this); } return res; } 复制代码
## 8 查找字符串中出现最多的字符和个数
字符最多的是char，出现了num次
function myString(str){
let num = 0;
let char = '';
let re = /(\w)\1+/g;
str.replace(re,(1) => {
if(num < 0.length){
num = 0.length;
char = $1;
}
});
return {num, char}
}
复制代码
## 9 冒泡排序
>
> 冒泡排序的原理如下，从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素，那么此时最后一个元素就是该数组中最大的数。下一轮重复以上操作，但是此时最后一个元素已经是最大数了，所以不需要再比较最后一个元素，只需要比较到 `length - 1` 的位置
>
>
>
function bubbleSort(list) { var n = list.length; if (!n) return [];
for (var i = 0; i < n; i++) { // 注意这里需要 n - i - 1 for (var j = 0; j < n - i - 1; j++) { if (list[j] > list[j + 1]) { var temp = list[j + 1]; list[j + 1] = list[j]; list[j] = temp; } } } return list; } 复制代码
## 10 快速排序
>
> 快排的原理如下。随机选取一个数组中的值作为基准值，从左至右取值与基准值对比大小。比基准值小的放数组左边，大的放右边，对比完成后将基准值和第一个比基准值大的值交换位置。然后将数组以基准值的位置分为两部分，继续递归以上操作
>
>
>
function quickSort(arr) { if (arr.length<=1){ return arr; } var baseIndex = Math.floor(arr.length/2); var base = arr.splice(baseIndex,1)[0]; var left=[]; var right=[]; for (var i = 0; i<arr.length; i++){ if (arr[i] < base){ left.push(arr[i]); } }else{ right.push(arr[i]);， } return quickSort(left).concat([base],quickSort(right)); } 复制代码
## 11 插入排序
function insertSort(arr) { for (let i = 1; i < arr.length; i++) { let j = i; let target = arr[j]; while (j > 0 && arr[j - 1] > target) { arr[j] = arr[j - 1]; j--; } arr[j] = target; } return arr; } 复制代码
## 12 对象扁平化
function objectFlat(obj = {}) {
const res = {}
function flat(item, preKey = '') {
Object.entries(item).forEach(([key, val]) => {
const newKey = preKey ? ${preKey}.${key} : key
if (val && typeof val === 'object') {
flat(val, newKey)
} else {
res[newKey] = val
}
})
}
flat(obj)
return res
}
复制代码
## 13、手写发布订阅模式
* 创建一个对象
* `on`方法用来把回调函数`fn`都加到缓存列表中
* `emit` 根据`key`值去执行对应缓存列表中的函数
* `off`方法可以根据`key`值取消订阅
class EventEmiter { constructor() { this._events = {} } on(eventName,callback) { if(!this._events) { this._events = {} } this._events[eventName] = [...(this._events[eventName] || []),callback] } emit(eventName, ...args) { if(!this._events[eventName]) { return } this._events[eventName].forEach(fn=>fn(...args)) } off(eventName,cb) { if(!this._events[eventName]) { return } this._events[eventName] = this._events[eventName].filter(fn=>fn != cb && fn.l != cb) } once(eventName,callback) { const one = (...args)=>{ callback(args) this.off(eventName,one) } one.l = callback this.on(eventName,one) } } 复制代码
## 14、手写Ajax
* 创建 `XMLHttpRequest` 实例
* 发出 HTTP 请求
* 服务器返回 XML 格式的字符串
* JS 解析 XML，并更新局部页面
* 不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。
function ajax(url) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() xhr.open('get', url) xhr.onreadystatechange = () => { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status <= 300) { resolve(JSON.parse(xhr.responseText)) } else { reject('请求出错') } } } xhr.send() })
Vue
-
什么是MVVM？
-
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
-
组件之间的传值？
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用？
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用？
-
Vue 的 nextTick 的原理是什么？
-
Vuex 有哪几种属性?
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
