Home > Web Front-end > JS Tutorial > 10 practical tips in JavaScript (share)

10 practical tips in JavaScript (share)

青灯夜游
Release: 2021-01-04 17:56:00
forward
2529 people have browsed it

10 practical tips in JavaScript (share)

Related recommendations: "javascript video tutorial"

I'm always looking for new ways to improve efficiency.

And JavaScript is always full of unexpected surprises.

1. Convert the arguments object to an array

The arguments object is an array-like object accessible inside the function, which contains the The value of the function's argument.

But this is different from other arrays, we can access the value and get the length, but we cannot use other array methods on it.

Fortunately, we can convert it into a regular array:

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

2. Sum all the values ​​in the array

My initial instinct was to use a loop, but that would be too cumbersome.

var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // returns 17
Copy after login

3. Conditional short circuit

#We have the following code:

if (hungry) {
    goToFridge();
}
Copy after login

By using variables with functions, we Can make it shorter:

hungry && goToFridge()
Copy after login

4. Use logic or ||

for the condition. I used to declare mine at the beginning of the function variable to avoid undefined situations in case of any unexpected errors.

function doSomething(arg1){ 
    arg1 = arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}
Copy after login

5. Comma operator

The comma operator (,) can evaluate each of its operands ( from left to right) and returns the value of the last operand.

let x = 1;

x = (x++, x);

console.log(x);
// expected output: 2

x = (2, 3);

console.log(x);
// expected output: 3
Copy after login

6. Use length to adjust the array size

We can use the length attribute to adjust the array size or clear the array

var array = [11, 12, 13, 14, 15];  
console.log(array.length); // 5  

array.length = 3;  
console.log(array.length); // 3  
console.log(array); // [11,12,13]

array.length = 0;  
console.log(array.length); // 0  
console.log(array); // []
Copy after login

7. Use array destructuring to exchange values

The destructuring assignment syntax is a JavaScript expression that can decompress the values ​​in the array or the properties in the object into different variables.

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // -> 2
console.log(b) // -> 1
Copy after login

8. Randomly arrange the elements in the array

Every day I randomly arrange

Randomly arrange, randomly arrange

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
Copy after login

9. Property names can be dynamic

You can assign dynamic properties before declaring the object.

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }
Copy after login

10. Filter unique values

For all ES6 lovers, we can use Set with spread operator (spread) Object to create a new array containing only unique values.

const my_array = [1, 2, 2, 3, 3, 4, 5, 5]
const unique_array = [...new Set(my_array)];
console.log(unique_array); // [1, 2, 3, 4, 5]
Copy after login

Ending Thought

Responsibility is far more important than efficiency.

Your website needs to be available in all browsers.

You can use Endtest or other similar tools to make sure.

And you? Do you have any JavaScript tips or tricks to share?

English original address: https://dev.to/zandershirley/10-practical-javascript-tricks-2b7h

Author: Zander Shirley

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 10 practical tips in JavaScript (share). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template