JavaScript、ES6 高频重点面试题
Web 前端重点面试题
汇总了 2023 年各互联网大厂以及中小型创业公司 JavaScript+ES6 相关的最新高频面试题
数据类型和变量
Interview questions
1、JS 有哪些数据类型，如何判断这些数据类型 ？（腾讯、阿里、滴滴、货拉拉、百度、招银、字节）
2、 number 类型表示整数的最大范围（字节）
3、什么是变量提升 ？（腾讯、网易、小米）
4、typeof(NaN) 返回什么 ？（滴滴）
5、 typeof(null) 为什么返回的是 ‘object’（滴滴）
6、null 和 undefined的区别 ？（同花顺、滴滴）
7、console.log([] == false）的输出结果（同花顺）
8、== 和 === 的区别？（滴滴）
9、const、let、var 区别（叠纸、字节）
10、 const 定义的值一定是不能改变的吗？（滴滴）
11、 const 声明了数组，还能 push 元素吗，为什么？（阿里）
12、JS 获取字符串的第 N 个字符（网易）
13、const 声明生成对象的时候，如何使其不可更改（字节）
14、 这两种方式的区别 ？typeof 判断（字节）
const str1 = “abc”;
const str2 = new String(“abc”);
JS 数据类型面试题答案解析
关于答案解析
1、JS 有哪些数据类型，如何判断这些数据类型 ？（腾讯、阿里、滴滴、货拉拉、百度）
答案解析
最新的 ECMAScript 标准定义了 8 种数据类型（7 种基本数据类型、1 种引用数据类型）
分类 数据类型
7 种基本数据类型 string（字符串）、number（数字）、boolean（布尔）、undefined（未定义）、null（空）、Symbol（符号）、BigInt（数值类型，表示任意精度的整数）
1 种引用数据类型 Object 对象：Array（数组）、Function（函数）、Date（时间）等
JS 检测数据类型的 4 种方式
typeof
instanceof
constructor
Object.prototype.toString.call()
这四种方法各有自己的优缺点，我们可以根据自己的需要去选择。
① 数据类型检测方法一：typeof
详细解读
语法
typeof 变量;
//或
typeof 变量;
例子
typeof 1; //‘number’
typeof “”; //‘string’
typeof true; //‘boolean’
typeof undefined; // ‘undefined’
typeof null; //‘object’
typeof [1, 2, 3]; //‘object’
typeof {}; //‘object’
typeof function () {}; //‘function’
typeof Symbol(); //‘symbol’
typeof 的返回值类型为字符串类型
typeof 判断基本数据类型时，除了 null 的输出结果为’object’ 其它类型都能正确判断
typeof 判断引用数据类型时，除了判断函数会输出’function’ 其它都输出’object’
注意点：
null 的数据类型是 object （null 是对一个空对象的引用，是一个占位符）
typeof 并不能区分引用数据类型（Array 数组、Date 时间）等
所以我们可以使用 instanceof 来判断引用数据类型
② 数据类型检测方法二：instanceof
详细解读
语法：
obj1 instanceof obj2; // 判断obj1是否为obj2的实例
instanceof 用来判断两个对象是否属于实例关系，通过这种关系来判断对象是否属于某一类型。（但不能判断对象具体属于哪种类型）。
instanceof 可以准确判断引用数据类型，它的原理是：检测构造函数的 prototype 属性是否在某个实例对象的原型链上。
instanceof 返回值为布尔值
点击查看源代码：
<script>class People {constructor(name, age) {this.name = name;this.age = age;}eat() {console.log(`${this.name}正在吃饭`);}}//Student类继承People类class Student extends People {constructor(name, age, id) {super(name, age);this.id = id;}study() {console.log(`${this.name}正在学习`);}}const s = new Student("小明", 15, "0001");console.log(s.__proto__ === Student.prototype);console.log(Student.prototype.__proto__ === People.prototype); //trueconsole.log(People.prototype.__proto__ === Object.prototype); //trueconsole.log(Object.prototype.__proto__); //nullconsole.log(s instanceof Student); //只要在原型链上，都为trueconsole.log(s instanceof People); //只要在原型链上，都为trueconsole.log(s instanceof Object); //只要在原型链上，都为true
</script>
③ 数据类型检测方法三：constructor（构造函数）
详细解读
语法：
“”.constructor === String; // true
var num = 1;
num.constructor === Number; // true
true.constructor === Boolean; // true
[].constructor === Array; // true
var obj = {};
obj.constructor === Object; // true
当一个函数 F 被定义时，JS 引擎会为 F 添加 prototype 原型，然后在 prototype 上添加了一个 constructor 属性，并让其指向 F 的引用
当执行 const f = new F() 时，F 被当成了构造函数，f 是 F 的实例对象，此时 F 原型上的 constructor 传递到了 f 上，因此f.proto.constructor===F简写成f.constructor === F
从上面的整个过程来看，构造函数 F 就是新对象 f（实例）的类型。所以如果某个实例的 constructor 指向某个构造函数，那这个构造函数就是这个实例的类型。
注意：
constructor 是不稳定的，因为开发者可以重写 prototype,重写后，原有的 constructor 引用会丢失，需要我们重新指定 constructor 的引用
在没有重新指定时，constructor 会默认为 Object
为什么重写 prototype 后，constructor 的默认值会为 Object 呢？
当 F.prototype={ }时，{ }是 new Object 的字面量（Object 的实例），所以 Object 原型上的 constructor 会被传递给{ }，Object 的 constructor 指向的就是 Object 本身。
④ 、数据类型检测方法四：Object.prototype.toString.call()
详细解读
toString()是 Object 的原型方法，调用该方法，默认返回当前对象的 [object type]。其中 type 就是对象的类型。
Object对象，直接调用toString() 就能返回 [object Object]
其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息
Object.prototype.toString.call(“”); // [object String]
Object.prototype.toString.call(1); // [object Number]
Object.prototype.toString.call(true); // [object Boolean]
Object.prototype.toString.call(Symbol()); // [object Symbol]
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(new Function()); // [object Function]
Object.prototype.toString.call(new Date()); // [object Date]
Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call(document); // [object HTMLDocument]
Object.prototype.toString.call(window); // [object Window]
2、null 和 undefined 的区别 ？
答案解析
undefined（未定义）：当一个变量被定义（声明）但并没有赋值时，他的初始值就是 undefined。
null（空）：表示对一个空对象的引用。
当一个变量定好之后，未来是用来保存对象的引用时，我们可以给他赋初始值为 null。
当一个对象使用完，需要对其进行释放内存时，可以将其值设置 null （js 会自动垃圾回收）
相同点：
undefined 和 null 都是基本数据类型，保存栈中。
undefined 和 null 转换为 boolean 布尔值都为 false
不同点:
两者转换为数字类型时，其值不一样
Number(undefined); //NaN
Number(null); //0
特殊点:
undefined == null; //true
3、基本数据类型和引用数据类型的区别？
答案解析
比较 基本数据类型 引用数据类型
数据存放位置：
基本数据类型存放在栈中，数据大小确定，内存空间大小可以分配 引用数据类型存放在堆中，每个空间大小不一样，要根据情况进行特定的配置
变量存储内容：
变量中存储的是值本身 变量存储的是地址
变量用来赋值时：
把变量的值复制一份去赋值 把变量的内存地址复制一份去赋值
存储内容大小：
存储值较小 存储值较大
栈和堆的的介绍
详细解读
当我们创建数据时就会占用内存，在内存中主要开辟两类空间：堆内存 和 栈内存
比较 栈（线程） 堆（进程，线程共享）
大小固定：
创建时，确定大小（值大小固定），故可能会溢出 大小不固定，可随时增加
存储类型：
存储基本数据类型及引用类型数据的堆地址 存储引用类型数据
如何访问：
按值访问 按引用（堆内存地址）访问
特点 ：
空间小，运行效率高 空间大，运行效率相对较低
存放规则：
按顺序存放，先进后出 无序存储，可根据引用（地址）直接获取
实例:
基本类型和引用类型赋值的区别
a 变量是基本数据类型,他在赋值是把 a 的值复制一份给到 b
所以 b = 10 ，最后我们修改 a 的值，并不会响影到 b
image-20220513164139171
栈内存中存着变量 obj 对堆内存中的地址，而堆内存中存着对应地址的数据内容
当 obj2=obj 时，其实是把 obj 中保存的地址赋值给了 obj2,所以本质上 obj===obj2 比较时,比较的是地址，地址始终没有变，所以两者是全等的。
我们在操 obj.name = ‘小丽’ 时，操作的是堆内存中的数据，所以 obj.name 和 obj2.name 的值是一样的。
4、typeof(NaN)返回结果？
答案解析
NaN 不是数字的数字类型，所以 typeof(Na