What are some tips when using ES6

This time I will bring you some tips when using ES6, and notes on using ES6 tips. The following is a practical case, let’s take a look.

If you know some other tips, please leave a message. I'm happy to add them.

1. Mandatory parameters

ES6 provides a default parameter value mechanism, allowing you to set default values ​​for parameters to prevent functions from being called. These parameters were not passed in.

In the following example, we write a required() function as the default value for parameters a and b. This means that if one of the parameters in a or b is not passed a value when called, the required() function will be defaulted and an error will be thrown.

const required = () => {throw new Error('Missing parameter')};
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.

2. Powerful reduce

The reduce method of arrays is very versatile. It is generally used to reduce each item in an array to a single value. But you can do more with it.

2.1 Use reduce to implement map and filter at the same time

Suppose there is a sequence now, and you want to update each item of it (map function) and then filter out a part ( filter function). If you use map first and then filter, you need to iterate through the array twice.

In the code below, we double the values ​​in the sequence and then select those numbers greater than 50. Notice how we use reduce very efficiently to complete both the map and filter methods?

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
 num = num * 2; 
 if (num > 50) {
  finalList.push(num);
 }
 return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 Use reduce to replace map and filter

If you read the above code carefully, you should be able to understand that reduce can replace map and filter.

2.3 Use reduce to match parentheses

Another use of reduce is to be able to match parentheses in a given string. For a string containing parentheses, we need to know whether the number of (and) is consistent, and whether (appears before).

In the following code we can easily solve this problem using reduce. We only need to declare a counter variable first, with the initial value being 0. Counter increases by one when encountering (, counter decreases by one when encountering). If the number of left and right brackets matches, the final result is 0.

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter <p style="text-align: left;"><strong>2.4 Count the number of identical items in an array</strong></p><p style="text-align: left;">Many times, you want to count the number of recurring items in an array and then represent them with an object. Then you can use the reduce method to process this array. </p><p style="text-align: left;">The following code will count the number of each type of car and then represent the total number with an object. </p><pre class="brush:php;toolbar:false">var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

There are so many other uses for reduce. I recommend you read MDN’s related code examples.

3. Object destructuring

3.1 Delete unnecessary attributes

Sometimes you don’t You want to preserve certain object properties, perhaps because they contain sensitive information or are just too big. You might be able to enumerate the entire object and delete them, but really you just assign the useless properties to variables, and then pass the useful parts you want to keep as the remaining parameters.

In the following code, we want to delete the _internal and tooBig parameters. We can assign them to the internal and tooBig variables, and then store the remaining properties in cleanObject for later use.

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 Deconstructing nested objects in function parameters

In the following code, engine is an object nested in the object car . If we are interested in the vin attribute of engine, we can easily get it using destructuring assignment.

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3.3 Merging Objects

ES6 brings the extended operator(...). It's typically used to destructure arrays, but you can also use it with objects.

Next, we use the spread operator to expand a new object. The attribute values ​​in the second object will overwrite the attribute values ​​of the first object. For example, b and c of object2 will overwrite the attributes of the same name of object1.

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

4. Sets

4.1 Use Set to implement array deduplication

In ES6 , because Set only stores unique values, you can use Set to remove duplicates.

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 对Set使用数组方法

使用扩展运算符就可以简单的将Set转换为数组。所以你可以对Set使用Array的所有原生方法。

比如我们想要对下面的Set进行filter操作，获取大于3的项。

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 数组解构

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

5.1 数值交换

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 接收函数返回的多个结果

在下面的代码中，我们从/post中获取一个帖子，然后在/comments中获取相关评论。由于我们使用的是async/await，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){
 return await Promise.all([
  fetch('/post'),
  fetch('/comments')
 ]);
}
const [post, comments] = getFullPost();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用vue中filter

怎样使用vue判断dom的class

The above is the detailed content of What are some tips when using ES6. For more information, please follow other related articles on the PHP Chinese website!