之前也总结过一些前端面试题，推荐可以一起看看
【网络】计算机网络常见面试题 - 前端面试必备 - 吐血整理
【CSS】面试题总结 - 基础知识总结 - 复习专用 - 前端面试必备 - 吐血整理
【Vue】面试题总结 - 基础知识总结 - 复习专用 - 组件相关 - Vue家族 - 源码相关
这次是关于JavaScript的面试题有题目也有答案，想深入了解，可以看我之前的一些笔记博文（狠详细）。当然，每题有相关博文的我都会放链接~
1. 变量声明与类型 1.1 var let const 区别 var是ES5语法，let、const是ES6的语法var有变量提升var、let是变量，可修改；const是常量，不可修改let、const 块级作用域；var函数作用域持续更新中…
【ES6】变量声明-var-let-const-区别与联系-总结
值类型（7个）：Undefined、Null、Number、String、Boolean、Symbol(ES6)、BigInt(ES10)
引用类型：Object：Array、Function
【JS】JavaScript-ES5数据类型-基本数据类型-引用数据类型-类型之间的转换-数据类型的判断
1.3 值类型与引用类型的区别值类型 存在栈内存中，变量拿到的就是它的值
引用类型 存在堆内存中，变量拿到的只是它的一个引用，是它的地址
【JS】JavaScript-对象-Object-内建对象-宿主对象-自定义对象- *** 作对象-基本数据类型与引用数据类型区别
1.4 typeof 能判断哪些类型 undefined、string、number、boolean、symbol、bigint【除了null的基本类型】function 【函数】object (typeof null === ‘object’) 【所有引用类型只能到object这里】 1.5 判断数据类型的方式 typeof 【除了null的基本类型 + function】instanceof 【引用类型】【从子类到父类直到object】【顺着原型链】toString() 【任意类型】Array.isArray() 【数组】 1.6=== 与 ==
=== 严格的比较是否相等
== 会进行类型转换，再进行比较
以下都是成立的
100 == '100'
0 == ''
0 == false
fase == ''
null == undefined
有一个情况可以用下 ==
if(a == null) {}
// 等价于
if(a === null || a === undefined)()
truly变量：!!a === true 的变量
falsely变量：!!b === false 的变量
以下是falsey变量，除了这六种情况，其余都是truely变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false
强制：parseInt、parseFloat、toString
隐式：if、逻辑运算、==、+拼接字符串
一定要看这个，狠详细
【JS】JavaScript-ES5数据类型-基本数据类型-引用数据类型-类型之间的转换-数据类型的判断
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
a
a+b
demo(1)
x===y? 'a': 'b'
语句
if(){}
for(){}
function deepClone(obj){
if (typeof obj !== 'object' || obj === null){
return obj
}
let result = Array.isArray(obj) ? []: {}
for (let key in obj) {
if(obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key])
}
}
return result
}
【JS】自定义JS工具函数库-自定义对象方法-new-instanceof-mergeObject-实现数组与对象的深拷贝与浅拷贝-封装字符串相关函数
2.2 手写深度比较// 判断是否是对象或数组
function isObject(obj) {
return typeof obj === object && obj !== null;
}
// 深度比较
function isEqual(obj1, obj2) {
if (!isObject(obj1) || !isObject(obj2)) {
// 值类型，直接判断【一般不会传函数，不考虑函数】
return obj1 === obj2;
}
if (obj1 === obj2) {
return true;
}
// 两个都是对象或数组，而且不相等
// 1. 先判断键的个数是否相等，不相等一定返回false
const obj1Keys = Object.keys(obj1);
const obj2Keys = Objext.keys(obj2);
if (obj1Keys.length !== obj2Keys.length) {
return false;
}
// 2. 以obj1为基准，和obj2依次递归比较
for (let key in obj1) {
// 递归比较
const res = isEqual(obj1[key], obj2[key]);
if (!res) {
return false;
}
}
// 3. 全相等
return true;
}
纯函数：①不改变原数组(没有副作用) ②返回一个新数组
concat、map、filter、slice
非纯函数：push、pop、shift、unshift、forEach、some、every、reduce
【JS】你不得不知道的JavaScript数组相关知识【全面总结】复习专用
2.4split()和join()的区别
split() 是字符串的方法
join() 是数组的方法
'1-2-3'.split('-') // [1,2,3]
[1,2,3].join('-') // 1-2-3
slice与splice区别
slice 切片
splice 剪接
【JS】JavaScript数组- *** 作方法-concat-数组强制打平-slice-splice方法使用
2.6 手写字符串 trimString.prototype.trim = function() {
return this.replace(/^\s+/, '').replace(/\s+$/, '')
}
函数声明式
function fn(a, b) {
return a + b;
}
函数表达式
let fun = function(a, b){
return a + b;
}
window.JSON是一个全局对象，常用的两个方法 JSON.stringify 和JSON.parse
3.3 将URL参数解析成JS对象
传统方法，分析search
function queryToObj() {
const res = {}
const search = location.search.substr(1)
search.split('&').forEach(paramStr => {
const arr = paramStr.split('=')
const key = arr[0]
const val = arr[1]
res[key] = val
})
return res
}
使用URLSearchParams
function queryToObj() {
const res = {}
const pList = new URLSearchParams(location.search)
pList.forEach((val, key) => {
res[key] = val
})
return res
}
每个函数对象都有显式原型 prototype
每个实例对象都有隐式原型 __proto__
实例对象的__proto__指向函数对象的prototype
（之前博文中的图）
原型链：实例对象在获取对象上的属性和方法时，先在自身找，找不到就去隐式原型上面找
（之前博文中的图）
class是ES6语法规范，由ECMA委员会发布【构造函数、继承】
ECMA只规定语法规则，不规定如何实现
下面博文具体介绍了class语法，以及具体的原生实现【构造函数、继承】
【ES6】JavaScript面向对象-面向对象与面向过程的对比-类class-继承extends-构造函数-super
【JS】JavaScript创建对象 - 工厂模式 - 构造函数模式 - 原型模式 - 原型链 - 组合模式
【JS】JavaScript继承 - 原型链 - 盗用构造函数 - 组合继承 -原型式继承 - 寄生式继承 - 寄生式组合继承
4.3 new Object() 与 Object.create()的区别{} 等同于 new Object()，原型为Object.prototypeObject.create(null) 没有原型Object.create({...}) 可以指定原型
4.4 用class语法写一个简单的jQuery
class jQuery {
constructor(selector) {
const result = document.querySelectorAll(selector);
const length = result.length;
for (let i = 0; i < length; i++) {
this[i] = result[i];
}
this.length = length;
this.selector = selector;
}
get(index) {
return this[index];
}
each(fn) {
for (let i = 0; i < this.length; i++) {
const elem = this[i];
fn(elem);
}
}
on(type, fn) {
return this.each((elem) => {
elem.addEventListener(type, fn, false);
});
}
}
// 插件
jQuery.prototype.dialog = function(info){
console.log(info);
}
// 拓展性
class myjQuery extends jQuery{
constructor(selector){
super(selector)
}
// 扩展自己的方法
addClass(className){}
addStyle(data){}
}
这篇博文写的很详细，推荐阅读
【JS】你不知道的JavaScript 笔记（一）—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域
【JS】函数定义与调用方式-函数this指向问题-call-apply-bind方法使用与自定义
【JS】你不知道的JavaScript笔记（二）- this - 四种绑定规则 - 绑定优先级 - 绑定例外 - 箭头函数
5.1 作用域一个变量合法的使用范围，JS中采用的是词法作用域（静态作用域）
【变量的查找，取决于在哪里定义，而不是在哪里执行】
全局作用域 - 函数作用域 - 块级作用域
自由变量：一个变量在当前作用域没有定义，但是被使用了。这时就向上级作用域一层一层依次查找，直到找到为止，最后在全局作用域都没找到就报错 ReferenceError：xxx is not defiend
this查找采用的是动态作用域
【this的指向，取决于在哪里执行，而不是在哪里定义】
例题
const User = {
count: 1,
getCount: function() {
return this.count
}
}
console.log(User.getCount()) // 1
const func = User.getCount
console.log( func() ) // undefined
【JS】你不知道的JavaScript笔记（二）- this - 四种绑定规则 - 绑定优先级 - 绑定例外 - 箭头函数
5.3 手写bind【JS】函数定义与调用方式-函数this指向问题-call-apply-bind方法使用与自定义
Function.prototype.myBind = function() {
// 将参数拆解为数组
const args = Array.prototype.slice.call(arguments)
// 获取this
const t = args.shift()
// fn1.bind(...)中的 fn1
const self = this
return function() {
return self.apply(t, args)
}
}
使用
function fn1(a, b, c) {
console.log('this', this)
console.log(a, b, c)
return 'this is fn1'
}
const fn2 = fn1.myBind({x: 100}, 10, 20, 30)
const result = fn2()
console.log(result)
当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包
① 函数作为参数被传递 ② 函数作为返回值被返回
【JS】你不知道的JavaScript 笔记（一）—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域
5.5 闭包的应用场景隐藏数据，只提供API
function createCache() {
const data = {} // 闭包中的数据被隐藏，不被外界访问
return {
set: function(key, value) {
data[key] = value
},
get: function(key){
return data[key]
}
}
}
const cache = createCache()
c.set('a', 100)
console.log(c.get('a'))
【ES6】变量声明-var-let-const-区别与联系-总结
【ES6】Symbol基本使用及常用内置符号
【ES6】JavaScript函数-箭头函数-this指向-简写
【ES6】JavaScript-变量的解构赋值-数组解构-对象解构-对象的属性-对象的方法
【ES6】JavaScript对象-增强的对象语法-属性值简写-可计算属性-简写方法名
【ES6】JavaScript函数-参数的默认值-与解构赋值的结合使用-对arguments的影响-默认参数作用域与暂时性死区
【ES6】JavaScript数组-数组的创建-构造函数-字面量-Array.from()-Array.of()静态方法
【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach()
【ES6】JavaScript面向对象-面向对象与面向过程的对比-类class-继承extends-构造函数-super
【ES6】迭代器与生成器
【Promise】入门-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题
【ES8】异步代码终极解决方案 async 和 await
【ES6模块化】import - export - 按需引入 - 项目中使用babel - ES6模块化引入npm包
7. 异步相关因为单线程，所以异步【同步会阻塞代码执行】
JS单线程， 和DOM渲染共用一个线程【因为JS可以修改DOM结构】
浏览器和node.js已经支持JavaScript启动进程，如 Web Worker
【JavaScript】同步与异步-异步与并行-异步运行机制-为什么要异步编程-异步与回调-回调地狱-JavaScript中的异步 *** 作
7.2 前端使用异步的场景网络请求，如ajax
定时任务
then和catchresolved 成功了 会触发后续的then回调函数rejected 失败了 会触发后续的catch回调函数
then正常返回 resolved，里面有报错则返回 rejected
catch正常返回 resolved，里面有报错则返回 rejected
【Promise】入门-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题
7.4 promise的then和catchPromise.resolve().then(()=>{
console.log(1) // 执行
}).catch(()=>{
console.log(2) // 不执行
}).then(()=>{
console.log(3) // 执行
})
Promise.resolve().then(()=>{
console.log(1) // 执行
throw new Error('err1')
}).catch(()=>{
console.log(2) // 执行
}).then(()=>{
console.log(3) // 执行
})
Promise.resolve().then(()=>{
console.log(1) // 执行
throw new Error('err1')
}).catch(()=>{
console.log(2) // 执行
}).catch(()=>{
console.log(3) // 不执行
})
function loadImg(src){
return new Promise((resolve, reject)=>{
const img = document.createElement('img')
img.onload = () =>{
resolve(img)
}
img.onerror = () => {
reject(new Error(`图片加载失败 ${src}`))
}
img.src = src
})
}
// 使用
const url = ''
loadImg(url).then(img => {
console.log(img.width)
return img
}).then(img => {
console.log(img.height)
}.catch(err => console.error(err))
// 使用加载多张图片
url1 = ''
url2 = ''
loadImg(url1).then(img1 => {
console.log(img1.width)
return img1
}).then(img1 => {
console.log(img1.height)
return loadImg(url2)
}).then(img2 => {
console.log(img2.width)
return img2
}).then(img2 => {
console.log(img2.height)
}).catch(err => console.error(err))
async函数，返回的是Promise对象await相当于Promise的thentry/catch可以捕获异常，代替了Promise的catch
【ES8】异步代码终极解决方案 async 和 await
7.7 字节面试看代码题async function async1() { // 函数定义
console.log("async1 start"); // 2
await async2(); // 函数执行
// await后面的内容，可以看作是回调里的内容，即异步执行
console.log("async1 end"); // 6
}
async function async2() { // 函数定义
console.log("async2"); // 3
}
console.log("script start"); // 1
async1(); // 函数执行
new Promise((resolve)=>{
console.log('promise1'); // 4
resolve();
}).then(()=>{
console.log('promise2'); // 7
})
console.log("script end"); // 5 同步代码执行完毕
for、forEach、for-in 是常规的【同步】遍历
for-of常用于【异步】的遍历
function muti(num) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(num * num);
}, 1000);
});
}
const nums = [1, 2, 3];
nums.forEach(async (i) => {
const res = await muti(i);
console.log(res); // 会同时打印出三个结果
});
(async function () {
for (let i of nums) {
const res = await muti(i);
console.log(res); // 会每隔一秒打印出一个结果
}
})();
微任务执行时机比宏任务早
微任务在DOM渲染前触发 【Promise】宏任务在DOM渲染后触发 【setTimeout】 8.2 Event Loop机制 回调栈 Call Stack事件循环 event loop回调队列 Callback Queue微任务队列 micro task queue
同步代码，一行一行放在回调栈中执行，执行完了就出栈遇到异步，记录下来，等待时机；时机到了，就移动到回调队列中当回调栈为空，（微任务[微任务队列]）【尝试DOM渲染】 事件循环开始工作：轮询查找（宏任务）回调队列，有则移动到回调栈中执行继续轮询loop
【同步任务——微任务——DOM渲染——宏任务】——同步任务——微任务——DOM渲染——宏任务…
实际上真正的 event loop 是这样的
一开始整个脚本作为一个宏任务执行执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完执行浏览器UI线程的渲染工作检查是否有Web Worker任务，有则执行执行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空所以过程是
【宏任务（代码整体）——同步任务——微任务——DOM渲染】——宏任务——同步任务——微任务——DOM渲染…
8.3 event loop练习console.log('1'); // ①同步任务
setTimeout(function() { // ① 宏任务
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() { // ① 微任务
console.log('6');
})
new Promise(function(resolve) {
console.log('7'); // ① 同步任务
resolve();
}).then(function() { // ① 微任务
console.log('8')
})
setTimeout(function() { // ① 宏任务
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
console.log('13');
process.nextTick(function() {
console.log('14'); // 微任务 process.nextTick 比 promse.then优先级要高
})
})
1 7 6 8 2 4 3 5 9 11 13 10 14 12
9. DOM 9.1 获取节点 *** 作document.getElementById('yk') // 元素
document.getElementsByTagName('div') // 集合
document.getElementsByClassName('container') // 集合
document.querySelectorAll('p') // 集合
修改的是标签属性【内联样式】
修改html属性，会改变html结构
const pList = document.querySelectorAll('p')
const p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','ykjun')
p.getAttribute('style')
p.setAttribute('style', 'font-size: 10px')
用JS的属性 *** 作DOM元素
修改对象属性，不会 体现到html结构中
const pList = document.querySelectorAll('p')
const p = pList[0]
console.log(p.style.width) // 获取样式
p.style.width = '100px' // 修改样式
console.log(p.className) // 获取class
p.className = 'p1' // 修改class
console.log(p.nodeName) // 获取nodeName节点名称
console.log(p.nodeType) // 获取nodeType节点类型
const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is new p'
// 插入节点
div1.appendChild(newP)
// 移动节点
const p1 = document.getElementsByTagName('p')[0]
div2.appendChild(p1)
// 获取父元素
console.log(p1.parentNode)
// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log('div1ChildNodes', div1ChildNodes)
const div1ChildNodesP = Array.from(div1ChildNodes).filter(child => {
if(child.nodeType === 1) {
return true;
}
return false;
}
console.log('div1ChildNodesP', div1ChildNodesP)
// 删除节点
div1.removeChild(div1ChildNodesP[0])
不使用缓存DOM查询结果
for(let i = 0; i < document.getELementsByTagName('p').length; i++){
// 每次循环都会计算length，频繁进行DOM查询
}
缓存DOM查询结果
const pList = document.getELementsByTagName('p')
const length = pList.length
for(let i = 0; i < length; i++){
// 缓存length， 只进行一次DOM查询
}
const listNode = document.getElementById('list')
// 创建一个文档片段，此时还没有插入到DOM树中
const frag = document.createDocumentFragment()
// 执行插入 *** 作
for(let i = 0; i < 10; i++){
const li = document.createElement('li')
li.innerHTML = "Iist Item " + i
frag.appendChild(li)
}
// 都完成后，再插入DOM树中
listNode.appendChild(frag)
【BOM】JavaScript-定时器-执行机制-location-navigator-history
10.1 检查浏览器类型const ua = navigator.userAgent
const isChorme = ua.indexOf('Chrome')
console.log(isChorme)
location
【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件
11.1 事件绑定、冒泡、代理const btn = document.getElementById('btn1')
btn.addEventListener('click', event => {
console.log('clicked')
})
function bindEvent(elem, type, fn){
elem.addEventListener(type, fn)
}
const btn1 = document.getELementById('btn1')
bindEvent(btn1, 'click', event => {
console.log(event.target) // 获取触发的元素
event.preventDefault() // 阻止默认行为
alert('clicked')
})
升级版【支持代理】
function bindEvent(elem, type, selector, fn){
if(fn == null){
fn = selector
selector = null
}
elem.addEventListener(type, event => {
if(selector){
// 代理绑定
if (target.matches(selector)){
fn.call(target, event)
}
}else {
// 普通绑定
fn.call(target, event)
}
})
}
// 普通绑定
const btn1 = document.getELementById('btn1')
bindEvent(btn1, 'click', function(event) {
console.log(event.target) // 获取触发的元素
event.preventDefault() // 阻止默认行为
alert(this.innerHTML)
})
// 代理绑定 [在a父节点div上绑定事件]
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function(event) {
event.preventDefault()
alert(this.innerHTML)
})
event.target获取触发元素用matches来判断是否是触发元素
12. AJAX
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
【axios】使用json-server 搭建REST API - 使用axios - 自定义axios - 取消请求 - 拦截器
12.1 手写一个简单的ajaxfunction ajax(url) {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
resolve(
JSON.parse(xhr.responseText)
)
} else if (xhr.status === 404) {
reject(new Error('404 not found'))
}
}
}
xhr.send(null)
})
return p
}
// 使用
const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.log(err))
浏览器中加载图片、css、js可以无视同源策略