面试合集
每次的分割代表一次面试～
<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
- 1）实现对该数组的倒排，输出[5, 1, 4, 2, 6, 3]
- 2）实现对该数组的的将序排列，输出[6, 5, 4, 3, 2, 1];
- 编写一个方法，去掉一个数组的重复元素
- 写一个简单的 ajax 示例
- JavaScript有哪些方法定义对象？
以下写法均为个人解答，不代表正确性，有兴趣可以自己写写～
#题 1
题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
题 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
题 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 的设计思路
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-07-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。
腾讯云开发者
