JS中的数据类型转换

ES5中一共有6种数据类型,其中5种基本类型(String、Number、Boolean、Null、Undefined),1种引用类型(Object)。基本类型值可以相互换转换,并且引用类型值也可以通过某种方式转换成基本类型值。

引用类型值转换为基本类型值的方法有两个,分别是 valueOf方法和toString方法。

强制转换为基本类型值可以使用各自的函数 String,Boolean, Number。

转换为String

类型strting值
String“a”“a”
Number1“1”
Booleantrue“true”
Booleanfalse“false”
Nullnull“null”
Undefinedundefined“undefined”
Object{}{}.toString()

普通对象Object转换为String,如果Object没有自定义toString方法则默认返回对象的[[class]]属性,如题如下:

1.自定义对象具有toString方法

var a = {toString: function(){return '我是toString的返回值';}
};
String(a); //我是toString的返回值

2.自定义对象并不具有toString方法

var a = {};
String(a); // [object Object]var b = [];
String(b); // "" 数组有自定义的toString方法 将数组元素用 , 拼接成字符串并返回

注:Number转换为String稍微有点特殊,如果数字过大或者过小则用指数表示。

转换为Number

类型Number值
Number11
String“”0
String“1”1
String“1a”NaN(数字的一种,意思是Not a Number)
Booleantrue1
Booleanfalse0
Nullnull0
UndefinedundefinedNaN
Object{}调用 valueOf() 或者 toString()

对象转为Number类型步骤:

  1. 调用对象的 valueOf 方法(如果有该方法),检查返回值
  2. 如果valueOf返回值是基本类型则转为Number
  3. 如果valueOf返回值不是基本类型则调用toString
  4. 如果toString返回值是基本类型则转为Number
  5. 如果toString返回值也不是基本类型则报错

1.具有valueOf方法和toString方法的对象

var a = {valueOf: function(){return 1;},toString: function(){return '2';}
}
Number(a); // 1

2.只具有toString方法的对象

var a = {toString: function(){return '2';}
}
Number(a); //2  这个 2 是数字并不是字符串

3.具有返回引用类型值得valueOf方法和toString方法

var a = {valueOf: function(){return {};},toString: function(){return {};}
}
Number(a); //TypeError 错误

转换为Boolean

在JS中所有值可以分为两类真值假值,对象(引用类型)一般都是真值。

类型Boolean类型
Booleantruetrue
Booleanfalsefalse
String“1”true
String“”false
Number0false
Number1true
NumberNaNfalse
Object{}true

隐式强制类型转换

在JS中有很多的隐式强制类型转换,在一些并不明显的地方发生了强制类型转换,例如加法运算符(+),减法运算符(-),逻辑运算符 && 和 ||等。

符号 + 中出现的隐式强制类型转换

加法运算符既可以用作字符串的拼接,也可以用作数字的相加。

加法运算符的两个操作数只要有一个是字符串则执行字符串的拼接,否则执行数字的相加。

var a = '1' + 1;
console.log(a); // '11'var b = 1 + 1;
console.log(2); // 2

加法运算符的两个操作数中如果有对象则遵循以下步骤:

  1. 调用 valueOf 方法,如果返回值是基本值则依据第一条继续执行相加操作

  2. 如果返回值不是基本值则调用 toString 方法,如果返回值是基本值则依据第1条继续执行相加操作

  3. 如果 toString 也不返回基本值则报错

// 1. 应该是首先调用valueOf方法,并且对于返回的基本类型值不会toNumber
var a = {valueOf: function(){return '1';},toString: function(){return 1;}
};console.log(a + 1); // '11'// 2. 如果valueOf返回的不是基本类型值则调用toString
var b = {valueOf: function(){return {};},toString: function(){return '1';}
};console.log(b + 1); // '11'// 3. 如果两个方法都不返回基本类型值则报错
var c = {valueOf: function(){return {};},toString: function(){return {};}
};console.log(c + 1); TypeError 报错了

如果操作数中有Boolean,依据另一个操作数的类型来强制类型转换

  1. 另一个操作数是String则将Boolean转换为String,依据转换为String规则

  2. 另一个操作数是Number则将Boolean转换为Number,依据转换为Number规则

var a = 1 + true; 
console.log(a); // 2var b = 1 + false;
console.log(b); // 1var c = '1' + true; // '1true'
console.log(c); // '1true'var d = '1' + false;
console.log(d);  // '1false'

