Sorting out JS video knowledge points [day02]

Keywords: Javascript

1. Type conversion

① How to convert to a string

//Three ways to convert strings
//null and undefined have no tostring() method
var num=1;
var str1=num.toString();
var str2=String(num);   //'1' of string type
var s=1+'';
console.log(str1,str2,s);

② Convert other types to strings

var na=NaN;
var u=undefined;
var n=null;
var bool=true;
var arr=[1,2,3];
var obj={};
var str1=toString(na);        //'[object Undefined]'
//var   str2=u.toString();       // report errors
//var   str3=n.toString();       // report errors
var str2=String(u);           //'undefined'
var str3=String(n);           //'null'
var str4=bool.toString();     //'true'
var str5=arr.toString();      //'1,2,3'
var str6=obj.toString();      //'[object Object]'
console.log(str1,str2,str3,str4,str5,str6);

③ Convert other types to boolean

var res='1';
var r=Boolean(res);
console.log(r);  //true

④   Convert other types to numeric types

//Numeric conversion
var str='1.0';
var n1=Number(str);      //1
var n2=parseInt(str);    //1
var n3=parseFloat(str);  //1
console.log(n1,n2,n3);
var str='1.01';
var n1=Number(str);      //1.01
var n2=parseInt(str);    //1
var n3=parseFloat(str);  //1.01
console.log(n1,n2,n3);
//Empty string conversion value
var str='';
var n1=Number(str);      //0
var n2=parseInt(str);    //NaN
var n3=parseFloat(str);  //NaN
console.log(n1,n2,n3);
//null conversion value
var str=null;
var n1=Number(str);      //0
var n2=parseInt(str);    //NaN
var n3=parseFloat(str);  //NaN
console.log(n1,n2,n3);
//String conversion with numeric value
var str='111hello';
var n1=Number(str);      //NaN
var n2=parseInt(str);    //111
var n3=parseFloat(str);  //111
console.log(n1,n2,n3);
//Boolean type conversion value
var str=true;
var n1=Number(str);      //1
var n2=parseInt(str);    //NaN
var n3=parseFloat(str);  //NaN
console.log(n1,n2,n3);
//undefined conversion value
var str=undefined;
var n1=Number(str);      //NaN
var n2=parseInt(str);    //NaN
var n3=parseFloat(str);  //NaN
console.log(n1,n2,n3);
//Object to numeric
var str={};
var n1=Number(str);      //NaN
var n2=parseInt(str);    //NaN
var n3=parseFloat(str);  //NaN
console.log(n1,n2,n3);

2. Process control statement

If-else

//Three values, sorted from large to small
var a=2, b=1,c=3;
var n1;
if(a<b){
    n1=a;
    a=b;
    b=n1;
}
if(a<c){
    n1=a;
    a=c;
    c=n1;
}
if(b<c){
    n1=b;
    b=c;
    c=n1;
}
console.log(a,b,c);   //3 2 1

switch

//Judge whether a day is a working day or a rest day
var day=1;//weekdays
switch(day){
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('weekdays');
        break;
    case 6:   //default:
    case 7:
        console.log('Rest Day');
        break;
}

for

//From 1 to 100
var sum=0;
for(var i=1;i<=100;i++){
    sum +=i;
}
console.log(sum);  //5050

while

//From 1 to 100
var i=1;
var sum=0;
while(i<=100){
    sum+=i
    i++;
}
console.log(sum);

do-while

var i=1;
var sum=0;
do{
    sum+=i
    i++;
}while(i<=100);
console.log(sum);

break and continue

In a nested loop, it only works on the current layer

sign

//If you want to end all cycles when b=5, use the tag
a1:for(var a=1;a<=10;a++){
    for(var b=1;b<=10;b++){
        if(b==5)
            break a1;
        console.log(a,b);
    }
}

3. Example of flow statement

//At the time of employment, the salary is 10k, with an annual increase of 5%. What is the salary after 20 years?
var n=10000;
for(var i=1;i<=20;i++){
    n+=n*0.05;
}
console.log(n);
//How many kinds of situations do you have when you rub the notes of fifty cents, one yuan and five yuan into 20 yuan?
var n=0;
for(var i=0;i<=40;i++){
    for(var j=0;j<=20;j++){
        for(var k=0;k<=4;k++){
            if(i*0.5+j*1+5*k==20){
                n++;
            }
        }
    }
}
console.log(n);  //55

4. Object

① Js working principle

        At the beginning, the script language (dom) was designed to run on the browser side

        For a single threaded embedded scripting language, there is only one thread executing code (because if it is multithreaded, multiple threads will operate the same dom at the same time). There will also be problems: tasks need to be queued. If a task takes a long time to execute, it will cause blocking

          Solution: adopt asynchronous mode

                  First: setTimeOut()   Some functions need to wait for some time to execute

                   The second: Ajax   The time when this data comes back is uncertain

