JavaScript、ES6 高频重点面试题

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); //true
  console.log(People.prototype.__proto__ === Object.prototype); //true
  console.log(Object.prototype.__proto__); //null
  console.log(s instanceof Student); //只要在原型链上，都为true
  console.log(s instanceof People); //只要在原型链上，都为true
  console.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