current position:Home>[JS dry goods sharing | suggestions collection] challenge to take you into JS in the shortest time (8)

[JS dry goods sharing | suggestions collection] challenge to take you into JS in the shortest time (8)

2021-08-27 04:56:28 Please call me Ken

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details : 8 Yuegengwen challenge

Appreciate meeting Hello I am ken

author : Please call me ken
link :juejin.cn/user/109118…
source : Nuggets
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .

About foreword :

Part of the content and pictures of the article come from the Internet , If you have any questions, please contact me ( The official account is in the main page )

This blog is suitable for those who have just come into contact with JS As well as a long time did not see want to review the small partner .

About the content :

5.2_ Built-in objects

For the convenience of program development ,JavaScript Provides many commonly used built-in objects , Including mathematical objects Math、 Date object Date、 Array objects Array And string objects String etc. . Mastering the use of common built-in objects will bring great convenience to program development .

5.2.1_ Familiarize yourself with built-in objects by consulting the documentation

The objects explained earlier are objects written by developers themselves . For the convenience of program development ,JavaScript There are also many built-in objects , Many common development requirements can be accomplished using built-in objects , for example , Mathematical calculation 、 Date processing , Array operation, etc . For most developers , You don't have to spend time studying how these built-in objects are implemented , It is important to quickly master the use of built-in objects , So as to quickly put into development work .

because JavaScript There are many built-in objects provided , There are also version updates 、 Browser compatibility and other reasons , Therefore, the best way to learn about built-in objects is to consult the latest documents on the network .

So let's start with Mozilla Developer Network (MDN ) For example , Show me how to view JavaScript Use of built-in objects in :

  • open MDN Website , Find... In the navigation bar of the website “ technology ” —— "JavaScript,
  • Scroll the page down , You can find... In the left sidebar “ Built-in objects ” term , Expand the item , You can see the directory links of all built-in objects ,
  • in addition , If you don't know the name of the object , You can also enter keywords in the search box of the page to search , Find an object or method related to a keyword .

When learning the use of a method through documentation , Basically, it can be divided into 4 A step ,
For example, look up Math.max(), As follows :

  1. Look up Function of method . There is a... At the top of the page Paragraph text :“Math max0 Function returns the maximum value of a set of numbers .”. This passage is to introduce the function of the method .
  2. see Parameters The meaning and type of . It is known from the document that ,max() The parameters of the method are a set of values , Any amounts . In the syntax of the document , Use “[ ]” The parameters of the package represent optional parameters , It can be omitted .
  3. see Return value The meaning and type of . You can see specific instructions in the document .
  4. Test with sample code . Sample code is provided in the pages of most common methods in the document , You can learn how to use this method through sample code .

5.2.2_[ Case study ] Encapsulate your own mathematical objects

When the built-in object cannot meet the requirements , We can also encapsulate an object ourselves , To complete the specific operation . Next, we encapsulate a mathematical object myMath, To find the maximum value in the array ,

The specific code is as follows :

