小程序开发 网站建设,出台网站集约化建设通知,网站是做推广好还是优化好,个人网页设计作品模板学生目录一、隐式类型转换条件二、 的隐式类型转换三、 的隐式类型转换四、object 的隐式类型转换探讨 object 的隐式转换执行顺序探讨 Symbol.toPrimitive 属性如何将对象转换为原始值在前端js这门动态弱类型语言中#xff0c;不仅存在着显示类型转换#xff0c;还存在许多隐式类…
目录一、隐式类型转换条件二、 的隐式类型转换三、 的隐式类型转换四、object 的隐式类型转换探讨 object 的隐式转换执行顺序探讨 Symbol.toPrimitive 属性如何将对象转换为原始值在前端js这门动态弱类型语言中不仅存在着显示类型转换还存在许多隐式类型转换让人头大。为了减少小伙伴们的踩坑今天总结了一些常见的隐式类型转换规则让我们来看看有哪些。
一、隐式类型转换条件
逻辑运算符、||、运算符、-、*、/关系操作符、、、相等运行算符if / while 条件
二、 的隐式类型转换
类型相同则无需进行类型转换。如果其中一个操作数是 null 或者 undefined 那么另一个操作数必须是 null 或者 undefined 才会返回 true 否则返回 false 。如果其中一个操作数是 Symbol 那么返回 false。如果两个操作数都为 string 和 number 类型那就就将字符串转换为 number。如果一个操作数是 boolean 类型那么转换成 number。如果一个操作数为 object 且另一方为 string、number、或者 Symbol 就会把object 转换为原始类型再进行判断。
测试
null undefined; // true
null 0; // falsenull; // false0; // true
123 123; // true
0 false; // true
1 true; // truevar a {value: 0,valueOf: function(){this.value;return this.value;}
}
console.log(a1 a2 a3); // true
// 对象隐式转换为原始类型调用对象的valueOf方法返回值此对象的valueOf()返回一个自定义自增方法每调用一次增加1最后结果为3.
// a1时a.valueOf()返回1所以11为true此时a.value1
// a2时a.valueOf()返回2所以22为true此时a.value2
// a3时a.valueOf()返回3所以33为true此时a.value3// 这时如果再判断a1a2a3则返回false因为此时的a已经为4了
console.log(a1 a2 a3); // false三、 的隐式类型转换
号操作符不仅可以用作数字相加还可以用作字符串拼接。
如果其中一个操作数是 string另外一个操作数是 undefined、null 或者 boolean则调用 toString() 方法进行字符串拼接。如果是纯对象、数组、正则等则默认调用对象的转换方法会存在优先级然后再进行拼接。如果其中有一个是 number 另外一个是 undefined、null、boolean、number则会将其转换为数字进行加法运算对象的情况参考上一条规则。如果其中一个是 string 一个是 number则按照字符串规则进行拼接。
测试
1 2; // 3
1 2; // 12
1 3; // 13 字符串拼接1 undefined; // 1undefined
1 null; // 1null
1 true; // 1true
1 1n; // 11 字符串和BigInt相加BigInt转换为字符串1 undefined; // NaN undefined转换为NaN
1 null; // 1 null转换为0
1 true; // 2 true转换为1
1 1n; // TypeError: Cannot mix BigInt and other types, use explicit conversion 无法混合BigInt和其他类型请使用显式转换四、object 的隐式类型转换
如果部署了 [Symbol.toPrimitive] 方法优先调用再返回若不存在 [Symbol.toPrimitive] 方法则调用 valueOf 方法如果返回基础数据类型则执行结束否则调用 toString 方法如果转换为基础数据类型则返回最后如果都没有返回基础数据类型则报错。
测试
var obj {value: 1,valueOf(){console.log(valueOf, 2);return 2;},toString(){console.log(toString, 3);return 3;},[Symbol.toPrimitive](){console.log([Symbol.toPrimitive], 4);return 4;}
}
console.log(obj 1); // 5
// 调用[Symbol.toPrimitive]方法获取返回值441510 {}; // 10[object Object]
// {}调用valueOf方法返回自身然后继续调用toString方法返回字符串[object Object]10与其相加得 10[object Object][1, 2, undefined, 4, 5] 10; // 1,2,,4,510
// 数组调用valueOf方法返回数组本身然后调用toString方法转换为字符串1,2,,4,5与10相加得 1,2,,4,510探讨 object 的隐式转换执行顺序
1、有 [Symbol.toPrimitive] 方法执行方法后获取原始值返回执行结束若返回不是原始值则报错。
var obj {value: 1,valueOf(){console.log(valueOf, 2);return 2;},toString(){console.log(toString, 3);return 3;},[Symbol.toPrimitive](){console.log([Symbol.toPrimitive], 4);return 4;}
}
console.log(obj 1); // 52、valueOf方法返回值不为原始值时则继续寻找toString方法执行获取返回值执行结束。
var obj {value: 1,valueOf(){console.log(valueOf, 2);return {};},toString(){console.log(toString, 3);return 3;},
}
console.log(obj 1); // 43、若valueOf方法返回值为原始值时执行结束。
var obj {value: 1,valueOf(){console.log(valueOf, 2);return 2;},toString(){console.log(toString, 3);return 3;}
}
console.log(obj 1); // 34、若无 Symbol.toPrimitive 方法并且最终获取不到原始值时报错。
var obj {value: 1,valueOf(){console.log(valueOf {});return {};},toString(){console.log(toString {});return {};}
}
console.log(obj 1); // ncaught TypeError: Cannot convert object to primitive value探讨 Symbol.toPrimitive 属性如何将对象转换为原始值
Symbol.toPrimitive 指将被调用的指定函数值的属性转换为相对应的原始值。
在 Symbol.toPrimitive属性(用作函数值)的帮助下一个对象可被转换为原始值。该函数由字符串参数 hint 调用目的是指定原始值转换结果的首选类型。 hint 参数可以是number、“string” 和 “default” 中的一种。
// An object without Symbol.toPrimitive property. 对象中不存在Symbol.toPrimitive属性
var obj1 {};
console.log(obj1); // NaN
console.log(${obj1}); // [object Object]
console.log(obj1 ); // [object Object]// An object with Symbol.toPrimitive property. 对象中存在Symbol.toPrimitive属性
var obj2 {[Symbol.toPrimitive](hint) {if (hint number) {return 10;}if (hint string) {return hello;}return true;}
};
console.log(obj2); // 10 -- hint is number
console.log(${obj2}); // hello -- hint is string
console.log(obj2 ); // true -- hint is default超强测试题
{} ; // 0
// 代码执行顺序为从左到右此处的{}被认为是代码块而非对象所以不进行类型转换仅剩余 被转换number类型{} ; // NaN
// 此处先执行{}转换为number类型NaN与空字符串相加得NaN {}; // [object Object]
// 此处的号前面空字符串为string类型按照代码执行顺序以及字符串拼接规则
// 需将{}转换为string类型与其相加调用toString方法获得[object Object]
