Application in arrays

The spread operator is three points (...).It is like the inverse operation of the rest parameter, ++ converts an array to a comma-separated parameter sequence++.

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>]

Extension operators can be used in conjunction with normal function parameters and are very flexible.

function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

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

An expression can also be placed after an extension operator.

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

The push function adds an array to the end of another array.

In the ES5 notation, the parameters of the push method cannot be arrays, so the push method has to be used flexibly through the apply method.With the extension operator, you can pass an array directly into the push method.

// Writing of ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// Writing of ES6
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

Generate date by expanding operator

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

Copy Array

A1 will return to the clone of the original array, and modifying a2 will not affect a1.

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

//es6
const a1 = [1, 2];
// how to write
const a2 = [...a1];
// Writing Two
const [...a2] = a1;

Merge Array

Both methods are shallow copies

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

// Merged Array of ES5
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// Merged Array for ES6
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

Combining with deconstruction assignment

If an extension operator is used for array assignment, it can only be placed last in the parameter, otherwise an error will be reported.

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   // []

Character string

Extension operators can also convert strings to real arrays.

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

Object implementing Iterator interface

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 real array because the NodeList object implements Iterator.

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

Map and Set structure, Generator function

Extension operators call the Iterator interface of the data structure internally, so any object with 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]

Extension of object

Destructuring assignment

The variable z is the object where the deconstruction assignment is located.It takes all unread keys (a and b) to the right of the equal sign and copies them with the values.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

Deconstruction assignment must be the last parameter or an error will be reported.

let { ...x, y, z } = someObject; // Syntax Errors
let { x, ...y, ...z } = someObject; // Syntax Errors

The copy of the deconstruction assignment is a shallow copy, and the deconstruction assignment copy is a reference to this value

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

Copy Object

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

let foo = { ...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}

Merge two objects

let ab = { ...a, ...b };
// Equivalent to
let ab = Object.assign({}, a, b);

If a user-defined property is placed after an extension operator, the same-name property inside the extension operator is overwritten.

The x and y attributes of an object are overwritten when copied to a new object.

let aWithOverrides = { ...a, x: 1, y: 2 };
// Equivalent to
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// Equivalent to
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
// Equivalent to
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

Modify properties of existing object parts

let newVersion = {
  ...previousVersion,
  name: 'New Name' // Override the name property
};

If you precede the extension operator with a custom property, it becomes the default property value for the new object.

let aWithDefaults = { x: 1, y: 2, ...a };
// Equivalent to
let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a);
// Equivalent to
let aWithDefaults = Object.assign({ x: 1, y: 2 }, a);