Home > Article > Web Front-end > How to use Spread operator (...) in JavaScript? 8 methods introduced
The spread operator (...) was introduced in ES6
.
The spread operator expands an iterable object, which is any object that can be looped using a for
loop, into its individual elements.
Iterable examples: Array, String, Map, Set, DOM nodes.
1. Use the spread operation operator in log
You can iterate in console.log
The object uses the spread operation operator
2. Use the spread operation operator to copy the array
Copy object
let user = {name : "John", age : 20 } let userCopy = {...user}
The stretch operation operator does not perform a deep copy.
3. Extended operation operator merge
Merge objects
Merge objects , if a key already exists, it is replaced with the last object with the same key.
let user1 = {name : "John", age : 20 }; let user2 = {name : "Ram", salary: '20K' }; let userCopy = {...user1, ...user2}; userCopy ; // {name : "Ram", age :20 , salary : '20K'};
4. The spread operation operator is passed as a parameter
function sum(a, b) { return a+b; } let num = [1,2]; sum(...num); // 3
and math
Functions are used together
let num = [5,9,3,5,7]; Math.min(...num); Math.max(...num);
5. The extension operator is used in destructuring variables
Destructuring the object
let user = {name : "Ram", age: 20, salary: '20K', job : "Tester" }; let { name, age, ...details } = user; name; // Ram age; // 20 details; // {salary: '20K', job : 'Tester'};
6. Convert the NodeList object to an array
NodeList Similar to an array, but without all the methods of Array
, such as forEach
, map
, filter
, etc.
let nodeList = document.querySelectorAll('.class') var nodeArray = [...nodeList]
7. Convert strings to characters
Strings are also iterable objects, so we can also use . ..
to string.
let name = "Ram"; let chars = [...name]; // ["R", "a", "m"]
8. Remove duplicates from an array
let num = [1, 3, 1, 3, 3, 1]; let uniqueNum = [...new Set(num)]; uniqueNum; //[ 1, 3 ]
Original address: https://medium.com/javascript- in-plain-english/8-ways-to-use-spread-operator-in-javascript-b66fcf016efe
Author: Javascript Jeep
Reprinted from: https://segmentfault.com/ a/1190000023023909
Recommended related tutorials: JavaScript video tutorial
The above is the detailed content of How to use Spread operator (...) in JavaScript? 8 methods introduced. For more information, please follow other related articles on the PHP Chinese website!