JS系列:js数据类型的转换

数据类型的转换
【基本数据类型】
数字 number
字符串 string
布尔 boolean
空 null
未定义 undefined
【引用数据类型】
对象 object
普通对象 {}
数组对象 [](Array)
正则对象 (RegExp)
日期对象 (Date)
数学函数 (Math)

函数 function

真实项目中根据需求,我们徐亚进行对数据类型转换(规则和规则之间是相互独立的,千万不要混着记)

把其他数据类型转换为number类型
1.发生的情况
- isNaN检测的时候:当检测的值不是数字类型,浏览器会自己调用Number方法把它先转化为数字,然后再检测是否为非有效数字。

例子1:isNaN(‘3‘) =>false
Number(‘3‘) ->3
isNaN(3) ->false 是有效数字
例子2:isNaN(‘3px‘) =>false
Number(‘3px‘) ->NaN
isNaN(3) ->true 非有效数字
1
2
3
4
5
6
基于parseInt/parseFloat/Number 去手动转换为数字类型
数学运算:+ - * / %,但是"+"不仅是数学运算,也可能是字符串拼接
‘3‘- 1 =>2
Number(‘3‘)->3
3-1->2

‘3px‘- 1 =>NaN

‘3px‘+ 1 =>‘3px1‘ 字符串拼接

var i=‘3‘;
i=i++; => 4 // i++就是单纯的数学运算,不是字符串拼接
i=i+1; => ‘31‘
i+=1; => ‘31‘
1
2
3
4
5
6
7
8
9
10
11
12
在基于"=="比较的时候,有时候也会把其他的值转换为数字类型。
2.转换规律
转换的方法:Number (浏览器自行转换都是基于这个方法完成的)
【把字符串转换为数字】
只有遇到一个非有效数字字符,结果都是NaN
Number(’’) ->0
’ ’ ->0
‘\n’ ->0 // \n为换行符
‘\t’ ->0 // \t为制表符键盘 也就是Tab,一个Tab就是4个空格键盘
【把布尔转换为数字】
true->1
false->0
【把没有转换为数字】
null ->0
undefined ->NaN
【把引用类型转换为数字】
首先先转换为字符串(toString),然后再转换为数字(Number)

把其他的值转化为字符串
1.发生的情况
- 基于alert/confirm/prompt/document.write 等方法输出内容的时候,会把输出的值转化为字符串,然后输出。

alert(1)=>‘1‘
1
基于’+‘进行字符串拼接的时候
把引用值转换为数字的时候,首先为转换为字符串,然后再转换为数字,
对对象设置属性名,如果不是字符串,首先转换为字符串,然后再当做属性存储到对象中(对象的属性只能是数字或者字符串)
手动调用toString/toFixed/Join/String等方法的时候,也是为了转换为字符串
var m = Math.PI //=>获取圆周率
m.toFixed(2) => ‘3.14‘

var ary = [12,34,23];
ary.join(‘+‘) = ‘12+34+23‘
1
2
3
4
5
2.转换规律

//=>调用的方法:toString

1 -> ‘1‘
[] -> ‘‘
[12] -> ‘12‘
[12,23] -> ‘12,23‘

(function(){}).toString() =>"function(){}"
new Date().toString() =>"Mon Dec 09 2019 15:13:53 GMT+0800 (中国标准时间)"
...
【对象】
{name:‘xxx‘} -> ‘[object Object]‘
{} -> ‘[object Object]‘
不管是啥样的普通对象,最后结果都是一样的。
1
2
3
4
5
6
7
8
9
10
11
12
把其他的值转换为布尔类型
1.发生的情况
- 基于!/!!/Boolean等方法转换
- 条件判断中的条件最后都会转换为布尔类型

if(n){
//=>把n的值转换为布尔验证条件真假
}
if(‘3px‘+3){
//=>先计算表达式的结果‘3px3‘,把结果转换为布尔true,条件成立。
} alert(1)=>‘1‘
1
2
3
4
5
6
2.转换规律
只有"0/NaN/null/undefined/‘‘ "五个值转换为布尔的false,其余为true

特殊情况:数学运算与字符串拼接 “+”
//=>当表达式中出现字符串,就是字符串拼接,否则就是数学运算
1+true => 2 不是字符串当做数学运算,true变成1,所以为2
‘1‘ + true => ‘1true‘ 字符串拼接

[12]+10 =>‘1210‘ 虽然现在没看到字符串,但是引用类型转换为数字,首先会转换为字符串,所以会变成了字符串拼接
({})+10 =>"[object Object]10"
[]+10="10"

{}+10 =>10 这个和以上说的没有任何关系,因为不是数学运算,也不是字符串拼接,它是两部分代码
{} 代表一个代码块(块级作用域)
+10 才是我们的操作
严格写法:{}; +10
function fn(); + 10 =>10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
思考题:

