JS(一)-数据类型 typeof instanceof + 面试题

363 阅读5分钟

一、 JS数据类型

1.1 数据类型的数量
八种: 七种基本数据类型、一种引用数据类型
1.2 基本数据类型
BooleanUndefinedNullNumberBigIntStringSymbol(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: 使用!!

image.png

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 面试提高题
  1. 以下使用 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 面试提高题
  1. 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不了解的,此处指路👉 image.png 答案: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__;
    }
}