Some uses of JS spread operators (...)

With ES2015 coming out, the spread operator is also used

The spread operator (spread) is three dots (...). It is like the inverse operation of rest parameters, which converts an array into a sequence of parameters separated by commas.

The ... operator is mainly used for some operations on arrays and objects.

 

Function call

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

As can be seen from the above example, the first function of the spread operator is to turn the array into a sequence of parameters.
The most significant convenience brought by the above feature is to replace the apply method. Originally, apply requires an array to pass parameters, but now you only need to use the ... operator.

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);


// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

I believe the above example is very intuitive, and I don't need to explain more.

 

Copy array

We all know that arrays are reference types, and they are assigned directly. The pointers of the two arrays point to the same reference address. Changing the value of one of the internal members of the array will also change the corresponding value in the other array.
Therefore, in es5, we use the concact method to clone the array.

const a1 = [1, 2];
const a2 = a1.concat();

a2[0] = 2;
a1 // [1, 2]

With the... operator, we can write

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

 

Merge array

In the writing of the cloned array above, we see that in es5 we simulate the effect of the cloned array by merging empty arrays, so we can also use the ... operator to merge arrays.

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

However, both of these methods are shallow copies, so you need to pay attention when using them. If the members of the original array are modified, they will be reflected to the new array synchronously.

 

Convert string to array

[...'hello']   // [ "h", "e", "l", "l", "o" ]

The ... operator also solves the problem of calculating the length of unicode characters.

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

In addition to converting a string into an array,... it can also convert any object that defines an Iterator interface into a real array.

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

 

Merge object

...Is introduced into objects in ES2018, so objects can also be combined like arrays.
In ES2015, we use Object.assign() to merge objects. In ES2018, we can use... operator instead.

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);