最熟悉的陌生人：JavaScript数据类型

raledong 发布于2019-08-23 16:17 / 3111人阅读

摘要：使用格式表示整数和浮点数，一般来说整数占用了位，而浮点数数占用位。要比较浮点数是否相等，可以采用是一个非常小的数值，如果两个浮点数相减小于，则可以为认为是相等。

最近面试了三个开发，他们都没有说清楚JS的基本类型有哪些。而且往往错误的说了一些C语言的数据类型，例如int, float, double之类的数据类型。

无论什么语言，熟练掌握数据类型都是这门语言最根本的知识点

JS数据类型分为两类，一类是基本类型，他们有

Number

String

Boolean

Undefined

Null

Symbol

js的基本类型就这么几个，除此之外，其他的类型都是对象。

Number类型

在JS没有整型，float，或者double类型的数值，所有数值统一叫做Number类型。

JS使用IEEE754格式表示整数和浮点数，一般来说整数占用了32位，而浮点数数占用64位。因为浮点数占用的内存空间是整数的两倍，所以js会适当的把浮点数转化为整数储存。

4.0 === 4 // true

数值类型都是有大小范围的

Number.MAX_VALUE  // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324
Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

浮点数一般都是计算结果不准确的，这不是JS的问题，所有语言中都有这个问题。

计算0.1 + 0.2 === 0.3这个结果永远是false。

要比较浮点数是否相等，可以采用Number.EPSILON, Number.EPSILON是一个非常小的数值，如果两个浮点数相减小于Number.EPSILON，则可以为认为是相等。

Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON // true

Number类型中有三个比较特殊的兄弟

Infinity 当数值超过Number类型的最大值，他就会变成正无穷

-Infinity 当数值类型小于Number类型的最小值，就会变成负无穷

NaN NaN的意思是它不是一个数值，例如某个字符串除以0，一般语言都会报错，但是js不会，而是该变量的值会变成NaN。

// Infinity与NaN的区别
"90"/4 // 22.5
"90n"/4 // NaN
"90"/0 // Infinity
"90n"/0 // NaN
"90N"/"a" // NaN

数值类型一旦变成这三个兄弟，就无法参与后续的数值运算。

数值计算

数值计算操作符有很多，常见的有加减乘除，自增，自减。

变量在参与数值计算时，变量值会被转换成基本包装类型Number参与表达式求值。如果某个变量值转换的结果是NaN, 那么整个表达式的结果就为NaN

Number("90n") // NaN
Number("90") // 90
"90"/4 // 22.5
"90n"/4 // NaN
"90"/0 // Infinity
"90n"/0 // NaN
"90N"/"a" // NaN
NaN + Infinity // NaN

String类型

从静态语言过来的同学，遇到字符串就会问个问题：请问你能装多少个字符串呢？

字符串傻傻一笑，说：自从我诞生以来，从来就没被装满过!

ECMAScript 2016 (ed. 7) established a maximum length of 2^53 - 1 elements. Previously, no maximum length was specified. In Firefox, strings have a maximum length of 230 - 2 (~1GB). In versions prior to Firefox 65, the maximum length was 228 - 1 (~256MB).  --MDN

Boolean

Boolean值很简单，就false和true两个值。但是很多人不能完全回答出，哪些值会被转换成false。

除了下面几个能够被转成false的值，其他都是true。

false
""
NaN
undefined
0, -0, +0
null

undefined 和 null

undefined表示一个变量被定义了，但是没有被赋值。null表示这个变量根本没被定义。总之，无论是undefined和null，他们基本上都是不能使用的值。

null类型有个特别的作用。比如有个对象，有很多属性，这时候你想把这个变量给标记为可以被垃圾回收了，那么就可以把它的值设置为null。

最熟悉的陌生人: 对象

我曾认为对象在js中是最简单的，而实际上，是我太天真。

// 定义一个对象，so easy
var boy = {
  name: "wangduanduan"
}

var boy = {}
Object.defineProperty(boy, "name", {
 writable: false,
 value: "wdd"
})
boy.name = "ddw" // 设置不会生效，boy.name的值还是wdd

对象的数据属性

