今天分享的主题是:《数据类型与强制类型转换》

原创 燃烧我的卡路里 随笔 分享心得 80阅读 2018-10-11 15:13:52 举报

JS 中的数据类型划分及包含值
typeof 运算符的应用
Number(),parseInt(),parseFloat(),Boolean(),String()转换规则
NaN 剖析与详解
时间:16:00
嘉宾:妙味讲师莫涛
方式:微信群内-文字直播

时间到了
调动一下大家学习的气氛


嗯,看来同学们已经期待很久了
当然一个技术分享签到红包也是必不可少的

嘻嘻,还是红包的力量大呦,唤醒了更多同学的“沉睡”

按照惯例
我们该了解一下同学们对这块知识点的掌握情况了

看来了解的同学还是蛮多的
会的同学可以复习一下
不会的同学要认真听讲哦
话不多说,以下就是本次分享的内容了

在 JS 中数据类型的划分分为两种方法:
一种是 ECMA 官方给出的标准划分;
一种是 根据 typeOf 运算符来进行划分;

标准定义:在标准定义中,我们的数据类型分为 基本类型 和 复合类型 两大类。

基本类型 划分了6种:
number、string、boolean、
undefined、null、Symbol

number: 数字类型,number中包含了我们所有的合法数字,无论小数还是证书,不过其中几个需要注意:
例如:
1、Number.POSITIVE_INFINITY(也可以直接使用 infinity)正无穷大;
2、Number.NEGATIVE_INFINTY(也可以直接使用 -infinity)负无穷大;
3、NaN 非数字, 在js中用来表示类型是number,但不是一个合法数字的数字。
string: 字符串类型,在 js 中放在一对引号中的 0 到 多个字符,我们就认定它是个字符串。

boolean: 布尔值类型,值就是 true 和 false。

undefined: 比如 var a,那么这个变量 a 的值就是undefined,也就是未定义。

null: 一个特殊的关键字,用来表示 null(空),常见情况,在我们获取元素没有获取到的时候,就是null。 虽然有时候,我们也会叫null为空对象。但是要注意null并不能像对象一样进行属性操作。

例如:
1、比如 null.name = 'miaov' 这样子些的话浏览器就会报错
Symbol: ES6新增的数据类型,但要注意Symbol的实力是唯一匿名的

例如:
1、console.log( Symbol() == Symbol() ); // false
因为 Symblo 的实力是唯一的,所以两个不同的实例的比较结果只能是个 false。
2、console.log(Symbol()); // 'Symbol()'
因为 Symbol 的计算结果是匿名的,所以我们在打印的时候哦,并不能看见他具体的值。
3、let id = Symbol();
let data = { id: id };
console.log( id == data.id ); // true
4、let id = Symbol('aa');
console.log(id); // 'Symbol("aa")'
复合类型 只有一种:object(对象)

根据 ECMA 官方规定的数据类型划分:对象中包含了我们常用的 function 函数,Array 数组,{}等数据格式。

根据程序中划分的数据类型:我们会经常用 typeof 来进行划分:typeof 操作符,会返回一个表示数据类型的字符串。

typeOf 划分中,JS 一共被划分成 7 种数据类型:
number、string、boolean、undefined、
symbol、object、function

typeof 划分和标准中定义的区别:typeof 中把 null 归为了 object 类型,但是function单独领出来变成一种类型。

例如:
1、var num = 1;
console.log( typeof num ) // number
2、var num2 = NaN;
console.log( typeof num2 ) // number
3、var str = 'miaov';
console.log( typeof str ) // string
4、var is = true;
console.log( typeof is ) // boolean
5、var u;
console.log( typeof u ) // undefined
6、var fn = funtion() {
alert(1);
};
console.log( typeof fn ) // function
7、var obj = {};
console.log( typeof obj ) // object
8、var n = null;
console.log( typeof n) // object
9、var id = Symbol();
console.log( typeof n) // symbol
数据类型的转换
为什么需要去转换,这个场景有很多,如果我去获取元素高度,先进行计算再改变高度,
那获取到的高度可能是 “100px”
这值是个字符串,但是运算的话我们需要的是个数字,这会就需要进行数据类型转换

强制类型转换
数据类型的转换,也分两种 强制类型转换 和 隐式类型转换,我们先来看强制类型转换

