2021届秋招腾讯前端一面面经
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。
基本信息
部门:QQ音乐
方式:电话面试
题目总结
JavaScript篇
- 自我介绍
- 学习前端多久
- JavaScript常见的数据类型有哪些
typeof null
返回什么- 原始类型和对象类型有什么区别
- 如何判断是
Object
还是Array
- 有接触过闭包吗?闭包有哪些应用场景
- js的垃圾回收机制
- 如何自己实现一个
new
- 如何自己实现一个
instanceof
- 原型链的最顶层是什么(
null
) - 原型链的继承方式有哪些,举例说明
- 原型链有没有什么缺点
- 子类
child
继承了父类的parent
之后,oarent
有一个属性name。这时new
一个子类的实例b
,如果修改了b.name
是否会修改父类上的name
属性
HTTP篇 - 如何用
ajax
原生实现一个post
请求(XMLHTTPRequest) - 其中有
ReadyState
,解释一下它的每个值代表的含义 - 使用
ajax
如何解决跨域问题 - 使用
JSONP
时服务端返回什么样的数据,如何处理(callback(json拼好))
DOM篇 - 假设一个
ul
下有一万个li
,li
的innerHTML
是从0
到9999
,当点击某个li
时输出该li
代表的值,如何实现 windowOnload
和DOMready
哪个先触发
浏览器安全篇- 讲讲
CSRF
和XSS
攻击的原理,和解决方式 - 假设有两个
tab
,一个是a.qq.com
,另一个是黑客的域名,你在黑客的域名下向a.qq.com
发起了一个请求,请问是否会带上a
页面的cookie
算法篇
爬楼梯
部分题目答案:
JavaScript常见的数据类型有哪些?
答案:
共8种。包括7种基本数据类型:
- 表示空:
null
,undefined
- 三大件:
string
,number
,boolean
- 两个新类型:
BigInt
,Symbol
和object
解读:
这里是按照 MDN 的说法回答的。也可以回答为 7 种 基本 数据类型,和 引用 类型。引用类型包括: - 普通对象
Object
- 数组对象
Array
- 正则对象
RegExp
- 函数
Function
如何判断是 Object 还是 Array
答案:
Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call({}) // "[object Object]"
解读:
这是目前最准确的方法,网上流传了很多种判断方法,这个是最核心的,答出这个就可以了。
除此之外,还有一种提问方式是 如何判断是不是 Array,这是偏向于考察 ES6 新增的数组方法了,可以用Array.isArray()
和instanceof
来回答。
Array.isArray([1,2,3,4]) // true
Array.isArray({a:1, b:{c:'4'}}) // false[1,2,3,4] instanceof Array // true
({a:1, b:{c:'4'}}) instanceof Object // true,这里使用 () 保证代码运行的优先级,不然会报语法错误
JS的垃圾回收机制
答案:
2012 年以前,相对旧的浏览器使用「引用-计数」算法(Reference Counting)进行垃圾回收,缺点是会由于循环应用导致内存泄漏。现代浏览器都使用「标记-清除」算法(Mark and Sweep),即从全局对象作为的根节点开始,向下查询引用的对象,没有查询到的对象都将被回收。
解读:
相对旧的浏览器如 ie6,ie7 是使用「引用-计数」法进行垃圾回收的。
参考链接:MDN
如何自己实现一个 new
答案:
function funcNew(obj, ...args) {const newObj = Object.create(obj.prototype);const result = obj.apply(newObj, args);return (typeof result === 'object' && result !== null) ? result : newObj;
}
解读:
先通过一个例子来理解 new
的作用吧:
function Person(name) {this.name = name;
}Person.prototype.sayName = function() {console.log(this.name);
} const p = new Person('orange')
console.log(p.name) // 'orange'
p.sayName(); // 'orange'
代码中我们新建了一个对象 Person
,它具有属性 name
,且在Person.prototype
上定义了函数 sayName
。
当我们通过 new
创建一个新的实例 p
时,便同时具有了属性 p.name
和 p.sayName()
,关系如下图:
知道了原理,就可以自己实现了。也就是说,自己写一个函数 funcNew()
,使得 const p = new Person('orange')
和 const p = funcNew('orange')
得到的 p
完全相同,于是得到了答案中的代码。
答案中最后一行代码如何理解?
前面的例子我们只考虑了 Person
中没有返回值的情况,如有有返回值,new
一个实例将会受到 Person
中返回值的影响。比如说:
/*** --- Person 中 return 一个对象,p 为该对象 ---*/function Person(name) {this.name = name;return {age: 35}
}Person.prototype.sayName = function() {console.log(this.name);
} const p = new Person('orange')
console.log(p) // { age: 35 }
console.log(p.name) // undefined
p.sayName(); // TypeError: p.sayName is not a function/*** --- Person 返回非对象,return 不影响结果 ---*/function Person(name) {this.name = name;return 'free'
}Person.prototype.sayName = function() {console.log(this.name);
} const p = new Person('orange')
console.log(p) // Person { name: 'orange' }
console.log(p.name) // orange
p.sayName(); // orange
上面的例子中,如果返回了一个对象,我们需要返回该对象;如果不是对象,则 return
没用,正常处理。
如何自己实现一个instanceof
答案:
/** --- 手动实现 instanceof ---*/function newInstanceOf (leftValue, rightValue) {if (typeof leftValue !== 'object' || rightValue == null) { return false;}let rightProto = rightValue.prototype;leftValue = leftValue.__proto__;while (true) {if (leftValue === null) return false;if (leftValue === rightProto) return true;leftValue = leftValue.__proto__;}
}/** --- 验证 ---*/const a = [];
const b = {};function Foo () {}var c = new Foo()
function Child () {}
function Father() {}
Child.prototype = new Father()
var d = new Child()console.log(newInstanceOf(a, Array)) // true
console.log(newInstanceOf(b, Object)) // true
console.log(newInstanceOf(b, Array)) // false
console.log(newInstanceOf(a, Object)) // true
console.log(newInstanceOf(c, Foo)) // true
console.log(newInstanceOf(d, Child)) // true
console.log(newInstanceOf(d, Father)) // true
console.log(newInstanceOf(123, Object)) // false
console.log(123 instanceof Object) // false
解读:
这个问题既考察了 instanceof
的原理,又考察了原型链,还考察了代码能力,是一个好问题。
在实现代码中,我们判断 leftValue
是否为 rightValue
的实例,思想是在 leftValue
的原型链上,即 leftValue.__proto__
上寻找是否存在 rightValue.prototype
。原理图如下:
这需要我们熟练掌握原型链的相关知识。
如何用ajax
原生实现一个post
请求
答案:
function ajax_post(url, data) {// 1. 异步对象 ajaxvar ajax = new XMLHttpRequest();// 2. url 方法ajax.open('post', url);// 3. 设置请求报文ajax.setRequestHeader('Content-type', 'text/plain');// 4. 发送if (data) {ajax.send(data);} else {ajax.send();}// 5. 注册事件ajax.onreadystatechange = function () {if (ajax.readyState === 4 && ajax.status === 200) {console.log(ajax.respenseText);}}
}
上述代码中,ReadyState
每个值的含义
答案:
DOM题目
假设一个 ul
下有一万个 li
,li
的 innerHTML
是从 0
到 9999
,当点击某个 li
时输出该 li
代表的值,如何实现
答案:
采用事件委托:
<ul id="ul"><li>0</li><li>1</li><li>2</li>...<li>9999</li>
</ul>
window.onload = function () {var uli = document.getElementById("ul");uli.onclick = function(event) {alert(event.target.innerText);}
}
解读:
首先,我们当然不可能为每一个 li
标签手动添加一个 click
事件(容易累死);其次,我们可能会想到使用 for
循环遍历每个元素,然后为其添加 click
事件,但这样会频繁操作 DOM,降低性能,卡到爆炸。
而事件委托意义就在于此:减少 DOM 操作,从而减少浏览器的重绘与重排次数,提升性能。
事件委托的原理是,将 li
上监听的 click
事件委托到 ul
上。这里运用到了 事件冒泡 的机制,即 onclick
事件以 li -> ul -> body -> html -> document
的冒泡顺序逐步传递。
所以,我们可以选择在其中的 ul
上监听 click
事件,从而实现事件委托。
如何创建 100000 个
<li>
呢?总不能复制粘贴 100000 次吧?
创建 100000个 <li>
标签,思路是将 0∼9999
保存在数组中,然后转化为字符串 "<li>0</li><li>1</li>...<li>9999</li>"
,最后将他们作为 ul
标签的 innerHTML
即可。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script src="create100000li.js"></script>
<body>
<ul>
</ul>
</body>
</html>
/* --- create100000li.js --- */window.onload = function() {var ul = document.getElementsByTagName("ul");var arr = [];for (let i = 0; i < 100000; i++) {arr.push(i);}ul[0].innerHTML = '<li>' + arr.join('</li><li>') + '</li>'
}
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢
关注公众号后,回复前端面试题,领取大量前端面试题汇总pdf资料
2021届秋招腾讯前端一面面经相关推荐
- 谁说2021届秋招算法岗一定要灰飞烟灭啦?
没错,这是一碗鸡汤,希望肝完这碗鸡汤的师弟师妹们就不要过度焦虑啦-理性上车,理性下车,希望萌新们都能遇到最适合自己的坑位 2014年末入坑AI,一路见证了AI行业的快速起飞.爆炸.焦虑和冷却. 小夕前 ...
- 2021届秋招算法岗真的要灰飞烟灭了吗?
星标/置顶小屋,带你解锁 最萌最前沿的NLP.搜索与推荐技术 文 | 不拖更的夕小瑶 2014年末入坑AI,一路见证了AI行业的快速起飞.爆炸.焦虑和冷却. 小夕前几天在知乎上看到一个问题<如何 ...
- 2021届秋招—中兴面试(软件开发C++方向)
2021届秋招-中兴面试(软件开发C++方向) 一面: 自我介绍 做题 char num[10] = {1,2,3,4,5}; char *p = num; sizeof(num) = ___? st ...
- 2021年秋招遇到的前端笔试/面试题
** 本文仅用于记录本人2021年秋招遇到的部分前端笔试/面试题,答案仅供参考 ** 1.跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度 ...
- 平均15-16薪,汇量科技2021届秋招正式启动!
52CV内推福利 1.简历优先筛选 2.优先面试 3.优先录取 (名额有限,抓紧报名) 如何参与 扫描下方二维码,关注并留言[汇量] 获取内推机会 小助手 微信M星小助手(微信号:xiaozhong9 ...
- 渣渣本科的2021届秋招总结-泪目
引言 今年的秋招仿佛开始的格外的早,大概从7月开始就能在牛客上看见一些大厂的提前批开始的贴子,到了8月中下旬,秋招正式批也开始了,在牛客最直观的感受就是大佬们已经收割掉提前批的offer了,而菜鸡只能 ...
- 【华为2021秋招】【数字IC】【FPGA逻辑】【笔试解析】【独家】【2021届秋招】【FPGA探索者】【DengFengLai123】
声明: /********************************************************* 文章首发于公众号,原创作者为 [公众号/知乎:FPGA探索者] [CSDN ...
- 2021届秋招哈啰出行前端面经(一面)
面试过程 简单做个自我介绍吧. 面试官您好... 看到了你的项目经验,简单介绍一下你的项目吧. ... 你的项目中用到了 React,用的是那个版本呢? 用的 React 16.5(记错了,应该是 1 ...
- 2021届秋招嵌入式软件开发(联发科、海康威视、浙江大华、高德红外、汇顶科技、瑞芯电子、深圳有为)
非985/211学校,研究生!本科专业机械设计及其自动化,设计到一点单片机知识,对于单片机没有项目实践经验,底子弱!后来考研,没有考上自己想去的学校,调剂到湖北双非院校继续读研,选导师的时候,师姐师兄 ...
最新文章
- Redis 笔记(04)— list类型(作为消息队列使用、在列表头部添加元素、尾部删除元素、查看列表长度、遍历指定列表区间元素、获取指定区间列表元素、阻塞式获取列表元素)
- python考级证书-Python 全国考级二级
- 单片机c语言数码显示实验报告,单片机动态显示技术实验报告.doc
- 基于java的数据结构学习——数组实现的栈以及简单应用
- flowable 多实例动态添加人
- Floyed(floyd)算法详解
- zyplayer-doc 1.0.1 发布,你家所需的文档管理工具他都承包了!
- 2.移植3.4内核-支持烧写yaffs2,裁剪内核并制作补丁
- android背景图边框渐变,GitHub - jvyun/TestShape: 使用自定义属性替代项目中的shape文件,可以给View设置背景色、弧度、背景渐变、边框、边框颜色、渐变方向等...
- WindowsServer2008网卡驱动问题
- Android studio xpose的使用
- 工具说明书 - 英语翻译软件对比和英语词典选择
- 为什么我不建议你裸辞做自媒体?
- springcontext.xml 中方言是红色的_12种方言都能听懂!讯飞智能录音笔A1评测:小如钥匙坠+复古磁带造型...
- 尚医通 (十八)微信登录
- 爬虫经典项目——HFUT GPA计算器
- RuntimeError: CUDA out of memory. Tried to allocate 模型训练 GPU 显存不够报错总结
- 有关计算机时代的英语阅读理解题,2020-2021高考英语阅读理解综合经典题附详细答案...
- 基于51单片机的智能小车系统设计
- 地平线Horizon模型转换和PC端仿真测试
热门文章
- c语言程序冒号的作用是什么,C语言里面的冒号
- 视频监控系统 摄像头与网络存储服务器兼容,网络视频监控系统技术要点
- 游戏资讯:预计在10月底至11月内, 版号审批将会恢复
- HYSBZ 2565 最长双回文串 (回文树)
- 封装一个常用的js工具类
- goim 架构与定制
- 【数智化案例展】杭州市某区统计局——AIxRPA数字员工技术赋能新经济监测项目...
- win10 ,jkd8 查看线程状态
- 使用Echarts将Excel数据转换成色彩地图HTML小工具
- 如何将立创 EDA 的封装导入到 AD/PADS 软件中