Home > Article > Web Front-end > 21 Javascript tips worth collecting_javascript tips

21 Javascript tips worth collecting_javascript tips

WBOYOriginal: 2016-05-16 17:01:28899browse

1 Convert Javascript array to CSV format

First consider the following application scenario. There is a Javscript character (or numeric) array, which now needs to be converted into a comma-delimited CSV format file. Then we can use the following tips, the code is as follows:

Copy code The code is as follows:

var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.valueOf();

Output: apple,peaches,oranges,mangoes

　 Among them, the valueOf() method will convert the Javascript array into a comma-separated string. It should be noted that if you do not want to use commas to separate, for example, use | to separate, please use the join method, as follows:

Copy code The code is as follows:

var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.join("|");

Output: apple|peaches|oranges|mangoes

2 Convert CSV format back to Javscript array

So how to convert a CSV formatted string back to a Javascript array? You can use the split() method to separate using any specified characters. The code is as follows:

Copy code The code is as follows:

var str = "apple, peaches, oranges, mangoes" ;
var fruitsArray = str.split(",");

Output fruitsArray[0]: apple

3 Remove an element from the array based on index

If you need to remove an element from a Javascript array, you can use the splice method. This method will remove the nth element from the array based on the passed parameter n (calculated from the 0th position in the Javascript array) .

Copy code The code is as follows:

function removeByIndex(arr, index) {
 arr .splice(index, 1);
}
test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test [2] = 'Cat';
test[3] = 'Dog';
alert("Array before removing elements: " test);
removeByIndex(test, 2);
alert( "Array after removing elements: " test);

The final output is Apple,Ball,Dog

　　4 Remove the value in the array element according to the value of the element

The following technique is very practical. It is to delete elements in an array based on a given value. The code is as follows:

Copy code The code is as follows:

function removeByValue(arr, val) {
 for (var i=0; i if(arr[i] == val) {
 arr.splice(i, 1);
 break;
 } 
 }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
//somearray will The elements that will be included are "mon", "wed", "thur"

Of course, a better way is to use the prototype method to achieve it, as shown in the following code:

Copy code The code is as follows:

Array.prototype.removeByValue = function(val) {
 for(var i=0; i if(this[i] == val) {
 this.splice(i, 1);
 break;
 }
 }
}
//..
var somearray = ["mon", "tue", "wed", "thur"]
somearray.removeByValue("tue ");

5 Dynamically call a method by specifying a string

Sometimes, it is necessary to dynamically call an existing method at runtime and pass in parameters. How to achieve this? The following code will do:

Copy code The code is as follows:

var strFun = "someFunction"; //someFunction is the defined method name
var strParam = "this is the parameter"; //The parameter to be passed into the method
var fn = window [strFun];

//Call the method and pass in the parameters
fn(strParam);

6 Generate random numbers from 1 to N

Copy code The code is as follows:

var random = Math.floor(Math.random() * N 1); 
//Generate a random number between 1 and 10
var random = Math.floor(Math.random() * 10 1); 
//Generate a random number between 1 and 100 Random number
var random = Math.floor(Math.random() * 100 1);

7 Capture browser closing event

We often want to prompt the user to save unsaved things when the user closes the browser. The following Javascript technique is very useful. The code is as follows:

Copy code The code is as follows:

…………

Just write the code for the onbeforeunload() event

8 Check whether the back button is pressed

Similarly, you can check whether the user pressed the back key, the code is as follows:

Copy code The code is as follows:

window.onbeforeunload = function() {
 return "You work will be lost.";
};

　9 Check whether the form data has changed

Sometimes, you need to check whether the user has modified the content of a form. You can use the following technique. If the content of the form has been modified, it will return true, and if the content of the form has not been modified, it will return false. The code is as follows:

Copy code The code is as follows:

function formIsDirty(form) {
 for (var i = 0; i < form.elements.length; i ) {
 var element = form.elements[i];
 var type = element.type;
 if (type == "checkbox" || type == "radio") {
       if (element.checked != element.defaultChecked) {
                                                                                                                                                                           " || type == "password" ||
 type == "text" || type == "textarea") {
 if (element.value != element.defaultValue) {
 return true ;
 }
 }
 else if (type == "select-one" || type == "select-multiple") {
 for (var j = 0; j < element. options.length; j ) {
                                                                                                                                                                            🎜> }
 }
 return false;
}

window.onbeforeunload = function(e) {
 e = e || window.event; 
 if (formIsDirty (document.forms["someForm"])) {
 // IE and Firefox
 if (e) {
 e.returnValue = "You have unsaved changes.";
 }
 // Safari browser
 return "You have unsaved changes.";
 }
};




10 Completely disable the use of the back key
 


 The following tips can be placed on the page to prevent users from clicking the back button, which is needed in some cases. The code is as follows: 

Copy code

The code is as follows: