js Basics (continuously updated)

Introduction to javascript

Structure: html
Performance: css
Behavior: Javascript = > JS weakly typed language

    js First acquaintance
    avaScript Is a client script language designed for interaction with web pages

    JS form:
        ECMAScript  Basic grammar   ECMAScript5 => ES5   => ES6
        BOM    (Browser Object Model)  Browser object model interface and method for operating browser  (Page jump forward and backward to identify the device type)
        DOM    (Document Object Model)  Document object model    Provides interfaces and methods for operating documents  => Get element action element

Basic data type of JS

JS data type = > describes various types of data

7 Data types
string  number  boolean    null   undefined   array    object
 String number    Boolean value      Null value                array     object

antic: character string=>Black number/Boolean value=>blue  null/undefined => grey  

How to distinguish data types ?
typeof data  => data type(A string is returned)

null         => "object"
undefined   => "undefined"\

Math related methods

Math (object) related methods (tools to complete specific functions)

 Math.random()   Randomly generate a 0-1 Random number of    =>  [0,1)
var num = Math.random();   // First assign a random number of 0-1 to the variable num
console.log(num);


var num = Math.random() * 100;   // [0,1) * 100 => [0,100)
console.log(num);

 Process decimal      ceil   floor   round
 Math.ceil()  You can receive a parameter and round it up to return => Enter 1 if there are decimal places
var num1 =  Math.ceil(num);
console.log(num1);

 Math.floor()  You can receive a parameter, round it down and return   => Remove decimal places
var num2 = Math.floor(num);
console.log(num2);

 Math.round() You can receive a parameter and return it after rounding it   => rounding
var num3 = Math.round(num);
console.log(num3);

 Math.min()   You can receive one or more parameters(Comma separated),Returns the minimum value
var min = Math.min(2,8,4,6,5,7,9,3,1);
console.log(min);

 Math.max()   You can receive one or more parameters(Comma separated),Returns the maximum value
var max = Math.max(2,8,4,6,5,7,9,3,1);
console.log(max);

 Math.abs()   You can receive a parameter and return the absolute value of the number
var a = Math.abs(10);
var a = Math.abs(-10);
console.log(a);

 Math.pow(m,n)   Two parameters can be received  => m of n Power
var b = Math.pow(2,10);
console.log(b);

 Math.PI         returnπ 
console.log(Math.PI);

Cast type

string number boolean null undefined

Number()   Pass in a parameter,Convert it to a number and return it  (Convert other types to numbers)

 var result = Number("100");
 console.log(result);

console.log(Number("100"));  // 100
console.log(Number("100a"));  // NaN

console.log(Number(100));  // 100

console.log(Number(true));  // 1
console.log(Number(false));  // 0
console.log(Number(null));  // 0
console.log(Number(undefined));  // NaN */


 String()  Pass in a parameter,Converts it to a string and returns  (Convert other types to strings)

console.log(String("100"));  //  "100"
console.log(String("100a"));  //  "100a"

console.log(String(100));  // "100"

console.log(String(true));  // "true"
console.log(String(false));  // "false"

console.log(String(null));  //  "null"
console.log(String(undefined));  //  "undefined"

Cast type_ Boolean

string number boolean null undefined

 Boolean()  Pass in a parameter,Converts it to a Boolean value and returns  (Convert other types to Boolean values)

 "" 0 NaN null undefined  => Convert to Boolean false  

console.log(Boolean("100"));  //  true
 console.log(Boolean("100a"));  //  true
 console.log(Boolean("a"));    //  true
 console.log(Boolean(" "));   // Space string true
 console.log(Boolean(""));    // Empty string false
 console.log(Boolean(100));  // true
 console.log(Boolean(-100));  //  true
 console.log(Boolean(0.5));  //  true
 console.log(Boolean(0));  //   false
 console.log(Boolean(NaN));  //   false
 console.log(Boolean(Infinity));  //   true

 console.log(Boolean(true));  // true
 console.log(Boolean(false));  // false

 console.log(Boolean(null));  //  false
 console.log(Boolean(undefined));  //  false

parseInt and parseFloat

parseInt() parseFloat() is mainly used to handle numbers and strings. Other types = > Nan

 parseInt()   Convert other types to integers(integer)    1.To unit 2.Round down
 law: Find the number before the first non number and convert it to an integer 
 parseFloat()  Convert other types to floating point(You can keep decimals)
law: Find the number before the first non number and keep the decimal 

 var width = "200px"; // => 200
var width = "2a00px"; // => 2
var width = "a200px"; // => NaN

var width = 200.55;   // => 200
var result = parseInt(width);
console.log(result); 
var width = "200px"; // => 200
var width = "200.55px"; // => 200.55
var width = "2a00.55px"; // => 2
var width = 200.55; // => 200.55
var result = parseFloat(width);
console.log(result);

The difference between a + + and + + A

a++ ++a itself increases in terms of results

If there are other operations during auto increment
 a++  Assign first and then increase automatically
 ++a  Self increment before assignment

var a = 10;
a++;
console.log(a);

var a = 10;
++a;
console.log(a);


 If there are other operations during auto increment
 a++  Assign first and then increase automatically
 ++a  Self increment before assignment

var a = 10;
var n = a++;     // var n = a; a = a + 1;    Assign first and then increase automatically
console.log(n);  // 10
console.log(a); // 11

var a = 10;
var n = ++a;    // a = a + 1;   var n = a;    Self increment before assignment
console.log(n);  // 11
console.log(a);// 11

Select structure

Select the structure and execute the corresponding code according to different situations

 Select structure   if  

 Single branch
 Double branch
 Multi branch

Only when a single branch meets the conditions can it be executed. Otherwise, no operation will be performed
 if(expression){
     Execute statement;
 }
 If the expression holds(true),Then execute{}Statements in(Execute statement),Otherwise, do nothing,Continue to execute the code after selecting the structure
 Double branch    Two options => We have to go one
if(expression){
     Execute statement 1;
 }else{
     Execute statement 2;
}
 Solve the expression if the expression holds(true),Then execute{}Execute statement 1 in ,Otherwise, execute else Corresponding{}Statement 2 in
 Judgment complete => Continue executing the statement after the selection structure
 Multi branch    
if(Expression 1){
    Execute statement 1;
}else if(Expression 2){
    Execute statement 2;
}else if(Expression 3){
    Execute statement 3;
}else{
    Execute statement 4;
}

Implicit type conversion of relational operators

ASCII => GB2312 GBK => unicode => UTF-8

Implicit type conversion of relational operators   >  >=   <  <=   ==   !=
1.  character string,Boolean values are implicitly converted to numbers before being compared with numbers
2.  String and string comparison, Compare characters in order ASCII Code size
3.  null and undefined  encounter  >  >=   <  <=  Will turn the numbers first and then compare
                      encounter  ==   !=  Direct comparison without conversion (No comparability)
4.  null and undefined  Are numerically equal(==)
5.  NaN Is not equal to any value

++-- implicit type conversion for

