For the processing of arrays, developers are constantly creating better ways, and in ES2015 (ES6) a new basic operator-expansion operator. Use three dots... to indicate that its role is to call a function , The array expression or string is expanded at the grammatical level when the array is constructed; when the literal object is constructed, it is expanded in the form of key-value pairs.
Here Xiaoqian introduces its basic usage:
constructing an array of literal syntax
Normally, to construct an array with a literal structure, we will use functions such as push splice unshift concat to take the existing array as a part of the new array.
The spread operator can accomplish this task more easily and quickly.
Link array
Before we have the expansion operator, we usually use the concat function to
copy the linked array of the array.
From the above results, we can see that the expansion operator only traverses the first level of the expanded array (shallow copy). If the expanded result is a reference type, it does not continue to traverse down. In fact, its behavior is the same as Object.assign()
Object copying and merging
Use the spread operator to construct a new object. Essentially, all enumerable properties in the original object are copied to the new object; unlike Object.assign(), Object.assign() triggers the expansion of setters The operator will not.
rest parameters (remaining parameters)
ES2015 introduces the rest parameter (syntax...variable name), which is used to get the extra parameters of the function, so that there is no need to use the arguments object. The variable with the rest parameter is an array, and the variable puts the extra parameters into the array. This feature allows us to handle parameters more conveniently in some specific environments (for example, arrow functions without arguments).
We can also use rest parameters for some parameters, but there can be no other parameters after the rest parameter (rest must be the last parameter)
Note: When using expansion syntax in an array or function parameter, it can only be used for iterable objects (support iterator). The
above is Xiaoqian sharing the concept and basic usage of es6 expansion operator, I hope it will be helpful to everyone.