JavaScrip zero basics summary (basic reference types)

Contents of this chapter

  1. Understanding object
  2. Basic JavaScript data type
  3. Raw value and raw value wrapper type

Date

Overview: Date type saves the Date as the number of milliseconds since midnight on January 1, 1970 coordinated universal time. Using this storage format, Date type can accurately represent the years after January 1, 1971
Create a Date type object ----- you can call the Date constructor using the new operator. The code analysis is as follows:

let date=new Date()//Constructor called
// Note: the created Date object will save the current Date without parameters
console.log(date)//Mon Sep 13 2021 22:34:08 GMT+0800 (China standard time)

Note: to create it based on other dates and times, its milliseconds must be passed in
Supported date formats

  1. "Month / day / year", e.g. 13 / 9 / 2021
  2. ”Month, day, year ": May, 132021
  3. "Day of the week month name day year hour: minute: second time zone", for example: Mon Sep 13 2021 22:34:08 GMT+0800
  4. The example code is analyzed as follows:
//Note: there are two auxiliary methods: Date().parse and Date().UTC
//1.Date().parse --- receive a string parameter representing the date--
let date=new Date(Date.parse("May 23,2021"))
// If parse does not pass a parameter indicating the date, NaN is returned
let date=new Date(Date.parse())
console.log(date)//NaN

Date basic method

  1. Date().parse – receives a string parameter representing the date
  2. Date().UTC - returns the millisecond representation of the date. The parameters passed to it are the number of months, days, hours, minutes, seconds and milliseconds from the year zero starting point. (only the first two are required)
  3. Date.Now() - indicates the number of milliseconds of the execution date and time of the return method (code analysis is as follows)
//Start time
let start=Date.now();
//Call function
// doSomething();
for(let i=0;i<10;i++)
{
    console.log(i)
}
//End time
let stop=Date.now()
result=stop-start
console.log(result)//4
  1. toLocaleString() -- returns the date and time consistent with the local environment in which the browser runs
let date=new Date();
console.log(date.toLocaleDateString())//2021/9/13
  1. toString() -- returns the date and time with time zone information, and the time is expressed in 24-hour system
let date=new Date();
console.log(date.toString())//Mon Sep 13 2021 23:17:16 GMT+0800 (China standard time)
  1. valueOf() -- it does not return a string, but the millisecond representation of the date. The operator can directly use it to return a value
let date1=new Date(2021,9,13);
let date2=new Date(2021,9,14);
console.log(date1>date2);//false
console.log(date1<date2);//true

Date date formatting method

  1. toDateString() - displays the week, month, day, year in the date (format is implementation specific)
let date1=new Date();
console.log(date1.toDateString());//Mon Sep 13 2021
  1. toTimeString() -- displays the hour, minute, second and time zone of the date (format is implementation specific)
let date1=new Date();
console.log(date1.toTimeString());//23:28:49 GMT+0800 (China standard time)
  1. toLocaleDateString() - displays the day of the week, month, day and year in the date (format specific to implementation and region)
let date1=new Date();
console.log(date1.toLocaleDateString());//2021/9/13

  1. toLocaleTimeString() - displays the hour, minute, second, and time zone of the date (format specific to implementation and region)
let date1=new Date();
console.log(date1.toLocaleTimeString());//10:41:10 PM
  1. toUTCString() - displays the full UTC date (format specific to implementation)
let date1=new Date();
console.log(date1.toUTCString());//Tue, 14 Sep 2021 14:43:18 GMT

Date / time component method (the use method is the same as the above method, and the following method is only briefly stated)

  1. getTime() -- the millisecond representation of the returned date, the same as valueOf()
  2. setTime() -- set the millisecond representation of the date to modify the entire time
  3. getFullYear() - returns a 4-digit year
  4. getUTCFullYear() - returns UTC4 digit year
  5. setFullYear() - sets the 4-digit year
  6. setUTCFullYear() - set UTC4 digit year
  7. getMonth() - returns the month of the date (0 for January and 11 for December)
  8. getUTCMonth() -- returns the month of UTC date (0 means January and 11 means December)
  9. setMonth(month) - set the month of the date (month is a value greater than 0, greater than 11 plus year)
    10.setUTCMonth(month) - sets the month of UTC date (month is a value greater than 0, greater than 11 plus year)
    11.getDate() - returns the day in the date (1 ~ 31)
    12.getUTCDate() -- returns the day in UTC (1 ~ 31)
    13.setDate(date) - sets the number of days in the date (if the date is greater than the number of days in the current month, add the month)
    14. The acquisition and setting methods of hour / minute / second are similar to those above, so they are not listed here

Original value wrapper type

Overview to facilitate the operation of original values, ECMAScript provides three special reference types: Boolean, nunber and string. They have the same characteristics as other reference types, and also have special behaviors corresponding to their original types
Note: 1. When a method or attribute of an original value is used, an object of the corresponding original wrapper type will be created in the background, exposing various methods of operating the original value
2. Whenever accessing the string value in read mode, the background will perform the following three steps

  1. Create an instance of string type (the type can also be Number boolean)
  2. Calling a specific method on an instance
  3. Destroy instance
  4. The code analysis is as follows (take string as an example)
    let s1=new String("some txt");
    let s2=s1.substring(2);
    s1=null