++– implicit type conversion for
When other types of data (string boolean null undefined) encounter + + - it will be implicitly converted to numbers first, and then increase / decrease automatically

var a = 10;
var a = "10"; // "10" => 10   a++  => 11
var a = "10a"; // "10a" => NaN   a++  =>NaN
var a = "";    // "" => 0   a++  => 1

var a = true;    // true => 1   a++  => 2
var a = false;    // false => 0   a++  => 1

var a = null;    // null => 0   a++  => 1
var a = undefined; // undefined => NaN   a++  =>NaN

Operator precedence

Arithmetic operator    * / %   greater than   +  - 
Relational operator    > >=  <  <=  greater than  ==  !=   ===  !==  
Logical operator    !   &&   ||
Assignment Operators     ++ --     greater than    =  +=  -= *=  /=  

() . []  > !  ++  -- > Arithmetic operator  >  Relational operator  > Logical operator (!Relatively special)  > Assignment Operators  (++ -- Relatively special)

switch of selection structure

switch is a typical multi branch
switch(week){
case constant 1: execute statement 1; break;
case constant 2: execute statement 2; break;
case constant 3: execute statement 3; break;
case constant 4: execute statement 4; break;
case constant 5: execute statement 5; break;
default:
Execute statement 5;
break;
}

 switch The expression in is usually a variable/constant, List the possible situations of this variable;

 switch How to execute?
 switch Expressions and in case Constants in are congruent in turn(===) compare ,If congruent, the corresponding statement is executed, Statement execution completed, encountered break Will jump out switch structure; If not equal,Continue the downward comparison, If all are not satisfied, execute default Subsequent statements


 difference:
 switch It is more suitable for numerical judgment to list the possible situations of variables
 if     More suitable for range judgment, Multiple conditions

switch penetration of selection structure

 switch The expression in is usually a variable/constant, List the possible situations of this variable;

 switch How to execute?
 switch Expressions and in case Constants in are congruent in turn(===) compare ,If congruent, the corresponding statement is executed, Statement execution completed, encountered break Will jump out switch structure; If not equal,Continue the downward comparison, If all are not satisfied, execute default Subsequent statements

 break The function of is to jump out of the current switch structure,without break The statements of subsequent branches will continue to be executed,Without judgment


 difference:
 switch It is more suitable for numerical judgment to list the possible situations of variables
 if     More suitable for range judgment, Multiple conditions

switch penetration application of selection structure

 switch The expression in is usually a variable/constant, List the possible situations of this variable;

 switch How to execute?
 switch Expressions and in case Constants in are congruent in turn(===) compare ,If congruent, the corresponding statement is executed, Statement execution completed, encountered break Will jump out switch structure; If not equal,Continue the downward comparison, If all are not satisfied, execute default Subsequent statements


 switch pierce through
 break The function of is to jump out of the current switch structure,without break The statements of subsequent branches will continue to be executed,Without judgment
 utilize switch Penetration can be categorized by value

 difference:
 switch It is more suitable for numerical judgment to list the possible situations of variables
 if     More suitable for range judgment, Multiple conditions

ternary operator

Syntax:
Expression 1? Expression 2: expression 3;

First, solve expression 1. If expression 1 holds,Then solve expression 2, otherwise solve expression 3

while Loop

while syntax structure
while (expression){
Execute statements;
}

 First solve the expression ,If the expression holds(Meet the conditions),Then execute{}Circular statement in; Statement execution completed,Solve the expression again,If it still holds,Then continue the cycle,Otherwise, it will jump out of the loop and execute the statement after the loop

do while loop

while judge before execute = > rational
do... while whether the condition is true or not, execute it first and then judge = > Impulsive Type

 summary: 
 contrast while and do...while
 Generally prefer to use while
 Only in while Used when handling loop logic is awkward do...while

for loop

for syntax structure

for(i=0;i<length;i++){
    Execute statement;
}

Keywords in the loop

 continue;    Skip this time to the next  (It can only be used in loop statements to end this loop, that is, skip the following unexecuted statements in the loop body, and then proceed to the next loop)

be careful: 
(1) be located continute Subsequent statements are not executed
(2) about while and do-while Cycle, continue The action after statement execution is conditional judgment(Solving expression)；about for Loop, followed by variable update(Self increasing/Self subtraction). 

break  Keywords of cycle 
break Used in a loop to jump out of the current loop 

be careful:
(1) be located break Subsequent loop statements are not executed
(2) If there are multiple nested loops,break Just jump one floor(Current cycle)

Function encapsulation process and function call

A function is to abstract a piece of code that completes a specific function and make it an independent entity in the program with a name (function name). It can be reused many times in the same program or other programs (called by function name).

Function encapsulation process
(1) First write the code to complete the specific function
(2) Put the code that completes a specific function into the function and give it a name
(3) Determines the return value of the function => The return value is determined by the user,If you don't set the default undefined
(4) Call function => Function name()
 About function calls
(1) Function before calling,Are stored in the browser's memory as text parameters (Function names can be understood as variable names),Only when called
(2) Each call to the function executes the context in the function
(3) Function encountered return The subsequent code is not executed

Nesting of functions

Function nesting means that one or more functions can be nested and called in one function
 be careful: 
When a function is nested => Only when the inner function is executed,The outer function will continue to execute backward  (Code execution process)
If the return value of the inner function is returned out of the outer function  => The outer function is also required return This value (About return value)

Recursion of function

recursion  
The function calls itself in the execution process.;

be careful: Recursion must have a jump condition

Dead recursion   => Similar to dead cycle
function fn(){
     console.log("This is fn function");
     fn();
 }
fn();

Tail recursion  =>   Get the final result at the end and pass it back in turn
    function fn(i,sum){ // fn(2,12)
    console.log(i,sum);
    sum += i;
    if(i == 1){
        return sum;
    }
    return fn(i-1,sum);  // fn(1,14)
    }
Dependency recursion  =>  The result of each function depends on the result of the previous one or more functions
    function fn(n){
    if(n == 1) {
        return 1;
    }
    return n + fn(n-1);
    }

JS precompiling

What process does the code in JS go through from loading to execution?

1. Syntax parsing 
Occurs before code execution script Is there a syntax error in the => Report an error if there is an error,Code not executed

2. precompile    =>   Occurs before code execution,Preparation before code execution
(1) global scope  => Preparation before code execution in global scope
a.  Variable promotion     Promote variable declaration to current script Front of  (be careful:Variables declared without keywords => Global variables have no variable promotion)
b.  Determine the function body and promote the whole function declaration of the named function to the current level script Front of 

(2) Function scope     Preparation before code execution in function
a.  Variable promotion     Promote the variable declaration to the front of the current function scope 
b.  Determine the function body and promote the named function to the front of the current function scope 
c.  Assign the actual parameter to the formal parameter  

3. Explain that the execution code is executed from top to bottom

Creation method of JS function

 one. Named function (Declarative)
