Forty-nine JavaScript tips and tricks

Preface:

So far, I have written quite a few articles about js and javascript on my blog. Recently, I read a foreign blog that summarized some practical js skills. I originally wanted to translate it directly and put it on my blog, but after checking online, it seems that some netizens have already translated it, so I won’t do any more cumbersome work here. On this basis, I will integrate some js knowledge I have seen before and summarize it on my blog. I have summarized the commonly used codes of jQuery before, you can take a look.

1. Operation of js integer

Using |0 and ~~ can convert floating points into integers, and the efficiency is faster than similar parseInt and Math.round. It is very useful when processing pixel and animation displacement effects. See here for performance comparison.

var foo = (12.4 / 4.13) | 0; // the result is 3
var bar = ~~(12.4 / 4.13); //The result is 3

There is another little trick, that is! ! Two exclamation marks can be used to convert a value into a Boolean value quickly. You can test it!

var eee="eee";
alert(!!eee)

What is returned is true, which means any value is preceded by ! ! can all be equal to true. Unless the value is originally a Boolean value, or undefined, null, 0, false, NaN, '', because undefined , null , 0 , false , NaN , '' I mentioned are originally false, so two are added! ! After that, it's still fasle.

2. Rewrite the native alert and record the number of pop-up boxes

(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
    };
})();
alert("Hello Haorooms");

3. Method of digital exchange without declaring intermediate variables

To swap two numbers, our general approach is to declare an intermediate variable, but today's approach is a bit weird. We don't need to declare an intermediate variable. Let's see how it is implemented!

var a=1,b=2;a=[b,b=a][0];
console.log('a:'+a+',b:'+b);

 //Output a:2,b:1

How about this method? Doesn’t it give you a refreshing feeling?

4. Everything is an object

In the JavaScript world, everything is an object. Except for null and undefined , other basic types such as numbers, strings, and Boolean values ​​have corresponding packaging objects. One of the characteristics of an object is that you can call methods directly on it.

For the basic numeric types, when you try to call toString method on it, it will fail, but it will not fail if you enclose it in parentheses. The internal implementation is to convert the basic type into an object using the corresponding wrapper object. So (1).toString() is equivalent to new Number(1).toString()。 Therefore, you can indeed use basic types such as numbers, strings, Booleans, etc. as objects, just pay attention to the proper syntax.

At the same time, we noticed that in JavaScript , numbers are not divided into floating point and integer types. In fact, all numbers are floating point types, but the decimal point is omitted. For example, the 1 you see can be written as 1., which is why an error occurs when you try 1.toString(). The correct way to write it should be like this: 1..toString(), or add brackets as described above. The purpose of the brackets here is to correct the JS parser not to treat the dot after 1 as a decimal point. The internal implementation is as described above, which is to convert 1. the wrapper object into an object and then call the method.

5. Variations of If Statements

When you need to write an if statement, you might want to try a simpler approach and use logical operators in JavaScript instead.

For example, the code above first gets today's date. If it is Sunday, a pop-up window will appear, otherwise nothing will be done. We know that logical operations can be short-circuited. For a logical AND expression, the result is true only if both are true. If the previous day variable is judged to be false, then the result of the entire AND expression is false, so the subsequent alert will not be executed. If the previous day is true, the subsequent code must continue to execute to determine the truth or falsity of the entire expression. This is used to achieve the effect of if.

For traditional if statements, if the execution body code exceeds one statement, curly braces are required. However, using comma expressions, any code can be executed without curly braces.

if(conditoin) alert(1),alert(2),console.log(3);

6. Use === instead of ==

The == (or !=) operator automatically performs type conversions when necessary. The === (or !==) operation does not perform any conversion. It will compare both value and type, and is also considered faster than ==.

[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
 [] == 0 // is true
 [] === 0 // is false
 '' == false // is true but true == "a" is false
 '' === false // is false

7. Using closures to implement private variables

function Person(name, age) {
    this.getName = function() { return name; };
    this.setName = function(newName) { name = newName; };
    this.getAge = function() { return age; };
    this.setAge = function(newAge) { age = newAge; };

    //Properties not initialized in the constructor var occupation;
    this.getOccupation = function() { return occupation; };
    this.setOccupation = function(newOcc) { occupation = 
                         newOcc; };
}

8. Create an object constructor

function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}

var Saad = new Person("Saad", "Mousliki");

9. Be careful with typeof, instanceof, and constructor

var arr = ["a", "b", "c"];
typeof arr; // return "object"
arr instanceof Array // true
arr.constructor(); //[]

10. Create a self-calling function

This is often called Self-Invoked Anonymous Function or IIFE-Immediately Invoked Function Expression ). This is a function that is automatically executed immediately after it is created.

