Web前端最全重学前端笔记，字节跳动的面试问题

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

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

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

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

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

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

• JavaScript

• • 基本类型
• • Undefined

• Null

• Boolean

• String

• Number【为啥0.1+0-2≠0.3】

• Symbol

• Object

• 类型转换

• • • **StringToNumber**

• **NumberToString**

• • • 详解js中Number()、parseInt()和parseFloat()的区别

• parseInt() 和parseFloat() 的区别在于：

• **装箱转换**

• 拆箱转换

• JavaScript对象

• JavaScript 对象的两类属性

JavaScript

========================================================================

基本类型

---

JavaScript语言每一个值都属于某一种数据类型，JavaScript语言规定了7种语言类型，语言类型广泛用于变量、函数参数、表达式、函数返回值等场合。

七种语言分别是：

Undefined

Null

Boolean

String

Number

Symbol

Object

Undefined

Undefined：表示未定义，类型只有一个值，就是Undefined。任何变量在赋值之前是Undefined类型、值为Undefined，一般可以用全局变量Undefined（就是名为Undefined的这个变量）来表达这个值，或者void运算来吧任意一个表达式变成Undefined值。

但是，因为JavaScript的代码Undefined是一个变量，而并非是一个关键字，所以为了避免无意中被篡改，可以收用void 0 来获取Undefined

Undefined和 Null的差别：

Null表示的是定义了但是为空，所以在实际编程中，一般不会把变量赋值给Undefined，这样可以保证所有值为Undefined的变量，都是从未赋值的自然状态。

Null

Null类型也是一个值，就是null，语义表示为空直与undefined不同，null是JavaScript的关键字，所以在任何代码中，都可以放心使用null关键字来获取null值。

Boolean

Boolean类型有两个值，true和false，它用于表示逻辑意义上的真和假，同样有关键字true和false 分别来表示。

String

String用于标识文本数据，string最大的长度是2^53-1，一般开发中是够用的，但是string的意义并非字符串，而是字符串UTF16编码，所以字符串的最大长度，实际上是受字符串的编码长度影响的。

JavaScript中的字符串是永远无法变更的，一旦字符串构造出来，无法用任何方式改变字符串的内容，所以字符串具有值类型的特征。

Number【为啥0.1+0-2≠0.3】

Number类型表示通常意义上的“数字”，但是在计算中，会有一定的精度限制。

·lnfinity：无穷大

·-lnfinity：负无穷大

JavaScript种有 +0和 -0，在加法运算中没有区别，但在除法的浐河需要注意，忘记检测除以-0，会得到负无穷大的情况而导致错误，而检测+0和-0 的正确检测 1/X 是 infinity还是-infinity。

根据双精度浮点数【IEEE 745-2008 规定】的定义，number类型中有效的整数范围是 -0×1fffffffffffff 至 0×1fffffffffffff,所以number无法精确表示此范围外的整数。

同样根据浮点数的定义，非整数的number类型无法用==（===也不行）来比较，例如JavaScript中著名的0.1+0.2≠0.3问题

console.log( 0.1 + 0.2 == 0.3); //控制台输出false

这是浮点数运算的特点，所以浮点数运算的精度问题导致等式左右的结果并不是严格相等，而是相差了微小的值。

实际上，这里的错误指的不是结论，而是比较的方法，正确的比较方法是使用JavaScript提供的最小精度值：Number.EPSILON（ES6在number对象上新增的一个极小常量，表示1与大于1的最小浮点数之间的差）

console.log( Math.abs( 0.1 + 0.2 - 0.3) <= Number.EPSILON); //控制台输出true

检查等式左右两边的绝对值是否小于最小精度，才是正确的比较浮点数的方法。

Symbol

Symbol是ES6中引入的新类型，他是一切非字符串的对象key 的集合，在ES6规范中，整个对象系统被symbol重塑。

Symbol可以具有字符串类型的描述，但是记是描述相同，Symbol也不相同。

创建symbol 的方式是使用全局的symbol函数。

var mySymbol = Symbol(“my symbol”);

一些标准提到symbol可以在全局symbol函数的属性中找到，例如：可以使用Symbol.iterator来定义for…of在对象上的行为。

var o = new Object

