Home  >  Article  >  Web Front-end  >  How to use Spread operator (...) in JavaScript? 8 methods introduced

How to use Spread operator (...) in JavaScript? 8 methods introduced

青灯夜游
青灯夜游forward
2020-06-29 10:40:382611browse

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

How to use Spread operator (...) in JavaScript? 8 methods introduced

2. Use the spread operation operator to copy the array

How to use Spread operator (...) in JavaScript? 8 methods introduced

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

How to use Spread operator (...) in JavaScript? 8 methods introduced

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

How to use Spread operator (...) in JavaScript? 8 methods introduced

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!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete