【WEB 前端抱团学习群】0409 期技术分享:数据类型划分

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?

——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?

——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?

——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?

——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?

——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?

——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……

——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


###下午,每一个整点时刻 妙味-大宝 都会发布群通知:

本周邀请了大家熟悉的妙味全职讲师 莫涛 给大家做分享
同时他也是我们 4 月 20 日 JS 远程班的讲师
如果大家有 JS 方面的问题
也可以在群里沟通交流讨论

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

  • JS 中的数据类型划分及包含值
  • typeof 运算符的应用
  • Number(),parseInt(),parseFloat(),Boolean(),String()转换规则
  • NaN 剖析与详解

时间:16:00
嘉宾:妙味讲师莫涛
方式:微信群内-文字直播

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


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

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

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


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


在 JS 中数据类型的划分分为两种方法:

一种是 ECMA 官方给出的标准划分;
一种是 根据 typeOf 运算符来进行划分;

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

基本类型 划分了6种:
numberstringboolean
undefinednullSymbol

number: 数字类型,number中包含了我们所有的合法数字,无论小数还是证书,不过其中几个需要注意:

  1. 例如:
  2. 1Number.POSITIVE_INFINITY(也可以直接使用 infinity)正无穷大;
  3. 2Number.NEGATIVE_INFINTY(也可以直接使用 -infinity)负无穷大;
  4. 3NaN 非数字, js中用来表示类型是number,但不是一个合法数字的数字。

string: 字符串类型,在 js 中放在一对引号中的 0 到 多个字符,我们就认定它是个字符串。

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

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

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

  1. 例如:
  2. 1、比如 null.name = 'miaov' 这样子些的话浏览器就会报错

Symbol: ES6新增的数据类型,但要注意Symbol的实力是唯一匿名的

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

复合类型 只有一种:object(对象)

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

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

typeOf 划分中,JS 一共被划分成 7 种数据类型:
numberstringbooleanundefined
symbolobjectfunction

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

  1. 例如:
  2. 1var num = 1;
  3. console.log( typeof num ) // number
  4. 2var num2 = NaN;
  5. console.log( typeof num2 ) // number
  6. 3var str = 'miaov';
  7. console.log( typeof str ) // string
  8. 4var is = true;
  9. console.log( typeof is ) // boolean
  10. 5var u;
  11. console.log( typeof u ) // undefined
  12. 6var fn = funtion() {
  13. alert(1);
  14. };
  15. console.log( typeof fn ) // function
  16. 7var obj = {};
  17. console.log( typeof obj ) // object
  18. 8var n = null;
  19. console.log( typeof n) // object
  20. 9var id = Symbol();
  21. console.log( typeof n) // symbol

数据类型的转换

为什么需要去转换,这个场景有很多,如果我去获取元素高度,先进行计算再改变高度,
那获取到的高度可能是 “100px”
这值是个字符串,但是运算的话我们需要的是个数字,这会就需要进行数据类型转换

强制类型转换

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

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

常用方法如下:

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

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

  1. 例如:
  2. 1、字符串类型,使用 Number()转换时,规则如下:
  3. 当整段字符串都是符合数字规则时,转换为数字返回;
  4. 空字符串,直接返回 0
  5. 其余情况,直接返回 NaN
  6. 2、布尔值类型,使用Number()转换时,规则如下:
  7. true 返回 1 false 返回0
  8. 3null,使用 Number()转换时,返回 0
  9. 4undefined,使用 Number()转换时,返回 NaN
  10. 5Symbol,使用 Number()转换时,直接报错;
  11. 6、对象类型,使用 Number()转换时,会先调用对象的 valueOf() 方法,然后则调用对象的 toString() 方法,再依次照前面的字符串的转换规则进行转换。

2、parseInt(string,radix) 方法将数据转换成为整数返回。parseInt 使用时,要注意第一个参数接受的是个字符串,也就是我们要转换的数据,第二个参数 “基数”(选填参数),也可以理解为标注出我们要转换的这个字符串是几进制的数字。

parseInt 转换规则如下:

  1. 字符串类型的数据转换规则,会从整段字符串的第一位开始一位一位的向后匹配,直到佩佩到某一位不符合整数规则,就把这位之前提取到的数字返回。(如果第0位起就不符合整数规则,则直接返回 NaN)。其他非字符串类型的数据,会先转换成字符串之后,然后再参考此规则转换。
  2. 例如:
  3. 1var a = 12.2
  4. console.log(parseInt(a)); // 12
  5. 2var b = "12abc"
  6. console.log(parseInt(b)); // 12
  7. 3var c = "a12bc"
  8. console.log(parseInt(c)); // NaN
  9. 4var d = ""
  10. console.log(parseInt(d)); // NaN

基数的注意事项
在使用 parseInt 的时候,最好设置一下基数(第二个参数),虽然大部分情况下 parseInt 会按照十进制识别我们传入的数据,但是一些特殊的情况下,还是会出问题:

  1. 例如:
  2. 1var a = 0xf
  3. console.log(parseInt(a)); // 15
  4. 这里因 0x 16 进制的前缀所以这里识别成了 16 进制的数据

3、parseFloat(string)方法 将数据转换成为浮点数(也就是小数)。
parseFloat转换规则和 parseInt 类似,唯一的区别就是 parseFloat 可以多转换一个小数点。另外 parseFloat 中,只接收一个参数就是我们要转换的数据所以 parseFloat 也就没有进制问题。

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

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

5、Boolean(val)方法 将数据转换成布尔值。

  1. 例如:
  2. 1、数字类型,非零的合法数字转换为 true,零代表 falseNaN 代表 false
  3. 2、字符串类型:空字符串转换为 false,非空字符串转换为 true
  4. 3null:转换为 false
  5. 4、对象:转换为 true
  6. 5symbol:转换为 true
  7. 6undefined:转换为 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

大家开始抢答



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


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


精彩课程推荐:

足不出户,享受优质远程课程!

远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322

远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316

远程《妙味 React+redux 高阶实战项目班》
https://www.miaov.com/index.php/news/newsDetail/nid/338

超五星级优质远程课服务:

1、系统完善的课程体系——内容有保障;
2、技术精湛的资深讲师授课——品质有保障;
3、远程视频直播 + 录播双管齐下——复习有保障;
4、全职老师全天 14 小时轮换在线答疑——服务有保障;
5、作业批改与练习讲解服务——答疑解惑有保障;
6、阶段式测评服务——学习效果有保障;
7、结课项目由妙味讲师倾心指导——毕业作品有保障;
8、简历指导 + 面试过程专人跟进——学完就业有保障;

报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690
• 微信:miaov-class

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部