JavaScript对象类型转换的分类及步骤详解

 更新时间:2023年05月22日 11:51:22   作者:DongL  
这篇文章主要为大家介绍了JavaScript对象类型转换的分类及步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

对象类型转换时的分类

对象转换时先要确定转换的类型,这个类型在对象的[Symbol.toPrimitive]属性值-函数的参数中可以拿到,一共有三种:

  • string
  • number
  • default

string以下两种情况会将确定对象的转换类型为string:

  • 使用alert(person)
  • 将对象看做是一个对象的属性来取值时,例如family[person]

number以下两种情况会将确定对象的转换类型为number:

  • 使用一元数学操作符,例如alert(+person)
  • 使用比较运算符,例如alert(person > 1)

default其他情况会确定对象的转换类型为default:

  • 相加操作,例如alert(obj + 1)
  • 相等比较,例如alert(obj == 2)

对象转换时的步骤

  • 先看对象内有没有[Symbol.toPrimitive]属性
  • 如果有,则执行该方法
  • 如果没有,则检查对象要转换的类型
  • 如果是string,执行toString()valueOf()方法,如果其中一种存在的话
  • 如果是number,执行valueOf()toString()方法,如果其中一种存在的话
  • 如果是default,执行valueOf()toString()方法,如果其中一种存在的话

下面是几个例子

有[Symbol.toPrimitive]属性

let obj = {
    name: 'jack',
    money: 1,
    [Symbol.toPrimitive](hint) {
      console.log(hint);
      return hint == 'string' ? this.name : this.money;
    },
  };
  let person = {
    jack: 'property jack',
  };
  // hint equals to string
  alert(obj);  // jack
  alert(person[obj]) // property jack
  // hint equals to number
  alert(+obj); // 1
  alert(obj > 0); // true
  // hint equals to default
  alert(obj + 50); // 51
  • 没有[Symbol.toPrimitive]属性
let obj = {
    name: 'jack',
    money: 1,
  };
  // hint equals to string, excutes the toString() and return [object object]
  alert(obj); // [object object]
  // hint equals to number, excutes the valueOf() and return the object itself
  alert(+obj); // NaN  
  // hint equals to default, excutes the valueof() and return the object itself
  alert(obj === obj);  // true  // do the same as (obj.valueOf() === obj);

必须返回一个基础类型

无论是调用哪个函数,他都必须返回一个基本数据类型,如果返回的不是基本数据类型,在严格模式下会报错

存在显示的toString方法

存在显示声明的toString()方法,并且不存在其他类型转换方法,例如valueOf()或者[Symbol.toPrimitive],则无论对象是按照什么类型转换,都执行toString()方法。(存在显示的toString,则只找toString,不找valueOf)

// if there exsits a toString(), and no other functions such as valueOf() or [symbol.toPromitive], then all the conversions will excute toString()
  let obj = {
    name: 'jack',
    money: 1,
    toString() {
      return  this.money;
    },
  };
  alert(obj); // 1
  alert(+obj); // 1 
  alert(obj + 9); // 10

先确定对象是按照什么类型转换,一共有三种类型:

  • string
  • number
  • default

转换规则:

  • 先看对象内有没有[Symbol.toPrimitive]属性
  • 如果有,则执行该方法
  • 如果没有,则检查对象要转换的类型
  • 如果是string,执行toString()valueOf()方法,如果其中一种存在的话
  • 如果是number,执行valueOf()toString()方法,如果其中一种存在的话
  • 如果是default,执行valueOf()toString()方法,如果其中一种存在的话

 翻译自原文:https://javascript.info/objec...

以上就是JavaScript对象类型转换的分类及步骤详解的详细内容,更多关于JavaScript对象类型转换的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学

    这篇文章主要介绍了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 解决layer.confirm选择完之后消息框不消失的问题

    解决layer.confirm选择完之后消息框不消失的问题

    今天小编就为大家分享一篇解决layer.confirm选择完之后消息框不消失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • BootStrap智能表单实战系列(七)验证的支持

    BootStrap智能表单实战系列(七)验证的支持

    这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题,本文介绍非常详细,具有参考价值,需要的朋友可以参考下
    2016-06-06
  • 你可能不知道的JavaScript位运算符详解

    你可能不知道的JavaScript位运算符详解

    位运算符是在数字底层(即表示数字的32个数位)进行操作的,下面这篇文章主要给大家介绍了一些你可能不知道的JavaScript位运算符的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解

    这篇文章主要介绍了javascript 中事件冒泡和事件捕获机制的详解的相关资料,网上的相关资料有很多,但是讲的不是多清楚,通过本文希望能让大家理解掌握,需要的朋友可以参考下
    2017-09-09
  • js倒计时显示实例

    js倒计时显示实例

    本文分享了js倒计时显示的实例,需要的朋友可以参考借鉴,下面就跟小编一起来看看吧
    2016-12-12
  • javascript中判断json的方法总结

    javascript中判断json的方法总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包,接下来跟着小编学习js中判断json的方法吧
    2015-08-08
  • IE7提供XMLHttpRequest对象为兼容

    IE7提供XMLHttpRequest对象为兼容

    IE7提供XMLHttpRequest对象为兼容...
    2007-03-03
  • Bootstrap栅格系统使用方法及页面调整变形的解决方法

    Bootstrap栅格系统使用方法及页面调整变形的解决方法

    这篇文章主要介绍了Bootstrap栅格系统使用方法及页面调整变形的解决方法,需要的朋友可以参考下
    2017-03-03
  • Javascript幻灯片播放功能实现过程解析

    Javascript幻灯片播放功能实现过程解析

    这篇文章主要介绍了Javascript幻灯片播放功能实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论