• 5 Useful Things The Spread Operator Can Do in JavaScript
  • Mehdi Aoussiad
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Alfxjx
  • Proofreader: HayleyLL

Introduction to the

The object expansion operator is an important and useful new feature recently added to JavaScript. The object expansion operator expands and expands the value of an iterable JavaScript object. It also allows you to expand arrays and other expressions when multiple arguments are required. In many cases, object expansion operators are useful for writing better and cleaner JavaScript code in a simple way.

In this short article, we’ll explore the JavaScript object expansion operator {… Some use cases for}.

1. Merge two objects

We can use the object expansion operator in JavaScript to merge two objects. Take a look at this example:

let employee = { name:'Jhon'.lastname:'Doe'};
const salary = { grade: 'A'.basic: '$3000' };
constsummary = {... employee, ... salary};console.log(summary);
// Prints: {name: "Jhon", lastname: "Doe", grade: "A", basic: "$3000"}
Copy the code

Here the Employee and Salary objects are merged into one, and a new object is generated that contains the key-value pairs of the original two objects.

2. Merge arrays

Another advantage of the object expansion operator is that you can merge arrays or insert all the elements of one array at any index of another.

The syntax of object expansion makes the following operations surprisingly easy:

let thisArray = ['sage'.'rosemary'.'parsley'.'thyme'];

let thatArray = ['basil'.'cilantro'. thisArray,'coriander'];
// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']
Copy the code

By using the object expansion operator {… }, we can easily get the desired array. If you use traditional methods, the steps become more verbose and complex.

3. Copy the array using the object expansion operator

We can also use the object expansion operator to copy the contents of one array into another in JavaScript. Take a look at this example:

const arr1 = ['JAN'.'FEB'.'MAR'.'APR'.'MAY'];
let arr2;
arr2 = [...arr1];
console.log(arr2); // Prints:[ 'JAN', 'FEB', 'MAR', 'APR', 'MAY' ]
Copy the code

As you can see, we use the object expansion operator to copy all the elements of ARR1 into another array, ARR2.

4. Calculate the maximum value in the array

The following ES5 code uses apply() to calculate the maximum value in the array:

var arr = [6.89.3.45];
var maximus = Math.max.apply(null, arr); // returns 89
Copy the code

Using the object expansion operator makes this code more readable and maintainable. Take a look at this example:

const arr = [6.89.3.45];
const maximus = Math.max(... arr);// returns 89
Copy the code

. Arr returns a collection of array elements, that is, it expands the array.

5. Convert strings to arrays

We can use the object expansion operator to split an English word (string) into an array in JavScript. The following example shows how it can convert an English word into an array of letters:

const string = 'word';
const arr = [...string];
console.log(arr); // Prints: ["w", "o", "r", "d"]
Copy the code

There are many ways to do this, but it’s much easier to write clean JavaScript code using the object expansion operator.

conclusion

Object expansion operators are a useful feature in JavaScript. It’s easy to use and keeps your code clean and maintainable.

Thanks for reading this article and I hope it was helpful.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.