MENU


The ...rest,spread Operator

The ... operator can be applied to an iterable in addition to an object and function parameters. When used at the left of an iterable, it expands the iterable into its elements.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

var s = new Set([1,2,3]);  // any iterable will dovar a = [0,...s,4,5];  //
  [0, 1, 2, 3, 4, 5]
     spreadvar [x,y,z] = a;var [x,y,...rest] = a;    // restconsole.log(x,y,z,rest); // 0 1 2 [2, 3, 4, 5]var arr = [1, 2, 3], first, last;[x, …y] = arr;                        // rest operatorconsole.log(y);                       // [2,3][first, ...[arr[2], last]] = arr;   // spread operatorconsole.log(first);                   // 1console.log(last);                    // 3console.log(arr);                     // [1,2,2]console.log(…arr);                   // 1 2 2console.log(Math.max(…arr));   // 2

</script></body><html>

RESETRUNFULL
<!DOCTYPE html><html><body><script>

const arr = [{
    id: 'id1',
    level: 'l1',
    children: []}, {
    id: 'id2',
    level: 'l1',
    children: [{
        id: 'id3',
        level: 'l2',
        children: [{
            id: 'id4',
            level: 'l3',
            children: []
        }]
    }, {
        id: 'id5',
        level: 'l2',
        children: []
    }]}];/* depth-first[{id: "id1", level: "l1"}, {id: "id2", level: "l1"}, {id: "id3", level: "l2"}, {id: "id4", level: "l3"}, {id: "id5", level: "l2"}]*/const flatten = ({ children, ...o }) => [o, ...children.flatMap(flatten)];console.log(arr.flatMap(flatten));/* breadth-first[{id: "id1", level: "l1"},{id: "id2", level: "l1"},{id: "id3", level: "l2"},{id: "id5", level: "l2"},{id: "id4", level: "l3"}] */function flatten2(ar){
    for (var i = 0; i < ar.length; i++) {
        if (ar[i].children.length)
  ar.push(...ar[i].children);
        delete ar[i].children;
    }
    return ar;}console.log(flatten2(arr));

</script></body><html>

When applied to an object/array in the L.H.S, ... is called the rest operator, assigning the rest of the values to the variable. When applied to an object/array in the R.H.S., ... is called the rest operator, spreading out the packed values.