返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解JavaScript对象转原始值
  • 706
分享到

详解JavaScript对象转原始值

2024-04-02 19:04:59 706人浏览 泡泡鱼
摘要

目录Object.prototype.valueOf()Object.prototype.toString()Symbol.toPrimitive对象转换原始值1. 预期被转换成字符

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 // 246
3 + obj // '3Default'
obj == 'default' // true
String(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) // 2
console.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()方法;

总结

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

--结束END--

本文标题: 详解JavaScript对象转原始值

本文链接: https://lsjlt.com/news/159623.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解JavaScript对象转原始值
    目录Object.prototype.valueOf()Object.prototype.toString()Symbol.toPrimitive对象转换原始值1. 预期被转换成字符...
    99+
    2024-04-02
  • JavaScript对象转原始值是什么
    这篇文章主要讲解了“JavaScript对象转原始值是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript对象转原始值是什么”吧!Object.prototype.valu...
    99+
    2023-06-22
  • 浅析JavaScript对象转换成原始值
    目录前言三种算法对象转换成布尔值对象转换成字符串对象转换成数值转换时使用的方法toString()valueOf()转换算法偏字符串算法偏数值算法无偏好算法练习题前言 首先抛出几个问...
    99+
    2024-04-02
  • JavaScript原始值与包装对象的详细介绍
    目录前言正文原始类型 (Primitive types)原始值 (Primitive values)包装对象 (Wrapper objects)对象 (Object)构造函数 (Co...
    99+
    2024-04-02
  • JavaScript原始值与包装对象介绍
    这篇文章主要介绍“JavaScript原始值与包装对象介绍”,在日常操作中,相信很多人在JavaScript原始值与包装对象介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • JavaScript原始值与包装对象的示例分析
    这篇文章主要介绍JavaScript原始值与包装对象的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平...
    99+
    2023-06-15
  • JavaScript中怎么将对象转换为原始类型
    这篇文章将为大家详细讲解有关JavaScript中怎么将对象转换为原始类型,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。说明将原始类型的对象转换为内置的[ToPrimitive]函数。使用S...
    99+
    2023-06-20
  • Javascript对象及Proxy工作原理详解
    正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对。但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象...
    99+
    2022-11-13
    Javascript对象Proxy Javascript Proxy
  • JavaScript history 对象详解
    目录1、路由导航2、历史状态管理API(1)hashchange 事件(2)popstate 事件(3)history.pushState() 方法(4)history.replac...
    99+
    2024-04-02
  • JavaScript原始值是什么
    今天小编给大家分享一下JavaScript原始值是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2024-04-02
  • JavaScript中原始值和引用值深入讲解
    目录值和引用相关内容1. 简单值(原始值)2. 复杂值(引用值)3. 访问方式4. 比较方式5. 动态属性6. 变量赋值灵魂拷问总结值和引用相关内容 在 JavaScrip...
    99+
    2022-11-13
    js中的原始值 原始值和引用值的区别 js原始值有哪些
  • Java将json对象转换为map键值对案例详解
      本文的目的是把json串转成map键值对存储,而且只存储叶节点的数据   比如json数据如下:   {responseHeader:{status:0,QTime:0},spe...
    99+
    2024-04-02
  • JavaScript的Proxy对象详解
    目录一、Proxy 是什么?二、怎么用?1、使用 Proxy 的简单实例2、目标对象被正确修改3、使用 set handler 做数据验证4、扩展构造函数总结一、Proxy 是什么?...
    99+
    2024-04-02
  • 详解JavaScript原型对象的this指向问题
    目录一、this指向二、修改this指向1、call()方法2、apply()方法总结 一、this指向 构造函数中的this 指向实例对象。那么原型对象this的指向呢? 如下:...
    99+
    2024-04-02
  • JavaScript预解析,对象详解
    目录一、预解析1、变量预解析和函数预解析1、变量预解析2、函数预解析2、预解析案例二、对象1、创建对象的三种方式1、利用字面量创建对象2、利用newObject创建对象3、利用构造函...
    99+
    2024-04-02
  • JavaScript style对象与CurrentStyle对象案例详解
    1、Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式,即元素标签中style属性的值。 例子: &...
    99+
    2024-04-02
  • JavaScript操作DOM对象详解
    一、DOM基础 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树,运行开发人员添加...
    99+
    2024-04-02
  • 详解JavaScript原始数据类型Symbol
    目录简介描述信息命名冲突私有属性总结简介 创建symbol变量最简单的方法是用Symbol()函数。sysmbol变量有两点比较特别: 1.它可以作为对象属性名。只有字符串和 sym...
    99+
    2024-04-02
  • JavaScript对象(详细)
    目录JavaScript对象1.定义2.对象的分类3.定义对象4.访问对象中的属性5.给对象添加属性6.删除对象属性7.Object根构造函数8.对象属性的检测9.引用传递和值传递1...
    99+
    2024-04-02
  • 关于ECMAScript中的原始值和引用值详解
    目录前言什么是动态属性 值的复制 判断值类型 总结前言 这应该是很基础的 JavaScript 的知识点,但估计很多小伙伴都只是简单带过,到面试时一问三不知。这里结合我之前的笔记,再...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作