2024年前端最全一些JavaScript的基础题，【原理+实战+视频+源码

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

如果不采用立即执行函数或者let的形式就会直接打印出10个10，通过采取闭包或者let有了块级作用域之后就不会出现这样的问题

for (var i = 0; i < 10; i++) {

(function (j) {

setTimeout(() => {

console.log(j)

}, 1000)

})(i)

}

给定时器传入第三个参数, 定时器可以传多个参数给定时器函数，此处将外层的i传递给了定时器中回调函数作为参数使用。

for(var i = 1;i <= 5; i++){

setTimeout(function timer(j){

console.log(j)

}, 0, i)

}

用let给定块级作用域

for (let i = 0; i < 10; i++) {

setTimeout(() => {

console.log(i)

}, 1000)

}

关于setTimeout的一些冷知识

• 由于消息队列的机制，不一定能按照自己设置的时间执行

• settimeout嵌套settimeout时，系统会设置最短时间间隔为4ms

• 未激活的页面，settimeout最小时间间隔为1000ms

• 延时执行时间最大值为2147483647(32bit)，溢出这个值会导致定时器立即执行

setTimeout(()=> {

console.log(‘这里会立即执行’)

} ,2147483648)

数组扁平化的方法

//使用ES6中的Array.prototype.flat方法

arr.flat(Infinity)

//使用reduce的方式

function arrFlat(arr) {

return arr.reduce((pre, cur) => {

return pre.concat(Array.isArray(cur) ? arrFlat(cur) : cur)

}, [])

}

//使用递归加循环的方式

function arrFlat(arr) {

let result = []

arr.map((item, index) => {

if (Array.isArray(item)) {

result = result.concat(arrFlat(item))

} else {

result.push(item)

}

})

return result

}

//将数组先变成字符串，再复原 toString()

//这种方法存在缺陷，就是数组中元素都是Number或者String类型的才能展开

function arrFlat(arr) {

return arr.toString().split(‘,’).map(item=> +item)

}

数组去重

定义去重数据

let arr = [1, 1, “1”, “1”, null, null, undefined, undefined, /a/, /a/, NaN, NaN, {}, {}, [], []]

我们先看下几种不能去掉重复的引用数据类型的写法

// 使用 Set

let res = […new Set(arr)]

console.log(res)

这种方法虽然很简洁，但是使用该种方法我们可以看到里面的引用数据类型并没有能成功去重，只能去除基本数据类型

//使用filter

let res = arr.filter((item, index) => {

return arr.indexOf(item) === index

})

console.log(res)

//使用reduce

let res = arr.reduce((pre, cur) => {

return pre.includes(cur) ? pre : […pre, cur]

}, [])

console.log(res)

使用该两种方法也和上面的方法一样，不能去掉引用数据类型。

我们再来看一下如何去除引用类型的重复值

利用对象的hasOwnProperty方法进行判断对象上是否含有该属性，如果含有则过滤掉，不含有则返回新数组中

let obj = {}

let res = arr.filter(item => {

if (obj.hasOwnProperty(typeof item + item)) {

return false

} else {

obj[typeof item + item] = true

return true

}

})

console.log(res)

这次可以看到成功的将引用数据类型也去掉了。

除了以上这几种方法，还有一些循环遍历的方法也是类似的

类数组变成数组

类数组是具有length属性，但不具有数组原型上的方法。 比如说arguments，DOM操作返回的结果就是类数组。那么如何将类数组变成数组呢

• Array.from(document.querySelectorAll('div'))

• Array.prototype.slice.call(document.querySelectorAll('div'))

• [...document.querySelectorAll('div')]

数据类型检测

typeof 1 // number

typeof ‘1’ // string

typeof undefined // undefined

typeof true // boolean

typeof Symbol() // symbol

上面的几种类型都能正确的检测，但是引用数据类型除了函数都会显示为object，而且对于 typeof null 也是 object 这是历史遗留下的bug，因为怕影响到一些现有的web项目，所以一直没有修复这个bug。

当检测引用数据类型的时候，用instanceof比较好，它会基于原型链进行查询，如果查询结果在原型链中，就会返回true。

Object.prototype.toString.call（检测数据类型最佳方案）

调用Object原型上的toString()方法，并且通过call改变this指向。返回字符串 ，我们看看八种数据类型分别返回的结果

function checkType(param) {

return Object.prototype.toString.call(param)

}

console.log(checkType(123)) //[object Number]

console.log(checkType(“123”)) //[object String]

console.log(checkType(true)) //[object Boolean]

console.log(checkType({ a: 123 })) //[object Object]

console.log(checkType(() => {})) //[object Function]

console.log(Symbol(1)) //Symbol(1)

console.log(null) //null

console.log(undefined) //undefined

我们再对上述函数进行一下处理

function checkType(param) {

return Object.prototype.toString.call(param).slice(8, -1).toLowerCase()

}

console.log(checkType(1)) // number

Object.is和===的区别

Object.is在严格等于上的基础修复了一些特殊情况下的错误，比如NaN 不等于 NaN

