Summarize 10 common methods in js syntax to improve coding efficiency

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 slow down soon. I am recovering slowly and 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 and use skillfully

1. new Set()

Someone may know that new data is provided in ES6 The structure is Set, but there may not be many people who can use it flexibly. Using the Set data structure we can easily deduplicate 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 provided in ES6 The extension method of an object 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, has a return value, and can 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); // 给数组每一项乘以10

console.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，即为true

console.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，即为false

console.log(newArr6); // false

7. ~~operator

~ symbol is used in JavaScript to perform bitwise negation, ~~ means Invert twice, and the operation value of bit operation is required to be integer, and the result is also an integer, so the bit operation will automatically become an integer, and the decimal part can be cleverly removed, similar to For parseInt, for example:

let a = 1.23;
let b = -1.23;

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

8. || Operator

Clever use of the || operator allows us to set a default value for the variable , for example:

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

console.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 the array, such as:

let [num1, ...nums] = [1, 2, 3];

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

10. Ternary operationCharacter

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';
}

// 等同于
e ? f = 'man' : f = 'woman';

Conclusion

This article only lists 10 common methods to improve coding efficiency in JavaScript syntax and briefly explains them. Of course, each knowledge point can be expanded and explored accordingly. I hope you will Achieve skillful use while learning skillfully.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free js online video tutorial

#3.

php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Summarize 10 common methods in js syntax to improve coding efficiency. For more information, please follow other related articles on the PHP Chinese website!