**The main difference between the reference type and the original wrapper type: * * lies in the life cycle of the object. After instantiating the reference type through new, the resulting instance will be destroyed when leaving the scope, while the automatically created original value package object only exists during the execution of the line of code accessing it, so properties and methods cannot be added to the original value at run time. The code analysis is as follows:

let s1="some text";
s1.color="red";
console.log(s1.color);//undefined

Note: calling the constructor of the original value wrapper type with new is different from calling the transformation function with the same name. The code analysis is as follows:

let value="25";
let number=Number(value);//Transformation function
console.log(typeof number);//number
let obj=new Number(value);//Constructor
console.log(typeof obj);//object
//The variable number stores an original value of 25, while the variable obj stores an instance of number

Boolean
*Overview: * Boolean corresponds to the reference type of Boolean value. To create a Boolean object, use the constructor corresponding to Boolean and pass the parameter true or false
Create constructor:

let booleanObject=new Boolean(true);

Note: the Boolean instance will be overridden by the valueOf() method and return an original value of true or false. When the tostring method is called, it will also be overwritten and return a true or false value
Difference between original value and reference value (Boolean object):

  1. The typeof operator returns "Boolean" for the original value, but "object" for the reference value
  2. A Boolean object is an instance of boolean type. When using the instanceof operator, it returns true, but returns false to the original value
  3. It is important to understand the difference between primitive Boolean values and Boolean objects, and it is strongly recommended that you never use the latter
  4. The code analysis is as follows:
let falseObject=new Boolean(false);
let falseValue=false;
console.log(typeof falseObject);//object
console.log(typeof falseValue);//boolean
console.log(falseObject instanceof Boolean);//true
console.log(falseValue instanceof Boolean);//false

Number
Overview: Number is the reference type of the corresponding value. To create a Number object, use the constructor corresponding to Number and pass in a value
Create: let numberObject=new Number(12);
Note: the Number type overrides the valueOf() toLocalString() and toString() methods
Number method:

  1. valueOf() - returns the original value represented by the object
  2. toLocalString() and toString() – return numeric strings. Note that toString can receive a parameter representing cardinality and return numeric strings in the form of corresponding cardinality
let num=10;
console.log(num.toString());//10
console.log(num.toString(2));//1010
console.log(num.toString(8));//12
console.log(num.toString(10));//10
console.log(num.toString(16));//a
  1. toFixed() - returns a string containing a numeric value with a specified number of decimal places
let num=10;
console.log(num.toFixed(2));'10.00'
//If the decimal place of the value itself exceeds the number of digits specified by the parameter, it will be rounded
let num=10.006;
console.log(num.toFixed(2));'10.01'

4.isInteger() method and safe integer -- used to identify whether a value is saved as an integer. Sometimes the 0 of small digits may make people mistakenly think that the value is a floating-point value

conlose.log(Number.isInteger(1));//true
conlose.log(Number.isInteger(1.0));//true
conlose.log(Number.isInteger(1.02));//false

Note: typeof and instanceof will return different results when processing the original value and reference value. The code is as follows:

let numberIbject=new Number(10);
let numberValue=10;
console.log(typeof numberObject)//object
consloe.og(typeof numberValue)//number
console.log(numberObject instanceof Number)//true
console.log(numberValue instanceof Number)//false

String
Overview: String is the reference type of the corresponding String. To create a String object, use the String constructor and pass in a value, as shown in the following example:

let stringObject=new String("hello world")

method:

  1. Each String object has a length attribute, which indicates the number of characters in the String
  2. The charAt() method returns the character at the given index position
  3. charCodeAt() ----- you can view the character encoding of a specified symbol
  4. String operation method
    1.concat() - used to splice one or more strings into a new string
let stringValue="hello";
let result=stringValue.concat("world");
console.log(result);//"hello world"
console.log(stringValue);//"hello"

2.slice(); substr();substring() - a method for extracting substrings from a string. The first parameter represents the beginning of the string, and the second parameter represents the end of the substring; But the second parameter of substr () represents the number of substrings returned

let stringValue="hello world";
console.log(stringValue.slice(3));//"lo world"
console.log(stringValue.substr(3);//"lo world"
console.log(stringValue.substring(3);//"lo world"
console.log(stringValue.substring(3,7);//"lo w"
console.log(stringValue.slice(3,7);//"lo w"
//Pay attention to the difference
console.log(stringValue.substr(3,7);//"lo worl"

Note: when a parameter is negative, the three methods behave differently

  1. slice -- all negative valued parameters are treated as string lengths plus negative parameter values
  2. substr -- adds the first negative parameter value as the string length, and converts the second negative parameter value to 0
  3. substring -- converts all negative parameter values to 0
let stringvalue="hello world";
console.log(stringValue.slice(-3));//"rld"
console.log(stringValue.substring(-3));//"hello world"
console.log(stringValue.substr(-3));//"rld"

console.log(stringValue.slice(3,-4));//"lo w"
console.log(stringValue.substring(3,-4));//"hel
console.log(stringValue.substr(3,-4));//""
  1. String location methods ----- indexOf() and lastIndexOf() - search for the incoming string from the string
  2. String containing methods: endsWith(),startsWith(),includes() - search the incoming string from the string and return a Boolean value indicating whether it is included
  3. trim() -- remove all space characters
  4. repeat() -- indicates how many times to copy the string

Tags: Javascript html5 html

Posted on Thu, 23 Sep 2021 08:54:37 -0400 by dechamp