一、 JS数据类型
1.1 数据类型的数量
八种: 七种基本数据类型、一种引用数据类型
1.2 基本数据类型
Boolean、Undefined、Null、Number、BigInt、String、Symbol(ES6新特性)
1.3 引用数据类型
Object
1.4 记忆方法
bunn-boss(~开头字母强行组合成单词~🤡)
1.5 基本数据类型与引用数据类型的区别
拷贝:基本数据类型,设原值为a,拷贝后的值为b。则无论是单独修改a还是b,都不会改变另一个值。而引用数据类型,例如对象,设原对象为a,拷贝后的对象为b,则拷贝后修改a或b,另一个对象也会同时改变。
比较:基本数据类型在比较的时候是比较值,而引用数据类型在比较的时候是比较地址。
1.6 JS中的三种类型转换\
标准做法:
1. 转换为布尔值(调用Boolean方法)
2. 转换为数字(调用Number\parseInt\parseFloat)
3. 转换为字符串(调用.toString()或String())
偷懒做法😁:
1.转为字符串类型:str1+''
2.转为数字:在字符串前面使用+,例如+'12'
3.转为boolean: 使用!!
1.7 面试基础题
1. JS数据类型有几种
2. JS数据类型的分类
1.8 面试提高题
1.8.1 JS数据存放的位置
目前看到最多的回答是:如果是基础类型,那栈中存储的是数据本身;如果是对象类型,那栈中存储的是堆中对象的引用。除了局部变量,其他全部存在堆中。但是有👉文章
也反驳这种说法,主要的分歧在于ECMAScript规范中并没有明确定义出ECMAScript实现中的各个运行时区域的划分。
1.8.2 以下关于JavaScript中数据类型的说法错误的是
A. 数据类型分为基本数据类型和引用数据类型
B. JavaScript一共有8种数据类型
C. Object是引用数据类型,且只存储于堆(heap)中
D. BigInt是可以表示任意精度整数的基本数据类型,存储于栈(stack)中
答案:C
二、 typeof
2.1 概念
返回操作数的类别
2.2 用法
typeof param
2.3 返回值的类别
| 类型 | 结果 |
|---|---|
| Undefined | 'undefined' |
| Null | 'object' |
| Boolean | 'boolean' |
| Number | 'number' |
| BigInt | 'bigint' |
| String | 'string' |
| Symbol | 'symbol' |
| Function | 'function' |
| 其他任意对象(除Object) | 'object' |
2.3.1 为什么typeof null返回'object'呢?
在JS的最初版本中使用的是32位系统,为了性能考虑使用低位存储变量的类型信息,000开头的是对象,null是全0,所以将null误判为Object了。也就是说typeof null='object'从JS诞生之初就是如此了。
2.3.2 需要注意的几种情况
typeof null='object';
typeof Funtion = 'function';
typeof Object = 'function';
typeof class{} = 'function';
typeof NaN = 'number';
2.4 面试基础题
1.以下不属于 typeof 运算符返回值的是?
A. "string"
B. "function"
C. "object"
D. "null"
答案:D
2.执行以下代码,错误的输出结果是
A. 输入:typeof {"x":1} 输出:"object"
B. 输入:typeof 1 输出:"number"
C. 输入:typeof [{x:1}] 输出:"array"
D. 输入:typeof NaN 输出:"number"
解析:C会输出Object
答案:C
2.5 面试提高题
- 以下使用 typeof 操作符的代码的输出结果为
var x = typeof x;
var res = typeof typeof x;
console.log(x, res);
解析:var关键词存在变量提升,且赋值语句从右向左执行。故var x = typeof x这个语句中,先执行typeof x。此时x已声明但未赋值,故x=undefined, typeof x = typeof undefined = 'undefined'。可得x='undefined'。这道题容易踩坑的地方在于typeof操作符的输出结果是字符串,所以typeof typeof x = typeof (typeof x) = typeof 'undefined' = 'string' = res;
答案: undefined string
2. typeof与等同全同运算符(== 或 ===)一起出现(此处先占坑,后续更新⛽)
三、 instanceof
3.1 概念
检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
3.2 用法
object instanceof constructor
3.3 返回值
布尔值
3.4 注意点
instanceof不能直接用于判断基本数据类型,但是可以直接判断引用数据类型
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
如果想要判断基本数据类型,可以使用constructor的方式。但是这种方法当原型(此处先占坑,后续更新⛽)改变的时候,存在一定的风险。
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
两个比较特殊的例子
Function instanceof Object //true Object.prototype
Object instanceof Function //true Function.prototype
3.5 面试基础题
[] instanceof Array
3.6 面试提高题
- str instanceof String、str1 instanceof String、str2 instanceof String的结果是
var str = 'hello';
var str1 = String('hello');
var str2 = new String('hello');
解析:str和str1均为'string'类型,而str2为'object'。str和str1为基本类型,instanceof操作符无法判断基础类型,故str instanceof String和str1 instanceof String均为false。str2为引用数据类型,并且为String的一个实例对象,故str2 instanceof String为true。
2. 与原型、constructor相结合
var tmp = {};
var A = function() {};
A. prototype = tmp;
var a = new A();
A. prototype = {};
var b = Object.create(tmp);
b.constructor = A. constructor;
console.log(a instanceof A);
console.log(b instanceof A);
console.log(a.__proto__ === temp);
console.log(b.__proto__ === temp);
解析:由题可得此图。对prototype、proto、constructor不了解的,此处指路👉
答案:false false true true
3. 手写instanceof底层实现
function instanceof(left, right){
//沿着原型链寻找是否满足条件
while(true){
if(left===null)
return false;
if(left.__proto__===right.prototype)
return true;
left = left.__proto__;
}
}