2024高频前端面试题 JavaScript 和 ES6 篇

HTML和CSS篇： 2024高频前端面试题 HTML 和 CSS 篇-优快云博客

Vue2 和 Vue3 篇： 2024高频前端面试题 Vue2 和 Vue3 篇-优快云博客

一. JavaScript篇

1.  数据类型有哪些

1) 基本数据类型

数值(Number)、字符串(String)、布尔值(Boolean)、Undefined、Null、Symbol、BigInt

可能问：Symbol、BigInt 的使用场景

2)  引用数据类型 

对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

3) 存储区别 

基本数据类型存储在栈中

引用类型的对象存储于堆中

2. 检测数据类型有哪些方法 

1）typeof

除了对象、数组、null检测为object，其他可以正确检测其类型

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string    
console.log(typeof function(){});    // function
console.log(typeof undefined);       // undefined

console.log(typeof {});              // object
console.log(typeof []);              // object
console.log(typeof null);            // object

2）instanceof

只能正确判断引用数据类型，而不能判断基本数据类型 （返回的是布尔值）

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

3）constructor

都可以正确判断其类型 （判断不了null、undefined）

console.log((2).constructor === Number); // true
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

4）Object.prototype.toString.call ( obj )

使用 Object 对象的原型方法 toString 来判断数据类型

let a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));

3. 操作数组会改变和不会改变原数组的方法有哪些

1) 改变原数组

添加元素类（返回新的长度）：

push( ) 把元素添加到数组尾部

unshift( ) 在数组头部添加元素

删除元素类（返回的是被删除的元素）：

pop( ) 移除数组最后一个元素

shift( ) 删除数组第一个元素

颠倒顺序：

reverse( ) 在原数组中颠倒元素的顺序

插入、删除、替换数组元素（返回被删除的数组）：

splice(a, b, c…n)

a 代表要操作数组位置的索引值，必填

b 代表要删除元素的个数，必须是数字，可以是0，如果没填就是删除从a到数组的结尾

c…n 代表要添加到数组中的新值

排序：

sort( ) 对数组元素进行排序

2) 不改变原数组

concat()  连接两个或更多数组，返回结果

slice()  截取一段数组，返回新数组

join()  把数组的所有元素放到一个字符串

toString()  把数组转成字符串

indexOf()  搜索数组中的元素，并返回他所在的位置

filter()  挑选数组中符合条件的并返回符合要求的数组

every()  检测数组中每个元素是否都符合要求

some()  检测数组中是否有元素符合要求

4. 判断数组的方式有哪些方法

1）通过 Object.prototype.toString.call ( obj ) 判断

Object.prototype.toString.call(obj).slice(8,-1) === 'Array' //true

Object.prototype.toString.call(obj).indexOf('Array') > -1  //true

2）instanceOf

console.log(arr instanceOf Array)  //true

3）constructor

arr.constructor.toString( arr ).indexOf('Array') > -1  //true

4）通过ES6的 Array.isArray( arr ) 做判断

Array.isArray( arr )  //true

5）通过原型链做判断

arr.__proto__ === Array.prototype  //true

6）通过Array.prototype.isPrototypeOf( obj )

Array.prototype.isPrototypeOf( obj )  //true

5. 遍历数组的方法有哪些 

1）for循环         2）for…in         3）for…of        4）forEach

for in 和 for of 都可以循环数组，for in 输出的是数组的索引，而for of 输出的是数组的每一项的值

6. 遍历对象的方法有哪些 

1）Object.keys( obj )    2）for…in    3）Object.getOwnPropertyNames( obj )

for in遍历的是数组的索引，对象的属性，以及原型链上的属性

7. forEach和Map的区别 

1）forEach 返回值为 undefined，会修改原数组，map 有返回值，会返回新的数组，不会修改原数组

2）map 返回的是新数组，可以进行链式调用，而 forEach 不能

3）map 的执行速度比forEach的快

8. 数组去重有哪些方法 

1）利用ES6的Set去重，适配范围广，效率一般，书写简单

function unique(arr) {
      return [...new Set(arr)]
}

2）任意数组去重，适配范围广，效率低

function unique(arr) {
      var result = []; // 结果数组
      for (var i = 0; i < arr.length; i++) {
           if (!result.includes(arr[i])) {
               result.push(arr[i]);
           }
      }
      return result;
}

8. null 和 undefined 的区别

null 和 undefined不能通过 == 来判断。

undefined

这个变量从根本上就没有定义 

一般变量声明了但还没有定义的时候会返回 undefined，转化数值时为NaN

隐藏式 空值

null

这个值虽然定义了，但它并未指向任何内存中的对象

主要用于给一些可能会返回对象的变量赋值，作为初始化 ，转化数值时为 0

声明式 空值

un