Common JavaScript tips and principles

Good use of JS in the use of small knowledge, can be very concise writing code

1. Use!! Simulate the Boolean () function

Principle: When the logical non-operation of a data object, the data object will be converted to a Boolean value, and then take the inverse, two!! The effect of converting to a Boolean value is achieved by repeating the inverse.

2. Use the unary Plus (+) to simulate number () function

Principle: Using unary plus (+) for data of non-numeric types will have the same effect as the number () function.

• Null conversion to 0

• Undefined conversion to Nan

• False converts to 0,true to 1

• For strings:

  • Empty string converted to 0

  • Data (one, 0.3, 0XFE, etc.) with numeric or floating-point numbers or hexadecimal format, converted to corresponding values

  • A string containing other format characters that cannot be converted to a numeric value, converted to Nan

• For an object, the method is called first valueOf() , and in the conversion, if the result is Nan, then the method is called and then toString() converted

3. Using logic and (&&) for short-circuit operation

if(connected){    login();}

The above code can be simplified to

connected && login()

You can also use this method to check whether a property exists in an object

user && user.login

Principle: Logic and (&&) evaluates the first operand first, and evaluates to the second operand only if the value evaluates to True. connected && login(), if you determine that connected is not true, the next step is no longer done.
The so-called short-circuit operation, that is, the first operand can determine the result, no longer evaluates the second operand.

4. Use logic or (| |) Set default values

Logic or (| |) is also a short-circuit operation where the second operand is no longer evaluated when the first operand can determine the result. With this feature, we can set default values for assignment statements. A second operand is assigned to the target only if the first operand is null or undefined.

function User(name, age){ this.name = name || "Liming";}

In the above code, if the name parameter is not passed in the function, the value of name is undefined, then this.name the assignment is "liming".
You can set a default value for a function in ES6, so this doesn't need to be used in a function, but it's useful elsewhere.

5. Get the last n elements of the array

You can use the following code to get the last n elements in the array

array = [1, 2, 3, 4, 5, 6];console.log(array.slice(-1)); //[6]console.log(array.slice(-2)); //[5, 6]

Principle: Array.prototype.slice(begin,end) It can be used to crop an array, and the default value of the second parameter is the length value of the array. If the value is passed to a parameter, all values from the specified index to the end of the array are returned.
The slice () method can also receive negative values, and when a negative value is passed in, the length of the array is automatically converted to positive values, and the last n values are obtained.

6. Merging large arrays

The common way to merge arrays is to use Array.concat() functions. The function creates a new array that joins two arrays and stores them in a new array, which consumes a lot of memory. You can use Array.push.apply (arr1, ARR2), which does not create a new array, but instead merges the second array into the first array to reduce memory consumption.

var a = [1,2];var b = [3,4];console.log(a.push.apply(a, b)); // [1,2,3,4]//或者console.log(Array.prototype.push.apply(a, b)); // [1,2,3,4]

Principle: Array.push () increments the element at the end of the array, but if used, the a.push(b) entire array b is added to array a as an element.
The Apply () method, which allows the parameters of a method to be passed in as an array, has the effect of appending the elements in array B to array a.

7. NodeList conversion to an array

Using the document.querySelectorAll(‘div‘) returned NodeList object, although it is much like an array, it is not possible to use methods such as sort (), filter (), and so on. You can convert it to a real array.

var eles = document.querySelectorAll(‘p‘);  //NodeListvar arrayElements = [].slice.call(eles); //转化为数组// 或者var arrayElements = Array.prototype.slice.call(eles);// 或者var arrayElements = Array.from(eles);

Principle:

• [].slice.call (Eles):
  First an empty array [] is created, and then the method is called slice() , but in the execution of the slice () method, the this object is pointed to the eles, so the eles is cut, because there is no passed parameter to the slice () method, so it is equivalent to slice (0, Eles.length), an array is returned in terms of the meta length.

• Array.prototype.slice.call (Eles): The principle is similar to the above, but this time did not create an empty array, but directly using the method in the prototype

• Array.from ()
  Array.from () accepts a class array object or can iterate over an object, creating a new array instance based on the object. See here

Common JavaScript tips and principles