您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

详解JavaScript对象转原始值

51自学网 2022-02-21 13:35:51
  javascript

Object.prototype.valueOf()

对象的valueOf旨在返回对象的原始值,会在需要将对象转换成原始值的地方自动执行。详细点这里。

Object.prototype.toString()

toString()方法会返回表示该对象的字符串,会在对象预期要被转换成字符串的地方自动执行。对象默认的toString()方法会返回[object type],这个type就是对象构造函数的名称。详细点这里。

Symbol.toPrimitive

Symbol.toPrimitive(hint)方法作用同valueOf()一样,但是优先级要高于valueOf();而且该方法还会接受一个参数hint,这个参数用来表示期望转换的原始值的具体类型,有以下几种:

  • number:数字类型
  • string:字符串类型
  • default:默认
let obj = {  [Symbol.toPrimitive](hint) {    switch (hint) {      case 'number':        return 123;      case 'string':        return 'str';      case 'default':        return 'default';      default:        throw new Error();     }   }};2 * obj // 2463 + obj // '3default'obj == 'default' // trueString(obj) // 'str'

对象转换原始值

以上三种方法都是在对象被预期转换成某种原始值时触发。

1. 预期被转换成字符串类型

对应的hint类型为string

进行输出的地方,如alert()

String(obj)

let a = {  toString () {    return '2'  }}console.log(String(a)) // 2

字符串连接(+)操作

let a = {  toString () {    return '2'  }}console.log(a + 'vv')

模板字符串

let a = {  [Symbol.toPrimitive] (hint) {    console.log(hint) // string    return 2  }}console.log(`你是老${a}?`) // 你是老2?

2. 预期被转换成数字类型

对应的hint类型为numbe

除法:

let a = {  valueOf () {    return 2  }}console.log(2 / a, a / 2) // 1  1

Number(obj):

let a = {  [Symbol.toPrimitive] (hint) {    console.log(hint) // number    return 2  }}console.log(Number(a)) // 2

正负号(注意不是加减运算):

let a = {  [Symbol.toPrimitive] (hint) {    console.log(hint) // number    return 2  }}console.log(+a) // 2console.log(-a) // -2

3. 预期被转换成默认类型(其他)

对应的hint类型为default

数字加法(即与对象相加的一方为数字类型):

let a = {  [Symbol.toPrimitive] (hint) {    console.log(hint) // default    return 2  }}console.log(1 + a) // 3

这一点有点意外,原以为像这种情况预期转换的类型应该是数字类型,但事实上却是default;

布尔运算:所有对象都被转换成true;

let a = {  [Symbol.toPrimitive] (hint) {    console.log(hint) // 没有触发    return false  }}console.log(Boolean(a), a && 123) // true 123

布尔运算包括==

三种方法触发的顺序

首先判断对象是否有Symbol.toPrimitive(hint)方法,若有则执行该方法,没有则执行下面的步骤;

如果预期被转换成字符串类型时,则优先执行toString()方法;

如果预期被转换成默认类型或者数字类型时,则优先执行valueOf()方法:

:若没有valueOf()方法,但是定义了toString()方法,则会执行toString()方法;

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注51zixue.net的更多内容!


下载地址:
JavaScript实现双向链表过程解析
JQuery选择器详解
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。