根据以上规则经常看到的 a + '' 就不难理解了,就是要将a转换为字符串。但是要注意的是a如果是对象的话和直接调用String(a)的结果在特定情况下还是有区别的。区别在于String方法并不会调用valueOf方法(但是正常情况下并不会自定义对象的valueOf方法)。

算术运算符中除了 + 以外的其他运算符都会将两个操作数依据转换为Number规则换为Number,然后在进行操作。

关于 [] + {} 和 {} + [] 得到结果不一样的解释

[] + {}; // 控制台中结果是 "[object Object]"{} + []; // 控制台中结果是 数字0

[]转为基本类型值为 “” 空子符串,{}转为基本类型值为”[object Object]”则得到结果”[object Object]”

JS中以大括号开头会被当做代码块,{} + [] 解释为 +[]则得到了0

到Boolean类型值的隐式强制类型转换

在以下语句和表达式中需要Boolean类型值的地方都会出现依据转为Boolean规则向Boolean类型值转换:

  1. if( … )
  2. for( …; …; … ) 括号中第二个表达式
  3. while( … ) 和 do…while( … )
  4. … ? … : …
  5. 逻辑运算符 && 和 || 的左操作数(为什么是左操作数?右边为什么没有变成Boolean类型值?)
  6. ! 取反

宽松等于(==)中的隐式强制类型转换

在JS中宽松等于有很多让人捉摸不透的地方例如 [] == false 返回的是true,但是 [] 显然并不是假值但是却相等,[]==![] 你猜的没错这个也返回true,"0"==false 你又才对了这个返回的还是true,我想说的是”0”并不是假值但是为什么还会返回true呢???

详情请看 JS中令人捉摸不透的宽松等于

参考:
你不知道的javascript中卷

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拯救我的操作系统

最近公司新装操作系统image都强制装win7,公司电脑一直拖着没有升级,家里也一直是用番茄花园版的xp,突然心血来潮去买了个win7的碟,心想最好是破解版的,回来一装,发现是所谓的旗舰版的,可恶的是这…

Hazelcast的MapLoader陷阱

Hazelcast提供的核心数据结构之一是IMap<K, V> &#xff0c;它扩展了java.util.concurrent.ConcurrentMap它基本上是一个分布式地图&#xff0c;通常用作缓存。 您可以将此类地图配置为使用自定义MapLoader<K, V> -每次尝试从该地图&#xff08;通过键&#xff09;…

《Android开发从零开始》——22.数据存储(1)

本节课的主要内容有&#xff1a;1.介绍Android中数据存储方式2.介绍SQLite3.讲解SQLite数据类型4.讲解基本SQL命令 课程下载地址&#xff1a;http://u.115.com/file/clc4te8w课件及源码下载地址&#xff1a;http://u.115.com/file/clc41tt5转载于:https://www.cnblogs.com/cool…

计划Java EE 7批处理作业

Java EE 7添加了使用JSR 352以标准方式执行批处理作业的功能。 <job id"myJob" xmlns"http://xmlns.jcp.org/xml/ns/javaee" version"1.0"><step id"myStep"><chunk item-count"3"><reader ref"…

webpack配置说明

webpack是一个现代JavaScript应用程序的静态模块打包器。 它有几个核心概念&#xff1a; 一、entry&#xff08;入口&#xff09; 指示webpack应该使用哪个模块&#xff0c;来作为构建其内部依赖图的开始&#xff0c; 可以在webpack.config.js中配置entry属性&#xff0c;来指…

poj 2137

题目大意&#xff1a; 农夫FJ想把他所有的牛在它们吃草的时候用一根绳子连起来&#xff08;就是1-2-3-1按顺序连接起来&#xff09;&#xff0c;每头牛有若干个吃草的位置&#xff0c;它们必须要在这些位置吃草。 用绳子连接两头牛需要绳子的长度公式为 Sqrt( Sqr( x1-x2 ) Sq…

JS中捉摸不透的==(宽松等于)

首先来看一个有意思的面试题&#xff1a; if(a 3 && a 4){//... }第一眼看到这个面试题我是拒绝的&#xff0c;这个等式根本不会成立&#xff0c;怎么会存在一个值既等于3并且还同时等于4呢&#xff1f;根本不可能。 但是在神奇的javascript中这个a是存在的。&…

vue脚手架的使用

安装&#xff1a;1.全局安装脚手架&#xff1a;cnpm install -g vue/cli 使用&#xff1a;2.新建文件夹,在当前目录执行命令 vue create "项目名称"3.配置&#xff1a;选择Manually select feautures--》空格选择Babel和CSS Pre-procesors--》选择Sass/SCSS(with dar…