function add(a,b){
    return a + b;
}
 console.log(add);
 add()

 By default  js Syntax is interpreted in the way of named functions when parsing functions  => Anonymous functions cannot be created directly and placed in the scope  (Anonymous functions generally cannot exist alone)
 function(a,b){
     return a + b;
 }

 two .Anonymous function
 1. Store anonymous functions in variable array objects   (Assignment formula)
 var fn = function(a,b){
     return a + b;
 }
 console.log(fn);
 var result = fn(1,2)
 console.log(result);

 var arr = [1,2,3,function(){}]
 var obj = {
     name:"Zhang San",
     age:18,
     say:function(){
         console.log("hello");
     }
 }

 btn.onclick = function(){
     alert(1111);
 }

 2. Self calling of anonymous functions/Self execution
 (function(a,b){
     return a + b;
 })

 ;+function(a,b){
         return a + b;
 }
 ;-function(a,b){
         return a + b;
 }
 ;!function(a,b){
         return a + b;
 }

How arrays are created

How arrays are created  
 1. Literal /Direct quantity creation  => Quick create
 var arr = [2,8,4,6,5,9,7,3,1];  
 var arr = [];      //Empty array
 console.log(arr);

 2. Constructor(Array)establish 
 var arr = new Array(2,8,4,6,5,9,7,3,1);  // new Array() calls the constructor 
 var arr = new Array();  //[]
 console.log(arr);
 
 Array properties:
 1. yes length attribute,Table length(Number of elements in the array)
 2. Maximum value of corresponding subscript value and assigned subscript = length - 1
 3. Can be iterated

Expansion method of array

Method of officially encapsulated operation array
 What should we pay attention to when learning the expansion method of array?
1. Remember the function of the method
2. Method
3. Whether to affect the original array  => (1. Some methods operate directly on the original array 2. Some methods get a new array from the original array)

Addition, deletion, modification and query of array

push() adds one or more elements to the end of the array

Return value: Length of array after adding elements
 Whether to affect the original array: influence

var arr = ["a","b","c"];
var result = arr.push(100);
var result = arr.push(100,200,300);
console.log(result);
console.log(arr);

unshift() adds one or more elements to the head of the array

Return value: Length of array after adding elements
 Whether to affect the original array: influence

var arr = ["a","b","c"];
var result = arr.unshift(100);
var result = arr.unshift(100,200,300);
console.log(result);
console.log(arr);

pop() deletes an element at the end of the array

Return value: Deleted element
 Whether to affect the original array: influence

var arr =  ["a","b","c","d"];
var result = arr.pop();
console.log(result);  // "d"
console.log(arr);     // ["a","b","c"]

var result = arr.pop();
console.log(result);  // "c"
console.log(arr);     // ["a","b"]

shift() deletes an element at the head of the array

Return value: Deleted element
 Whether to affect the original array: influence

var arr =  ["a","b","c","d"];
var result = arr.shift();
console.log(result);
console.log(arr);

splice() add, delete or modify anywhere

delete
splice(startIndex,n)    Subscript from startIndex Start deletion at n Elements
 Return value: A new array of deleted elements
 Whether to affect the original array : yes
var arr = [2,8,4,6,5,7,9,3,1];
var result = arr.splice(2,4);
console.log(result);
console.log(arr);

newly added
splice(startIndex,0,arg1,arg2...argN)    Subscript from startIndex Start deleting 0 elements at,Add one or more elements in the(New elements are added from the third parameter)
Return value: A new array of deleted elements  => Not deleted []
Whether to affect the original array : yes

var arr = [2,8,4,6,5,7,9,3,1];
var result = arr.splice(2,0,"a","b","c");
console.log(result);
console.log(arr);

modify
splice(startIndex,n,arg1,arg2...argN)    Subscript from startIndex Start deletion at n Elements,Add one or more elements in the(New elements are added from the third parameter)
Return value: A new array of deleted elements
 Whether to affect the original array : yes

var arr = [2,8,4,6,5,7,9,3,1];
var result = arr.splice(2,3,"a","b","c");
console.log(result);
console.log(arr);


Find determines whether an element exists in the array?   => Analog packaging
var arr = [2,8,4,6,5,7,4,9,3,1];  
console.log(arr);

includes() determines whether an element exists in the array (added in ES6)

Return value: existence:true non-existent:false
 Whether to affect the original array:  Not affect

var result = arr.includes(1);
var result = arr.includes("1");
console.log(result);
console.log(arr);

indexOf() returns the first occurrence of an element in an array

Return value: Returns the subscript if the element is present,Otherwise return-1
 Whether to affect the original array:  Not affect

var result = arr.indexOf(4);    // 2
var result = arr.indexOf("4");  // -1
console.log(result);

indexOf() can also be used to determine whether an element exists

existence index >= 0  index != -1 
non-existent  index == -1

reverse() flip / reverse of array

Return value: Flipped original array
 Whether to affect the original array: influence

var arr = ["a","b","c","d","e"];   // =>  ["e","d","c","b","a"]
var result = arr.reverse();
console.log(result);
console.log(arr);

slice(startIndex,endIndex)   Array clipping  [startIndex,endIndex) 
startIndex Starting subscript(Default value:0)
endIndex   Termination subscript(Default value:Length of array length)

Returns a new array of values after trimming
 Affect original number:Not affect

Commonly used in:
(1) Front end paging
(2) Copy the array to get a new array with the same elements as the original array

var arr = [1,2,3,4,5,6,7,8,9];

var brr = [];
for(var i=0;i<3;i++){
     var item = arr[i];
     brr.push(item);
 }
 var result = arr.slice(0,3);
 var result = arr.slice(3,6);
 var result = arr.slice(6,9);
 console.log(result);
 console.log(arr);


 var brr = [];
 for(var i=0;i<arr.length;i++){
     var item = arr[i];
     brr.push(item);
 }

Get a new array with the same elements as the original array
 var result = arr.slice();
 console.log(result);
 console.log(arr);

sort() sort of array

 Character sorting(default)  according to ascii Sequential sorting of code table   


 Return value:         Sorted original array
 Whether to affect the original array:  influence

 Character sorting
 
 var list = [52, 9,  28, "A", 3, 71, "a", 94, 1000000000, 62, 46, 5];
 var result = list.sort();
 console.log(result);
 console.log(list);

 Pure digital sorting
 
 sort() Pass in a function,There are two formal arguments in the function(a,b Two elements involved in the comparison),The function returns an arithmetic expression that specifies how to sort
 var list = [52, 9, 28, 3, 71, 94 ,62, 46, 5];
 list.sort(function(a,b){
    // console.log(a,b);
    // return a - b;  //  A - b > 0 = > a > b if the previous number is greater than the latter, exchange the positions of the two numbers (from small to large)
    return b - a;  // B - a > 0 = > a < B if the previous number is less than the latter, exchange the positions of the two numbers (from large to small)
});
console.log(list);

