陕西西安网站建设,个人网站模板制作教程,成都定制企业网站制作,自己在线制作logo免费下载前言 #x1f4eb; 大家好#xff0c;我是南木元元#xff0c;热衷分享有趣实用的文章#xff0c;希望大家多多支持#xff0c;一起进步#xff01; #x1f345; 个人主页#xff1a;南木元元 目录
JS数据类型
3种转换类型
ToBoolean
ToString
ToNumber
对象转原…前言 大家好我是南木元元热衷分享有趣实用的文章希望大家多多支持一起进步 个人主页南木元元 目录
JS数据类型
3种转换类型
ToBoolean
ToString
ToNumber
对象转原始类型
隐式类型转换
结语 JS数据类型
首先我们需要知道js中数据类型分为两大类基本数据类型和引用数据类型。
7种基本数据类型分别是
BooleanNullUndefinedNumberStringSymbolBigInt
引用数据类型即对象Object包含普通对象-Object数组对象-Array正则对象-RegExp日期对象-Date数学函数-Math函数对象-Function。
3种转换类型
在JS中类型转换只有三种情况
转换成布尔值转换成字符串转换成数字
数据类型转换的基本规则见下表 ToBoolean ToBoolean指其他类型转换为布尔类型的操作。 js中的假值只有0、-0、NaN、、false、null、undefined其它值转为布尔型都为true。
console.log(Boolean(0)); // flase
console.log(Boolean(-0)); // flase
console.log(Boolean(NaN)); // flase
console.log(Boolean()); // flase
console.log(Boolean(null)); // flase
console.log(Boolean(undefined)); // flase
console.log(Boolean(false)); // flase//其它所有值都转为true包括所有对象
console.log(Boolean([])); //true
console.log(Boolean({})); //true
console.log(Boolean(0)); //true
console.log(Boolean(1)); //trueToString ToString指其他类型的值转换为字符串类型的操作。 转为字符串的规则 null转为null undefined转为undefined Boolean类型true转为truefalse转为false Number类型直接转换如5转为5不过那些极小和极大的数字会使用指数形式如1e21转为1e21 Symbol类型直接转换只允许显式强制类型转换使用隐式强制类型转换会报错 数组转为由逗号分隔的一系列数字组成的字符串 如[1,2]转为1,2 普通对象会调用Object.prototype.toString()返回[object Object]如果对象有自己的 toString() 方法字符串化时就会调用该方法并使用其返回值。
console.log(String(null)); //null
console.log(String(undefined)); //undefined
console.log(String(true)); //true
console.log(String(false)); //false
console.log(String(5)); //5
console.log(String(1e21)); //1e21
console.log(String(Symbol(5))); //Symbol(5)
console.log(String([1, 2])); 1,2
console.log(String({})); // [object Object]
ToNumber ToNumber指其他类型转换为数字类型的操作。 转为数字的规则
null转为0undefined转为NaNBoolean类型true转为1false转为 0String类型如果是纯数字形式则转为对应的数字空字符转为0否则转为NaNSymbol类型不能转为数字会报错对象会先被转换为相应的基本类型值如果返回的是非数字的基本类型值则再遵循以上规则将其强制转换为数字。
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(Number(true)); //1
console.log(Number(false)); // 0
console.log(Number(10)); //10
console.log(Number()); //0
console.log(Number(10a)); //NaN
console.log(Number(Symbol(a))); //TypeError: Cannot convert a Symbol value to a number
console.log(Number([])); // 0
console.log(Number([1])); // 1
console.log(Number({})); // NaN
对象转原始类型
上面提到了如果是对象则会先被转为基本类型那么这个过程到底是怎么样的
其实对象转原始类型会调用内置的ToPrimitive方法逻辑如下
如果有Symbol.toPrimitive()方法优先调用再返回调用valueOf()如果转换为原始类型则返回调用toString()如果转换为原始类型则返回如果都没有返回原始类型会报错 注意Date是个例外要先调用toString再调用valueOf来转换 来看下面的几个例子
1.有Symbol.toPrimitive()方法优先调用返回。
var obj {value: 3,valueOf() {return 4;},toString() {return 5},[Symbol.toPrimitive]() {return 6}
}
console.log(obj 1); // 输出72.toString 返回的不是基本类型值valueOf 返回的基本类型值。
// toString 返回的不是基本类型值valueOf 返回的基本类型值
var obj {toString: function () {return {};},valueOf: function () {return null;},
};
console.log(String(obj)); // null3.valueOf和toString都没有返回原始类型会报错。
// 先判断valueOf⽅法再判断toString⽅法返回的都不是基本类型值报错
var obj {valueOf: function () {return {};},toString: function () {return {};},
};
console.log(Number(obj)); // Uncaught TypeError: Cannot convert object to primitive value
隐式类型转换
在开发中为什么建议大家使用而不是呢
其实主要原因就是需要避免所带来的隐式类型转换下面就来看看js中有着很多坑的隐式转换。
JavaScript中的隐式类型转换主要发生在、-、*、/以及、、这些运算符之间。而这些运算符只能操作基本类型值所以在进行这些运算前的第一步就是将两边的值用上面的ToPrimitive方法转换成基本类型再进行操作。
不同操作符的隐式转换规则不同。
操作符
两边有至少一个string类型变量时两边的变量都会被隐式转换为字符串其他情况下两边的变量都会被转换为数字。
1 23; // 123
1 false; // 1
1 Symbol(); // Uncaught TypeError: Cannot convert a Symbol value to a number
1 false; // 1false
false true; // 1-、*、\操作符
一律转换成数值后计算。
1 * 23; // 23
1 * false; // 0
1 / aa; // NaN
和比较符
两边都是字符串则比较字母表顺序其他情况下转换为数字再比较。
ca bd; // false
a b; // true
12 13; // true
false -1; // true
操作符
的隐式转换规则相对来说比较复杂它的转换规则如下
两边的类型是否相同相同的话就比较值的大小判断两边是否是null和undefined是的话就返回true判断的类型是否是String和Number是的话把String类型转换成Number再进行比较判断其中一方是否是Boolean是的话就把Boolean转换成Number再进行比较如果其中一方为Object且另一方为String、Number或者Symbol会将Object转换成字符串再进行比较
其实可以概括一下两边的值都尽量转成Number。
console.log(3 true); //false
console.log(0 false); //true
console.log(0 0); //true
console.log({ a: 1 } true); //false
console.log({ a: 1 } [object Object]); //true
了解了上面的规则后来看下面几道经典的题。
1.[][]的结果是什么为什么
答案为false。
原因两边都是对象的话仅当它们引用同一个对象时返回true。数组是引用数据类型在创建两个不同的数组时引用的是两个不同的对象所以不同。
2.[] ![]结果是什么为什么
答案为true。
原因先算右边!的优先级要大于右边的结果是布尔值那么根据上面的隐式转换规则4两边都转换成数字然后进行比较。左边[]转换为数字为0。右边![] 首先是转换为布尔值由于[]作为一个引用类型转换为布尔值为true因此![]为false进而在转换成数字变为0。0 0 所以结果为true。
3.如何让if(a 1 a 2)条件成立
其实就是利用的隐式类型转换以及对象转原始类型的过程。
var a {value: 0,valueOf: function() {this.value;return this.value;}
};
// 利用隐式类型转换对象需要先转原始类型再应用隐式类型转换规则
console.log(a 1 a 2);//true
结语
如果此文对你有帮助的话欢迎关注、点赞、⭐收藏、✍️评论支持一下博主~