Usually it is as follows:

(function(){
    // some private code that will be executed automatically
})();
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

11. Get a random item from an array

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var randomItem = items[Math.floor(Math.random() * items.length)];

12. Get a random number within a specific range

This code snippet is useful when you want to generate test data, such as a random salary value between a minimum and maximum value.

var x = Math.floor(Math.random() * (max - min + 1)) + min;

13. Generate a digital array between 0 and the set maximum value

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;); // numbers = [0,1,2,3 ... 100]

14. Generate a random string of alphanumeric characters

function generateRandomAlphaNum(len) {
    var rdmstring = "";
    for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

//Call method generateRandomAlphaNum(15);

15. Shuffle an array of numbers

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */

16. String trim function

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

17. Append an array to another array

var array1 = [12 , "foo" , {name: "Joe"} , -2458];

var array2 = ["Doe", 555, 100];
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

18. Convert the arguments object into an array

var argArray = Array.prototype.slice.call(arguments);

[Translator's note: The arguments object is an array-like object, but not a real array]

19. Verify whether the parameter is a number

function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}

20. Verify whether the parameter is an array

function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]';
}

Note: If the toString() method is overridden, you may not get the desired results using this technique. Or you can use:

Array.isArray(obj); // This is a new array method

If you are not using multiple frames , you can also use the instanceof method. But if you have multiple contexts you will get wrong results.

var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]

// instanceof will not work correctly, myArray loses his constructor
// constructor is not shared between frames
arr instanceof Array; // false

[Translator's note: There are many discussions on the Internet about how to judge arrays. You can google it. This article is written in great detail. 】

21. Get the maximum or minimum value in a numeric array

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);

[Translator's note: The Function.prototype.apply method is used here to pass parameters]

22. Clear an array

var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].

23. Do not use delete to delete items in an array.

Use splice instead of delete to remove an item from an array. Using delete only replaces the original item with undefined , but does not actually delete it from the array.

Don't use this approach:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

And use:

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
items.splice(3,1);
items.length; // return 10
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

The delete method should be used to delete a property of an object.

24. Use length to truncate an array

Similar to the way we cleared an array above, we use length property to truncate an array.

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

Furthermore, if you set length of an array to a value larger than it currently is, the length of the array will be changed, and new undefined items will be added to make up for it. length of an array is not a read-only property.

myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1]; // undefined

25. Use logical AND/OR to make conditional judgments

Same as (V), if transformation statement!

var foo = 10;
foo == 10 && doSomething(); // equivalent to if (foo == 10) doSomething();
foo == 5 || doSomething(); // equivalent to if (foo != 5) doSomething();

Logical AND can also be used to set default values ​​for function parameters.

function doSomething(arg1){
    Arg1 = arg1 || 10; // If arg1 is not set, Arg1 will default to 10
}

26. Use the map() method to iterate over the items in an array

var squares = [1,2,3,4].map(function (val) {
    return val *val;
});
// squares will be equal to [1, 4, 9, 16]

27. Round a number to N decimal places

var num =2.443242342;
num = num.toFixed(4); // num will be equal to 2.4432

28. Floating point problem

0.1 + 0.2 === 0.3 // is false
9007199254740992 + 1 // is equal to 9007199254740992
9007199254740992 + 2 // is equal to 9007199254740994

Why is this happening? 0.1+0.2 equals 0.30000000000000004. You should know that all JavaScript numbers are internally represented as 64-bit binary floating point numbers, compliant with the IEEE 754 standard. For more information, you can read this blog post. You can solve this problem using the toFixed() and toPrecision() methods.

29. When using for-in to traverse the internal properties of an object, pay attention to checking the properties

The following code snippet avoids accessing prototype properties when iterating over an object's properties:

for (var name in object) {
    if (object.hasOwnProperty(name)) {
        // do something with name
    }
}

30. Comma operator

var a = 0;
var b = ( a++, 99 );
console.log(a); // a will be equal to 1
console.log(b); // b is equal to 99

31. Cache variables that require calculation or querying

For jQuery selectors, we'd better cache these DOM elements.

var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');

32. Verify parameters before calling isFinite()

isFinite(0/0); // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undifined); // false
isFinite(); // false
isFinite(null); // true !!!

33. Avoid negative indexes in arrays

var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]

Make sure that the argument when calling indexOf is not a negative number.

34. JSON-based serialization and deserialization

（serialization and deserialization）

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */

35. Avoid using eval() and Function constructors

Using eval and Function constructors are very expensive operations because each time they call the script engine to convert the source code into executable code.

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

36. Avoid using with()

Using with() will insert a global variable. Therefore, variables with the same name will have their values ​​overwritten, causing unnecessary trouble.

37. Avoid using for-in to traverse an array

