Catalog

Application of Extended Operators  

1. Merge Arrays

2. Copy Array

3. Convert Pseudo Arrays to Arrays

4. Combining with deconstruction assignment

5. Strings

6.Map and Set structure, Generator function

Basic Grammar

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

This operator is used primarily for function calls

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}

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

        In the code above, array.push(...items) and add(...numbers) are both calls to functions that use extended operators. This operator changes an array into a sequence of parameters.   An expression can also be placed after an extension operator

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
  //If the expansion operator is followed by an empty array, nothing happens.

[...[], 1]
// [1]

Application of Extended Operators  

1. Merge Arrays

         Extension operators give us a new way to merge arrays

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

    Expanding an array into a list of parameters is easy with extended operators

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true

        In the code above, a3 and a4 are new arrays merged in two different ways, but their members are references to the members of the original array, which is a shallow copy. If the value pointed to by the reference is modified, it will be reflected synchronously to the new array.

        Note: Both methods are shallow copies and should be noted when using them.

2. Copy Array

         Arrays are composite data types, and direct copying simply copies the pointer to the underlying data structure rather than cloning a completely new array.

        ES5 can only copy arrays in workarounds.

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

  In the code above, A1 returns a clone of the original array, and modifying a2 will not affect a1.  

        Extension operators provide an easy way to write replicated arrays.

//Copy Array
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//Copy Array
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {...}}

        Remember: arrays are still obtained by pointers, so we didn't copy the array itself, we just copied a new pointer.

3. Convert Pseudo Arrays to Arrays

The NodeList object is a collection of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll.

        Pseudo arrays like NodeList and arguments, which are similar but not array, do not have all the methods of Array, such as find, map, filter, etc., but can be iterated over using forEach()

        It can be converted to an array by extending the operator as follows:

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

        Note: There is a limitation to using extended operators to convert pseudo arrays to arrays, which must have a default iterator and be pseudo traversable

4. Combining with deconstruction assignment

Extension operators can be combined with deconstruction assignments to generate arrays

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

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

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

const [...butLast, last] = [1, 2, 3, 4, 5];
//   Report errors
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//   Report errors

5. Strings

          The extended syntax of ES6 can easily split a string into an array of individual characters:

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

6.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]
        Generator After the function runs, it returns a traverser object, so the extended operator can also be used.

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

        In the code above, the variable go is a Generator function, which returns a traverser object. Executing an extension operator on the traverser object converts the value from the internal traversal into an array.

        If an extension operator is used on an object without an Iterator interface, an error will be reported.

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object