concat() splices multiple array elements to form a new array

 If it's an array,Then traverse the array and put each element in the new array
 If not an array,Then put it directly into the new array

 Return value:New array formed by splicing
 Whether to affect the original array: Not affect

 var arr = [1,2,3];
 var brr = [4,5,6];
 var crr = [7,8,9];

 var result = arr.concat(brr,crr);
 var result = brr.concat(arr,crr);
 console.log(result);
 console.log(arr,brr,crr);

 []
 var result = arr.concat("a",brr,"b",crr,"c");
 console.log(result);
 console.log(arr,brr,crr);

 Get a new array with the same elements as the original array
 var arr = [1,2,3];
 var list = arr.concat();
 console.log(list);
 console.log(arr);


 join(char)   Concatenate arrays into strings with specific characters (char default",")
 Return value:Concatenated string
 Whether to affect the original array: Not affect

 var list = ["a","b","c","d"];  // "abcd"
 var str = ""; 
 for(var i = 0; i< list.length;i++){
     var item = list[i]; // Every element in the array
     str += item;
 }
 console.log(str);


 var list = ["a","b","c","d"];  // "a-b-c-d"
 var str = ""; 
 for(var i = 0; i< list.length;i++){
     var item = list[i]; // Every element in the array
     if(i!= list.length-1){
         str += item + "-";
     }else{
         str += item ;
     }
 }
 console.log(str);

var list = ["a","b","c","d"];
var result = list.join("-");
console.log(result);
var result = list.join("+");
console.log(result);
var result = list.join("*");
console.log(result);
var result = list.join("");
console.log(result);
var result = list.join();
console.log(result);

for in and for of

 string number boolean null undefined  => Value type (Common data type)
 array  object    => Reference data type(Special data type)

 var arr = [4,8,2,6,5,7,9,3,1];
 var arr = new Array(4,8,2,6,5,7,9,3,1);
 
 Array properties
 length
 Subscript value and assignment      Maximum value of subscript = length - 1
 Can be iterated   
 0   length-1
 
 var arr = [4,8,2,6,5,,,,,,,,,,,7,9,3,1];
 console.log(arr);
 for(var i = 0;i<arr.length;i++){
     console.log(i,arr[i]);
 }

 for...in   Traversing the array returns the index of the array
 be careful:
 1. adopt for...in Subscript obtained by loop traversal index Is a string type 
 2. for...in Null values are skipped when looping through arrays(Spare time)

 var arr = [4,8,2,6,5,,,,,,,,,,,7,9,3,1];
 console.log(arr);
 for(var index in arr){
     console.log(index,typeof index,arr[index]);
 }

 for...of   Traversing the array returns the value of the array
 
 var arr = [4,8,2,6,5,7,9,3,1];
 console.log(arr);
 for(var val of arr){
    console.log(val,arr.indexOf(val));
}

object

Array can store multiple pieces of data, but the description of the data is not clear enough
var arr = ["Zhang San", 55, 66, 77];
console.log(arr,typeof arr);

 object: A description of the characteristics and behavior of a thing or class of things
 be careful
 (1) Object is based on key value(key:value)On the existence of form
 (2) Array is also a special object  (The key name is a number)
 (3) Key names are strings and quotation marks can be omitted

 How to create objects?   The quotation marks of key names can be omitted
 1. Literal creation
 var zhang = {
      Key name(Property name string) : Key value(Property value of any type)
     "name":"Zhang San",
     "chinese": 55,
     "math":66,
     "english":77,
     "hobby":["sing","dance"]
 }
var zhang = {}; // {} empty object
var zhang = {
    // Key name (property name string): key value (any type of property value)
    name:"Zhang San",
    chinese: 55,
    math:66,
    english:77,
    hobby:["sing","dance"]
}
console.log(zhang);

 2. Constructor creation(Object)
var zhang = new Object({}) // {}
var zhang = new Object({
    name:"Zhang San",
    chinese: 55,
    math:66,
    english:77,
    hobby:["sing","dance"]
});
console.log(zhang);

Properties of objects

Array can store multiple pieces of data, but the description of the data is not clear enough
var arr = ["Zhang San", 55, 66, 77];
console.log(arr,typeof arr);
console.log(arr.length,arr[0]);

 object: A description of the characteristics and behavior of a thing or class of things
 be careful
 (1) Object is based on key value(key:value)On the existence of form
 (2) Array is also a special object  (The key name is a number)
 (3) Key names are strings and quotation marks can be omitted

 Properties of objects:
 (1) Corresponding key name value and assignment  (Ranked in no order)
  a. Point grammar      object.Attribute name      => Quick value
  b. Bracket      object["Attribute name"]   => String is required in brackets/variable => Object traversal function encapsulates object value
 Object value cannot be obtained(Take a nonexistent property name) Then return undefined
 If the object assigns a non-existent attribute, the attribute will be added to the object

 (2) Can be iterated  for...in

Shallow and deep copies of arrays

Shallow replication(Copy)   Two data references the same piece of memory space. As long as one changes, the other will also be affected(===)
 var arr = [1,2,3];
 var brr = arr;  // brr = [1,2,3]
 brr.push(4);    // brr = [1,2,3,4]
 console.log(arr,brr,arr === brr);
 
 Deep replication(Copy)  Get a new array that is the same as the original array element
 var arr = [1,2,3];
 
(1)  Create a new array, traverse the original array, and put each element in the new array
var brr = [];
for(var i = 0;i<arr.length;i++){
    var item = arr[i]; //1 2 3 
    brr.push(item);
}
console.log(arr,brr,arr === brr);
(2)  Expansion method with the help of array   arr.slice() arr.concat();
var arr = [1,2,3];
var brr = arr.slice();
var brr = arr.concat();
console.log(arr,brr,arr === brr);

How to determine whether a data is an array

var arr = [2,8,4,6];  // New array() = > object created by constructor = > instantiated object
var obj = {a:1,b:2};  // new Object()

console.log(typeof arr);// 'object'
console.log(typeof obj);// 'object'


instanceof   Determine whether a data is created by a constructor (Incomplete defect)
console.log(arr instanceof Array); // Whether Array is created by the constructor Array (whether it is an instantiated object of Array)
console.log(obj instanceof Object); // Whether obj is created by the constructor Object (whether it is an instantiated Object of Object)

Array.isArray()  Constructor Array Own method   => Pass in a data to determine whether it is an array:true no:false
console.log(Array.isArray(arr));  // true
console.log(Array.isArray(obj));  // false
console.log(Array.isArray(1));    // false
console.log(Array.isArray("100"));// false
console.log(Array.isArray(true)); // false

character string

string number boolean null undefined array object
typeof


 character string     Gets and sets a piece of text

 How strings are created
 1. Literal creation
var str = "hello";  
console.log(str,typeof str);  // "hello"  "string"

 2. Constructor creation
var str = new String("hello");
console.log(str,typeof str); // {"hello"} 'object'
console.log(str+1); 


 var num = 1;
 console.log(num,typeof num);
 var num = new Number(1);
 console.log(num,typeof num,num+1);

 var bool = true;
 console.log(bool,typeof bool);
 var bool = new Boolean(true);
 console.log(bool,typeof bool,bool+true);
 

 Properties of strings
 1.yes length attribute,Table length,Represents the number of characters in a string
 2.Values can be obtained by subscript,However, it cannot be assigned by subscript(Officially decided =>The extension method of the string will not affect the original string,The operation string returns a new string)    Subscript at maximum = length - 1
 3. Can be iterated