数据属性	默认值	说明
configurable	true	表示这个属性能否用delete删除
enumerable	true	表示这个属性能否通过for in 循环遍历
writable	true	表示这个属性能否被修改
value	undefined	表示这个属性的数据值

如果调用Object.defineProperty没有指定configurable, enumerable, writable，那么他们的默认值都是false。

访问器属性

访问器属性就是get, set让你可以在读取或者写入值时，做一层拦截。

var man = {
    _sex: 1
}
Object.defineProperty(man, "sex", {
 set: function (v) {
     this._sex = v === "男" ? 1 : 0
 },
 get: function () {
     return this._sex === 1 ? "男" : "女"
 }
})
nam.sex // 男

想一想如果把上面的_sex改成sex会有什么问题？

// 这样写会有什么问题
var man = {
    sex: 1
}
Object.defineProperty(man, "sex", {
 set: function (v) {
     this.sex = v === "男" ? 1 : 0
 },
 get: function () {
     return this.sex === 1 ? "男" : "女"
 }
})

最后

很多人抱怨说，工作不好找，其实大多数时候都是自己准备不足。

随便网上刷刷几道题，看看几集视频教程，往往不太同意蒙混过关。

虽说前端可能比较简单，但是也绝没有想象的那么简单。

扫码订阅我的微信公众号：洞香春天。每天一篇技术短文，让知识不再高冷。

云服务器 GPU云服务器最熟悉 javascript的类型 javascript数据类型 javascript基本数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102863.html

谈谈我熟悉又陌生的cookie

摘要：前言大概是我的业务领域比较狭窄的原因我总是会听说却很少在实际的开发中应用或者实践过它今天刚好看到高级程序设计第三版的数据存储部分说到了这里就对做一个深入访谈希望和我一样对似曾相识的朋友可以真正的熟悉并学会利用来服务我们的业务定义是服务器为了前言大概是我的业务领域比较狭窄的原因,我总是会听说cookie,却很少在实际的开发中应用或者实践过它,今天刚好看到的数据存储部分,说到了cook...

fizz 2019-08-22 18:03 评论0 收藏0
记一次两小时的js编程学习

摘要：布尔值和两个值，与其他语言中似乎没有任何区别以及特异所在。注意点中有类假的概念，即便不是也会被当做处理，请注意下面几个值布尔值未定义空字符串面向对象很遗憾地说，设计的时候肯定没有考虑。 JavaScript 特性 1.弱类型语言2.解释型语言3.客户端语言对于有学习Java、C以及Python一类的人来说，最熟悉的莫过于这些都是强类型语言。它们严格的遵守自身的规定，永远也不会有下面的情...

Miracle_lihb 2019-08-22 18:18 评论0 收藏0
CSS：BFC 最熟悉的陌生人

摘要：就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。最常见的有和，中还增加了和，这里就不深入研究了。其根本原理就是它们处于同一个，符合属于同一个的两个相邻元素的会发生重叠的规则。 BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。BFC就是...

focusj 2019-08-29 13:28 评论0 收藏0
2017-09-18 前端日报

摘要：前端日报精选的现状网页性能提升指南精读现代概览从入门到真实项目配置浏览器的渲染过程与原理动画动画中文第期跨浏览器页的通信解决方案尝试前端面试题及答案总结掘金周刊教程最熟悉的陌生人个人文章技术周刊期知乎专栏的缺口和中的样式从外 2017-09-18 前端日报精选 Web 的现状：网页性能提升指南精读《现代 JavaScript 概览》webpack：从入门到真实项目配置浏览器的渲染：过...

zhangwang 2019-08-22 11:10 评论0 收藏0
用 Python 分析过往 36 年春晚节目数据，发现一些趣事

摘要：节目单表是每一年春晚上表演的节目，包括节目类型节目名演员名这几项数据。好消息是，今年的春晚她会继续主持。对她的印象莫过于每年春晚尾声的那曲难忘今宵。年的春晚，她一人连唱首歌，前无古人，也后无来者。 showImg(https://segmentfault.com/img/remote/1460000018120380); 看过那么多春晚，哪一年、哪些节目、哪些人你还留有深刻印象呢。记...

hufeng 2019-07-31 10:03 评论0 收藏0