How to learn and use functions in js

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 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 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, has a return value, and can operate on each item of the array and Generate a new array. 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()

The filter method is also used to traverse the array. As the name suggests, it is filtering. 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()

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

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，即为falseconsole.log(newArr6); // false

7. The ~~operator

~ symbol is used in JavaScript to perform bitwise inversion. ~~ means inverting twice. The operation value of bitwise operations must be an integer, and the result is also an integer. , so the bitwise operations will automatically become integers, and the decimal part can be removed cleverly, similar to parseInt, for example:

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

8. || operator

Clever use of || operation Operators we can set default values ​​for variables, for example:

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 quickly Get the parameters of the array, for example:

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

10. Ternary operator

This operator should be familiar to everyone. In the case of tacit writing, it can simplify the writing of if else, for example:

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

Conclusion

This article only lists 10 common methods in JavaScript grammar to improve coding efficiency and briefly explains them. Of course, each knowledge point can be expanded and explored accordingly. I hope that everyone can achieve the effect of skillful use while learning skillfully.

If you encounter any problems during the learning process or want to obtain learning resources, you are welcome to join the learning exchange group

The above is the detailed content of How to learn and use functions in js. For more information, please follow other related articles on the PHP Chinese website!