Extension method of string

charAt(index) pass in a subscript and return the character corresponding to the subscript. If not found, return ""

var str = "hello world";
var char = str.charAt(6);
console.log(char,str[6]);

var char = str.charAt(100);
console.log(char,str[100]);  // ""

charCodeAt() passes in a subscript and returns the encoding of the character corresponding to the subscript (ASCII) = > judge the character encoding range

var code = str.charCodeAt(6) // w => 119
var code = str.charCodeAt(4) // o => 111
console.log(code);

code  48-57  =>number
code  65-90  =>Capitalize
code  97-122 =>a lowercase letter

!!! Constructor String method

String.fromCharCode() Constructor String Method of => Transmit one or more character codes => Returns the corresponding character/character string
var char = String.fromCharCode(119);
console.log(char);

var str1 = String.fromCharCode(119,111);
var str1 = String.fromCharCode(72,101,108,108,111);
console.log(str1);

indexOf() returns the position of the first occurrence of a character or a segment of characters in the string. The index does not exist - 1

var str = "good good study , day day up";
var index = str.indexOf("d"); // 3
var index = str.indexOf("day"); // 18
var index = str.indexOf("day123"); // -1
console.log(index);

indexOf(searchChar,startIndex) indexOf() can receive the second parameter as the starting index of the query (0 by default)

var index = str.indexOf("d",4); // 8
var index = str.indexOf("day",19); // 22
console.log(index);

lastIndexOf() returns the position of the last occurrence of a character or a segment of characters in the string. The index does not exist. - 1

Reverse traversal query  length-1 => 0
var str = "good good study , day day up";
var index = str.lastIndexOf("d"); // 22
var index = str.lastIndexOf("d",21); //18
console.log(index);

includes() determines whether a character or a segment of characters exist in the string (ES6)

var str = "good good study , day day up";
console.log(str.includes("d"));
console.log(str.includes("day"));
console.log(str.includes("day123"));

concat() string splicing (splicing multiple character strings to form a new string)

var str1 = "hello";
var str2 = "world";
var str = str1.concat(" ",str2);
var str = str1 + " " + str2;
console.log(str);

String trimming

slice(startIndex,endIndex) string trimming

var str = "good good study , day day up";
var result = str.slice(10,15);  // "study"
var result = str.slice(22,25);     // "day"

slice() Negative values can be accepted  => Length of string + negative
var result = str.slice(-6,-3);     // "day"  -6=>28-6  -3=> 28-3

console.log(result);

substring(startIndex,endIndex) is used in the same way as slice parameter. Negative values cannot be received

 var str = "good good study , day day up";
 var result = str.substring(10,15);  // "study"
 var result = str.substring(22,25);     // "day"
 console.log(result);

substr(startIndex,length) cuts the string of corresponding length from the position with the subscript startIndex

 var str = "good good study , day day up";
 var result = str.substr(10,5);  // "study"
 var result = str.substr(22,3);     // "day"
 console.log(result);

innerText and innerHTML

Value and assignment of non form elements

 innerHTML   Gets and sets the html structure(Plain text also gets and sets text)
 innerText   Gets and sets the text structure within the element(If set html The structure will be output as is)

isNaN() passes in a parameter to judge whether it is non numeric. Non numeric returns true and numeric returns false

(it can also be used to judge whether it is a number, and the number returns false)
If the passed in parameter is of type number, judge directly
If the parameter passed in is a data type other than number, it shall be implicitly converted to number before judgment

console.log(isNaN(NaN));
console.log(isNaN(100));
console.log(isNaN("100")); // "100"   => 100 false
console.log(isNaN("")); // ""         => 0   false
console.log(isNaN(true)); // true      => 1   false
console.log(isNaN(null)); // null      => 0   false
console.log(isNaN("100a")); // "100a"  => NaN true
console.log(isNaN(undefined)); // undefined => NaN true

Logical operator extension

If and and or both sides are not Boolean => It is not converted to Boolean value, but follows the rules of short circuit operation(law:As Boolean)

&&  Both true and false are true  =>  Looking for a fake,If you find it, you don't have to look at it
console.log(true&&true);
console.log(true&&false);

console.log(1 && 2);  // 2
console.log(1 && 0);  // 0

console.log(0 && 2);  // 0
console.log(0 && ""); // 0
console.log(1 && 3 && 2); // 2
console.log(1 && null && 2); // null 
The same false is false, and the true is true      => Looking for real ,If you find it, you don't have to look at it
console.log(true||true);
console.log(false||true);

console.log(1 || 2);  //1
console.log(0 || 2);  //2 = > is it used to judge whether there is a value in disguised form?
console.log("" || 2);  //2 = > is it used to judge whether there is a value in disguised form?
console.log(undefined || 2);  //2 = > is it used to judge whether there is a value in disguised form?

Extension method of string

toUpperCase() converts letters to uppercase and returns the converted new string

toLowerCase() converts letters to lowercase and returns the converted new string

 var str = "Hello World";   
 var upStr = str.toUpperCase();
 console.log(upStr);

 var lowStr = str.toLowerCase();
 console.log(lowStr);

 trim()  De duplication of leading and trailing spaces   => Returns a new string
 trimLeft() | trimStart()  De duplication head space   => Returns a new string
 trimRight() | trimEnd()  De duplication head space   => Returns a new string

search match replace split() common usage + use with regular expressions

search() find

Common usage returns the existence of the first occurrence of a character or a segment of characters in a string:Return subscript  (with indexOf())   
var str = "good good study , day day up";
var index = str.search("d");  //3
var index = str.search("day");  // 18
var index = str.search("day123");  // -1
console.log(index);

Use with regular expressions   => Returns the position of the first occurrence of a character or a segment of characters that meet the rule in a string 
var str = "good good study , Day123 dAy up";
var reg = /day/; //  Case insensitive - 1
var reg = /day/i; // Ignore case d|a|a y|y day day day day day day day day
var reg = /day/ig; // G global match (match all in the whole string without g, and only one is matched by default), but the G modifier of the search method has no effect

var index = str.search(reg)
console.log(index);*/

Match

Common usage will match the content(A string or a segment of string)Return in array  (Only one is matched by default)  existence:The returned array does not exist:null
var str = "good good study , day day up";
var arr = str.match("day"); // ["day",index:18]
var arr = str.match("Day");
console.log(arr); 

 Use with regular expressions   => Put a string or a segment of string that meets the rule into the array(By default, only one fit modifier is matched g You can match the entire string)
 var str = "good good study , Day dAy up";
 var reg = /day/;   // day
 var reg = /day/i;  // Ignore case d|a|a y|y = > day day day day day day day day
 var reg = /day/ig;  // Ignore global case matching
 var arr = str.match(reg);
 console.log(arr);

replace(oldStr,newStr)

 Common usage replaces a character or a segment of a string with another string (Replace the original string with a new string)  =>New string  (Only one is matched by default)

