文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
instanceof判断
判断方式
// 如果为true，则arr为数组
arr instanceof Array
instanceof判断数组如此之简单，为何不推荐使用那？
instanceof操作符的问题在于，如果网页中存在多个iframe，那便会存在多个Array构造函数，此时判断是否是数组会存在问题。
更详细的内容可以参考博文：[JavaScript为啥不用instanceof检测数组
]( )
第五问：如何判断一个数是否为NaN？
NaN有个非常特殊的特性，NaN与任何值都不相等，包括它自身
NaN === NaN // false
鉴于这个独特的特性，可以手撕一个比较简单的判断函数
function isNaN(x) {
return x != x;
}
isNaN方法：不推荐使用。MDN对它的介绍是：isNaN函数内包含一些非常有趣的规则。
但为了避免一些面试官出一些冷门题目，稍微介绍一下，isNaN的有趣机制：会先判断参数是不是Number类型，如果不是Number类型会尝试将这个参数转换为Number类型，之后再去判断是不是NaN。
举个例子：
// 是不是很有趣
console.log(isNaN([])) // false
console.log(isNaN([1])) // false
console.log(isNaN([1, 2])) // true
console.log(isNaN(null)) // false
console.log(isNaN(undefined)) // true
isNaN的结果很大程度上取决于Number()类型转换，后面会专门有一部分来介绍。
Number.isNaN(推荐使用)
与isNaN()相比，Number.isNaN()不会自行将参数转换成数字，只有在参数是值为NaN的数字时，才会返回 true。
第六问：如何实现一个可靠的类型判断函数
利用Object.prototype.toString.call([value])，可以精准判断数据类型，大家可以根据这个原理封装一个自己的type方法。
toString.call(()=>{}) // [object Function]
toString.call({}) // [object Object]
toString.call([]) // [object Array]
toString.call(‘’) // [object String]
toString.call(22) // [object Number]
toString.call(undefined) // [object undefined]
toString.call(null) // [object null]
toString.call(new Date) // [object Date]
toString.call(Math) // [object Math]
toString.call(window) // [object Window]
第七问：toString和valueOf的什么情况下会自动调用，优先级怎样？
-
介绍：这两个方法属于
Object对象，是为了解决JavaScript值运算与显示的问题。为了更适合自身功能，很多JavaScript内置对象都重写了这两个方法。 -
toString(): 返回当前对象的字符串形式；valueOf(): 返回该对象的原始值 -
各个类型下两个方法返回值情况对比
| 类型 | valueOf | toString |
| — | — | — |
| Array[1,2,3] | (3) [1, 2, 3] | 1,2,3 |
| Object | 对象本身 | [object Object] |
| Boolean类型 | Boolean值 | “true"或"false” |
| Function | 函数本身 | function fnName(){code} |
| Number | 数值 | 数值的字符换表示 |
| Date | 毫米格式时间戳 | GMT格式时间字符串 |
- 自动调用
隐式转换时会自动调用toString和valueOf方法，两者优先级如下：
-
在进行
object格式转换时，优先调用toString方法 -
强制转化为字符串类型时，优先调用
toString方法 -
强制转换为数值类型时，优先调用
valueOf方法 -
使用运算符操作符情况下，
valueOf优先级高于toStirng
- 经典案例
const a = {x:1};
const b = {x:2};
const obj = {};
obj[a] = 100;
obj[b] = 200;
console.log(obj[a]);
console.log(obj[b]);
JavaScript中对象的键都为字符串格式，需要由对象转换为字符串，调用Object上的toString方法。
根据转换规则，a和b都转换为[object Object]，因此obj[a]和obj[b]操作的是同一个键，最终打印两个200
第八问：你知道对象转换成原始值是什么流程吗？
对象转换成数字类型，会按照下面的步骤执行(三步走战略)：
- 先调用对象的
Symbol.toPrimitive方法，如果不存在这个方法(toPrimitive，可以参考博客[从ECMA规范彻底理解 JavaScript 类型转换
]( ))
-
调用对象的
valueOf()，如果转换为原始类型，则返回 -
调用对象的
toString()，如果转换为原始类型，则返回 -
如果都没有返回原始类型，会报错
第九问：你能理清类型转换吗？
首先需要知道：在JavaScript中，只有三种类型的转换
-
转换为
Number类型:Number() / parseFloat() / parseInt() -
转化为
String类型:String() / toString() -
转化为
Boolean类型:Boolean()
因此遇到类型转换问题，只需要弄清楚在什么场景之下转换成那种类型即可。
转换为boolean
-
显式：
Boolean方法可以显式将值转换为布尔类型 -
隐式：通常在逻辑判断或者有逻辑运算符时触发（
|| && !）
Boolean(1) // 显式类型转换
if (1) {} // 逻辑判断类型触发隐式转换
!!1 // 逻辑运算符触发隐式转换
1 || ‘hello’ // 逻辑运算符触发隐式转换
boolean类型只有true和false两种值。
除值**0,-0,null,NaN,undefined,或空字符串（“”）**为false外，其余全为true
转化为string
-
显式：
String方法可以显式将值转换为字符串 -
隐式：
+运算符发下有两种情况可以触发(这里的+并非取正数运算符) -
有一侧操作数为
string类型 -
有一侧操作数为对象
转化为string类型的本质：需要转换为string的部分调用自身的toString方法(null/undefined返回字符串格式的null和undefined)
String([1,2,3]) // 1,2,3
String({x:1}) // [object Object]
1 + ‘1’ // 11
1 + {} // 1[object Object]
转化为number
- 显式：
Number方法可以显式将值转化为数字类型
Number的具体规则，ES5规范中给了一个对应的结果表
| 类型 | 结果 |
| — | — |
| undefined | NaN |
| null | +0 |
| Boolean | NaN |
| undefined | 参数为true返回1；false返回+0 |
| Number | 返回与之相等的值 |
| String | 有些复杂，举例说明 |
| Object | 三步走战略 |
- String: 空字符串返回0，出现任何一个非有效数字字符，返回NaN
console.log(Number(“1 3”)) // NaN
console.log(Number(“abc”)) // NaN
console.log(Number(“1a”)) // NaN
console.log(Number(“0x11”)) // 17
console.log(Number(“123”)) // 123
console.log(Number(“-123”)) // -123
console.log(Number(“1.2”)) // 1.2
Object
参考第八问，最后对返回的原始值执行Number方法
-
隐式：
number的隐式类型转换比较复杂，对需要隐式转换的部分执行Number： -
比较操作(
<, >, <=, >=) -
按位操作(
| & ^ ~) -
算数操作(
+ - * / %) 注意：+的操作数存在字符串时，为string转换 -
一元
+-操作
第十问：== 与 === 的区别
-
===是严格相等，要求数据类型和值都要相等；==只需要值相等。 -
==会发生隐式类型转换，===不会发生隐式类型转换。 -
==的转换规则:
null, undefined在==下互相等且自身等
| 被比较数B |
| — |
| | | Number | String | Boolean | Object |
| 比较数A |
| Number | A === B | A === ToNumber(B) | A === ToNumber(B) | A == ToPrimitive(B) |
| String | ToNumber(A) === B | ToNumber(A) === ToNumber(B) | ToNumber(A) === ToNumber(B) | ToPrimitive(B) == A |
| Boolean | ToNumber(A) === B | ToNumber(A) === ToNumber(B) | ToNumber(A) === ToNumber(B) | ToNumber(A) == ToPrimitive(B) |
| Object | ToPrimitive(A) == B | ToPrimitive(A) == B | ToPrimitive(A) == ToPrimitive(B) | A === B |
在上面的表格中，`ToNumber(A)`尝试在比较前将参数`A(Number)`转换为数字。`ToPrimitive(A)`通过尝试调用A的`A.toString()`和 `A.valueOf()`方法，将参数A转换为原始值(`Primitive`)。
第十一问：1 + {} 与 {} + 1的输出结果分别是什么？
通过上面的学习，当对象与其他元素相加时，对象会发生隐式类型转换，执行三步走战略：
-
执行
toPrimitive，判断对象是否有Symbol.toPrimitive，没有该方法 -
执行
({}).toString()，返回"[object Object]"，返回结果为原始值，转换结束
此时 1 + {}，一侧为string类型，将1进行ToString()转化为"1"，最终输出结果为 "1[object Object]"
注意： {} + 1输出的结果会和1 + {}一样吗？
{}在JavaScript中，不止可以作为对象定义，也可以作为代码块的定义。js引擎会把{} + 1解析成1个代码块和1个+1，最终输出结果为 1
答案
1[object Object]
1
常见习题
{} + {}
无法解析成两个代码块，两个对象都经过三步走战略，转化为原始值[object Object]，最终结果[object Object][object Object]
[] + {}
数组是特殊的对象，也需要三步走战略，arr.valueOf()仍是arr，所以需要继续调用toString()方法，[]返回""。最终返回结果为[object Object]
[] + []
两个arr经过三步走都返回"“，最终结果”"
{} + []
类似于{} + 1，{} + [] 相当于 {}; + []，一元+强制将""隐式转换为0，最终结果为0
第十二问：Object.is() 与 === 区别
Object.is()来进行相等判断时，一般情况下与 === 相同，它处理了一些特殊的情况，比如+0和 -0不再相等，两个NaN是相等的。
第十三问：你能灵活运用parseInt 与 parseFloat吗
parseInt：从数字类开始看，看到非数字类为止，返回原来的数。(小数点也属于非有效数字)
parseInt(‘123x’) -> 123
后话
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
