2022年最新前端面试题（学习！！！）

JS面试题

1、数据类型

• 基本数据类型：

   ES5：Null，undefined，String，Number，Boolean
   ES6:  Symbol（表示独一无二的值）
   ES10：BigInt（表示任意大的整数）
  

• 引用数据类型：（本质上是由一组无序的键值对组成）

  统称为Object类型，细分的话有：Object类型、Array类型、Date类型、RegExp类型、Function类型等
  

他们两个的区别和深入描述我写到另一篇文章里了，这是地址

2、 null 和 undefined 的区别：

** 相同点：**
1、在 if 语句中 null 和 undefined都会转为 false，两者用相等运算符比较也是相等的
2、Null 和 Undefined 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 null 和 undefined
** 不同点：**
1、**undefined 代表的含义是未定义**
	- 定义一个形参，没有传实参，显示的是 undefined
	- 一般变量声明了但还是没有定义的时候 会返回 undefined
	- 对象属性名不存在时，显示 undefined
	- 函数没有写返回值，即没有写 return，拿到的也是undefined
2、**null 代表的含义是 空对象，也作为对象原型链的终点 **
	- null 主要用于赋值给一些可能会返回对象的变量，作为初始化

3、ES10新增：BigInt表示任意大的整数

BigInt是一种内置对象，他提供了一种方法来表示大于2^53 - 1 的整数
这里提供一个我在编写过程中疑惑的时候看的一个小链接：JavaScript 里最大的安全的整数为什么是2的53次方减一？

Number类型有个最大安全值，即 2^53（9007199254740992），超过这个值就会出现问题
**BigInt数据类型出现的目的是比 Number数据类型支持的 范围更大的整数值 。在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要。使用BigInt的话，整数溢出 将不再是问题。**
此外，可以安全地使用 **更加准确时间戳、大整数ID** 等，而无需使用变通方法。

使用方式：

• 可以用直接在一个整数字面量后面加 n 的方式来定义一个BigInt，例如：10n
• 调用函数BigInt() 并传递一个整数值或字符串值

** 2^53 = 9007199254740992 **
1、要创建BigInt，只需在整数的末尾追加n即可。例如:
console.log(9007199254740995n);    // → 9007199254740995n
console.log(9007199254740995);     // → 9007199254740996
​
2、或者，可以调用BigInt()构造函数
BigInt("9007199254740995");    // → 9007199254740995n
​
// 注意最后一位的数字
9007199254740992 === 9007199254740993;    // → true
console.log(9999999999999999);    // → 10000000000000000

4、数据类型存储以及堆栈内存是什么

**基本数据类型**：**直接存储在栈内存中**，占据空间小，大小固定，属于被频繁使用的数据。
**引用数据类型**：**同时存储在占内存和堆内存中**，占据空间大，大小不固定。
引用数据类型：**将指针存在栈中，将值存在堆中**。当我们把对象赋值给另一个变量时，赋值的是对象的指针，指向同一块内存地址，意思是，**变量中保存的实际上只是一个指针，这个指针指向堆中实际的值、数组、对象等**

5、堆(heap)和 栈(stack)有什么区别存储机制

栈：是一种连续存储的数据结构，具有先进后出后进先出的优质
	通常的操作有：入栈（压栈）、出栈 和 栈顶元素。想要读取栈内的某个元素，就是将其之间的所有元素出栈才能解决。
堆：是一种非连续的树形储存数据结构，具有队列优先，先进先出的特质
	每个节点都有一个值，整棵树都是经过排序的。特点是根节点的值最小（或最大），且根节点的两个子树也是一个堆。常用来实现优先队列，存取随意。

js数据类型判断，条件分支

1、if语句和逻辑运算

所有**基本类型**中Boolean值是 false 的只有6个，分别是：** 0、NaN、""、null、undefined、false **
引用类型的Boolean都是 true

2、逻辑运算符

&& 与 、|| 或 、！非

3、数据类型判断（Object.prototype.toString.call()）

1、typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用
2、`instanceof` 只能正确判断引用数据类型  而不能判断基本数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型
3、constructor 似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心
4、**Object.prototype.toString.call()** 完美的解决方案，可以通过toString() 来获取每个对象的类型，

1、typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用
console.log(typeof 2);    // number
console.log(typeof null); // object

2、`instanceof` 只能正确判断引用数据类型  而不能判断基本数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

3、constructor 似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
console.log((2).constructor === Number); // true

4、Object.prototype.toString.call() 完美的解决方案，可以通过toString() 来获取每个对象的类型，
`Object.prototype.toString.call()` 使用 Object 对象的原型方法 toString 来判断数据类型：
var a = Object.prototype.toString;
console.log(a.call(2));   		// [object Number]
console.log(a.call(true));  	// [object Boolean]
console.log(a.call('str'));		// [object String]
console.log(a.call([]));		// [object Array]
console.log(a.call(function(){}));	 // [object Function]
console.log(a.call({}));		// [object Object]
console.log(a.call(undefined));	// [object Undefined]
console.log(a.call(null));		// [object Null]
补充：基本数据类型赋值的时候  赋的是具体的值   引用数据类型传的是地址，一个变另一个跟着变

js数据类型转换

在JavaScript中类型转换有三种情况：
1、转换为数字：调用 Number() 、parseInt() 、parseFloat()
2、转换为字符串：调用 .toString() 或 String() 【注意：null 和 undefined 没有 .toString()方法 】
3、转换为布尔值：调用 Boolean() 方法
4、隐式转换

​
====== 转换为数字 =========
1、Number()：可以把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回NaN​
Number('1')   // 1
Number(true)  // 1
Number('123s') // NaN
Number({})  //NaN
​
2、parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。
【注意：如果字符串第一个字符不是数字或者符号就返回NaN】
parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2)  // NaN
parseInt('a123')  // NaN  如果第一个字符不是数字或者符号就返回NaN
parseInt('123a')  // 123
​
​3、parseFloat(string)：解析一个参数并返回一个浮点数
parseFloat('123a')
//123
parseFloat('123a.01')
//123
parseFloat('123.01')
//123.01
parseFloat('123.01.1')
//123.01
​
4、隐式转换
let str = '123'
let res = str - 1 //122
str+1 // '1231'
+str+1 // 124
​
====== 转换为字符串=========
1、.toString()  ⚠️注意：null,undefined不能调用

Number(123).toString()
//'123'
[].toString()
//''
true.toString()
//'true'
​
2、String() 都能转
String(123)
//'123'
String(true)
//'true'
String([])
//''
String(null)
//'null'
String(undefined)
//'undefined'
String({})
//'[object Object]'

3、隐式转换：当+两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串
let a = 1
a+'' // '1'

======= 转换为布尔值=========
1、Boolean()【0, ''(空字符串), null, undefined, NaN会转成false，其它都是true】
Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true
​
2、条件语句
let a
if(a) {
  //...   //这里a为undefined，会转为false，所以该条件语句内部不会执行
}
​
3、隐式转换 !!
let str = '111'
console.log(!!str) // true
 
===== {}和[]的valueOf和toString的返回结果？==========
1、valueOf：返回指定对象的原始值​
对象                  返回值 
Array               返回数组对象本身。
Boolean             布尔值。
Date                存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function            函数本身。
Number              数字值。
Object              对象本身。这是默认情况。
String              字符串值。
                    Math 和 Error 对象没有 valueOf 方法。
​
2、toString：返回一个表示对象的字符串。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，
3、toString() 返回 "[object type]"，其中 type 是对象的类型。
({}).valueOf()   //{}
({}).toString()  //'[object Object]'
[].valueOf()    //[]
[].toString()   //''
​