② Js garbage collection mechanism

             Main solution: some unnecessary variables in memory - memory leakage

             How it works: it will irregularly look for variables that are no longer used and release them

            Methods: mark clear, reference count

            Cases treated as garbage: ① there are no referenced variables

                                            ② Several objects reference each other to form a closed loop

            Situations that will not be treated as garbage: ① global variable ----- always on standby

                                                  ② There is a specific reference relationship - closure (there are functions inside the function, and the internal function references the variables of the external function)

        ③ Garbage collection mechanism example

 function test(){
    var num=0;
    console.log(++num);
}
//In the function body of a function, variables that are not referenced will be destroyed after each execution
test();   //1
test();   //1
test();   //1

5. Object creation

      ① Literal mode

var stu={
    name:'xiaoming',
    height:180,
    weight:60,
    money:'many',
    cook(){
        console.log(this.name+'Go cook')
    },
    housework(){
        console.log('Do the housework')
    },
}

   ② Constructor mode

var stu2=new Object();
stu2.name="xiaohong";
stu2.height=160;
stu2.weight=45;
stu2.money='many';
stu2.sayHello=function(){
    console.log('hello');
}

6. Access properties and methods

//How to access properties
console.log(stu.name);
console.log(stu['name']);
//Method call
stu.cook();

//Object traversal for...in    Attributes that can be printed by for..in become enumerable attributes (by default, custom attributes can be enumerated)
for(k in stu){   //k represents the key of the attribute
    //console.log(k);// name height weight money cook housework
    console.log(stu[k]); //xiaoming   one hundred and eighty   sixty   many   [Function:   cook]   [Function:   housework]
}

Deleting an attribute can only delete custom attributes, but cannot delete inherited attributes

delete stu.money; 

New attribute   When adding, if the attribute is not in the original object, it is new; if it is, it is modified

stu.money='less';

7.valueOf and toString

① Both methods are the original methods of the object

② valueOf is the original value of the object. It is usually called by js automatically in the background

③ toString itself is used for string conversion and automatic call

④ If we rewrite these two methods, we will call valueOf first during operation and toString first during display,

⑤ If we rewrite only one method, the rewritten method will be called whether it is operation or rewriting

⑥ If both are overridden, we will call valueOf first

Examples are as follows:

var obj={
    num:1,
    toString:function(){
        return this.num+1;
    },
    valueOf:function(){
        return this.num+2;
    },
}
console.log(obj==2);   //false   valueOf is called at this time

Use valueOf() to implement an accumulated instance. Each time obj is called, the valueOf() method will be called

var obj={
    num:1,
    toString:function(){
        return this.num+100;
    },
    valueOf:function(){
        return this.num++;
    },
}
//Because num is referenced in valueOf, Num will not be garbage collected
console.log(obj==1);    //true
console.log(obj==2);   //true
console.log(obj==3)     //true

If valueOf is not overridden, the conversion value type returns NaN. If overridden, valueOf is called first

var obj={
    num:1,
    toString:function(){
        return this.num+100;
    },
    valueOf:function(){
        return this.num++;
    },
}
console.log(Number(obj));  //1

8. Detection properties and methods in objects

//in   Detects whether a property is a free property or an inherited property of an object
//hasOwnProperty(propertyName)    Detect whether a property is a self owned property of an object
//propertyIsEnumerable   Check whether a property is an object's own property, which can be enumerated
var obj={
    name:'xiaoming',
}
console.log('toString' in obj);  //true
console.log(obj.hasOwnProperty('toString'));  //false
console.log(obj.propertyIsEnumerable('toString')); //false

Detect whether the object is in the same prototype chain

Detects whether the object is an instance of a constructor

//in   Detects whether a property is a free property or an inherited property of an object
//hasOwnProperty(propertyName)    Detect whether a property is a self owned property of an object
//propertyIsEnumerable   Check whether a property is an object's own property, which can be enumerated
var obj={
    name:'xiaoming',
}
//isPrototypeOf() detects whether an object is on the prototype chain of another object (the direction of the prototype)
//instanceof() detects whether an object is an instance of a constructor   new
var str=new String('zhangsan');
console.log(str instanceof String); //true
console.log(str instanceof Object);  //true
console.log(String.prototype.isPrototypeOf(str));  //true
console.log(Object.prototype.isPrototypeOf(str));  //true
function Animal(){};
var dog=new Animal();
console.log(dog instanceof Animal);  //true
console.log(dog instanceof Object);  //true
console.log(Animal.prototype.isPrototypeOf(dog));  //true
console.log(Object.prototype.isPrototypeOf(dog));  //true
var obj={};
console.log(Object.prototype.isPrototypeOf(obj));  //true
function Dog(){};
var dog2=new Dog();
console.log(Animal.prototype.isPrototypeOf(dog2));  //false

Posted by herve on Fri, 17 Sep 2021 21:03:21 -0700