Avoid using this approach:

var sum = 0;
for (var i in arrayNumbers) {
    sum += arrayNumbers[i];
}

A better way is:

var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
    sum += arrayNumbers[i];
}

The added benefit is that the values ​​of both i and len are only evaluated once.

Will be more efficient than:

for (var i = 0; i < arrayNumbers.length; i++)

Why? Because arrayNumbers.length will be calculated each time through the loop.

38. When calling setTimeout() and setInterval(), pass in a function instead of a string.

If you pass a string to setTimeout() or setInterval() , the string will be parsed as if using eval , which is very time-consuming.

Don’t use:

setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)

And use:

setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);

39. Use switch/case statements instead of long if/else sequences

When there are more than two situations to judge, using switch / case is more efficient and more elegant (easier to organize the code). But do not use switch/case when there are more than 10 situations to be judged.

40. Use switch/case when judging the value range

In the following situation, it is reasonable to use switch / case to determine the value range:

function getCategory(age) {
    var category = "";
    switch (true) {
        case isNaN(age):
            category = "not an age";
            break;
        case (age >= 50):
            category = "Old";
            break;
        case (age <= 20):
            category = "Baby";
            break;
        default:
            category = "Young";
            break;
    };
    return category;
}
getCategory(5); // will return "Baby"

[Translator's note: Generally speaking, it is more appropriate to use if/else to judge the range of values. Switch/case is more suitable for determining the value.

41. Specify the prototype object for the created object

It is possible to write a function that creates an object with the specified parameters as prototype:

function clone(object) {
    function OneShotConstructor(){};
    OneShotConstructor.prototype = object;
    return new OneShotConstructor();
}
clone(Array).prototype ; // []
42. An HTML escape function function escapeHTML(text) {
    var replacements= {"<": "<", ">": ">","&": "&", "\"": """};
    return text.replace(/[<>&"]/g, function(character) {
        return replacements[character];
    });
}

43. Avoid using try-catch-finally inside loops

At runtime, each time catch clause is executed, the caught exception object is assigned to a variable, and in try-catch-finally structure, this variable is created each time.

Avoid writing:

var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i < len; i++) {
    try {
        // do something that throws an exception
    }
    catch (e) {
        // handle exception
    }
}

And use:

var object = ['foo', 'bar'], i;
try {
    for (i = 0, len = object.length; i < len; i++) {
        // do something that throws an exception
    }
}
catch (e) {
    // handle exception
}

44. Set timeout for XMLHttpRequests.

If an XHR request takes a long time (for example, due to network problems), you may need to abort the request. In this case, you can use setTimeout() with XHR call.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (this.readyState == 4) {
        clearTimeout(timeout);
        // do something with response data
    }
}
var timeout = setTimeout( function () {
    xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);  

xhr.send();

Also, in general you should avoid synchronous Ajax requests altogether.

45. Handling WebSocket Timeouts

Normally, after a WebSocket connection is established, the server will time out your connection after 30 seconds if there is no activity. The firewall will also disconnect after a period of inactivity.

To prevent timeout issues, you may want to intermittently send empty messages to the server. To do this, you can add the following two functions to your code: one to maintain the connection, and another to cancel the connection. With this technique, you can control the timeout problem.

Use a timerID:

var timerID = 0;
function keepAlive() {
    var timeout = 15000;
    if (webSocket.readyState == webSocket.OPEN) {
        webSocket.send('');
    }
    timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
    if (timerId) {
        cancelTimeout(timerId);
    }
}

keepAlive() method should be added at the end of onOpen() method of webSOcket connection, and cancelKeepAlive() should be added at the end of onClose() method.

46. ​​Primitive operators are always more efficient than function calls.

Use VanillaJS .

For example, instead of using:

var min = Math.min(a,b);
A. push(v);

And use:

var min = a < b ? ab;
A[A.length] = v;

47. Randomly select a value from the integer

There is a very useful formula that allows us to randomly display certain famous quotes or news events!

value =Math.floor(Math.random()* total number of possible values ​​+ first possible value)
For example, to select a value between 2 and 10, we can write

var num=Math.floor(Math.random()*9+2)

Please remember the above formula! ~

48. After time formatting, the leading digits are missing zeros

There are many ways to deal with it, but the following method is simpler and more effective, so record it!

function paddingLeftZero(str){
    return ("00"+str).substr(str.length);
}

49. js sets cookies

getCookie: function (name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
},
setCookie: function (name, value, Days) {
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
},

49. js gets the time at 24 o'clock that day

new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000);

Similarly, 0 o'clock time

new Date(new Date(new Date().toLocaleDateString()).getTime());

This concludes the article about forty-nine practical tips on javascript. For more relevant content on practical javascript tips, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!