var myMath = {

pI: 3.141592653589793,

max: function() ( var max = arguments[0];uments. length; 1++){

for (var 1- 1; i < arguments

if (arguments[i] > max)

max = arguments[i];

return max;

}

console.log (myMath.PI);

/ Output results :3.141592653589793

console. log (myMath.max(10,20,30));

// Output results : 30
 Copy code 

In the above code , The first 1 Line of code defines a myMah object . The first 2 Line of code sets PI Value . The first 3~ 11 Line of code defines a max Method , And make use of arguments To receive the input parameters , Returns the maximum value of the array . The first 13 Line code call myMahPI Get a defined value . The first 14 Line code call myMath.max() Method to get the maximum value in the array .

5.3_Math object

5.3.1_Math Use of objects

Math Object is used to perform mathematical operations on numbers , The object is not a constructor , There is no need to instantiate the object , You can use its static properties and static methods directly .

Math Common properties and methods of objects

member effect
PI Get the pi , The result is 3.141592653589793
abs(x) obtain x The absolute value of , You can pass in a normal value or a value represented by a string
max([value1[,value2,…]]) Get the maximum value of all parameters
min([value1[,value2,…]]) Get the minimum value of all parameters
pow(base, exponent) Get cardinality (base) The index of (exponent) The next power , namely base^exponent
sqrt(x) obtain x The square root of
ceil(x) Gets a value greater than or equal to x Minimum integer of , That is, round up
floor(x) Get less than or equal to x Maximum number of senses , I.e. round down
round(x) obtain x The rounded integer value of
random() Gets a value greater than or equal to 0.0 And less than 1.0 The random value

Case study :

Math.PI;//  Get the pi 
Math.abs(-25);//  Get absolute value , Return results :25
Math.abs('-25');//  Get absolute value , Automatically convert to digital , Return results :25
Math.max(5, 7, 9, 8);//  Get the maximum , Return results :9
Math.min(6, 2, 5, 3);//  Get the minimum , Return results :2
Math.pow(2, 4);//  obtain 2 Of 4 The next power , Return results :16
Math.sqrt(9);// obtain 9 The square root of , The return result is :3
Math.ceil(1.1);//  Rounding up , Return results : 2
Math.ceil(1.9);//  Rounding up , Return results :2
Math.floor(1.1);//  Rounding down , Return results :1
Math.floor(1.9);//  Rounding down , Return results :1
Math.round(1.1);//  rounding , Return results : 1
Math.round(1.5);//  rounding , Return results :2
Math.round(1.9);//  rounding , Return results :2
Math.round(-1.5);//  rounding , Return results :-1( Take the larger value )
Math.round(-1.6);//  rounding , Return results :-2
 Copy code 

5.3.2_ Generate random numbers for a specified range

Math.random() Used to get random numbers , Each call to this method returns a different result . The result of this method is a very long floating point number , Such as “0.925045617789475 Its scope is 0~1( barring 1).

because Math.random() The random number returned is not commonly used , We can use some mathematical formulas to convert into random numbers in any range , Formula for “Math.random() * (max - min) + min", Indicates that the generation is greater than or equal to min And less than max The random value .

The sample code is as follows :

Math.random() * (3 - 1) + 1;  // 1 ≤  Return results  < 3
Math.random() * (20 - 10) + 10; // 10 ≤  Return results  < 20
Math.random() * (99 - 88) + 88; // 88 ≤  Return results  < 99
 Copy code 

The return result of the above code is a floating point number , When you need to get integer results , Collocation Math.floor() To achieve .

Case study : Demonstrate how to get 1 ~ 3 Random integers in range , The return result may be 1、2 or 3:

function getRandom (min, max) {
return Math.floor(Math.random()*(max - min + 1) + min);
}
console.log(getRandom(1, 3)); //  minimum value 1, Maximum 3
 Copy code 

In the above code , The first 2 Lines are used to generate min To max Random integer between , contain min and max. in addition , You can also use Math.floor (Math.random() * (max + 1)) To generate 0 To max Random integer between , Use Math.floor (Math.random() * (max + 1)+ 1) To generate 1 To max Random integer between .

Using random numbers , You can get a random element in the array , The sample code is as follows :

var arr = ['apple', 'banana', 'orange', 'pear'];
// Call the previously written getRandom() Function to get a random number 
console.log( arr[getRandom(0, arr.length-1)] );
 Copy code 

5.3.3_[ Case study ] Guess the number game

Case study : demonstration Math Use of objects . Make the program generate a random 1 ~ 10 Number between 、 And let the user input a number, and the user input the number , Judge the size of these two numbers , If the number entered by the user is greater than the random number , So tips “ You guessed big ”, If the number entered by the user is less than a random number , Prompt “ You guess it's small ”, If two numbers are equal , Prompt “ congratulations , Guessed it ”, End procedure .

Case study :

function getRandom(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
} // Defined getRandom() function , utilize Math.random() Methods find random numbers .

var random = getRandom(1, 10);  // Set the random number size to 1~10 Number between 
while(true){  // Dead cycle , Use the 13 Yes break To jump out of the loop 
var num = prompt(' Guess the number , The scope is 1~10 Between .');
if(num > random){
alert(' You guessed big ');
}else if(num < random){
alert(' You guess it's small ');
}else{
alert(' congratulations , Guessed it ');
break;// utilize while Use... In loop statements if...else if Multiple branch statements to determine greater than 、 Less than 、 be equal to 
}
}
 Copy code 

Today's introductory study has come to an end
Peace

Looking back :

o ken Of HTML、CSS How to get started ( One )_HTML Basics
o ken Of HTML、CSS How to get started ( Two )_HTML Page elements and attributes
o ken Of HTML、CSS How to get started ( 3、 ... and )_ Text style properties
o ken Of HTML、CSS How to get started ( Four )_CSS3 Selectors
o ken Of HTML、CSS How to get started ( 5、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( 6、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( 7、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( 8、 ... and )_CSS Box model
o ken Of HTML、CSS How to get started ( Nine )_ Floating and positioning
o ken Of HTML、CSS How to get started ( Ten )_ Floating and positioning
o ken Of HTML、CSS How to get started ( 11、 ... and )_ Floating and positioning
o ken Of HTML、CSS How to get started ( Twelve )_ Application of forms
o ken Of HTML、CSS How to get started ( 13、 ... and )_ Application of forms
o ken Of HTML、CSS How to get started ( fourteen )_ Application of forms
o ken Of HTML、CSS How to get started ( 15、 ... and )_ Application of forms
o ken Of HTML、CSS How to get started ( sixteen )_ Multimedia technology
o ken Of HTML、CSS How to get started ( seventeen )_ Multimedia technology

【HTML Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into HTML( eighteen )
【HTML Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into HTML( nineteen )
【HTML Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into HTML( twenty )

【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( One )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( Two )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 3、 ... and )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( Four )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 5、 ... and )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 6、 ... and )
【JS Dry cargo sharing | Recommended collection 】 Challenge the shortest time to take you into JS( 7、 ... and )

About postscript :

Thank you for reading , I hope it helped you If the blog is flawed, please leave a message in the comment area or add contact information in the personal introduction of the home page to chat with me Thank you for your advice

Originality is not easy. ,「 give the thumbs-up 」+「 Focus on 」  Thank you for your support

copyright notice
author[Please call me Ken],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827045626308i.html

Random recommended