JavaScript - data type

04 data type

  • Original type: Undefined, Number, String, Boolean, Null
  • Reference type: Object and its subclasses
var i;
alert(typeof i); // "undefined"

var k = 10;
alert(typeof k); // "number"

var f = "abc";
alert(typeof f); // "string"

var d = null;
alert(typeof d); // "Object" Null is of Null type, but the result of typeof operator is "object"

var flag = false;
alert(typeof flag); // "boolean"

var obj = new Object();
alert(typeof obj); // "object"

// sayHello is a function
function sayHello(){

}
alert(typeof sayHello); // "function"

Pay attention to differentiation

var d = null;
alert(typeof d); // "Object" Null is of Null type, but the result of typeof operator is "object"
  • typeof: this operator can dynamically obtain the data type of variables in the running phase of the program
  • The operation result of typeof operator is one of the following six strings: note that all strings are lowercase. “undefined”,“number”,“string”,“boolean”,“object”,“function”

Use "= =" to compare whether the strings are equal in JS. No equals

Syntax format of typeof operator:
typeof variable name

function sum(a, b){
   if(typeof a == "number" && typeof b == "number"){
	   return a + b;
   }
   alert(a + "," + b + "All must be numbers!");
}

4.1 undefined

When a variable is not assigned manually, the system assigns an undefined value by default, or you can assign an undefined value to a variable manually

var i; // undefined
var k = undefined; // undefined

alert(i == k); // true

var y = "undefined"; // "undefined" is a string type
alert(y == k); // false

4.2 Number

Number types include integer, decimal, positive, negative, not numeric, infinite, etc
-101 22 2.3 3.14 100... NaN Infinity, etc. all belong to Number

// Infinity (when the divisor is 0, the result is infinite)
alert(10 / 0);

4.2.1 NaN

Indicates Not a Number, which is Not a Number, but is of type Number. The result of the operation should have been a Number. When it is Not a Number, the result is NaN

var a = 100;
var b = "Chinese";
alert(a / b); // Obviously, the final result of the division sign should be a number, but in the process of operation, the final result is not a number, so the final result is NaN

var e = "abc";
var f = 10;
alert(e + f); // "abc10", but the plus sign here should not be a number, but the splicing of strings

4.2.2 function of Number

isNaN() function

  • is Not a Number
  • IsNaN (data). If the result is true, it means it is not a number. If the result is false, it means it is a number
function sum(a, b){
   if(isNaN(a) || isNaN(b)){
	   alert("Those involved in the operation must be numbers!");
	   return;
   }
   return a + b;
}
sum(100, "abc");
alert(sum(100, 200));

parseInt() or parseFloat(),

  • Can automatically convert strings to numbers
  • And rounding
alert(parseInt("3.9999")); // 3
alert(parseInt(3.9999)); // 3

// parseFloat(): can automatically convert strings into numbers
alert(parseFloat("3.14") + 1); // 4.14
alert(parseFloat("3.2") + 1); // 4.2

Math.ceil()

  • Round up
// Math.ceil()
alert(Math.ceil("2.1")); // 3

4.3 Boolean

Corresponding to true and false

// Rule: "if there is" it will be converted to true, "if there is no" it will be converted to false
alert(Boolean(1)); // true
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("abc")); // true
alert(Boolean(null)); // false
alert(Boolean(NaN)); // false
alert(Boolean(undefined)); // false
alert(Boolean(Infinity)); // true

The Boolean() function is used to convert non Boolean types to Boolean types

Syntax format:
Boolean (data)

4.4 Null

null is just a value, which should be distinguished from typedf

// Null type has only one value, null
alert(typeof null); // "object"

4.5 String

String is a built-in class that can be used directly. The parent class of string is Object

In JS, single quotation marks or double quotation marks can be used for strings

//There are two ways to create objects, but the types of objects created are different
//First:
var s = "abc";
//The second type (using JS built-in support class String): 
var s2 = new String("abc");

// Small string (belonging to the original type String)
var x = "king";
alert(typeof x); // "string"