o[Symbol.iterator] = function(){

var v = 0

return{

next: function(){

return { value: v++, done: v > 10}

}

}

};

for (var v of o)

Console.log(v); //控制台输出0 1 2 3 4 …… 9

定义了iterator之后，用for (var v of o)就可以调用这个函数，然后就可以根据函数的行为，产生一个for…of的行为。

这里给对象o添加了Symbol.iterator属性，并且按照迭代器的要求定义了一个0~10 的迭代器，之后就可以在for…of里使用这个o对象。

Object

Object 是 JavaScript 中最复杂的类型，也是 JavaScript 的核心机制之一。

Object 表示对象的意思，它是一切有形和无形物体的总称。

在 JavaScript 中，对象的定义是“属性的集合”。属性分为数据属性和访问器属性，二者都是 key-value 结构，key 可以是字符串或者 Symbol 类型。

事实上，JavaScript 中的“类”仅仅是运行时对象的一个私有属性，而 JavaScript 中是无法自定义类型的。

Number、String 和 Boolean，三个构造器是两用的，当跟 new 搭配时，它们产生对象，当直接调用时，它们表示强制类型转换。

Symbol 函数比较特殊，直接用 new 调用它会抛出错误，但它仍然是 Symbol 对象的构造器。

可以把对象的方法在基本类型上使用，比如：

console.log(“abc”.charAt(0)); //a

在原型上添加方法，可以应用于基本类型，比如，在 Symbol 原型上添加了 hello 方法，在任何 Symbol 类型变量都可以调用。

Symbol.prototype.hello = () => console.log(“hello”);

var a = Symbol(“a”);

console.log(typeof a); //symbol，a并非对象

a.hello(); //hello，有效

所以运算符提供了装箱操作，它会根据基础类型构造一个临时对象，使得能在基础类型上调用对应对象的方法。

类型转换

---

因为 JS 是弱类型语言，所以类型转换发生非常频繁

较为复杂的部分是 Number 和 String 之间的转换，以及对象跟基本类型之间的转换。

StringToNumber

字符串到数字的类型转换，存在一个语法结构，类型转换支持十进制、二进制、八进制和十六进制，

比如：30；0b111；0o13；0xFF。

二进制0b开头

八进制0o开头

十六进制0x开头

parseInt(num,8); //八进制转十进制

parseInt(num,16); //十六进制转十进制

parseInt(num).toString(8) //十进制转八进制

parseInt(num).toString(16) //十进制转十六进制

parseInt(num,2).toString(8) //二进制转八进制

parseInt(num,2).toString(16) //二进制转十六进制

parseInt(num,8).toString(2) //八进制转二进制

parseInt(num,8).toString(16) //八进制转十六进制

parseInt(num,16).toString(2) //十六进制转二进制

parseInt(num,16).toString(8) //十六进制转八进制

JavaScript 支持的字符串语法还包括正负号科学计数法，可以使用大写或者小写的 e 来表示：1e3；-1e-2。

Number(‘30’) // 30

Number(‘0b111’) // 7

Number(‘0o13’) // 11

Number(‘0xFF’) // 255

Number(‘1e3’) // 1000

Number(‘-1e-2’) // -0.01

parseInt 和 parseFloat 并不使用这个转换，所以支持的语法跟这里不尽相同。在不传入第二个参数的情况下，parseInt 只支持 16 进制前缀“0x”，而且会忽略非数字字符，也不支持科学计数法。在一些古老的浏览器环境中，parseInt 还支持 0 开头的数字作为 8 进制前缀，这是很多错误的来源。所以在任何环境下，都建议传入 parseInt 的第二个参数，而 parseFloat 则直接把原字符串作为十进制来解析，它不会引入任何的其他进制。多数情况下，Number 是比 parseInt 和 parseFloat 更好的选择。

要实现 StringToNumber，我们就要根据不同的 Number 输入进行识别，最终统一转化为十进制。

NumberToString

NumberToString 相比于 StringToNumber 会简单一些，类似于实现 toString(raidx)方法。这里主要需要了解的知识点是：如何把十进制的值二进制/八进制/十六进制。这里需要一些进制转换的规则：

.整数十进制转化为 N 进制时，除 N 取余，当余数<N 时，最终结果逆序排列即可

