你掌握了吗?——js数据类型隐式转换(下)

简介: 众所周知javascript是一种弱类型语言。强类型和弱类型主要是站在变量类型处理的角度进行分类的。强类型是一旦指定数据类型,如果不经过强制转换,那么将永远是指定的这个类型。js中无法声明数据类型,变量类型是根据实际值决定的,由编译器自动调用转换函数进行转换,这种方式称之为隐式转换,今天我们就来谈谈数据类型是如何隐式转换的。
  • 关系运算符 > < >= <=  == != === !===


  1. 当关系运算符一边有字符串时,会将其数据类型使用Number转换,再做比较;


  1. 当两边都是字符串时,则都转成Number,注意:此时不是转成对应的数字,而是按照字符串对应的的unicode编码转成数字


  1. 多个字符从左往右进行比较


console.log('10' > 3) // true 先转成数字10再比较
console.log('3' > '10') // true
console.log('3'.charCodeAt()) // 51
console.log('10'.charCodeAt()) // 49
console.log('abc' > 'b') // false 先比较a和b,a和b不等,直接false
console.log('abc' > 'ade') // false,先比较aa,相等,继续比较db,得出结果
console.log('b'.charCodeAt()) // 98
console.log('d'.charCodeAt()) // 100


  1. 特殊情况,没啥规则请记住以下结论


console.log(undefined == undefined) // true 
console.log(undefined === undefined) // true
console.log(undefined == null) // true undefined是从null派生出来的
console.log(undefined === null) // false
console.log(null == null) // true
console.log(null === null) // true
console.log(NaN == NaN) // false NaN与任何数据比较都是NaN


转成Boolean型


数据在逻辑判断和逻辑运算之中会隐式转换为Boolean类型


  • Boolean转换参考上述ToBoolean(argument)说明, 以下这几种数据经过Boolean转换,会转成false,+0、-0、NaN、undefined、null、""、document.all(); 复杂数据类型经过Boolean转换后都是true,如:[]、{}


  • 逻辑非运算符! 逻辑非运算中,会将数据先做Boolean转换,然后取反


var a = undefined
console.log(!a) // true 先Boolean(a) => false; 再取反 !false => true


进阶


字符串运算符与算术运算符


转换类型取决于,加号“+”两边的数据类型


  • 只要有一边是字符串则将非字符串的一边转成字符串


console.log(123 + 'true') // '123true'


  • 符号两边有一边是Number型,此时+为算数运算符,则将令一边的数据转成Number型。此处注意空字符串、null以及布尔的false Number之后都是0


console.log(1 + true) // 2 先Number(true)=> 1,再做加计算,结果为2
console.log(1 + undefined) // 先Number(undefined) => NaN ,再计算,结果NaN
console.log(1 + null) // 先Number(null) => 0,再计算,结果为1


复杂数据类型隐式转换


复杂数据类型隐式转换时会先调用自身的valueOf()和toString()两个函数,如果自身数据原型对象上没有相应的函数则会由原型链__proto__最终调用到Object.prototype对象对应的函数上,所有对象(除Null 和 undefined)都会继承这两个方法。


valueOf 返回这个对象逻辑上对应的原始类型的值,原始值是存储在栈(stack)中的简单数据段,原始类型就是前面说的基本数据类型。原始值是啥?请看这里原始值;valueOf是啥? 请看这里valueOf


toString 返回这个对象的字符串表示


  • 转换规则如前面所述,使用valueOf()获取原始值,如果原始值不是基本类型,则使用toString方法转成字符串


console.log([1,2] == '1,2') // true 解析如下
console.log([1,2].valueOf()) // [1,2],获取原始值
console.log([1,2].toString()) // '1,2',转成字符串,与右边数据相等
var a = {}
console.log(a == "[object Object]") // true
// 左边转换过程
console.log(a.valueOf()) // {}
console.log({}.toString()) // "[object Object]",再进行比较


逻辑非隐式转换与关系运算符隐式转换


  • 逻辑非优先级高于关系符运算


console.log(![] == 0) // true 解析:空数组转换布尔型是true,取非后为false;false跟数字0比较,
布尔型被Number后为0,0 == 0
console.log([] == ![]) // true [].valueOf().toString()=>''; ![] => false 关系运算符将两边转成Number型进行比较,Number('') => 0; Number(false) => 0
console.log({} == !{}) // false 逻辑非优先级高,其实是{}和!{},这个逻辑表达式的比较,按照复杂类型隐式转换规则,需通过valueOf和toString转换后进行比较


  • 引用数据类型的转化处理


  1. 引用数据类型,可称为对象类型,包括Object 、Array 、Function 、Date等;数据存在堆中,变量中存的是堆地址,我们只能操作存在栈内存的引用地址。


 2.var声明的一般是栈内存


  1. 6种基本数据类型的存储方式是值类型,存在于栈中


console.log([] == []) // false 数组为引用类型,在堆中存放的是两份不同的数据,所以比较结果不相等
console.log({} == {}) // false,同理,{}为引用类型,结果不相等


总结


本文主要讲了以下几点:


  • 了解js数据类型和定义


  • 了解js内部数据类型转换操作


  • 关系运算符的转换


  • + 号连接操作数时的隐式转换规则


  • 复杂数据类型的转换,如何转成简单值


  • 逻辑非和引用数据类型的特殊类型转换


你掌握了js数据类型隐式转换的方法了吗


参考链接:


blog.csdn.net/itcast_cn/a…www.w3school.com.cn/js/pro_js_v…tc39.es/ecma262/


相关文章
|
4月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
147 59
|
23天前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
50 3
|
2月前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
27 1
|
3月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
137 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
3月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
34 1
|
4月前
|
JavaScript 前端开发
JavaScript基础知识-基本数据类型和引用数据类型
关于JavaScript基础知识的文章,主要介绍了基本数据类型和引用数据类型。
50 2
JavaScript基础知识-基本数据类型和引用数据类型
|
3月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
67 0
|
4月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
95 2
|
5月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
482 1
|
5月前
|
前端开发 JavaScript
Web 前端大揭秘!JS 数据类型检测竟如此震撼,一场惊心动魄的代码探秘之旅等你来!
【8月更文挑战第23天】在Web前端开发中,合理检测数据类型至关重要。JavaScript作为动态类型语言,变量类型可在运行时变化,因此掌握检测技巧十分必要。
46 1