function is(x, y){

if(x === y){

// 1/+0 = +Infinity 1/-0 = -Infinity 这两个是不相等的

// 当 x和y都等于0的时候，就对x/0和y/0做判断

return x !== 0 || y !== 0 || x / 0 === y / 0

}

}

和=的区别和隐式数据类型转化

===是严格相等，左右两边不仅值要相等，类型也要相等，例如'1'===1的结果是false，因为左边是string，右边是number。

==只要值相等就会返回true，而且使用==时会发生隐式类型转化， 在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算 。

• 转成string类型：+ 字符串连接符如 1 + "1" = "11"

• 转成number类型： ++、–(自增自减运算符) + 、-、*、/、%(加减乘除取余算术运算符) >、 <、 >=、 <=、 ==、 !=、 =、 ! (关系运算符)

let i = “1”

console.log(++i) // 2

• 转成boolean类型 : !(逻辑非运算符取反操作)，使用Boolean转化除了下面这八种情况得到false以外，其它的情况都转为true 。0、-0、NaN、undefined、null、“”(空字符串)、false、document.all()

• 如果其中一方为Object，且另一方为String、Number或者Symbol，会将Object转换成字符串，再进行比较

例子:

//字符串连接符

console.log(1 + ‘true’)// +是字符串连接符, String(1) + ‘true’，打印出’1true’

//算术运算符

console.log(1 + true) // +是算术运算符,true被Number(true)->1,打印出2

console.log(1 + undefined) // 1 + Number(undefined) -> 1 + NaN, 打印NaN

console.log(1 + null) // 1 + Number(null) -> 1 + 0,打印出1

//关系运算符

// 一边数字一边字符串,Number(“2”)

// 2 > 5,打印false

console.log(“2” > 5)

// 两边字符串,调用"2".charCodeAt() -> 50

// “5”.charAtCode()-> 53, 打印false

console.log(“2” > “5”)

//多个字符串从左往右匹配,也是调用charCodeAt方法进行比较

//比较"a".charCodeAt() < “b”.charCodeAt(),打印false

console.log(“abc” > “b”)

// 左边第一个"a"和右边第一个"a"的unicode编码相等

// 继续比较两边第二个字符, “b” > “a”,打印true

console.log(“abc” > “aaa”)

//无视上述规则自成体系

console.log(NaN == NaN) // NaN和任何数据比较都是 false

console.log(undefined == undefined) //true

console.log(undefined === undefined) //true

console.log(undefined == null) //true

console.log(undefined === null) //false

对于复杂的数据类型，比如对象和数组

对象和数组和字符串类型比较：先使用valueOf() 取得原始值，如果原始值不是number类型，则用toString()方法转成字符串类型valueOf -> toString

//发生了a.valueOf().toString()的转化，打印true

console.log([1,2] == “1,2”)

// 发生了a.valueOf().toString()的转化，打印true

let a = {}

console.log(a == “[object Object]”)

对象转原始类型，会调用内置的[ToPrimitive]函数，对于该函数而言，其逻辑如下：

• 如果有设置Symbol.toPrimitive()方法，会优先调用并返回数据

• 调用valueOf()，如果转换为原始类型，则返回

• 调用toString()，如果转换为原始类型，则返回

• 如果没有返回原始类型，则报错

让我们来看俩个例子👇

let obj = {

value: 3,

valueOf() {

return 4

},

toString() {

return 5

},

Symbol.toPrimitive {

return 6

},

}

console.log(obj + 1) //打印7

让 if(a ==1 && a == 2 && a == 3)成立

let a = {

value: 0,

valueOf() {

return ++a.value

},

}

// 每次调用这个a对象的时候都会在0的基础上加1，调用3次后就变成了3

console.log(a == 1 && a == 2 && a == 3) //true

如果是数组和对象与number类型比较，先用valueOf取得原始值，原始值不是number类型则调用toString，然后再将字符串类型用Number转成数字类型，调用顺序valueOf() -> toString() -> Number()

空数组的toString()方法会得到空字符串，而空对象的toString()方法会得到字符串[object Object]

//发生了这样的转化：Number([].valueOf().toString())，打印true

console.log([] == 0)

//逻辑非运算符优先级大于关系运算符

//空数组转布尔得到true，然后取反得到false

//false = 0 ，打印true

console.log(![] == 0)

//左边：{}.valueOf().toString()得到”[object Object]“,Number(”[object Object]“)->NaN

//右边：!{}得到false ,Number(false) -> 0

//两边不相等，打印false

console.log({} == !{})

//左边：[].valueOf().toString()得到空字符串

//右边：![] 得到false

// Number(“”) = Number(false) 两边都为0

//打印true

console.log([] == ![])

//因为引用数据类型存储在堆中的地址，左边和右边分别属于两块不同的空间

//他们地址不相同，所以两边不相等

//下面两种情况都打印false

console.log([] == [])

console.log({} == {})

记录遇到的一个另一个相关问题

下面这三个的打印结果

//typof null返回的是object

console.log(typeof null)

//从右往左看，先看右边的typeof null整体，返回object之后

//再将整体看成typeof object

//打印结果为string,原因是typeof null返回的是object字符串

console.log(typeof typeof null)

//到这里也是从右往左看，相当于typeof string

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。