var str = "good good study , day day up";
var newStr = str.replace("day","money");
 console.log(newStr);

 Use with regular expressions => Replace one or a segment of characters that match the rule with another string (By default, only one fit modifier is replaced g You can replace the entire string)

 var str = "good good study , Day dAy up";

 var reg = /day/;   // day
 var reg = /day/i;   // ignore case
 var reg = /day/ig;   // ignore case
 var newStr = str.replace(reg,"money")
 console.log(newStr);


 Remove all spaces
var str = "    good good study ,    Day dAy up     ";
var reg = / /g;  
var newStr = str.replace(reg,"");
console.log(newStr);

split()

Common usage splits a string into arrays with specific characters
var str = "a-b-c-d";
var list = str.split("-");
var list = str.split("");  // Split each character
console.log(list);

Use with regular expressions => Splits a string into an array with one or more characters that match the rules
var str = "a-b-c-d";

var reg = /-/g; //Use - split
var list = str.split(reg);  // Split each character
console.log(list);

join()

 var list = ["a","b","c","d"];
 var str = list.join("-");
 console.log(str);  // "a-b-c-d"

regular expression

Regular expression
It is a matching pattern of strings (which can be used to verify string matching in forms) = > in short, it is to match strings with established rules

 user name
 Upper and lower case letters by numbers _ $ form , 6-12 position,And cannot start with a number    /^[a-zA-Z_][0-9a-zA-Z_]{5,11}$/ig

 password
 Upper and lower case letters by numbers _ Composition 6-12 position 

 mailbox
 *********@qq.com

 Composition of regular expressions 
 (1)  rule    /day/
 (2)  Modifier    i(ignore case ignore case)  g(Global matching global)

 Creation of regular expressions
 
 1. Literal creation shortcut(Cannot splice variables)
 var a = 100;
 var reg = /day/ig; 
 console.log(reg);

 2. Constructor creation    (You can splice variables)
 var a = 100;
 var reg = new RegExp("d"+a+"y","ig");
 console.log(reg);

 3. Combined usage  (Constructor RegExp You can also receive a regular expression)
 var reg = new RegExp(/day/ig);
 console.log(reg);

Date object

Date object = > you can get and set the time

 How to create a date object?  
 Constructor creation   (obtain|set up)

 (1) Get current time  => China standard time(GMT(UTC) + 0800)
 GMT(UTC)   World time(Greenwich) => Date The object records 00 from January 1, 1970:00:00 Milliseconds since start   
var date = new Date();
 console.log(date);

 (2) Set a time  
 a. Receive a time formatted string(Time format "2021/10/11 12:12:12")
var date = new Date("2021-11-11 12:12:12");
 console.log(date);

 b. Multi parameter transmission(Specify year, day, hour, minute and second respectively)  =>
 be careful: Month parameter: 0-11  => Month parameters = Expected month - 1
var date = new Date(2021,10,11,12,12,12);
 console.log(date);

 c. Can receive a millisecond (There is only one parameter and is number type) 
var date = new Date(0);
var date = new Date(1000000000000);  // > 1970
var date = new Date(-1000000000000); // < 1970
 console.log(date);

 d. new Date()Can receive a date object  => You can get a new date with the same time as the original date (There are methods that affect the original date in the extension methods of date objects => Copy first in order not to affect)
var date = new Date("2021-11-11 12:12:12");
var date1 = new Date(date); // date -> ms -> new Date(ms)
console.log(date);
console.log(date1);

Character statistics

1.  Known string"aabccd"The following functions are realized by programming.
 
(1) String de duplication  "abcd"
var str = "aabccd";
var uniStr = "";
for (var char of str) {
    if (uniStr.indexOf(char) == -1) {
        uniStr += char;
        // uniStr = uniStr.concat(char);
    }
}
console.log(uniStr); // "abcd"

(2) Count the number of occurrences of each character, and the result is displayed   a2b1c2d1     Character statistics(Total number of occurrences per character)
var countStr = "";
for(var i=0;i<uniStr.length;i++){ // "ABCD" = > each
    var uniChar = uniStr.charAt(i); //"a"
    var count = 0;
    for(var j = 0; j < str.length; j++){
        var item = str.charAt(j);
        if(uniChar == item){
            count++;
        }
    }
    countStr += uniChar+count;
} 
console.log(countStr); 
var countStr = "";
for(var i=0;i<uniStr.length;i++){ // "ABCD" = > each
    var uniChar = uniStr.charAt(i); //"a"
    var reg = new RegExp(uniChar,"g"); //   /a/g
    var list = str.match(reg);
    console.log(reg,list);
    countStr += uniChar+list.length;
} 
console.log(countStr);
var arr = [ "a" ,"a", "b" ,"c" ,"c" ,"d"];
var str = "aabccd";
var obj = {};
for (var char of str) { // "aabccd"  => "a" "a" "b" "c" "c" "d"
    if (obj[char]) { // Take each character as the key name of the object (the key name is unique)
        obj[char]++;  //  obj[char] = obj[char] + 1
    } else {
        obj[char] = 1;
    }
}
console.log(obj);
var countStr = "";
for(var key in obj){
    console.log(key,obj[key]);
    countStr += key + obj[key];
}
console.log(countStr);

(3)(Original string: aaaabbbbbbbccdaaaaa；After compression: a4b7c2d1a5)  Compression statistics (Number of repetitions of adjacent characters)

var str = "aaaabbbbbbbccdaaaaa";
var count = 0;
var countStr = "";
for(var i = 0; i < str.length;i++){
    if(str.charAt(i) == str.charAt(i+1)){
        count++;
    }else{
        count++;
        countStr += str.charAt(i) + count;
        count = 0;  //Reset to 0 for next recount
    }
}
console.log(countStr);

timer

var timer = setInterval(function(){},1000)//Set the timer and trigger the function every 1000 milliseconds
clearInterval(timer)//Clear specified timer

Set timer

Pass a function as an argument into another function,Executed on behalf of another function  =>  Callback function
 Can be understood as => Specify the contents to be implemented in advance(Put in function)  

setInterval(callbackFn,interval,arg1,arg2...argN);   Specify an action every specific time(function)
callbackFn  Pass in a function to specify the content to be executed at each interval  (The content to be executed is specified in advance => function(Named function anonymous function => Pass the function as an argument))
interval    Interval time(The unit is milliseconds)
arg1,arg2...argN  As callbackFn Actual parameters passed in

Return value number => The number of the timer

be careful: The timer needs to wait for the corresponding interval from start to execution

If callbackFn Receive parameters required:
(1)  You can receive a string in the form of a function call  => This string can be used internally as a timer JS Syntax parsing 
var timer = setInterval( 'countDown("2021-11-11 00:00:00")' ,1000);

(2) Change to nested calls to functions   => Anonymous functions are executed at regular intervals => call countDown
var timer = setInterval( function(){
countDown("2021-11-11 00:00:00");
} ,1000);

(3) If callbackFn Parameters that need to be received can be passed in from the third parameter in turn
var timer = setInterval( countDown ,1000,"2021-11-11 00:00:00");

