每次的分割代表一次面试~
<img>
的 title 和 alt 有什么区别?- 描述常见的 HTTP 状态码和 HTTP 方法
- IE 与火狐的事件机制有什么区别?什么是事件冒泡?如何阻止冒泡?
- 在浏览器地址栏中输入一个 URL 后回车,背后会进行哪些技术步骤?
- 如何实现一个 JS 对象的深度克隆?
- 请简单描述 Vue 双向绑定底层实现原理,常用到的指令及 Vue 实例的生命周期
- 编程实现获取 URL 中的参数:
- a)指定参数名称,返回该参数的值或者空字符串;
- b)不指定参数名称,返回全部的参数对象或者{};
- c)如果存在多个同名参数,则返回数组;
function getUrlParam(url, key){
};
- 给出两个单词 word1 和 word2 ,找出将 word1 转换成 word2 所使用的最少的步骤数(每个操作记为一步)。你可以对一个单词进行以下三种操作:
- a)插入一个字符;
- b)删除一个字符;
- c)替换一个字符;
function minDistance(word1, word2){
};
- HTTP request 报文结构是怎样的?
- 如何进行网站性能优化,请简述。
- HTTP状态码及其含义?
- display: none; 与 visibility: hidden; 的区别?
- 如何判断一个对象是否为函数?
- 如何分别水平、垂直居中一个元素?
- 什么是 web 语义化? html5 有哪些语义化标签?语义化有什么好处?
- 以下程序输出结果是?
function fn(a) {
console.log(a);
var a = 2;
function a() {};
console.log(a);
}
fn(1);
- 以下程序输出结果是?
var a = 10;
a.pro = 10;
console.log(a.pro + a);
var s = 'hello';
s.pro = 'world';
console.log(s.pro + s);
- 写出几种 js 跳转的常见方式?
- 写出输出结果
console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);
- 写出输出结果?
function printing() {
console.log(1);
setTimeout(function() {
console.log(2);
}, 1000);
setTimeout(function() {
console.log(3);
}, 0);
console.log(4);
}
printing();
- 写出客户端存储 localStorage 和 sessionStorage 的 set、get 方法, localStorage 和 sessionStorage 有何区别?
- 通过JS获取页面尺寸、屏幕的方法?
- 列举JS实现跨域的几种方式?
- 列举几种立即执行函数的实现方式。
var numberArray = [3, 6, 2, 4, 1, 5];
- 1)实现对该数组的倒排,输出[5, 1, 4, 2, 6, 3]
- 2)实现对该数组的的将序排列,输出[6, 5, 4, 3, 2, 1];
- 编写一个方法,去掉一个数组的重复元素
- 写一个简单的 ajax 示例
- JavaScript有哪些方法定义对象?
以下写法均为个人解答,不代表正确性,有兴趣可以自己写写~
题 1
点击查看代码
function getString (string) {
const Reg = /^[a-zA-Z]*$/
const newString = []
const stringArr = string.split('')
let preString = ''
for (const str of stringArr) {
if (Reg.test(str) || str === "'") {
if (preString === '?') {
newString.push(str.toUpperCase())
} else {
newString.push(str)
}
}
preString = str
}
return newString.join('')
}
const string = `I'm????driving????to??beijing????after?breakfast`
console.log(getString(string))
题 2
点击查看代码
const numberList = []
function getNumberList (start, end) {
start = parseInt(start)
end = parseInt(end)
if (start <= end) {
if (start > 0 && start % 3 === 0) {
numberList.push(start)
getNumberList(start + 3, end)
} else {
getNumberList(++start, end)
}
}
}
getNumberList(1, 100)
console.log(numberList)
题 3
点击查看代码
let startDay = {
hour: 1,
timer: null,
setup (user) {
console.log(`${user} 起床啦`)
},
brush (user) {
console.log(`${user} 去刷牙呢`)
},
work (user) {
console.log(`${user} 去工作啦`)
},
sleep (user) {
console.log(`${user} 要睡觉啦`)
},
coding (user) {
console.log(`${user} 开始写代码啦`)
},
demand (user) {
console.log(`${user} 的需求评审`)
},
daily (user) {
console.log(`${user} 写日报`)
},
start () {
if (this.hour >= 1 && this.hour < 24) {
switch (this.hour) {
case 8:
execute(this.hour)
break
case 9:
execute(this.hour)
break
case 10:
execute(this.hour)
break
case 11:
execute(this.hour)
break
case 16:
execute(this.hour)
break
case 22:
execute(this.hour)
break
default:
break
}
} else {
this.hour = 0
}
},
open () {
console.log('开始了')
this.timer = setInterval(() => {
console.log(this.hour + '点')
this.start()
this.hour += 1
}, 1000)
},
close () {
clearInterval(this.timer)
this.timer = null
console.log('stop')
}
}
const config = {
my: {
8: startDay.setup,
9: startDay.brush,
10: startDay.work,
22: startDay.sleep
},
a: {
10: startDay.coding,
16: startDay.demand,
22: startDay.daily
},
b: {
11: startDay.coding,
23: startDay.daily
}
}
function execute (hour) {
config.my[hour] && config.my[hour]('我')
config.a[hour] && config.a[hour]('小 a')
config.b[hour] && config.b[hour]('小 b')
}
startDay.open()
火花思维
1. Vuex 的几个属性
2. 深拷贝和浅拷贝,如何实现深拷贝
3. Vue 双向绑定原理
4. 手写 bind 函数
5. 算法题:给一个数组,每个元素只占用一个个位数,返回这个数组 +1 后的数组
input: [1, 2, 3]
output: [1, 2, 4]
input: [9, 9]
output: [1, 0, 0]
6. 算法题:给一个英文句子,返回最长的单词
7. Vue 组件传参
8. Vuex 可以直接通过 this.$store.state
去修改吗?
9. ES6 map 和 set
10. 算法题:给一个字符串,去除重复次数最少的字符
input: abcedde
output: edde
input: abbccdddaa
output: adddaa
11. 最近的项目亮点
12. Vuex 实际应用
13. 懒加载
好未来
1. 浏览器的事件循环机制
2. 如何构建的前端应用
3. 浏览器缓存机制
4. 写过小程序吗?
5. 如何实现的懒加载
6. 深拷贝浅拷贝
7. Webpack 如何优化的
8. Vue 常用的 API
9. 网页加载不出来可能出现的问题?三个层面
- 用户
- CDN
- 部署
10. flex: 1; 的含义
1. 问了问项目
2. 怎么实现的动态渲染表单
3. 懒加载如何实现?
4. 队列上传怎么实现的?
5. 手写队列上传
6. 防抖节流概念区别?
7. 手写防抖函数
8. 如何优化 webpack 打包速度的?
9. 对项目的优化有哪些?
10. Vue 双向绑定原理?
0. 问项目
1. 如何控制并发请求
2. JS 作用域原理
3. 垃圾回收机制
4. 前端部署形式
5. 算法:给一个整数,判断是否为回文
6. EventLoop
7. 宏任务、微任务。哪个先执行?
8. Promise 原理
9. Promise 实现
10. JS 特性
11. 变量提升原理
12. 你是如何学习 JS 的
13. 闭包原理
58 一面
1. CSS 如何实现水平垂直居中?几种方式?
2. flex 如何实现的水平垂直居中
3. position 定位有几种,区别分别是什么?
4. 浮动布局如何实现?带来的副作用如何清除?
5. 防抖、节流函数的区别以及如何实现?在业务中的场景是什么?
6. JS 作用域链如何理解的?
7. Vue 和 React 之间的区别?
8. JS 的原型继承,如果 a 是 b 的父级如何实现?
9. 发布-订阅模式,以及如何实现?
10. Vue 双向绑定原理?
11. Vue-router 原理?有几种模式?
12. history 模式和 hash 的区别?
13. 如果用 history 模式会有什么问题?
14. Vue 组件之间传参的方式有几种,以及如何实现?兄弟组件之间如何传参?
15. Promise 的使用,如果让你实现一个简单的 Promise 你会如何实现?
16. 算法:给一个人名的数组,可能有重复的,返回一个人名的数组,如果是重复的,在人名后面加编号
17. 算法:对象的展开扁平化
18. this 的指向以及如何修正?
19. 浏览器的 EventLoop
20. 宏任务和微任务的顺序,什么是宏任务?什么是微任务?
21. nodejs 用过吗?用来干嘛?
22. nodejs 和 浏览器的EventLoop
23. 浏览器的垃圾回收机制?nodejs 的垃圾回收机制?
24. Webpack 的基本打包原理
25. 写过 Webpack 的插件吗?
26. Webpack 的理解
1. this 指向的问题
2. 箭头函数的作用?
3. 来做道题吧,这个输出什么?
const a = function () {
const x = {
m: function () {
console.log(this)
},
n: () => {
console.log(this)
}
}
return x
}
const b = {}
const c = a.call(b)
c.m()
c.n()
4. JS 的作用域和作用域链讲讲?
5. EventLoop 机制?
6. 宏任务和微任务?
7. 哪些是宏任务?哪些是微任务?
8. new 的作用?
9. 实现一个 new
const Car = function () {}
const car = new Car
const car1 = New(Car)
// 实现 New
10. 说说变量提升
11. 为什么有变量提示?
12. let 和 const 有变量提升吗?
13. 像 var 一样使用 let 和 const 有什么问题吗?(暂时性死区)
14. 为什么会有暂时性死区?
15. ES6 了解吗?Promise 能解释一下吗?
16. Promise 除了 then cache 还有别的方法吗?
17. HTTPS 和 HTTP 的区别?
18. HTTPS 的原理?
19. 说一下浏览器的缓存机制
20. CSS 的定位有几种?
21. 分别相对于什么元素来定位的?
22. 来做道题吧,实现 reduce
Array.prototype.customReduce = function () {
}
23. 实现一个 render 函数
用 Javascript 对象模拟 DOM 树,并实现它的 render 方法,通过调用该方法可以转成真正的 DOM 节点。例如我们已经实现了 element.js,通过 require('element.js'),我们可以定义 ul,如下:
const el = require('./element.js');
const ul = el('ul', {id: 'list'}, [
el('li', {class: 'item'}, ['Item 1']),
el('li', {class: 'item'}, ['Item 2']),
el('li', {class: 'item'}, ['Item 3'])
])
现在 ul 只是一个 JavaScript 对象表示的 DOM 结构,页面上并没有这个结构。我们可以根据这个 ul 构建真正的 <ul>
,最终当我们这样调用时,
const ulRoot = ul.render();
document.body.appendChild(ulRoot);
body
中就有了真正的 DOM 结构,如下
<body>
<ul id='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
<li class='item'>Item 3</li>
</ul>
</body>
也就是说,我们需要实现 element.js
点击查看代码
function el (tag, data, el) {
return {
render: function () {
const element = document.createElement(tag)
element.el = el
if (data) {
for (let key in data) {
switch (key) {
case 'id':
case 'class':
element.setAttribute(key, data[key])
break
default: break
}
}
}
for (let i = 0; i < el.length; i++) {
if (el[i].render) {
element.append(el[i].render())
} else {
element.append(el[i])
}
}
return element
}
}
}
24. 写一个双向链表,实现 insert 和 removeAt 方法
Javascript 构造一个双向链表,并且实现它的插入和删除方法,例如 insert(position, element) 表示在 position 位置插入值为 element 的节点,removeAt(position) 表示删除 position 位置的节点。
// 链表节点
class Node {
constructor(element) {
this.element = element
this.prev = null
this.next = null
}
}
- 自我介绍
- 项目的作用?
- 项目的整体流程
- 如何制作或者获取素材的
- 说说跨域(我说了三种 CORS,JSONP,图片探测)
- 什么是跨域?(协议,端口,域名)
- Options 请求
- 简单请求,复杂请求
- 只要是复杂请求就一定有 Options 请求吗?()
- 你们项目里有跨域这类问题吗?
- 写 Promise.all
- 正则表达式,开头是字母,结尾是数字
- 说说防抖和节流。以及写一个节流,只不过是 500ms 后在去执行
- Vue 了解吗?能写吗?
- Webpack 怎么样?
- 有什么要问我的吗?
自我介绍
使用 React 还是 Vue?(我说都用过,Vue2 React16.8)
React 和 Vue 的区别?
React 的 Hooks 和 Class 组件的区别?
React 的 fiber 简单说说
Diff 算法,Vue 和 React 或者你说一个你知道就行。(我说的 React)
React 的 Diff 算法复杂度?(O(n))
React 的 Diff 算法内部实现?(组件、树、Element)
介绍一下你最熟悉的项目
看你有前端规范的实践,简单说说举个例子
看你简历有设计模式相关的,能简单介绍几个设计模式么?
比如现在有不同设备进行身份识别,你如何利用策略模式进行设计?
算法:有一个数组,已经排好序了,寻找一个目标,如果找到了返回下标,否则返回 -1 ,类似 indexOf 函数(二分查找)
有什么想问我的吗?
输入一个正数 N, 输出所有和为 N 的连续正数序列.
例如输入 15, 结果: [[1, 2, 3, 4, 5], [4, 5, 6], [7, 8]]
// let obj = {
// a: {
// b: {
// c: {
// d: 1,
// },
// },
// },
// e: 2,
// f: {
// g: 3,
// },
// };
// result
// [[a, e, f], [b, g], [c], [d]]
1.curry 实现
const add = (a, b, c) => a + b + c;
const curryAdd = curry(add);
console.log(curryAdd(1)(2)(3)); // 6
console.log(curryAdd(1, 2)(3)); // 6
console.log(curryAdd(1)(2, 3)); // 6
// 实现 B 继承 A
function A(t) {
this.t = t;
}
function B(t, s) {}
3.输出
function fn(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {};
console.log(b);
}
fn(1);
Vue2 和 Vue3 的区别
hooks 的设计思路