必考知识点-JavaScript类型转换(讲原理)

简介: 本节主要讲JavaScript类型转换的原理


一、类型转换先说类型


类型转换指将一种类型转换为另一种类型,那我们首先来说说JavaScript中的类型。


1.1原始(Primitive)数据类型


  • Null
  • Undefined
  • Boolean
  • String
  • Number
  • Symbol
  • BigInt


BigInt是一种新的数据类型,用于当整数值大于Number数据类型支持的范围时。这种数据类型允许我们安全地对大整数执行算术操作,表示高分辨率的时间戳,使用大整数id,等等,而不需要使用库。 重要的是要记住,不能使用Number和BigInt操作数的混合执行算术运算,需要通过显式转换其中的一种类型。 此外,出于兼容性原因,不允许在BigInt上使用一元加号(+)运算符。


1.2引用(Object)数据类型


javaScript中内置了很多对象。


  • Array
  • Array
  • ArrayBuffer
  • AsyncFunction
  • Atomics
  • BigInt
  • BigInt64Array
  • BigUint64Array
  • Boolean
  • DataView
  • Date
  • Error
  • EvalError
  • Float32Array
  • Float64Array
  • Function
  • Generator
  • GeneratorFunction
  • Infinity
  • Int16Array
  • Int32Array
  • Int8Array
  • InternalError
  • Intl
  • Intl.Collator
  • Intl.DateTimeFormat
  • Intl.ListFormat
  • Intl.Locale
  • Intl.NumberFormat
  • Intl.PluralRules
  • Intl.RelativeTimeFormat
  • JSON
  • Map
  • Math
  • NaN
  • Number
  • Object
  • Promise
  • Proxy
  • RangeError
  • ReferenceError
  • Reflect
  • RegExp
  • Set
  • SharedArrayBuffer
  • String
  • Symbol
  • SyntaxError
  • TypeError
  • TypedArray
  • URIError
  • Uint16Array
  • Uint32Array
  • Uint8Array
  • Uint8ClampedArray
  • WeakMap
  • WeakSet
  • WebAssembly
  • decodeURI()
  • decodeURIComponent()
  • encodeURI()
  • encodeURIComponent()
  • escape()
  • eval()
  • globalThis
  • isFinite()
  • isNaN()
  • null
  • parseFloat
  • parseInt
  • undefined
  • unescape()
  • uneval()


详情请参考MDN


大家不要看javaScript的内置对象这么多,转换时只需要把这么统统当做一个类型引用类型进行转换就行,在javaScript内部中转换也不会考虑这么多。


二、自动装箱


为了方便操作基本数据类型, ECMAScript还提供了三个特殊的引用类型,基本包装类型,String、Boolean、Number。有了这三个类型,在需要的时候,原始类型会自动转换成相应的包装对象(这个过程叫自动装箱)。自动装箱就是临时创建一个包装对象,将原始类型的值封装起来,以便调用包装对象的函数。但是原来那个变量的值不会有任何变化!


var s1 = "some text";
var s2 = s1.substring(2);
复制代码


字符串是基本数据类型,为撒能调用方法了,这其实在后台进行了一系列的操作


  1. 创建String类型的一个实例
  2. 在实例上调用指定的方法。
  3. 销毁这个实例。


var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;


当然,你可以将Boolean 、Number 、String 这三个函数当作构造函数来使用,通过手动new包装类来装箱(得到包装对象):


// 手动装箱
var s1 = new String("some text");  
s1.toUpperCase();
typeof s1;  
// "object"


三、类型转换的规则



四、内部用于实现类型转换的4个函数


4.1 ToPrimitive ( input [ , PreferredType ] )


// ECMA-262, section 9.1, page 30. Use null/undefined for no hint,
// (1) for number hint, and (2) for string hint.
function ToPrimitive(x, hint) {
    // Fast case check.
    if (IS_STRING(x)) return x;
    // Normal behavior.
    if (!IS_SPEC_OBJECT(x)) return x;
    if (IS_SYMBOL_WRAPPER(x)) throw MakeTypeError(kSymbolToPrimitive);
    if (hint == NO_HINT) hint = (IS_DATE(x)) ? STRING_HINT : NUMBER_HINT;
    return (hint == NUMBER_HINT) ? DefaultNumber(x) : DefaultString(x);
}
// ECMA-262, section 8.6.2.6, page 28.
function DefaultNumber(x) {
    if (!IS_SYMBOL_WRAPPER(x)) {
        var valueOf = x.valueOf;
        if (IS_SPEC_FUNCTION(valueOf)) {
            var v = % _CallFunction(x, valueOf);
            if (IsPrimitive(v)) return v;
        }
        var toString = x.toString;
        if (IS_SPEC_FUNCTION(toString)) {
            var s = % _CallFunction(x, toString);
            if (IsPrimitive(s)) return s;
        }
    }
    throw MakeTypeError(kCannotConvertToPrimitive);
}
// ECMA-262, section 8.6.2.6, page 28.
function DefaultString(x) {
    if (!IS_SYMBOL_WRAPPER(x)) {
        var toString = x.toString;
        if (IS_SPEC_FUNCTION(toString)) {
            var s = % _CallFunction(x, toString);
            if (IsPrimitive(s)) return s;
        }
        var valueOf = x.valueOf;
        if (IS_SPEC_FUNCTION(valueOf)) {
            var v = % _CallFunction(x, valueOf);
            if (IsPrimitive(v)) return v;
        }
    }
    throw MakeTypeError(kCannotConvertToPrimitive);
}
复制代码


