JavaScript usage tips

Preface

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 path to take. I hope that through the following JavaScript skills, everyone's code can be "complex and simplified, and simplified and refined."

Learn skillfully and use skillfully

1. new Set()

Some people may know that ES6 provides a new data structure, Set, but not many people 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 an extension method of objects provided in ES6, but it can only copy one layer, 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 and has a return value. It can operate on each item of the array and generate a new array. Sometimes it can replace the 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()

The filter method is also used to traverse the array. As the name suggests, it filters the array, triggers a callback function after each element, retains or removes the current item through judgment, and finally returns 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()

Some methods are 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 element does not meet the condition, it will return false, otherwise it will return true, similar to && comparison, such as:

let arr6 = [{result: true}, {result: false}];

let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false，即为false

console.log(newArr6); // false

7. ~~operator

The ~ symbol is used in JavaScript to perform bitwise inversion. ~~ means inverting twice. The operation value of bitwise operations is required to be an integer, and the result is also an integer, so everything that undergoes bitwise operations will automatically become an integer. You can Cleverly remove the decimal part, similar to parseInt, such as:

let a = 1.23;
let b = -1.23;

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

8. ||Operator

Cleverly using the || operator, we can set default values ​​for variables, such as:

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 operator

This operator should be familiar to everyone. In the case of tacit writing, the writing of if else can be simplified, 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 in JavaScript syntax to improve coding efficiency and briefly explains them. Of course, each knowledge point can be expanded and explored accordingly. I hope everyone can learn it skillfully and achieve skillful use at the same time. .

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