.小数十进制转化为 N 进制时，乘 N 取整，当乘积为整数时，最终结果正序排列即可（可能存在无限循环的情况，所以最好设定一个最大宽度）

详解js中Number()、parseInt()和parseFloat()的区别

Number()

如果是Boolean值，true和false值将分别被转换为1和0。

如果是数字值，只是简单的传入和返回。

如果是null值，返回0。

如果是undefined，返回NaN。

如果是字符串：

a. 如果字符串中只包含数字时，将其转换为十进制数值，忽略前导0

b. 如果字符串中包含有效浮点格式，如“1.1”，将其转换为对应的浮点数字，忽略前导0

c. 如果字符串中包含有效的十六进制格式，如“0xf”，将其转换为相同大小的十进制数值

d. 如果字符串为空，将其转换为0

e. 如果字符串中包含除上述格式之外的字符，则将其转换为NaN

如果是对象，则调用对象的valueOf（）方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString（）方法，然后再依照前面的规则转换返回的字符串值。

例：

var num1 = Number(“Hello world”);　　　　　　 //NaN

var num2 = Number(“”);　　　　　　　　　　　　//0

var num3 = Number(“0000011”);　　　　　　　 //11

二：parseInt()

处理整数的时候parseInt()更常用。parseInt()函数在转换字符串时，会忽略字符串前面的空格，知道找到第一个非空格字符。

如果第一个字符不是数字或者负号，parseInt() 就会返回NaN，同样的，用parseInt() 转换空字符串也会返回NaN。

如果第一个字符是数字字符，parseInt() 会继续解析第二个字符，直到解析完所有后续字符串或者遇到了一个非数字字符。

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。

基是由parseInt()方法的第二个参数指定的，所以要解析十六进制的值，当然，对二进制、八进制，甚至十进制（默认模式），都可以这样调用parseInt()方法。

例：

var num1 = parseInt(“AF”,16);　　　//175

var num2 = parseInt(“AF”);　　　　//NaN

var num3 = parseInt(“10”,2);　　　//2　　(按照二进制解析)

var num4 = parseInt(“sdasdad”);　　//NaN

三：parseFloat()

与parseInt() 函数类似，parseFloat() 也是从第一个字符（位置0）开始解析每一个字符。也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。

也就是说，字符串中第一个小数点是有效的，而第二个小数点就是无效的了，它后面的字符串将被忽略。

parseFloat() 只解析十进制，因此它没有第二个参数指定基数的用法

如果字符串中包含的是一个可解析为正数的数（没有小数点，或者小数点后都是零），parseFloat() 会返回整数。

例：

var num1 = parseFloat(“123AF”);　　　　　　//123

var num2 = parseFloat(“0xA”);　　　　　　　//0

var num3 = parseFloat(“22.5”);　　　　　　 //22.5

var num4 = parseFloat(“22.3.56”);　　　　　//22.3

var num5 = parseFloat(“0908.5”);　 　　　 //908.5

parseInt() 和parseFloat() 的区别在于：

parseFloat() 所解析的字符串中第一个小数点是有效的，而parseInt() 遇到小数点会停止解析，因为小数点并不是有效的数字字符。

parseFloat() 始终会忽略前导的零，十六进制格式的字符串始终会被转换成0，而parseInt() 第二个参数可以设置基数，按照这个基数的进制来转换。

装箱转换

每一种基本类型 Number、String、Boolean、Symbol 在对象中都有对应的类，所谓装箱转换，正是把基本类型转换为对应的对象，它是类型转换中一种相当重要的种类。前文提到，全局的 Symbol 函数无法使用 new 来调用，但我们仍可以利用装箱机制来得到一个 Symbol 对象，我们可以利用一个函数的 call 方法来强迫产生装箱。我们定义一个函数，函数里面只有 return this，然后我们调用函数的 call 方法到一个 Symbol 类型的值上，这样就会产生一个 symbolObject。我们可以用 console.log 看一下这个东西的 type of，它的值是 object，我们使用 symbolObject instanceof 可以看到，它是 Symbol 这个类的实例，我们找它的 constructor 也是等于 Symbol 的，所以我们无论从哪个角度看，它都是 Symbol 装箱过的对象：

var symbolObject = (function(){ return this; }).call(Symbol(“a”));

console.log(typeof symbolObject); //object

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。