乐趣区

关于html5:给萌新HTML5-入门指南二

上一篇咱们曾经为大家介绍了 HTML5 新增的内容和根底页面布局,这篇会持续向大家介绍狭义上 HTML5 中另一个组成部分:JavaScript 数据类型。

JavaScript 作为一种弱类型语言,最大的特点就是动静类型。也就是说不必提前申明变量的类型,在程序运行时,类型会被动静的确定,并且在执行过程中能够动静的批改变量的类型。同时不同类型变量在运算时会主动进行隐式的类型转换。以下是一些常见的隐式转换示例:


var foo = 2020;     // typeof foo -> "number"
var foo = "SpreadJS"     // typeof foo -> "string"
var foo = true + 1;         // foo = 2 typeof foo -> "number"
var foo = true + false;      // foo = 1 typeof foo -> "number"
var foo = '5' - '2';          // foo = 3 typeof foo -> "number"
var foo = 20 + 20 + "SpreadJS" // foo = "40SpreadJS" typeof foo -> "string"
var foo = "SpreadJS" + 20 + 20 // foo = "40SpreadJS" typeof foo -> "string"

根据最新的 ECMAScript 规范将数据类型定义了 8 种:

其中为原始类型:Boolean、Null、Undefined、Number、BigInt、String、Symbol 和对象类型:object

对于原始类型须要晓得的几个知识点:

  • 原始类型的值是按值拜访的

即在赋值和批改值时是通过值传递的形式来实现的,对变量赋值或者批改值会在内存中重新分配空间。

例如:

var a, b, x, y;
a = "SpreadJS";
b = "GrapeCity";
x = a;
y = b;
console.log(a, b, x, y);   // result:  SpreadJS GrapeCity SpreadJS GrapeCity

a 和 x,b 和 y 之间赋值是齐全独立的拷贝,互不干涉,如果咱们将其中任何一个变量的值从新扭转,其余雷同值的变量也不会受到任何影响。

  • 严格相等 === 和非严格相等 ==

对于原始类型,== 只进行值比拟,如果是不同类型则会在转换后再比拟,=== 则会比拟数据类型。

例如:

undefined === null //fasle
undefined == null //true
true === 1 //fasle
true == 1 //true
null == 0 //false
  • Null 和 Undefined

null 和 undefined 在应用中简直没有区别,在应用非严格相等比拟时后果也为 true,它们的区别就是在于进行数值转换时它们的字面意义不同,undefined 代表未定义,转为数值为 NaN,而 null 为空、转为数值时为 0。

例如:

Number(undefined) //NaN
Number(null) //0
1 + undefined //NaN
1 + null //1

尽管两者差异不大,并不会严格依照下面的辨别去应用,但在理论我的项目利用中,对于空值的判断两者则都须要思考。

  • NaN

NaN 即 Not a Number,示意了非数字类型,任何和 NaN 的操作返回值都是 NaN,NaN 不等于 NaN。其中有一个全局办法 isNaN(),它的作用是查看一个值是否能被 Number() 胜利转换。如果能转换胜利,就返回 false,否则返回 true。

例如:

NaN == NaN;     // fasle
isNaN('123')   // false 能转换
isNaN('abc')    // true 不能转换 
  • 浮点数精度误差

在 JavaScript 中,整数和浮点数都属 Number 数据类型,所有数字都是以 64 位浮点数模式存储的,也就是说 JavaScript 底层没有整数,1 和 1.0 是雷同的。

上面举几个例子来阐明:

   // 加法
   0.1 + 0.2 = 0.30000000000000004
   0.1 + 0.7 = 0.7999999999999999
   0.2 + 0.4 = 0.6000000000000001

   // 减法
   0.3 - 0.2 = 0.09999999999999998
   1.5 - 1.2 = 0.30000000000000004

   // 乘法
   0.8 * 3 = 2.4000000000000004
   19.9 * 100 = 1989.9999999999998

   // 除法
   0.3 / 0.1 = 2.9999999999999996
   0.69 / 10 = 0.06899999999999999

   // 比拟
   0.1 + 0.2 === 0.3 // false
   (0.3 - 0.2) === (0.2 - 0.1) // false

相似这样看起来不会算错的问题,在某些零碎尤其是波及财务的零碎中会是一个重大的问题,这里就不开展解释产生误差的起因了,大家可自行钻研,咱们这只对解决方案简略的列一下,1\. 能够通过援用相似 Math.js、decimal.js、big.js 这样的类库。2. 对于对数字精度要求不高的零碎,能够格式化并保留 x 位小数来解决。3. 计算时,将小数局部和整数局部离开计算再合并,等。

对于援用类型须要晓得的几个知识点:

  • 援用类型的值是按援用拜访的

在操作对象时,实际上是在操作对象的援用而不是理论的对象。给变量赋值扭转的是对象的援用关系。

例如:

var obj1 = {a:1};
var obj2 = obj1;
obj1.a = 2;
console.log(obj2.a) // result: 2.obj1 和 obj2 为同一对象
obj1 = {a:3};
console.log(obj2.a) // result: 2.obj1 指向新对象,obj2 不变 
  • 援用类型 === 和 == 意义雷同都为援用的比拟

即是否为同一对象,各类型之间的非严格相等 == 比拟类型转换可参考下表:

类型检测

JavaScript 中类型检测办法有很多,有例如:typeof、instanceof、Object.prototype.toString、constructor、duck type 这几种。

尽管办法很多,但判断思路就是两种:1 依据数据类型判断 2 依据构造函数判断。

  • typeof

typeof 能够判断数据类型,根据之前的介绍,javascript 变量类型分为值类型和援用类型,typeof 利用场景只能够区分值类型的数据类型,例如:

typeof 42 // "number"
typeof {} // "object"
typeof undefined // "undefined"
  • instanceof

和 typeof 一样,instanceof 用于判断援用类型的数据类型。

例子:


(function(){}) instanceof Function

其余的还有 Object.prototype.toString、constructor、duck type,在这就不一一介绍。

在理解了 JavaScript 的根底数据类型常识后,前面咱们会持续为大家借着介绍 CSS 相干的内容。

退出移动版