2023最新模块化前端面试题汇总（解答）

• JS面试：

与数据类型有关的内容

1、数据类型的分类

• 基本数据类型

Number、String、Boolean、Null、Undefined、Symbol、bigInt

（数据保存在栈中）

• 引用数据类型

object、Array、Date、Function、RegExp

（数据保存在堆中,object对象在栈里存储的是地址，地址指向堆中存储的数据）

2、判断数据类型的方法

js数据类型的判断主要有三种方法： typeof ，instanceof，Object.prototype.toString.call()

1).typeof(有局限性,主要用来判断基本数据类型)

• 判断一个字段是否存在：if(typeof a != 'undefined'),而不是使用if(a),因为如果a不存在的话，这样写会报错
• typeof 无法判断 null，array，object，因为返回的都是object
• typeof它返回值是一个字符串，该字符串说明运算数的类型。返回结果只有以下几种：number，string，boolean，object，undfined，function
• typeof console.log() //'undefined'
• typeof console.log   //'function'
• typeof(NaN)//'number'

console.log(typeof(1));  //number
console.log(typeof(NaN));  //number
console.log(typeof("123"));  //string
console.log(typeof("123" + 12));  //string
console.log(typeof("123" + Date));  //string
console.log(typeof(true));  //boolean
console.log(typeof(window));  //object
console.log(typeof(document));  //object
console.log(typeof(null));  //object
console.log(typeof([8]));  //object
console.log(typeof({a:1}));  //object
console.log(typeof(Date));  //function
console.log(typeof(sss));  //undefined
console.log(typeof(undefined));  //undefined

2).instanceof（是用来 判断数据是否是某个对象的实例，返回一个布尔值,主要用来判断引用数据类型,所有引用类型的祖先都是 Object 对象）

// 判断 p 是否为 Person 的实例
function Person(name) {
 this.name = name
}
const p = new Person('sunshine')
p instanceof Person // true

// 这里的 p 是 Person 函数构造出来的，所以顺着 p 的原型链可以找到Object的构造函数
p.__proto__ === Person.prototype // true
p.__proto__.__proto__ === Object.prototype // true

let arr = [1,2,3]
console.log(Object.prototype.toString.call(arr) === '[object Array]') // true
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true
let fn = function(){}
console.log(fn instanceof Object)  // true

3). Object.prototype.toString.call()   (对基本数据类型和引用数据类型都管用，无法区分自定义对象类型)

• 判断基本类型

Object.prototype.toString.call('stjd')
//"[object String]"
 
Object.prototype.toString.call(1)
//"[object Number]"
 
Object.prototype.toString.call(true)
//"[object Boolean]"

Object.prototype.toString.call(null)
//"[object Null]"

Object.prototype.toString.call(undefined)
//"[object Undefined]"

• 判断引用数据类型

Object.prototype.toString.call(function(){})  //这个方法就建立在js任何类型皆可视为对象**
// "[object Function]"
var date = new Date();
Object.prototype.toString.call(date);
//”[object Date]”
Object.prototype.toString.call([2])
//"[object Array]"
Object.prototype.toString.call({q:8})
//"[object Object]"
var reg = /[hbc]at/gi;
Object.prototype.toString.call(reg); 
// "[object RegExp]"
function Person(name, age) {
    this.name = name;
    this.age = age;
}
var person = new Person("Rose", 18);
Object.prototype.toString.call(person); 
//”[object Object]”

• 自定义封装

// 判断数据类型的函数
function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

// 使用
  if(this.getType(json) == 'Object'){
   console.log('Object类型')
  }else if (this.getType(json) == 'Array'){
   console.log('Array类型')
  } 

4).其他实用性也很强的方法：

• js中的isArray()是Array类型的一个静态方法，使用它可以判断一个值是否为数组。返回一个布尔值。

var arr = [1,2,3]
console.log(Array.isArray(arr))  //true

• 等号判断（===）

=：赋值运算符

==：判断是否相等：忽略了类型进行值的比较。

===：判断是否相等：先进行值的比较，如果值相等，再去比较类型。即带有类型的值的比较。

5).扩展

• null 和 undefined 的区别？【小tips：

  JavaScript中的undefined和null都表示没有值。

  undefined表示一个变量已经声明但是没有被赋值，或者一个对象属性不存在。

  null表示一个变量或者对象属性被明确地赋值为null，表示它没有值。

  在JavaScript中，undefined和null都被认为是false值，也就是说它们在布尔上下文中会被转换为false。】

相同：

在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

不同：

undefined 代表的含义是未定义，

定义了形参（在定义函数阶段定义的参数， 叫形式参数， 简称形参（相当于变量名）），没有传实参（再调用函数的阶段传入的值， 叫实际参数， 简称实参（相当于变量值）），显示undefined

一般变量声明了但还没有定义的时候会返回 undefined

对象属性名不存在时，显示undefined

函数没有写返回值，即没有写return，拿到的是undefined

null 代表的含义是空对象。也作为对象原型链的终点

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

• js数据类型转换

在JavaScript中类型转换有三种情况：

转换为数字（调用Number(),parseInt(),parseFloat()方法）

转换为字符串（调用.toString()或String()方法）

转换为布尔值（调用Boolean()方法） 还有隐式转换 注意：null、undefined没有.toString方法
 

​
转换为数字
Number()：可以把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回NaN
​
Number('1')   // 1
Number(true)  // 1
Number('123s') // NaN
Number({})  //NaN
​
​
parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。
parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2)  // NaN
parseInt('a123')  // NaN  如果第一个字符不是数字或者符号就返回NaN
parseInt('123a')  // 123
​
​
parseFloat(string)：解析一个参数并返回一个浮点数
​
parseFloat('123a')
//123
parseFloat('123a.01')
//123
parseFloat('123.01')
//123.01
parseFloat('123.01.1')
//123.01
​
隐式转换
let str = '123'
let res = str - 1 //122
str+1 // '1231'
+str+1 // 124
​
转换为字符串
.toString()  ⚠️注意：null,undefined不能调用
​
Number(123).toString()
//'123'
[].toString()
//''
true.toString()
//'true'
​
​
String() 都能转
String(123)
//'123'
String(true)
//'true'
String([])
//''
String(null)
//'null'
String(undefined)
//'undefined'
String({})
//'[object Object]'
​
​
隐式转换：当+两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串
​
let a = 1
a+'' // '1'
转换为布尔值
0, ''(空字符串), null, undefined, NaN会转成false，其它都是true
Boolean()
Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true
​
条件语句
​
let a
if(a) {
  //...   //这里a为undefined，会转为false，所以该条件语句内部不会执行
}
​
隐式转换 !!
​
let str = '111'
console.log(!!str) // true
 
 
{}和[]的valueOf和toString的返回结果？
valueOf：返回指定对象的原始值
​
对象                  返回值 
Array               返回数组对象本身。
Boolean             布尔值。
Date                存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function            函数本身。
Number              数字值。
Object              对象本身。这是默认情况。
String              字符串值。
                    Math 和 Error 对象没有 valueOf 方法。
​
toString：返回一个表示对象的字符串。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，
toString() 返回 "[object type]"，其中 type 是对象的类型。
​
({}).valueOf()   //{}
({}).toString()  //'[object Object]'
[].valueOf()    //[]
[].toString()   //''
​

const a = {};

const b = JSON.parse(JSON.stringfy(a)); //深拷贝

JSON.stringify 方法将某个对象转换成 JSON 字符串形式

JSON.parse（）