Home  >  Article  >  Web Front-end  >  10 Mini Tips for JavaScript Beginners

10 Mini Tips for JavaScript Beginners

PHP中文网
PHP中文网Original
2016-05-16 18:20:20918browse

In the previous programming language rankings, we have introduced the JavaScript language that is about to change. As explained in the article, JavaScript is not only the most dynamic scripting language, but also one of the most useful programming languages. Because most browsers are compatible with it, you can use it in these browsers. JavaScript is gaining acceptance very quickly because it is so simple and widely used. Many programmers used to think that JavaScript was a "toy language". However, AJAX showed the exact opposite after entering the market. It allowed JavaScript to show completely different capabilities and functions.
Thanks to this invention, programmers can now create web applications that have the effect of desktop applications, which is beneficial because data can be changed faster. Here are some mini tips to help beginners use JavaScript better. JavaScript is used in a wide range of ways, and there are so many styles, so it can do a lot of tricks. In addition, although there are many programming methods, I have only selected 10 techniques that I think are a good starting point for beginners to understand JavaScript.
1, Add an element at the end of an array
This trick allows you to use the Length property to add an element at the end of an array, because the Length property is lower than the last element of the array. Mark 1 more. This method is the same as the "push" method. For example:

var myArray = []; 
myArray[myArray.length] = 'New Element';

2, adjust the length of an array
The Length property is not read-only, so you can set the value of the Length property. Moreover, you can use it to increase or decrease the length of the array. For example:

var myArray = [1,2,3]; 
myArray.length // 3 
myArray.length = 2; //Delete the last element 
myArray.length = 20 // add 18 elements to the array; the elements have the undefined value.

3, use "!!" to convert any data type into Boolean
This technology allows you to use "!!" to convert any data type (such as string, number or integer) to Boolean. For example:

var myString = '23255'; 
typeof myString; //String 
myString = !!myString; 
typeof myString //Boolean

4, convert Number to String
This trick allows you to add an empty string at the end of number to convert number to string, for example:

var mynumber = 234; 
typeof mynumber; //Number 
mynumber += ''; 
typeof mynumber; //String

5. Know how many variables a function requires
This is a great trick that allows you to know exactly how many variables a function requires. For example:

function add_nums(num1, num2){ 
return num1 + num2; 
} 
add_nums.length // 2 is the amount of parameters expected by the function add_nums

6, use the "arguments" object to understand how many parameters a function receives
This technique allows you to use the "arguments" object to understand a function How many parameters were received. For example:

function add_nums(){ 
return arguments.length; 
} 
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9

This technique is useful when you need to check the validity of the number of parameters, or when you need to create a function with an uncertain number of parameters.

function sum_three_nums( ){ 
if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3'); 
} 
sum_three_nums(23,43); //Return the error message 
function sum_num(){ 
var total = 0; 
for(var i=0;i<arguments .length;i++){ 
total+=arguments[i]; 
} 
return total; 
} 
sum_num(2,34,45,56,56);

7. Use objects as parameters to organize and improve functions
In modern web development, one of the most common uses of objects is to use them as parameters of functions. It is always difficult to remember this rule for function parameters; however, using an object is very beneficial because we no longer have to worry about the parameter rules. Moreover, it is more organized and allows users to better understand what we are trying to do. This method allows you to organize and improve functions by taking objects as parameters. For example:

function insertData(name,lastName,phone,address){ 
code here; 
}

The refactored code will look like this:

function insertData(parameters){ 
var name = parameters.name; 
var 
lastName = parameters.lastName; 
var phone = parameters.phone; 
var 
address = parameters.address; 
}

It is also very useful when you want to use default values. For example:

function insertData(parameters){ 
var name = parameters.name; 
var 
lastName = parameters.lastName; 
var phone = parameters.phone; 
var 
address = parameters.address; 
var status = parameters.status || &#39;single&#39; 
//If status is not defined as a property 
//in the object the variable status 
take single as value 
}

Now, it is very simple to use this function; we can send data in two ways:

//Example 1 
insertData({name:&#39;Mike&#39;, lastName:&#39;Rogers&#39;, 
phone:&#39;555-555-5555&#39;,address:&#39;the address&#39;, status:&#39;married&#39;}); 

//Example 2 
var myData = { name:&#39;Mike&#39;, 
lastName:&#39;Rogers&#39;, 
phone:&#39;555-555-5555&#39;, 
address:&#39;the address&#39;, 
status:&#39;married&#39; 
}; 
insertData(myData);

8, the function is the data
Functions are data like strings or numbers that we can pass as function parameters, which can create very surprising and "awesome" web applications. This method is very useful and is used by almost all mainstream frameworks. For example:

function byId(element, event, f){ 
Document.getElementById(element).[&#39;on&#39;+event] = f; //f is the function that 
we pass as parameter 
} 
byId(&#39;myBtn&#39;,&#39;click&#39;,function(){alert(&#39;Hello 
World&#39;)}); 
Another example of functions as data: 
//Example 1 
function msg(m){ 
Alert(m); 
} 
//Example 2 
var msg = 
function(m){ alert(m);}

These functions are almost identical. The only difference is the way you use them. For example: for the first function, you can use it before you declare it; but the second function can only be used after it is declared:

//Example 1 
msg(&#39;Hello world&#39;); //This will work 
function msg(m){ 
alert(m); 
} 
//Example 2 
msg(&#39;Hello world&#39;); //Does not work 
because JavaScript cannot find the function msg because is used before is been 
declared. 
var msg = function(m){ alert(m)}

9, extend local object

Although some JavaScript leaders do not recommend this technique, it is already used by some frameworks. It allows you to target JavaScript API to create some auxiliary methods.

//We create the method prototype for our arrays 
//It only sums numeric 
elements 
Array.prototype.sum = function(){ 
var len = this.length; 
total = 0; 
for(var i=0;i<len ;i++){ 
if(typeof this[i]!= &#39;number&#39;) 
continue; 
total += this[i]; 
} 
return total; 
} 
var myArray = 
[1,2,3,&#39;hola&#39;]; 
myArray.sum(); 


Array.prototype.max = function(){ 
return Math.max.apply(&#39;&#39;,this); 
}

10, Boolean
Note the difference between them as this will save you time debugging your script.

&#39;&#39; == &#39;0&#39; // false 
0 == &#39;&#39; // true 
0 == &#39;0&#39; // true 
false == &#39;false&#39; 
// false 
false == &#39;0&#39; // true 
false == undefined // false 
false == 
null // false 
null == undefined // true 
true == 1 // true 
&#39;&#39; == null 
// false 
false == &#39;&#39; // true

If you’ve seen these scripts elsewhere, these tips can help you get the hang of it. These tips don’t even scratch the surface of what JavaScript can do, but it’s a start! Please feel free to leave your comments, questions, extra tips or concerns, but remember, this is an article for beginners! ! I'd love to hear from some fellow developers! Enjoy!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn