JavaScript 数据类型全家福：谁是大哥大，谁是小透明？

有人说JS里万物皆对象有人说JS里类型多得让人头大。今天我们就来盘点一下JavaScript的七种基本数据类型和它们的“爸爸”Object看看它们各自有什么脾气日常相处中又有哪些让人哭笑不得的坑。前言JavaScript的数据类型就像一大家子人。有嗓门大的有闷葫芦的有喜欢装酷的还有整天搞事情的。作为前端开发者不了解它们的性格写代码时就等着被坑吧。先来个数数ES6之前JS有5种基本类型String、Number、Boolean、Null、Undefined。ES6加入了SymbolES2020又加了BigInt。再加上作为“一家之主”的Object包括Array、Function、Date等引用类型总共8种。这8种类型我们一个一个盘。一、String话痨属性啥都能变成它String类型就是文本数据用引号包着。单引号、双引号、反引号模板字符串都行。letname张三;letgreeting你好;lettemplate我的名字是${name};String的特点就是“啥都能变成字符串”。你给它一个数字它给你变字符串给它一个对象它给你变[object Object]。就像班里的话痨什么话题都能接上。但要注意字符串是不可变的。你不能通过索引修改某个字符只能重新赋值。二、Number数学课代表但总算错账Number类型代表数字包括整数和浮点数。它负责所有的数学运算看起来靠谱但其实有个著名bugconsole.log(0.10.20.3);// false什么数学课代表居然算错其实这不怪JS是计算机二进制浮点数精度问题。所以涉及金钱计算千万别直接用浮点数要用整数分或者用第三方库。Number还有一个特殊成员NaNNot a Number表示“不是一个数字”但它属于Number类型。NaN有个怪癖它不等于自己。console.log(NaNNaN);// false判断是不是NaN要用isNaN()或Number.isNaN()。三、Boolean非黑即白的法官Boolean只有两个值true和false。它负责逻辑判断简单直接。但在JS里很多东西都能“变成”布尔值比如if语句里0、‘’、null、undefined、NaN、false都会被转换成false其余都是true。这就是传说中的真值和假值。记住六个假值false、0、、null、undefined、NaN。其他的都是真。if(hello){console.log(这是真);// 会执行}if(0){console.log(这是假);// 不会执行}四、Null空盒子但身份成谜Null类型只有一个值null。它表示“什么都没有”通常我们用它来清空对象。但Null有个著名的历史遗留bugconsole.log(typeofnull);// object明明是Null类型为什么typeof返回object这是JS第一版设计时的错误后来为了兼容旧代码一直没改。所以判断null要用 null不能用typeof。五、Undefined放鸽子的代表Undefined也只有一个值undefined。它表示“声明了变量但没赋值”就像你叫了外卖但外卖小哥迟迟没到。leta;console.log(a);// undefined函数没有返回值默认返回undefined。访问对象不存在的属性也是undefined。六、Symbol独一无二的身份证ES6新增的Symbol用来创建唯一的值。每次调用Symbol()都会生成一个全新的、独一无二的值即使描述相同。lets1Symbol(id);lets2Symbol(id);console.log(s1s2);// falseSymbol常用于对象属性名防止属性名冲突。比如你要给一个对象添加一个属性但又怕覆盖原来的属性用Symbol就安全了。Symbol还有一个特点它不会出现在for...in循环和Object.keys()里但可以被Object.getOwnPropertySymbols()获取。七、BigInt大数专家解决超限问题BigInt是ES2020新增的用来表示大于2^53-1的整数。因为Number能安全表示的最大整数是Number.MAX_SAFE_INTEGER超出这个范围计算就可能出错。创建BigInt很简单在数字后面加n或者用BigInt()函数。letbig123456789012345678901234567890n;letbig2BigInt(123);BigInt可以和BigInt运算但不能和Number混合运算会报错必须显式转换。八、Object一家之主万物之源Object是引用类型包括普通对象、数组、函数、日期、正则等等。它就像家里的大家长其他类型都是基本类型只有它是复杂类型。基本类型存储的是值而Object存储的是引用内存地址。所以leta{name:张三};letba;b.name李四;console.log(a.name);// 李四因为a和b指向同一个对象。数组、函数都是Object的子类型。判断数组用Array.isArray()判断函数用typeof返回’function’但注意typeof []返回’object’。九、如何判断类型侦探三件套判断数据类型我们有三个工具typeof适合基本类型但对null和Object不够精准。typeofhello;// stringtypeof123;// numbertypeoftrue;// booleantypeofundefined;// undefinedtypeofSymbol();// symboltypeof123n;// biginttypeofnull;// object —— 坑typeof{};// objecttypeof[];// objecttypeoffunction(){};// functioninstanceof检查对象是否是某个构造函数的实例适合引用类型。[]instanceofArray;// true{}instanceofObject;// truefunction(){}instanceofFunction;// trueObject.prototype.toString.call()终极武器能准确判断所有类型。Object.prototype.toString.call(123);// [object Number]Object.prototype.toString.call(123);// [object String]Object.prototype.toString.call(null);// [object Null]Object.prototype.toString.call(undefined);// [object Undefined]Object.prototype.toString.call([]);// [object Array]Object.prototype.toString.call({});// [object Object]Object.prototype.toString.call(function(){});// [object Function]这个方法最靠谱返回格式统一的字符串可以用来写类型判断函数。十、类型转换JS的骚操作之源JS是弱类型语言类型转换非常灵活也因此诞生了很多“经典题目”。隐式转换字符串加法只要有一边是字符串另一边也会转为字符串。11// 11其他运算符会尽量转为数字。5-3// 25*2// 10hello-1// NaN比较运算符双等号会进行类型转换所以11// true0false// truenullundefined// true[]false// true 这个最坑建议总是用三等号避免隐式转换带来的意外。显式转换手动用String()、Number()、Boolean()、parseInt()、parseFloat()等方法。String(123);// 123Number(123);// 123Boolean(0);// falseparseInt(123px);// 123十一、总结数据类型全家福基本类型String话痨、Number数学课代表、Boolean法官、Null空盒子、Undefined放鸽子、Symbol身份证、BigInt大数专家引用类型Object一家之主包括Array、Function、Date等判断类型用三件套注意坑点typeof null ‘object’NaN不等于自己0.10.2不精确。掌握数据类型是学好JavaScript的第一步。明天我们将深入变量的作用域和闭包看看这些类型在内存里是怎么“串门”的。如果你喜欢这篇文章记得点赞收藏让更多小伙伴看到。我们明天见明日预告变量作用域与作用域链——JS的“找东西”逻辑闭包到底是个啥