基础-必会知识（上）
1 基础-必会知识（上）
【考点简介】
【例题示例】
1.1 请问在JS中有哪些数据类型？
【考点映射】
-
JS数据类型
-
基本数据类型与引用数据类型区别总结
【频率】★★★★★
【难度】☆
【参考答案】
JS数据类型一共有7种，分为基本数据类型和引用数据类型
基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol、BigInt
Symbol：ES6引入了一种新的原始数据类型，表示独一无二的值，主要用于解决属性名冲突的问题，做为标记
BigInt：新增数据类型，是ES2020新增加的，精度大于 2^53 - 1， 是比Number类型支持的范围更大的整数值，在对大整数执行数***算时，使用BigInt，会减少整数溢出问题
创建方式：BigInt(value)、在一个整数字面量后面加 n
let a = 10n; let b = BigInt(10); console.log(a === b); // true
注意：由于在Number 与 BigInt 之间进行转换会损失精度，建议仅在值可能大于2^53 时使用 BigInt类型，并且不在两种类型之间进行相互转换。
与Number不同点：
（1）、不能用于 Math 对象中的方法；
（2）、不能和任何 Number 实例混合运算，两者必须转换成同一种类型（ BigInt 变量在转换成 Number 变量时可能会丢失精度）
引用数据类型：对象(Object)，其中包含了日期（Date）、函数（Function)、数组（Array）、正则（RegExp）等
两者总结区别：
（1）、声明变量时不同的内存分配：
基本：存储在栈中的简单数据段，它们的值直接存储在变量访问的位置
原因：基本类型数据占据的空间是固定的，所以将他们存储在较小的内存区域——栈，便于迅速查寻变量的值
引用：存储在堆中的对象，存储在变量处的值是一个指针，指向存储对象的内存地址
原因：引用类型数据的大小会改变，不能把它放在栈中，否则会降低变量查寻速度，相反，地址的大小是固定的，可以存在栈中
（2）、不同的内存分配机制也带来了不同的访问机制
引用：js中不允许直接访问保存在堆内存中的对象，在访问一个对象时，首先得到对象在堆内存中的地址，按照这个地址去获得对象中的值（引用访问）
基本：可直接访问
（3）、复制变量时的不同
基本：变量复制时，会将原始值的副本赋值给新变量，此后两变量是完全独立的，他们只是拥有相同的值而已（深拷贝）
引用：变量复制时，会把内存地址赋值给新变量，新旧变量都指向了堆内存中的同一个对象，任何一个作出的改变都会影响另一个（浅拷贝）（深拷贝浅拷贝对比详见下3.3）
（4）、参数传递的不同（把实参复制给形参的过程）
由于内存分配的差别，两者在传参时也有区别
基本：只是把变量里的值传递给参数，之后参数和这个变量互不影响
引用：传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部，因为它们都指向同一个对象
1.2 请问Undefined与Null有何异同点？
【考点映射】
-
Undefined与Null异同点
【频率】★★★★★
【难度】☆
【参考答案】
共同点：都是基本类型，保存在栈中
不同点：
Undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。典型用法：
-
变量被声明了，但没有赋值时，就等于undefined
-
调用函数时，应该提供的参数没有提供，该参数等于undefined
-
对象没有赋值的属性，该属性的值为undefined
-
函数没有返回值时，默认返回undefined
Null：
表示"没有对象"，即该处不应该有值，转为数值时为0。典型用法是：
-
作为函数的参数，表示该函数的参数不是对象
-
作为对象原型链的终点
注意：
undefined == null; //true undefined === null; //false
ECMAScript 规范： null 和 undefined 的行为很相似，并且都表示 一个无效的值，那么它们所表示的内容也具有相似性，故他们相等。
全等操作 === 在比较相等性的时候，两者不是同一类型值，会发生类型转换，故两者不全等。
Number(undefined); // NaN Number(null); // 0
1.3 请问如何判断js变量的数据类型？
【考点映射】
-
JS数据类型判断方法（面试时极可能现场撕代码）
-
各方法适用场景及局限
【频率】★★★★★
【难度】☆☆
【参考答案】
常见判断方法有以下四种：
-
typeof xx
返回一个字符串（小写），用来判断：Undefined、String、Number、Boolean、Symbol、Object、Function，无法检测引用类型里的Array
优点：可区分Object与Function
缺点：（1）对于 Null ，返回 object 类型
原因：Null类型只有一个null值，该值表示一个空对象指针（出自JavaScript高级程序设计）
typeof的检测原理：不同的对象在底层都表示为二进制，在js中二进制前（低）三位存储其类型信息为：000: Object、100：String、110： Boolean、1： Number。null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"。
（2） 对于Array、Date、RegExp都会返回object，不能更详细的区分
console.log(typeof '12');// string console.log(typeof 12);// number console.log(typeof undefined);// underfined console.log(typeof true);// boolean console.log(typeof null);// object
-
xx instanceof xx
返回true/false，只能判断引用类型 ，无法检测基本类型
判断原理：判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。简单来说：能验证new构造函数创建出来的实例，左边的对象是否是右边的类的实例，属于验证式判断类型
缺点：只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型（原型链上的都会返回true）
console.log('abc' instanceof String);// false
console.log(
String('abc') instanceof String);// true console.log(12 instanceof Number);// false
console.log(new Number(12) instanceof Number);// true console.log(true instanceof Boolean);// false
console.log(new Boolean(true) instanceof Boolean);// true console.log({name:'yy'} instanceof Object);// true
console.log(new Object({name:'yy'}) instanceof Object);// true console.log(['12','123'] instanceof Object);// true console.log(['12','123'] instanceof Array);// true
console.log(new Array('12',32) instanceof Object);// true console.log(new Array('12',32) instanceof Array);// true console.log(function(){} instanceof Object);// true console.log(function(){} instanceof Function);// true console.log(new Function() instanceof Function);// true console.log(new Date() instanceof Object);// true
console.log(new RegExp instanceof Object);// true
console.log(new String('abc') instanceof Object);// true console.log(new Number(12) instanceof Object);// true
-
xx.constructor === xx
返回true/false，判断原理：
当一个函数F被定义时，JS引擎会为F添加prototype原型，然后再在prototype上添加一个constructor属性，并让其指向F的引用
具体来说：当 var f = new F() 时，F被当成了构造函数，f是F的实例对象，此时F原型上的constructor传递到了f上，因此f.constructor === F
缺点：不可判断Null、Undefined是无效的对象，没有constructor存在
constructor 是不稳定的，如创建的对象更改了原型，无法检测到最初的类型
console.log(''.constructor === String);//true
console.log(new Number(1).constructor === Number);//true
console.log([].constructor === Array);//tru
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端岗位面试求职攻略及真题解析~~
查看7道真题和解析
