How to get started with new HTML5 (2)

This article was originally created and launched by the technical team of grape city

Reprint please indicate the source ： Official website of grape City , Grape city provides professional development tools for developers 、 Solutions and services , Enabling developer .

 

In the last article, we introduced HTML5 New content and basic page layout , This article will continue to introduce you in a broad sense HTML5 Another component of ：JavaScript Data type .

JavaScript As a weakly typed language , The biggest feature is the dynamic type . That is, you don't have to declare the type of the variable in advance , While the program is running , The type is determined dynamically , And the type of the variable can be dynamically modified during the execution . At the same time, different types of variables will automatically carry out implicit type conversion . Here are some common examples of implicit conversion ：

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"

　　

According to the latest ECMAScript The standard defines the data type 8 Species ：

Where is the primitive type ：Boolean、Null、Undefined、Number、BigInt、String、Symbol And object types ：object

Some knowledge about primitive types ：

• The value of the original type is accessed by value

In other words, the assignment and modification of values are accomplished by means of value passing , Assigning or modifying values to variables reallocate space in memory .

for example ：

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 and x, b and y The assignment between is a completely independent copy , They don't interfere with each other , If we change the value of any of these variables again , Other variables of the same value will not be affected .

• Strictly equal === And not strictly equal ==

For primitive types ,== Only compare the values , If it is a different type, it will be compared after conversion ,=== The data types are compared .

for example ：

undefined === null //fasle
undefined == null //true
true === 1 //fasle
true == 1 //true
null == 0 //false

• Null and Undefined

null and undefined There is almost no difference in use , When using non strict equality comparison, the result is also true, The difference between them is that they have different literal meanings in numerical conversion ,undefined Represents undefined , The value is NaN, and null It's empty 、 When converted to a value, it is 0.

for example ：

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

Although there is little difference between the two , It will not be used strictly according to the above distinction , But in actual project applications , For the judgment of null value, both need to be considered .

• NaN

NaN namely  Not a Number , Represents a non numeric type , Any and NaN The return value of the operation is NaN,NaN Not equal to NaN. There's a global approach isNaN(), Its function is to check whether a value can be Number()  Successful conversion . If the conversion is successful , Just go back to false, Otherwise return true .

for example ：

NaN == NaN; 	// fasle
isNaN('123')   // false  Can transform 
isNaN('abc')    // true  Can't convert 

• Floating point precision error

stay JavaScript in , Integers and floating-point numbers belong to Number Data type , All the figures are based on 64 Stored as a floating-point number , That is to say JavaScript There are no integers at the bottom ,1 and 1.0 It's the same .

Here are a few examples to illustrate ：

   //  Add 
   0.1 + 0.2 = 0.30000000000000004
   0.1 + 0.7 = 0.7999999999999999
   0.2 + 0.4 = 0.6000000000000001

   //  Subtraction 
   0.3 - 0.2 = 0.09999999999999998
   1.5 - 1.2 = 0.30000000000000004

   //  Multiplication 
   0.8 * 3 = 2.4000000000000004
   19.9 * 100 = 1989.9999999999998

   //  division 
   0.3 / 0.1 = 2.9999999999999996
   0.69 / 10 = 0.06899999999999999

   //  Compare 
   0.1 + 0.2 === 0.3 // false
   (0.3 - 0.2) === (0.2 - 0.1) // false

Things like this don't seem to be wrong , In some systems, especially those involving finance, it can be a serious problem , The reason for the error is not explained here , You can study it yourself , Let's just list the solutions briefly ,1. You can quote something like Math.js、decimal.js、big.js Such a class library .2. For systems that do not require high digital accuracy , Can be formatted and retained x To deal with .3. When calculating , The decimal part and the integer part are calculated separately and then combined , etc. .

 

What you need to know about reference types ：

• The value of a reference type is accessed by reference

When working with objects , It's actually a reference to an object, not an actual object . Assignment to a variable changes the referential relationship of an object .

for example ：

var obj1 = {a:1};
var obj2 = obj1;
obj1.a = 2;
console.log(obj2.a) // result: 2.obj1 and obj2 For the same object 
obj1 = {a:3};
console.log(obj2.a) // result: 2.obj1 Point to a new object ,obj2 Unchanged 

• Reference type === and == The same meaning is the comparison of quotation

Whether it is the same object , Non strict equality between types == For comparison of type conversions, please refer to the following table

It's worth comparing B
		Undefined	Null	Number	String	Boolean	Object
It's worth comparing A	Undefined	true	true	false	false	false	IsFalsy(B)
	Null	true	true	false	false	false	IsFalsy(B)
	Number	false	false	A === B	A === ToNumber(B)	A=== ToNumber(B)	A== ToPrimitive(B)
	String	false	false	ToNumber(A) === B	A === B	ToNumber(A) === ToNumber(B)	ToPrimitive(B) == A
	Boolean	false	false	ToNumber(A) === B	ToNumber(A) === ToNumber(B)	A === B	ToNumber(A) == ToPrimitive(B)
	Object	false	false	ToPrimitive(A) == B	ToPrimitive(A) == B	ToPrimitive(A) == ToNumber(B)	A === B

　　

Type detection

JavaScript There are a lot of methods for medium-sized detection , There are, for example ：typeof、instanceof、Object.prototype.toString、constructor、duck type These kinds of .

Although there are many ways , But there are two ways to judge ：1 Judging by data type 2 Judging from the constructor .

• typeof

typeof You can determine the data type , According to the previous Introduction ,javascript Variable types are divided into value type and reference type ,typeof Application scenarios can only distinguish data types of value types , for example ：

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

• instanceof

and typeof The same thing ,instanceof The data type used to determine the reference type .

Example ：

(function(){}) instanceof Function

Others Object.prototype.toString、constructor、duck type, I will not introduce them all here .

In understanding JavaScript After the basic data type knowledge of , We will continue to introduce CSS Related content .

&n