It is required to print 111 on the console at regular intervals

setInterval("console.log('hahaahhahahh')",1000)

setInterval(function(){
    console.log(11111);
},1000)

setInterval(console.log,1000,1111,2222,3333);

Template string

ES6 Template strings can be represented by interpolation statements ${} => Splicing variables and executing simple expressions

Extension method of date object_ obtain

var date = new Date();  //Date object
console.log(date);

Get the day, day, day, week, hour, minute, second, millisecond
var year = date.getFullYear();
console.log(year);

Get month  => month(0-11)
be careful:If you want to show the effect, the actual month = Gets the month of the month + 1
var month = date.getMonth();
console.log(month);
console.log("Actual month:",month+1);

get date 
var day = date.getDate();
console.log(day);

Get week  => week(0-6   0:Sunday)
var week = date.getDay();
console.log(week);

var hour = date.getHours();
console.log(hour);

var minute = date.getMinutes();
console.log(minute);

var second = date.getSeconds();
console.log(second);

var millisecond = date.getMilliseconds();
console.log(millisecond);

Gets the total number of milliseconds corresponding to the current date
var ms = date.getTime();
console.log(ms);

console.log("--------------------UTC--------------------------------");
var year = date.getUTCFullYear();
console.log(year);

Get month  => month(0-11)
be careful:If you want to show the effect, the actual month = Gets the month of the month + 1
var month = date.getUTCMonth();
console.log(month);
console.log("Actual month:",month+1);

get date 
var day = date.getUTCDate();
console.log(day);

Get week  => week(0-6   0:Sunday)
var week = date.getUTCDay();
console.log(week);

var hour = date.getUTCHours();
console.log(hour);

var minute = date.getUTCMinutes();
console.log(minute);

var second = date.getUTCSeconds();
console.log(second);

var millisecond = date.getUTCMilliseconds();
console.log(millisecond);

Extension method of date object_ set up

Set the year, month, day, hour, minute, second, millisecond of the date object 
Return value: The number of milliseconds corresponding to the set time
 Affect original date object : influence

!!!!!!!!!! 
Note that the setting of month, day, hour, minute, second and millisecond exceeds the maximum threshold => Carry one bit less than the minimum critical value => Excuse me 


Set Year 
var result = date.setFullYear(2500);
console.log(result);
console.log(date);


Set month parameter range(0-11)
var result = date.setMonth(0);    //  2021-1-12
var result = date.setMonth(-1);    //  2021-(-1)-12  => 2020-12-12
var result = date.setMonth(12);    //  2021-(13)-12  => 2022-1-12
console.log(result);
console.log(date);

Set date    
The 0th day of this month is the last day of last month
 The 0th day of next month is the last day of this month

var result = date.setDate(1); // 2021-10-1
var result = date.setDate(0);   // 2021-10-0 => 2021-9-30
var result = date.setDate(32)   // 2021-10-32 => 2021-11-1
console.log(result);
console.log(date);

date.setHours(12);
date.setMinutes(21);
date.setSeconds(12);
date.setMilliseconds(123);

console.log(date);   

Sets the number of milliseconds corresponding to the date
date.setTime(0);
console.log(date);

Date formatting_ encapsulation

2021-09-04 21:49:00
2021-09-04 21:49
2021-09-04
21:49:00

2021/09/04 21:49:00
2021/09/04 21:49
2021/09/04

Encapsulates a function that formats and outputs time => Specify time format when exporting?
pattern The formal parameter is used to receive the time format
date    Optional filling(Get current time by default, You can also pass in a string in event format,Date object,Msec )
function dateFormat(pattern,date){
    var pattern = "YY-MM-DD hh:mm:ss";
    Judge whether there is a parameter
    if(date){ // Parameter = > get a new time according to the passed in
        date = new Date(date);
    }else{ //No = > get the current time by default
        date = new Date();
    }

    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDate();

    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    
    Chain operation essence replace() Method returns:The replaced new string can still be called replace method
   return pattern.replace("YY",year).replace("MM",beauty(month)).replace("DD",beauty(day)).replace("hh",beauty(hour)).replace("mm",beauty(minute)).replace("ss",beauty(second));
}

function beauty(num) {
    return num < 10 ? "0" + num : num;
}


console.log(dateFormat("YY-MM-DD hh:mm:ss"));
console.log(dateFormat("YY-MM-DD hh:mm"));
console.log(dateFormat("YY-MM-DD"));
console.log(dateFormat("hh:mm:ss"));
console.log(dateFormat("YY/MM/DD hh:mm:ss"));

console.log(dateFormat("YY/MM/DD hh:mm:ss","2021-12-31"));
console.log(dateFormat("YY/MM/DD hh:mm:ss",1000000000000));

Encapsulates a function that formats and outputs time => Specify time format when exporting?
    pattern The formal parameter is used to receive the time format
    function dateFormat(){
    var pattern = "YY-MM-DD hh:mm:ss";
    var date = new Date();

    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDate();

    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    pattern = pattern.replace("YY",year);  // The replaced new string is assigned to the original variable
    pattern = pattern.replace("MM",month);
    pattern = pattern.replace("DD",day);
    pattern = pattern.replace("hh",hour);
    pattern = pattern.replace("mm",minute);
    pattern = pattern.replace("ss",second);
    console.log(pattern);
    
    //The replace() method of chain operation returns a new string after replacement, which can still call the replace method
    pattern = pattern.replace("YY",year).replace("MM",month).replace("DD",day).replace("hh",hour).replace("mm",minute).replace("ss",second);
    console.log(pattern);
 }

Setting the date does not affect how to the original date object

var date = new Date();
console.log(date);

Set the year, month, day, hour, minute, second, millisecond of the date object 
Return value: The number of milliseconds corresponding to the set time
 Affect original date object : influence
 Get a new date object with the same time as the original date object
var date1 = new Date(date); // Date = > Ms = > New Date object
var result = date1.setFullYear(2500);
console.log(result);
console.log(date1);
console.log(date);

Delay device