Akka笔记–演员介绍

过去做过多线程的任何人都不会否认管理多线程应用程序有多么艰辛和痛苦。 我说管理是因为它一开始很简单&#xff0c;一旦您开始看到性能改进&#xff0c;它就会变得非常有趣。 但是&#xff0c;当您发现没有一种简单的方法可以从子任务中的错误或难以发现的僵尸错误中恢复时&a…

浏览器的同源策略与跨域

本文所有案例在本地址都可找到&#xff1a;https://github.com/dancingZhou/sameOrigin/tree/dev 什么是同源策略 两个页面地址中的协议、域名和端口号一致&#xff0c;则表示同源。 例如该地址 https://www.google.com 和以下地址对比 地址同源原因http://www.google.com否…

poj 1185

经典状态dp 代码&#xff1a; #include<iostream> #include<fstream> #include<cmath>using namespace std;int n,m;char map[101][11];int state[101][1024]; int num[101]; int value[1024]; int maxx;int ok(int s,int t){int i,j,k;for(i0;i<m;){jt&…

day03 爬虫

今日内容&#xff1a;一 爬虫原理二 Requests请求库一 爬虫原理1.什么是互联网&#xff1f;指的是由一堆网络设备&#xff0c;把一台台的计算机互联网到一起称之为互联网。2.互联网建立的目的&#xff1f;互联网建立的目的是为了数据的传递以及数据的共享。3.什么是数据&#x…

Java英雄:丹·艾伦

“ Java英雄 ”系列休息了很长时间。 老实说&#xff0c;我想即使有很多人想在这里收录&#xff0c;它也可能会以虚无收场。 其中之一是丹。 我第一次要求他捐款已经将近一年半了&#xff0c;与此同时发生的一切&#xff0c;让我不再有任何答案就让我安心了。 但是以下内容在Ja…

yearProgress.vue

1 <template>2 <div class"progressbar">3 <el-progress :text-inside"true" :soke-width"18" :percentage"percent" status"exception"></el-progress>4 <p>{{year}}年已经过去了…

group by rollup

首先引用ITPUB上的总结&#xff1a; rollup(a,b,c)----------------> 从右到底递减汇总>group by a,b,c (减0次)UNION ALL>group by a,b (减1次)UNION ALL>group by a (减2次)UNION ALL>group by null(全部汇总) (全部减掉)移动了4次&#xff0c;所…

Java-Class-I:java.util.List

ylbtech-Java-Class-I&#xff1a;java.util.List1.返回顶部 1.1、import java.util.ArrayList;import java.util.List; 1.2、List<Integer> newList new ArrayList<Integer>();newList.add(3); 2、 2.返回顶部1.1、import java.util.*;public class Test{public …

JS中编码的三种方法

在开发中经常需要对用户输入的数据进行编码然后才能通过HTTP请求发送给后台&#xff0c;或者对传递过来的数据进行解码。在JS中原生提供了三种编码/解码方式&#xff0c;分别是 encodeURI、 encodeURIComponent和 escape。 为什么URL需要编码&#xff1f; URI设计要求可移植&…

一个类加载的谜团解决了

面对一个好老问题 我在应用程序服务器上遇到一些类加载问题。 这些库被定义为Maven依赖项&#xff0c;因此被打包到WAR和EAR文件中。 不幸的是&#xff0c;其中一些也已安装到应用程序服务器中&#xff0c;但版本不同。 启动应用程序时&#xff0c;我们遇到了与这些类型的问题相…

vue 隐藏滚动条

element-ui隐藏组件scrollbar&#xff1a; <el-scrollbar style"height:100%"> </el-scrollbar>真正的隐藏滚动条代码在这里&#xff1a;.el-scrollbar__thumb {display: none;}.el-scrollbar__wrap {overflow-x: hidden;overflow-y: auto;}更多专业前端…

希望菜鸟通过博客园的记录和学习,成为一个可以能把自己想发实现的小程序员!...

我是一个学习电气自动化专业的毕业生&#xff0c;工作多年&#xff0c;接触过c语言、vb、单片机、PLC、linux&#xff0c;希望菜鸟通过博客园的记录和学习&#xff0c;成为一个可以能把自己想发实现的小程序员&#xff01; 生活和工作中有许多自己的表格和统计数据&#xff0c;…