ToPrimitive将input装换为基本数据类型,PreferredType要么不传,要么是number、string。


4.1.1 PreferredType为number


  1. 如果input本身就是原始类型,直接返回input。
  2. 调用input.valueOf(),如果结果是原始类型,则返回这个结果。
  3. 调用input.toString(),如果结果是原始类型,则返回这个结果。
  4. 抛出TypeError异常。


4.1.2 PreferredType为string


  1. 如果input本身就是原始类型,直接返回input。
  2. 调用input.toString(),如果结果是原始类型,则返回这个结果。
  3. 调用input.valueOf(),如果结果是原始类型,则返回这个结果。
  4. 抛出TypeError异常。


4.1.3 PreferredType不传入


  1. 如果input是内置的Date类型,PreferredType 视为String
  2. 否则PreferredType 视为 Number。


来看看这道网上的面试题


({}) + 1


+号操作符,只有当左右两边的类型相同(都为string或者number)是才进行操作。所以会经历如下步骤:


  1. {}和1都会调用ToPrimitive,1原始类型直接返回。
  2. {}内部调用DefaultNumber,使用valueOf方法,返回object。
  3. 在调用toString方法,返回[object, object]。
  4. 所以最后的结果就是[object, object]1。

这一类转换换汤不换药,转换规则都是这样的。


4.2 ToBoolean ( argument )



4.3 ToNumber( argument )



4.4 ToString( argument )



来源:ECMA-262草案/ 2019年11月7日 ECMAScript®2020语言规范


五、隐式类型装换


在执行过程中当js内部期望得到某种类型的值,而实际在那里的值是其他的类型,就会发生隐式类型转换。系统内部会自动调用我们前面说ToBoolean ( argument )、ToNumber ( argument )、ToString ( argument ),尝试转换成期望的数据类型。


5.1 期望得到boolean的值


if ( !undefined && !null && !0 && !NaN && !'') {
  // xxxx
} 


因为在if的括号中,js期望得到boolean的值,所以对括号中每一个值都使用ToBoolean ( argument ),将它们转化成boolean。


5.2 期望得到number的值


3 * { valueOf: function () { return 5 } }; 


因为在乘号的两端,js期望得到number类型的值,所以对右边的那个对象使用ToNumber ( argument ),得到结果5,再与乘号左边的3相乘。


5.3 加号有别于其他运算符


  • 如果有一边是字符串,就把另外一边也转换为字符串
  • 如果一方不是字符串或者数据,就转换为数据或者字符串

处了加号运算符,其他运算符,只要其中一方数据,那么另一方就被转换为数字


六、显示类型装换



手动调用Boolean(value)、Number(value)、String(value)完成的类型转换。


Boolean('some text');  //  true
Number("2019");  //  2019
String({a: 1});  //  "[object Object]"


前面两个类型转换没有什么好解释的,我们看看最后一个String({a: 1});在内部发生的时候


  1. 执行转换String({a: 1})。
  2. 执行内部的ToString({a: 1})。
  3. {a: 1}不是原始类型,执行ToPrimitive({a: 1}, hint string)。
  4. 调用toString方法,返回"[object, object]"。
  5. 执行ToString("[object, object]"),返回"[object, object]"。


参考文章:

目录
相关文章
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
123 19
|
5月前
|
存储 前端开发 JavaScript
JavaScript的重要知识点
以上就是JavaScript的一些重要知识点。学习JavaScript需要理解和掌握这些知识点,才能编写出高效、可维护的代码。同时,还需要不断实践,通过编写项目来提高编程技能。
76 14
|
11月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
6月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
6月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
JavaScript 前端开发 Java
JS中的隐式类型转换规则
JavaScript 是一门弱类型语言,变量类型在运行时会进行隐式转换。本文总结了常见的隐式转换规则,包括运算符转换、等号比较和布尔值转换等。例如,`1 + {a: 1}` 会先调用对象的 `toString()` 方法,最终结果为 `'1[object Object]'`。此外,还详细解析了 `undefined` 和 `null` 的运算行为,以及 `![] == []` 等特殊情况。通过这些例子,帮助开发者更好地理解 JavaScript 中的类型转换机制。
145 6
JS中的隐式类型转换规则
|
10月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
208 58
|
11月前
|
JavaScript 前端开发 安全
如何处理 JavaScript 中的类型转换错误?
【10月更文挑战第9天】处理类型转换错误需要综合运用多种方法和策略,同时要保持对潜在问题的警惕性。通过合理的错误处理,可以提高程序的健壮性,减少因类型转换错误带来的负面影响。
273 57
|
11月前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
166 57