前端基础整理-JS数据类型转换

前言

JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据,本文主要介绍有关数据类型的转换

JS数据类型

  • 基础类型:string number boolean null undefined symbol
  • 引用类型:object

显式类型转换

指的是主动调用函数实现数据类型的转换,隐式转换主要是基于以下三种方式进行:

Number函数

Number(666) // 666
Number('123') // 123
Number('') // 0
Number('123sd') // NaN
Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN
  1. 第一步先调用对象的valueOf方法,如果返回值为基本类型则不执行第二步
  2. 第二部调用对象的toString方法,如果返回值为符合类型则报错
var a = {a: 1}
Number(a) // NaN
/** 内部执行流程 **/
var tmp1 = a.valeOf() // {a: 1}
var tmp2 = tmp.toString() // "[object Object]"
Number(tmp2) // NaN

String函数

String(123) // '123'
String('123') // '123'
String(true) // 'true'
String(false) // 'false'
String(null) // 'null'
String(undefined) // 'undefined'
  1. 第一步先调toString方法,如果返回值不是基础类型执行第二步
  2. 第二步调用valueOf方法,如果返回值不是基础类型,报错
var a = {a: 1}
String(a) // '[object Object]'

验证工作原理

a.toString = function () { return 'hi' }
String(a) // 'hi'
a.toString = function () { return [] }
a.valueOf = function () { return 'hello world' }
String(a) // 'hello world'
a.valueOf = function () { return {b: 1} }
String(a) // 报错
Error: Uncaught TypeError: Cannot convert object to primitive value
        at String (<anonymous>)
        at <anonymous>:10:1

Boolean函数

Boolean(+0)
Boolean(-0)
Boolean(NaN)
Boolean('')
Boolean(false)
Boolean(undefined)
Boolean(null)
// 都为false其余都为true

隐式类型转换

隐式转换的基石就是js引擎自动调用显示类型转换的方法,在以下三种情况下发生:

四则运算

  • 转String类型
1 + 'asd123' // '1asd123'
    • / 转Number类型
1 - 'asd123' // NaN
1 / 'asd123' // NaN
1 * 'asd123' // NaN

判断语句

转Boolean类型

1 - 'asd' || true // true
if ( 1 - 'asd') { ... } // false

native调用

按上述规则进行隐式转换

console.log(1-'asd123') // NaN
console.log(1 + 'asd123') // '1asd123'
...

类型检测typeof

参考资料

原文链接:segmentfault.com

上一篇:jwt 实践应用以及特殊案例思考
下一篇:webpack常用构建优化总览

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    1 个月前
  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    1 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    2 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    23 天前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    2 个月前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rcbullets,项目约70%的代码基于rcbullets,首先要感谢这个项目的作者,如...

    5 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的“类“究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​ 面向...

    3 个月前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    3 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    3 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    3 个月前

官方社区

扫码加入 JavaScript 社区