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

10 practical tips in JavaScript (share)

青灯夜游
青灯夜游forward
2021-01-04 17:55:262537browse

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);

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

3. Conditional short circuit

#We have the following code:

if (hungry) {
    goToFridge();
}

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

hungry && goToFridge()

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
}

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

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); // []

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

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]

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" }

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]

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!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete