Sharing some tips when writing JavaScript code

Preface

Due to some changes in work and life, the frequency of writing articles has dropped a bit recently. I’m really sorry, but I believe it will slowly recover soon. Thank you all for your continued attention and support. .

This article mainly shares with you some methods and techniques when writing JavaScript code. Although sometimes all roads lead to Rome, there may always be the shortest one. path available. I hope that through the following JavaScript skills, everyone's code can be "complex and simplified, and simplified and refined."

Learn skillfully and use it

1. new Set()

Some people may know that ES6 provides a new data structure Set, but there may not be many people who can use it flexibly. . Using the Set data structure, we can easily remove duplicates from an array, such as:

let arr = [1, 2, 2, 3];let set = new Set(arr);let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。console.log(newArr); // [1, 2, 3]

2. Object.assign()

Object.assign() is also an extension method of objects provided in ES6. It can be used to merge and copy objects, such as:

let obj1 = {a: 1};let obj2 = {b: 2};let obj3 = Object.assign({}, obj1, obj2);console.log(obj3); // {a: 1, b: 2}

3. map()

The map method is used to traverse the array. It has a return value and can be used to Each item is operated and a new array is generated. Sometimes it can replace for and forEach loops to simplify the code, such as:

let arr3 = [1, 2, 3, 4, 5];let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10console.log(newArr3); // [10, 20, 30, 40, 50]

4. filter()

filter method is also used for traversal Array, as the name suggests, is to filter the array, trigger a callback function after each element, retain or remove the current item through judgment, and finally return a new array, such as:

let arr4 = [1, 2, 3, 4, 5];let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模，过滤余数不为0的数console.log(newArr4); // [2，4]

5. some()

The some method is used to traverse the array and trigger a callback function after each element. As long as one meets the conditions, it will return true, otherwise it will return false, similar to || comparison, such as:

let arr5 = [{result: true}, {result: false}];let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true，即为trueconsole.log(newArr5); // true

6.every()

The every method is used to traverse the array and trigger a callback function after each element. As long as one does not meet the condition, it returns false, otherwise it returns true, similar to Compare with &&, for example:

let arr6 = [{result: true}, {result: false}];let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为falseconsole.log(newArr6); // false

7. The ~~operator

~ symbol is used in JavaScript to perform bitwise inversion, ~~ means inversion twice, and Bitwise operationThe operation value is required to be an integer, and the result is also an integer, so the bitwise operation will automatically become an integer, and the decimal part can be removed cleverly, similar to parseInt, such as:

let a = 1.23;let b = -1.23;console.log(~~a); // 1console.log(~~b); // -1

8. || Operator

Clever use of || operator allows us to set default values ​​for variables, such as:

let c = 1;let d = c || 2; // 如果c的值为true则取存在的值，否则为2console.log(d); // 1

9. ...Operator

. The .. operator is a method used to destructure arrays in ES6 and can be used to quickly obtain the parameters of an array, such as:

let [num1, ...nums] = [1, 2, 3];console.log(num1); // 1console.log(nums); // [2, 3]

10. ternary operationoperator

This operator should be familiar to everyone. It can simplify the writing of if else when written silently, such as:

let e = true,
    f = '';if (e) {
    f = 'man';
} else {
    f = 'woman';
}// 等同于
f = e ? 'man' : 'woman';

Conclusion

This article only lists the JavaScript syntax The more common 10-point method to improve coding efficiency is briefly explained. Of course, each knowledge point can be expanded and explored accordingly. I hope everyone can achieve the effect of skillful use while learning skillfully.

The above is the detailed content of Sharing some tips when writing JavaScript code. For more information, please follow other related articles on the PHP Chinese website!