JavaScript原始值与包装对象介绍
这篇文章主要介绍“JavaScript原始值与包装对象介绍”,在日常操作中,相信很多人在JavaScript原始值与包装对象介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript原始值与包装对象介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
前言
随着 JavaScript 越来越流行,越来越多地开发者开始接触并使用 JavaScript。
同时我也发现,有不少开发者对于 JavaScript 最基本的原始值和包装对象都没有很清晰的理解。
那么本篇文章,就由渣皮来给大家详细介绍一下它们。
话不多说,Let's go!
正文
原始类型 (Primitive types)
原始类型也被称为“基本类型”。
目前在 JavaScript 中有以下几种原始类型:
string(字符串)
number(数字)
boolean(布尔)
null(空)
undefined(未定义)
bigint(大整数,ES6)
symbol(标志?ES6)
如下:
typeof 'chenpipi'; // "string" typeof 12345; // "number" typeof true; // "boolean" typeof null; // "object" typeof undefined; // "undefined" typeof 12345n; // "bigint" typeof Symbol(); // "symbol"
特别注意
typeof null 虽然返回 "object",但是这不代表 null 就是对象,这其实是 JavaScript 的一个 Bug,且从 JavaScript 诞生以来便如此。
在 JavaScript 最初的实现中,JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针(大多数平台下值为 0x00),因此,null 的类型标签是 0,typeof null 也因此返回 "object"。
The history of “typeof null”:https://2ality.com/2013/10/typeof-null.html
原始值 (Primitive values)
原始值也就是原始类型的值(数据)。
A primitive value is data that is not an object and has no methods.
原始值是一种没有任何方法的非对象数据。
也就是说,string、number 和 boolean 等原始类型的值本身是没有任何属性和方法的。
这个时候嗅觉敏锐的小伙伴是不是已经察觉到有什么不对劲了?
是孜然!我加了孜然!(手动狗头并划掉)
这里有一个非常有意思的点,但是在讨论这个问题之前,先让我们认识下包装对象。
包装对象 (Wrapper objects)
除了 null 和 undefined 外的原始类型都有其相应的包装对象:
String(字符串)
Number(数字)
Boolean(布尔)
BigInt(大整数,ES6)
Symbol(标志?ES6)
对象 (Object)
对象是引用类型。
首先,包装对象本身是一个对象,也是函数。
String instanceof Object; // true String instanceof Function; // true
构造函数 (Constructor)
实例 (Instance)
其中 String、Number 和 Boolean 均支持使用 new 运算符来创建对应的包装对象实例。
例如 String 的声明(节选):
interface StringConstructor { new(value?: any): String; (value?: any): string; readonly prototype: String; } declare var String: StringConstructor;
使用 new 运算符得到的数据是对象(Object):
// 字符串 typeof 'pp'; // "string" typeof new String('pp'); // "object" new String() instanceof Object; // true // 数字 typeof 123; // "number" typeof new Number(123); // "object" new Number() instanceof Object; // true // 布尔 typeof true; // "boolean" typeof new Boolean(true); // "object" new Boolean() instanceof Object; // true
我们可以调用包装对象实例的 valueOf() 函数来获取其原始值:
// 字符串 let s = new String('pp'); s.valueOf(); // "pp" typeof s.valueOf(); // "string" // 数字 let n = new Number(123); n.valueOf(); // 123 typeof n.valueOf(); // "number" // 布尔 let b = new Boolean(true); b.valueOf(); // true typeof b.valueOf(); // "boolean"
“异类” (Attention)
而 BigInt 和 Symbol 都属于“不完整的类”,不支持 new 运算符。
例如 BigInt 的声明(节选):
interface BigIntConstructor { (value?: any): bigint; readonly prototype: BigInt; } declare var BigInt: BigIntConstructor;
可以看到 BigInt 的声明中没有 new 运算符相关函数。
普通函数 (Function)
包装对象也可以作为普通函数来使用。
其中 String()、Number() 和 Boolean() 函数都可以用来对任意类型的数据进行显式类型转换。
另外 Object() 函数也可用于显式类型转换,但本文不再展开。
String
示例代码:
typeof String(); // "string" String(); // "" String('pp'); // "pp" String(123); // "123" String(true); // "true" String(false); // "false" String(null); // "null" String(undefined); // "undefined" String([]); // "" String({}); // "[object Object]"
小贴士 1
当我们使用 String() 函数来转换对象时,JavaScript 会先访问对象上的 toString() 函数,如果没有实现,则会顺着原型链向上查找。
举个栗子:执行 String({ toString() { return 'pp'; } }) 返回的结果是 "pp",并非 "[object Object]"。
所以 String() 函数并不能够用来判断一个值是否为对象(会翻车)。
小贴士 2
常用的判断对象的方式为 Object.prototype.toString({}) === '[object Object]'。
举个栗子:执行 Object.prototype.toString({ toString() { return 'pp'; } }) 返回的是 "[object Object]"。
Number
示例代码:
typeof Number(); // "number" Number(); // 0 Number(''); // 0 Number('pp'); // NaN Number(123); // 123 Number(true); // 1 Number(false); // 0 Number(null); // 0 Number(undefined); // NaN Number([]); // 0 Number({}); // NaN
小贴士
对于 Number() 函数来说,可能最实用的转换就是将 true 和 false 转换为 1 和 0 吧。
Boolean
示例代码:
typeof Boolean(); // "boolean" Boolean(); // false Boolean(''); // false Boolean('pp'); // true Boolean(0); // false Boolean(1); // true Boolean(null); // false Boolean(undefined); // false Boolean([]); // true Boolean({}); // true
小贴士
某些情况下,我们会在数据中使用 0 和 1 来表示真假状态,此时就可以使用 Boolean() 进行状态的判断。
BigInt
BigInt() 函数用于将整数转换为大整数。
该函数接受一个整数作为参数,传入参数若为浮点数或任何非数字类型数据都会报错。
示例代码:
BigInt(123); // 123n BigInt(123n); // 123n typeof 123n; // "bigint" typeof BigInt(123); // "bigint"
BigInt & Number
需要注意的是,BigInt 和 Number 是不严格相等(宽松相等)的。
示例代码:
123n === 123; // false 123n == 123; // true
Symbol
Symbol() 函数用于创建一个 symbol 类型的值。
该函数接受一个字符串作为描述符(参数),如果传入其他类型的值则会被转换为字符串(除了 undefined)。
注意,每一个 symbol 值都是独一无二的,即使它们的描述符都是一样的。
且 symbol 类型的数据只能通过 Symbol() 函数来创建。
示例代码:
// 后面的返回值是 Devtools 模拟出来的,并非实际值 Symbol('pp'); // Symbol(pp) Symbol(123); // Symbol(123) Symbol(null); // Symbol(null) Symbol({}); // Symbol([object Object]) // 类型 typeof Symbol('pp'); // "symbol" Symbol('pp') === Symbol('pp'); // false // 描述符 Symbol('pp').description; // "pp" Symbol(123).description; // "123" Symbol({}).description; // "[object Object]" Symbol().description; // undefined Symbol(undefined).description; // undefined
原始值不是对象 (Primitive not Object)
有意思的来了~
没有属性和方法 (No properties, no functions)
本文前面有提到:「原始值是一种没有任何方法的非对象数据。」
我们都知道对象(Object)上可以有属性和方法。
但是字符串不是对象,所以你不能给字符串增加属性。
做个小实验:
let a = 'chenpipi'; console.log(a.length); // 8 // 尝试增加新的属性 a.name = '吴彦祖'; console.log(a.name); // undefined // 尝试修改已有的属性 typeof a.slice; // "function" a.slice = null; typeof a.slice; // "function"
渣皮小剧场
此时一位头铁的小伙伴使用了反驳技能。
渣皮你别在这忽悠人了,我平时写 Bug 哦不写代码的时候明明可以调用到字符串、数字和布尔值上的方法!
比如下面这段代码,能够正常执行并得到符合预期的结果:
// 字符串 let s = 'chenpipi'; s.toUpperCase(); // "CHENPIPI" 'ChenPiPi'.slice(4); // "PiPi" // 数字 let n = 123; n.toString(); // "123" (123.45).toFixed(2); // "123.5" // 布尔值 let b = true; b.toString(); // "true" false.toString(); // "false"
无用小知识
有没有发现,数字的字面量后面不能直接调用函数?例如执行 123.toString() 会报 SyntaxError(语法错误)。
这是因为数字(浮点数)本身会用到小数点 .,而调用函数也需要用小数点,这时就出现了歧义(字符串和布尔值就没有这种烦恼)。
对于这种情况,我们可以使用括号 () 将数字包裹起来,如 (123).toString();或者使用两个连续的小数点 .. 来调用函数,如 123..toString()。
奇了怪了
那么既然字符串不是对象,那么为什么字符串会有属性和方法呢?
转念一想,数字就是数字,数字身上怎么会有方法呢?
这确实不符合逻辑,但是这又与实际相矛盾。
咋回事呢???
替身使者 (I can't translate this)
答案揭晓~
暗中操作
以字符串(string)为例,当我们在代码中读取字符串的属性或者方法时, JavaScript 会静默地执行下面的操作:
鸿蒙官方战略合作共建——HarmonyOS技术社区
将字符串通过 new String() 的方式来创建一个临时的包装对象实例;
通过创建的对象来执行我们的代码逻辑(读取属性或执行函数);
临时对象不再使用,可以被销毁。
如下面的栗子:
let a = 'chenpipi'; console.log(a); // "chenpipi" // ------------------------------ let b1 = a.length; console.log(b1); // 8 // 上面的代码相当于: let b2 = (new String(a)).length; console.log(b2); // 8 // ------------------------------ let c1 = a.toUpperCase(); console.log(c1); // "CHENPIPI" // 上面的代码相当于: let c2 = (new String(a)).toUpperCase(); console.log(c2); // "CHENPIPI"
数字(number)和布尔值(boolean)同理,但数字通过 new Number() 来创建临时对象,而布尔值则通过 new Boolean() 来创建。
除了上面的例子,最有力的证明,就是他们的构造函数:
'chenpipi'.constructor === String; // true (12345).constructor === Number; // true true.constructor === Boolean; // true
这一切都是 JavaScript 在暗中完成的,且过程中产生的临时对象都是一次性的(用完就丢)。
原来如此
芜湖,这么一来就说得通了!
这也就能解释为什么我们能够访问字符串上的属性和方法,却不能增加或修改属性。
那是因为我们实际操作的目标其实是 JavaScript 创建的临时对象,而并非字符串本身!
所以我们的增加或修改操作实际上是生效了的,只不过是在临时对象上生效了!
就像这样:
// 代码中: let a = 'chenpipi'; a.name = '吴彦祖'; console.log(a.name); // undefined // 相当于: let a = 'chenpipi'; (new String(a)).name = '吴彦祖'; console.log(a.name); // undefined // 相当于: let a = 'chenpipi'; let temp = new String(a); temp.name = '吴彦祖'; console.log(a.name); // undefined
到此,关于“JavaScript原始值与包装对象介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341