12+true+false+null+underfined+[]+‘前端‘+null+underfined+[]+true =>"NaN前端nullundefinedtrue"
解析:
12+true =>13
13+false =>13
13+null =>13
13+undefined =>NaN
NaN+[] =>‘NaN‘
‘NaN‘+‘前端‘ =>‘NaN前端‘
...
‘NaN前端trueundefined‘+[] =>‘NaN前端trueundefined‘
...
=>‘NaN前端trueundefined‘
1
2
3
4
5
6
7
8
9
10
11
12
特殊情况:"=="在进行比较时候,如果左右两边的数据类型不一样,则先转换为相同的类型,在进行比较
对象==对象:不一定相等,因为对象操作的是引用地址,地址不相同,则不相等

{name:‘xxx‘} == {name:‘xxx‘} =>false
[]==[] =>false

var obj1={};
var obj2=obj1;
obj1==obj2 =>true
1
2
3
4
5
6
对象数字:把对象转换为数字
对象布尔:把对象转换为数字,把布尔也转换为数字
对象字符串:把对象转换为数字,把字符串转换为数字
字符串数字:字符串转换为数字
字符串布尔:都转换为数字
布尔数字:布尔转换为数字
=====================>不同情况的比较,都是把其他的值转换为数字,然后再进行比较
nullundefined: true
nulll=undefined:false
null&undefined和其他值都不相等

NaN==NaN:false
NaN和谁都不相等包括自己
=============================>以上都需要特殊记忆

1==true =>true
1==false =>false
2==true =>false 规律不要混淆,这里是把true变为数字1

[]==[] =>false
![]==[] =>true
[]==false => true //转换为数字都为0
[]==true => false //[]转换为数字都为0,true转换为数字都为1

![]==false =>true 先算![],把数组转换为布尔取反=>false =>false==false
![]==true =>false //true为1 ,![]为0
————————————————

原文地址:https://www.cnblogs.com/fron-tend/p/12050524.html

时间: 2024-09-30 21:31:07

JS系列:js数据类型的转换的相关文章

js中的数据类型及其转换

Js中的数据类型 Js中的数据类型一共有六种,即number,string,boolean,underfine,null,object. 一,number Number数据类型指的是数字,可以为整型,也可以是浮点数.如 var a=12,b=12.5; 二,string 字符串由零个或多个字符构成,字符包括字母,数字,标点符号和空格;需要注意的是 字符串必须放在引号里(单引号或双引号); 如 var bob=”man”; alert(“bob”); alert(bob); 浏览器首先会弹出包含有

JS中的数据类型和转换

一.JS中的数据类型 js中的数据类型可以分为五种:number .string .boolean. underfine .null. number:数字类型 ,整型浮点型都包括. string:字符串类型,右数字字母字符串以及标点符号组成,必须放在单引号或者双引号中. boolean:布尔类型,只有true和false两种值. underfine:未定义,一般指的是已经声明,但是没有赋值的变量,如var a; null:空对象类型,var a = null,和var a=""有区别;

js中关于数据类型的转换

* 一.转化为数字*/console.log(‘123123’*1.0); /* 二.从一个值中提取另一中类型的值,并完成转化工作 */console.log(parseInt(‘1233zxhag’)); //1233console.log(parseFloat(‘1.123aef’)); //1.123console.log(eval(1+123)); //124console.log(toString(123)); //[object Window] ‘123’ /* 将整个值从一种类型转

JS的数据类型及转换(还是基础的东西)

朋友说我这是再自娱自乐,我只想说,你说的对????????!其实也不然,这算是我对自己的基础的一次彻底性的重新梳理以及闲的无聊,找点显得比较有意义的事情做罢了. 回归正题,在JS中,数据类型有哪些呢?看看下图 字符串.数字.布尔类型就不细说了,这些大家都懂,说一些大家关注度比较少的东西...... NULL和Undefined: NULL和Undefined一样都只有一个值,并且都是他们本身,但是有一点特别的有意思,那就是: 在W3C里事这样解释这两个东西的: 值 undefined 实际上是从

js显示数据类型的转换

js中数据类型装换 ### 显示数据类型的转换 typeof:能防回六中操作类型的数据:Number, String, Boolean, Objecet, undefined, function ~JavaScript var a = 1; //conloe.log(typeof(a)) 值为Number var a = []; //conloe.log(typeof(a)) 值为Object var a = {}; //conloe.log(typeof(a)) 值为Object var a

js数据类型的转换

js中数据类型转换 显示数据类型的转换 typeof:能返回六中操作类型的数据:Number, String, Boolean, Objecet, undefined, function var a = 1; //conloe.log(typeof(a)) 值为Number var a = []; //conloe.log(typeof(a)) 值为Object var a = {}; //conloe.log(typeof(a)) 值为Object var a = null; //conloe

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

JS与JAVA数据类型的区别

JavaScript与Java数据类型的区别 阅读目录 Number String Boolean Null Undefined Object 今天开始正式认真学习js,虽然在平常j2ee开发中也经常用到JS但并不精通,这次随笔记下js与Java数据类型的不同之处 回到顶部 Number 与java不同,js作为弱类型语言即使在浮点数与整数上也未作明确区分,Number值可以是var a = 5 or  5.5,以及其他进制如八进制 var a  = 070.甚至是科学计数 var a = 3.

js中的数据类型

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <script>            /*             * js中的数据类型             *     一.基本(简单)数据类型