Home > Web Front-end > JS Tutorial > body text

Summarize 10 common methods in js syntax to improve coding efficiency

零下一度
Release: 2017-05-17 18:01:32
Original
1625 people have browsed it

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]
Copy after login

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}
Copy after login

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]
Copy after login

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]
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login

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]
Copy after login

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';
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template