preface
JavaScript ES6 adds the syntax of extension operator. The extension operator (spread) is three points (...). This operator is mainly used to convert an array into a comma separated parameter sequence, which is usually used to pass parameters in function calls.
Array merge
Convert an array into a split sequence of parameters
copylet a = ["hello", "world", "yoyo"]; console.log(...a) // hello world yoyo
It can be used for the combination of two arrays
copylet a = ["hello", "world", "yoyo"]; let b = [2, 3, 4] c = [...a, ...b] console.log(c) // ['hello', 'world', 'yoyo', 2, 3, 4]
Equivalent to concat () method merging
copylet a = ["hello", "world", "yoyo"]; let b = [2, 3, 4] c = a.concat(b) console.log(c) // ['hello', 'world', 'yoyo', 2, 3, 4]
Or push another array b based on array a
copylet a = ["hello", "world", "yoyo"]; let b = [2, 3, 4] a.push(...b) console.log(a) // ['hello', 'world', 'yoyo', 2, 3, 4]
Array shallow copy
Can be used to clone an array, equivalent to a shallow copy
copylet a = ["hello", "world", "yoyo"]; let b = [...a]; // Shallow copy console.log(b); // ['hello', 'world', 'yoyo']
We can get a new array based on the a array
copylet a = ["hello", "world", "yoyo"]; let b = [...a, 'a', 'b']; // Add a new element to the back console.log(b); // ['hello', 'world', 'yoyo', 'a', 'b'] let c = [1, 2, ...a]; // Add a new element to the front console.log(c); // [1, 2, 'hello', 'world', 'yoyo'] let d = [1, 2, ...a, 'a', 'b']; console.log(d); // [1, 2, 'hello', 'world', 'yoyo', 'a', 'b']
To iterator
When the Map is traversed, the keys() method returns the key iterator in the Map object.
let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m.keys()); // MapIterator {'user', 1, 2}If we want to get an array ['user', 1, 2], we can use the extension operator (...)
let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
let keys = [...m.keys()]
console.log(keys); // ['user', 1, 2]Function rest parameter
If you can figure out * args and * * kwargs in python function parameters, * args is equivalent to rest parameters in JavaScript args.
Let's first look at a piece of python code about the use of * arg parameter
def func(a, *args):
print(a)
print(args)
func(1, 2, 3, 4)
# a get 1
# args gets (2, 3, 4)Next, go back to the rest parameter in JavaScript args is easy to understand
function func(a, ...args) {
console.log(a); // 1
console.log(args); // [2, 3, 4]
}
func(1, 2, 3, 4);If the function passes 4 parameters, then a gets 1,... Args gets redundant parameters 2,3,4, where args is an array [2,3,4]
Therefore, it is easy to understand that the rest parameter is actually to get redundant parameters. You can define an indefinite length parameter in the function parameters.
When the parameters of the function are very long, we can write the parameters to an array arr and use arr
function func(a, ...args) {
console.log(a); // 1
console.log(args); // [2, 3, 4]
}
arr = [2, 3, 4];
func(1, ...arr);When using the rest parameter, you should pay attention to the order and be sure to put it at the last parameter of the function
String to number
You can use the extension operator to convert a string into an array
copylet a = 'hello'; let b = [...a]; console.log(b); // ['h', 'e', 'l', 'l', 'o']
Its function is equivalent to traversing the string to generate an array
Object deconstruction assignment
It can also be used in object deconstruction and assignment
const person = {
name: 'yoyo',
age: 20,
address: function () {
return "Shanghai"
}
}
let {address, ...info} = person;
console.log(info); // {name: 'yoyo', age: 20}When deconstructing the assignment, you should pay attention to the order of the rest parameter and put it at the end.