// Large string (of Object type)
var y = new String("abc");
alert(typeof y); // "object"

4.5.1 common functions

Function namefunction
indexOfGets the index of the first occurrence of the specified string in the current string
lastIndexOfGets the index of the last occurrence of the specified string in the current string
replaceReplace (only the first one is replaced)
substrIntercept substring
substringIntercept substring
toLowerCaseConvert lowercase
toUpperCaseConvert to uppercase
splitSplit string
alert("http://www.baidu.com".indexOf("http")); // 0
alert("http://www.baidu.com".indexOf("https")); // -1

// Determine whether a string contains a substring?
alert("http://www.baidu.com".indexOf("https") >= 0 ? " Include ":" but not "); / / not include

// replace (Note: only the first one is replaced)
alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value

// If you continue to call the replace method, you will replace the "second" one
// If you want to replace all of them, you need to use regular expressions
alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value

4.5.2 differences between substr and substring

The subscript of JS starts from 0

// substr(startIndex, length)
alert("abcdefxyz".substr(2,4)); //cdef, (subscript, length)
// substring(startIndex, endIndex) Note: endIndex is not included
alert("abcdefxyz".substring(2,4)); //cd, (start subscript, end subscript)

4.6 Object

Object type is a superclass of all types, and any custom type inherits object by default

JS defines the syntax of the class:

The first way:
    function Class name(Formal parameter){

    }
The second way:
    Class name = function(Formal parameter){

    }

Syntax for creating objects:

new Constructor name(Argument); // The constructor name is consistent with the class name.

Class definition and discussion of js

// Define a student class
function Student(){
   alert("Student.....");
}

// As a normal function call
Student();

// Create objects as classes
var stu = new Student();
alert(stu); // [object Object]
  • The definition of a class in JS is also the definition of a constructor
  • In JS, the definition of class and constructor are put together
  • js function parameter calls can be executed with one or more, because they are weak types
function User(a, b, c){ // a b c is a formal parameter and belongs to a local variable
   // Declare attributes (this represents the current object)
   // There are three attributes in the User class: sno/sname/sage
   this.sno = a;
   this.sname = b;
   this.sage = c;
}

// create object
var u1 = new User(111, "zhangsan", 30);
// Accessing the properties of an object
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);

var u2 = new User(222, "jackson", 55);
alert(u2.sno);
alert(u2.sname);
alert(u2.sage);

// You can also use this syntax to access the properties of an object
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);

You can also define classes in another way

Product = function(pno,pname,price){
   // attribute
   this.pno = pno;
   this.pname = pname;
   this.price = price;
   // function
   this.getPrice = function(){
	   return this.price;
   }
}

var xigua = new Product(111, "watermelon", 4.0);
var pri = xigua.getPrice();
alert(pri); // 4.0

Attributes include: prototype attribute (commonly used, mainly this one): it is used to dynamically extend attributes and functions for classes.

// You can dynamically extend attributes and functions to classes through the attribute prototype
Product.prototype.getPname = function(){
   return this.pname;
}

// Call the late extended getPname() function
var pname = xigua.getPname();
alert(pname)

// Extend a function to String
String.prototype.suiyi = function(){
   alert("This is for String A function of type extension, called suiyi");
}

"abc".suiyi();

4.7 null, NaN and undefined

  • Inconsistent data types
  • ==(equivalence operator: only judge whether the values are equal)
    ===(congruence operator: judge whether the values are equal and whether the data types are equal)
  • null and undefined can be equivalent
// null NaN undefined data types are inconsistent
alert(typeof null); // "object"
alert(typeof NaN); // "number"
alert(typeof undefined); // "undefined"

// null and undefined can be equivalent
alert(null == NaN); // false
alert(null == undefined); // true
alert(undefined == NaN); // false

// There are two special operators in JS
alert(null === NaN); // false
alert(null === undefined); // false
alert(undefined === NaN); // false

Tags: Front-end Javascript programming language

Posted by james_holden on Sat, 30 Jul 2022 01:58:21 +0930