The spread operator (spread) is three points (…) . It is like the inverse of the REST argument, turning an array into a comma-separated sequence of arguments.
-
console.log(... [
1.
2.
3])
-
/ / 1 2 3
-
console.log(
1. [
2.
3.
4].
5)
-
// 1, 2, 3, 4, 5
-
[...document.querySelectorAll(
'div')]
-
// [<div>, <div>, <div>]
Copy the code
This operator is used primarily for function calls.
-
function push(array, ... items) {
-
array.push(... items);
-
}
-
function add(x, y) {
-
return x + y;
-
}
-
var numbers = [
4.
38];
-
add(... numbers)
/ / 42
Copy the code
In the code above, array.push(… The items) and add (… Numbers), both function calls that use the extension operator. This operator turns an array into a sequence of arguments.
Extended operators can be used in conjunction with normal function parameters, making them very flexible.
-
function f(v, w, x, y, z) {}
-
var args = [
0.
1];
-
f(
- 1. args,
2. [
3]);
Copy the code
2 replaces the apply method for arrays
Because the extension operator can expand an array, the apply method is no longer needed to convert the array to a function parameter.
-
// ES5
-
function f(x, y, z) {
-
// ...
-
}
-
var args = [
0.
1.
2];
-
f.apply(
null, args);
-
// ES6
-
function f(x, y, z) {
-
// ...
-
}
-
var args = [
0.
1.
2];
-
f(... args);
Copy the code
Here is a practical example of the extension operator replacing apply to simplify writing the largest element of an array using math.max.
-
// ES5
-
Math.max.apply(
null[
14.
3.
77])
-
// ES6
-
Math.max(... [
14.
3.
77])
-
/ / is equivalent to
-
Math.max(
14.
3.
77);
Copy the code
The code above shows that since JavaScript does not provide a function for finding the largest element of an array, you can only use the math.max function, which turns the array into a sequence of parameters and then evaluates the maximum. Now that you have the extension operator, you can use math.max directly.
Another example is adding an array to the end of another array using the push function.
-
// ES5
-
var arr1 = [
0.
1.
2];
-
var arr2 = [
3.
4.
5];
-
Array.prototype.push.apply(arr1, arr2);
-
// ES6
-
var arr1 = [
0.
1.
2];
-
var arr2 = [
3.
4.
5];
-
arr1.push(... arr2);
Copy the code
In the ES5 version of the code above, the arguments to the push method cannot be arrays, so we have to use the apply method to work around the push method. With the extension operator, you can pass an array directly to the push method. Here’s another example.
-
// ES5
-
new (
Date.bind.apply(
Date[
null.
2015.
1.
1]))
-
// ES6
-
new
Date(... [
2015.
1.
1]);
Copy the code
Extend the application of operators
(1) Merge arrays
The extension operator provides a new way of writing array merges.
-
// ES5
-
[
1.
2].concat(more)
-
// ES6
-
[
1.
2. more]
-
var arr1 = [
'a'.
'b'];
-
var arr2 = [
'c'];
-
var arr3 = [
'd'.
'e'];
-
// Merge array of ES5
-
arr1.concat(arr2, arr3);
-
// [ 'a', 'b', 'c', 'd', 'e' ]
-
// Merge array of ES6
-
[...arr1, ...arr2, ...arr3]
-
// [ 'a', 'b', 'c', 'd', 'e' ]
Copy the code
(2) Combine with deconstruction assignment
Extension operators can be used in conjunction with destructuring assignments to generate arrays.
-
// ES5
-
a = list[
0], rest = list.slice(
1)
-
// ES6
-
[a, ...rest] = list
-
Here are some other examples.
-
const [first, ...rest] = [
1.
2.
3.
4.
5];
-
first
/ / 1
-
rest
// [2, 3, 4, 5]
-
const [first, ...rest] = [];
-
first
// undefined
-
rest
/ / [] :
-
const [first, ...rest] = [
"foo"];
-
first
// "foo"
-
rest
/ / []
Copy the code
If an extension operator is used for array assignment, it must be placed in the last bit of the argument, otherwise an error will be reported.
-
const [...butLast, last] = [
1.
2.
3.
4.
5];
-
/ / an error
-
const [first, ...middle, last] = [
1.
2.
3.
4.
5];
-
/ / an error
Copy the code
(3) Return value of the function
JavaScript functions can only return one value, or arrays or objects if multiple values are required. Extension operators provide a workaround around this problem.
-
var dateFields = readDateFields(database);
-
var d =
new
Date(... dateFields);
Copy the code
The code above takes a row from the database and passes it directly to the Date constructor by extending the operator.
(4) String
Extension operators can also turn strings into true arrays.
-
[...
'hello']
-
// [ "h", "e", "l", "l", "o" ]
Copy the code
One important benefit of the above notation is that it correctly recognizes 32-bit Unicode characters.
-
'x\uD83D\uDE80y'.length
/ / 4
-
[...
'x\uD83D\uDE80y'].length
/ / 3
Copy the code
In the first version of the code above, JavaScript recognizes 32-bit Unicode characters as two characters, which is not a problem with the extension operator. Therefore, a function that correctly returns the length of a string can be written as follows.
-
function length(str) {
-
return [...str].length;
-
}
-
length(
'x\uD83D\uDE80y')
/ / 3
Copy the code
This problem applies to all functions that operate on 32-bit Unicode characters. Therefore, it is best to overwrite everything with extension operators.
-
let str =
'x\uD83D\uDE80y';
-
str.split(
' ').reverse().join(
' ')
-
// 'y\uDE80\uD83Dx'
-
[...str].reverse().join(
' ')
-
// 'y\uD83D\uDE80x'
Copy the code
In the code above, the reverse operation of the string would not be correct without the extension operator.
(5) Objects that implement the Iterator interface
Any object of the Iterator interface can be converted to a true array using the extension operator.
-
var nodeList =
document.querySelectorAll(
'div');
-
var array = [...nodeList];
Copy the code
In the above code, the querySelectorAll method returns a nodeList object. It’s not an array, it’s an array-like object. In this case, the extension operator can turn it into a true array because the NodeList object implements the Iterator interface.
For array-like objects that do not have an Iterator interface deployed, the extension operator cannot turn them into true arrays.
-
let arrayLike = {
-
'0':
'a'.
-
'1':
'b'.
-
'2':
'c'.
-
length:
3
-
};
-
// TypeError: Cannot spread non-iterable object.
-
let arr = [...arrayLike];
Copy the code
In the above code, arrayLike is an array-like object, but without the Iterator interface deployed, the extension operator will report an error. At this point, you can turn an arrayLike into a real Array using the array. from method instead.
(6) Map and Set structures, Generator functions
An extension operator internally calls the Iterator interface of a data structure, so any object that has an Iterator interface can use an extension operator, such as a Map structure.
-
let map =
new
Map([
-
[
1.
'one'].
-
[
2.
'two'].
-
[
3.
'three'].
-
]);
-
let arr = [...map.keys()];
/ / [1, 2, 3]
Copy the code
When the Generator function runs, it returns an traverser object, so extension operators can also be used.
-
var go =
function* (){
-
yield
1;
-
yield
2;
-
yield
3;
-
};
-
[...go()]
/ / [1, 2, 3]
Copy the code
In the above code, the variable go is a Generator function that returns an traverser object. Executing the extension operator on this traverser object converts the values of the internal traversal into an array.
An error is reported if you use the extension operator on an object that does not have an iterator interface.
-
var obj = {
a:
1.
b:
2};
-
let arr = [...obj];
// TypeError: Cannot spread non-iterable object
Copy the code