ES6/JavaScript usage skills sharing_javascript skills

This article mainly explains the usage skills of ES6/JavaScript. Friends who are interested in JavaScript or students who are still learning JavaScript should refer to it.

There are some methods and techniques when writing JavaScript code. Although sometimes all roads lead to Rome, there may always be the shortest path to take. This article will share with you some tips that everyone knows but don’t use very often

Some tips

1.new Set()

To deduplicate arrays, I feel in my 'subconscious' mind that we should loop and compare to deduplicate. In fact, ES6 provides a new data structure Set, which can be used to easily deduplicate. Array, such as:

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

##2.Object.assign()

is also an extension method of objects provided in ES6, which can be used to merge and copy objects. Object merging was also very cumbersome before, but now it is very easy, for example:

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

##3.map()
map method is used for

Traversing the array

, with a return value, 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); // 给数组每一项乘以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 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()

some method Used to traverse the array and trigger a callback function after each element. As long as one meets the condition, 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 opposite of 5

every method is used to traverse the array, A callback function is triggered after each element. As long as one of the elements 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.

Ternary operation

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

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

8.~~Operator

~ symbol used in JavaScript has the function of bitwise inversion. ~~ means inverting twice, and bit The operation value of the operation 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 cleverly removed, similar to parseInt, such as:

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

##Conclusion

This article only lists JavaScript syntax Here are some common ways to improve speed. I hope everyone can achieve the effect of skillfully using knowledge in the process of learning skillfully.

Related recommendations:

A brief discussion on the map data structure of es6 javascript_javascript skills

Detailed explanation of how to use ES6 to implement the singleton pattern and its application

Detailed explanation of module syntax in JavaScript ES6

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