The timer executes specific content at regular intervals (Always execute as long as you don't clear)

The delayer delays the execution of specific content for a period of time (Execute only once)

Set delay
setTimeout(callbackFn,delay,arg1,arg2...argN)
callbackFn   Pass in a function that specifies what to execute after waiting a specific time  (The content to be executed is specified in advance => function(Named function anonymous function => Pass the function as an argument))
delay        delay time (Company:millisecond)
arg1...argN  If callbackFn If the parameter needs to be received, it will be transmitted back from the third parameter

Return value: Number of delay device

Clear delay 
clearTimeout(Number of delay device)     It is generally used to clear the delayer and change the timer

DOM beginner

JS form 
 ECMAScript  =>ES5 (ES6)
 BOM(Browser Object Model)   Browser object model => The interface and method for operating the browser are provided
 DOM(Document Object Model)   Document object model =>  Provides interfaces and methods for operating documents

 window => document => html => body => ...  


 HTML DOM It is about how to get, modify, add or delete HTML Element, i.e. operation HTML Element of
 In short  HTML Addition, deletion, modification and query of elements


 be careful:  About documents document
 whole html The page loads into the browser and becomes part of the document
 All elements in the page can be accessed through the document (Dynamically access and update the content, structure, and style of documents)
console.log(document);


 JS New node concept
 according to W3C of HTML DOM Standards, HTML Everything in the document is a node:
 The entire document is a document node        => document
 each HTML An element is an element node      => h1-h6 p div ul li span 
 HTML The text within the element is a text node    => text 
 each HTML Attributes are attribute nodes      => class="" id="" title=""
 Annotations are annotation nodes               => 

 The essence of nodes => object

 Hierarchical relationship(Nodes in the node tree have hierarchical relationships with each other.)
 Parent node 
 Child node
 Sibling node

 Root node(html)   The root node has no parent node

Method to get element node

 Method to get element node
 (Get all the elements of the page through the document)
 document.getElementById();          In document,adopt id Get element name=>Element not found:null
 document.getElementsByClassName()   In document,adopt class Get element name=>Collection not found:[]
 document.getElementsByTagName();    In document,Get element by tag name=>Collection not found:[]
 document.getElementsByName()        In document,adopt name Property get element get=>Collection not found:[]  (Generally used for form elements)

Method to get element node_ Restrict parent element

Can I get the corresponding child element through the parent element  (Limit query scope)
Child elements can be obtained from parent elements  =>There are limitations (Can only be obtained through the parent element getElementsByClassName getElementsByTagName)

Method of element node

Method of element node  => Operation attribute node(Property addition, deletion, modification and query)

Attribute node (Write in the label and separate the label name with a space)  => Element dependent nodes
 Operate attribute nodes through methods related to element nodes

Element.getAttribute(key)      Get the attribute value corresponding to the attribute name
Element.setAttribute(key,val)  Set the attribute value corresponding to the attribute name  (If not, add and modify)
Element.removeAttribute(key)   Delete attribute corresponding to attribute name

var one = document.getElementsByClassName("one")[0]; // Node essence = > object
console.log(one);

obtain

var _class  = one.getAttribute("class");
console.log(_class);

var id = one.getAttribute("id");
console.log(id);

var title = one.getAttribute("title");
console.log(title);

Settings (modify)

one.setAttribute("class","first");
one.setAttribute("id","demo");
one.setAttribute("title","Hello");
console.log(one);

delete

one.removeAttribute("class");
one.removeAttribute("id");
one.removeAttribute("title");
console.log(one);

Add (add without setting = > Modify with setting)

one.setAttribute("class","first");
one.setAttribute("id","demo");
one.setAttribute("title","Hello");

be careful H5 start,Allow users to customize attributes(Specify the attribute name and attribute value yourself)

(1) with data-Attribute name
(2) Define yourself at will  asd  abc
one.setAttribute("asd","asd");
one.setAttribute("data-index","0");

var asd = one.getAttribute("asd");
var index = one.getAttribute("data-index");
console.log(asd);
console.log(index);

one.removeAttribute("asd");
one.removeAttribute("data-index");

console.log(one);

document.getElementsByClassName() gets the node list of the same class attribute. IE8 and below do not support encapsulating a method. Find the element with the specified class name from all elements of the page and put it in the array = > return

function myGetElementsByClassName(className){
    var className = "list";  //class name to find

    var list = document.getElementsByTagName("*");  //Get all elements in the page
    console.log(list);

    var arr = [];
    for(var i=0;i<list.length;i++){
        var ele = list[i];
        console.log(ele);
        var _class = ele.getAttribute("class");
        console.log(_class);
        if(_class){  // Value = > contains class name
            var classList = _class.split(" "); 
            console.log(classList);
            if(indexOf(classList,className)!=-1){
                arr.push(ele);
            }
        }
    }
    return arr;
}


function includes(list,char){
    var flag = false;
    for(var i = 0; i < list.length; i++){
        var item = list[i];
        if(item === char){
            flag = true;
            break;
        }
    }
    console.log(flag);
    return flag;
}

Returns the first occurrence of an element in an array:Return subscript does not exist:-1
function indexOf(list,char){  
    var index = -1;
    for(var i = 0; i < list.length; i++){
        var item = list[i];
        if(item === char){
            index = i;
            break;
        }
    }
    console.log(index);
    return index;
}

Tags: Javascript node.js html5

Posted on Fri, 15 Oct 2021 01:48:48 -0400 by Stevis2002

Programmer Help

js Basics (continuously updated)

Introduction to javascript

Basic data type of JS

Math related methods

Cast type

Cast type_ Boolean

parseInt and parseFloat

The difference between a + + and + + A

Select structure

Implicit type conversion of relational operators

++-- implicit type conversion for

Operator precedence

switch of selection structure

switch penetration of selection structure

switch penetration application of selection structure

ternary operator

while Loop

do while loop

for loop

Keywords in the loop

Function encapsulation process and function call

Nesting of functions

Recursion of function

JS precompiling

Creation method of JS function

How arrays are created

Expansion method of array

push() adds one or more elements to the end of the array

unshift() adds one or more elements to the head of the array

pop() deletes an element at the end of the array

shift() deletes an element at the head of the array

splice() add, delete or modify anywhere

includes() determines whether an element exists in the array (added in ES6)

indexOf() returns the first occurrence of an element in an array

indexOf() can also be used to determine whether an element exists

reverse() flip / reverse of array

sort() sort of array

concat() splices multiple array elements to form a new array

for in and for of

object

Properties of objects

Shallow and deep copies of arrays

How to determine whether a data is an array

character string

Extension method of string

charAt(index) pass in a subscript and return the character corresponding to the subscript. If not found, return ""

charCodeAt() passes in a subscript and returns the encoding of the character corresponding to the subscript (ASCII) = > judge the character encoding range

!!! Constructor String method

indexOf() returns the position of the first occurrence of a character or a segment of characters in the string. The index does not exist - 1

indexOf(searchChar,startIndex) indexOf() can receive the second parameter as the starting index of the query (0 by default)

lastIndexOf() returns the position of the last occurrence of a character or a segment of characters in the string. The index does not exist. - 1

includes() determines whether a character or a segment of characters exist in the string (ES6)

concat() string splicing (splicing multiple character strings to form a new string)

String trimming

slice(startIndex,endIndex) string trimming

substring(startIndex,endIndex) is used in the same way as slice parameter. Negative values cannot be received

substr(startIndex,length) cuts the string of corresponding length from the position with the subscript startIndex

innerText and innerHTML

isNaN() passes in a parameter to judge whether it is non numeric. Non numeric returns true and numeric returns false

Logical operator extension

Extension method of string

toUpperCase() converts letters to uppercase and returns the converted new string

toLowerCase() converts letters to lowercase and returns the converted new string

search match replace split() common usage + use with regular expressions

search() find

Match

replace(oldStr,newStr)

split()

join()

regular expression

Date object

Character statistics

timer

Template string

Extension method of date object_ obtain

Extension method of date object_ set up

Date formatting_ encapsulation

Setting the date does not affect how to the original date object

Delay device