那什么叫强制类型转换呢,从字面的理解就是我们强行把一条数据进行类型转换

常用方法如下:

1、Number(val)方法,将数据转换成数字,接收的参数就是我们要转换的数据,返回值是转换后的结果。

Number 方法针对不同数据类型转换规则如下:

例如:
1、字符串类型,使用 Number()转换时,规则如下:
当整段字符串都是符合数字规则时,转换为数字返回;
空字符串,直接返回 0;
其余情况,直接返回 NaN;
2、布尔值类型,使用Number()转换时,规则如下:
true 返回 1, false 返回0;
3、null,使用 Number()转换时,返回 0;
4、undefined,使用 Number()转换时,返回 NaN;
5、Symbol,使用 Number()转换时,直接报错;
6、对象类型,使用 Number()转换时,会先调用对象的 valueOf() 方法,然后则调用对象的 toString() 方法,再依次照前面的字符串的转换规则进行转换。
2、parseInt(string,radix) 方法将数据转换成为整数返回。parseInt 使用时,要注意第一个参数接受的是个字符串,也就是我们要转换的数据,第二个参数 “基数”(选填参数),也可以理解为标注出我们要转换的这个字符串是几进制的数字。

parseInt 转换规则如下:

字符串类型的数据转换规则,会从整段字符串的第一位开始一位一位的向后匹配,直到佩佩到某一位不符合整数规则,就把这位之前提取到的数字返回。(如果第0位起就不符合整数规则,则直接返回 NaN)。其他非字符串类型的数据,会先转换成字符串之后,然后再参考此规则转换。
例如:
1、var a = 12.2
console.log(parseInt(a)); // 12
2、var b = "12abc"
console.log(parseInt(b)); // 12
3、var c = "a12bc"
console.log(parseInt(c)); // NaN
4、var d = ""
console.log(parseInt(d)); // NaN
基数的注意事项:
在使用 parseInt 的时候,最好设置一下基数(第二个参数),虽然大部分情况下 parseInt 会按照十进制识别我们传入的数据,但是一些特殊的情况下,还是会出问题:

例如:
1、var a = “0xf”
console.log(parseInt(a)); // 15
这里因 0x 是 16 进制的前缀所以这里识别成了 16 进制的数据
3、parseFloat(string)方法 将数据转换成为浮点数(也就是小数)。
parseFloat转换规则和 parseInt 类似,唯一的区别就是 parseFloat 可以多转换一个小数点。另外 parseFloat 中,只接收一个参数就是我们要转换的数据所以 parseFloat 也就没有进制问题。

4、String(val)方法 将数据转换成字符串。

例如:
1、数字类型,直接转换数据类型原样返回。 比如: 123 转换为 '123'
2、undefined ,直接返回字符串 undefined。比如: undefined 转换为 'undefined'
3、null,直接返回字符串 null。比如: null 转换为 'null'
4、布尔值,直接返回字符串 true 或者 false。比如: true 转换为 'true'
5、函数,直接把整个函数变成字符串返回。
比如: function(){alert("miaov")} 转换为 'function(){alert("miaov")}'
6、symbol,返回一个字符串 Symbol()。比如:Symbol() 转换为 'Symbol()'
7、对象,直接调用对象的 toString 方法 。比如:{} 转换为 '[object Object]'
5、Boolean(val)方法 将数据转换成布尔值。

例如:
1、数字类型,非零的合法数字转换为 true,零代表 false,NaN 代表 false
2、字符串类型:空字符串转换为 false,非空字符串转换为 true
3、null:转换为 false
4、对象:转换为 true
5、symbol:转换为 true
6、undefined:转换为 false
最后我们来道小抢答,
看看大家今天的数据转换是否有真的掌握

下列四项说法中,正确的是

A. 数据类型包含了:
object,null,number,string,function,symbol

B. 基础数据类型有 6 项,分别是:
number,string,symbol,NaN,boolean,undefined

C. 对象类型中包含了:
元素对象,{},new Object,[] ,function,null

D. typeof 的结果分别为:
object,number,string,function,symbol,undefined,boolean

大家开始抢答

抢答正确奖已出
发奖,发奖

好了,今天的技术分享到此为止,
感谢大家的支持,
我们下次见!

更多详情请见:https://www.miaov.com/index.php/news/newsList

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复