ES6 扩展运算符

Spread Operator 是 JavaScript 的 ES6 标准中引入的一个非常简单而强大的功能，它可以帮助您编写更好、更短的代码。 JavaScript 扩展运算符由三个点(...)表示。 扩展运算符帮助可迭代对象扩展为单个元素。可迭代对象是我们可以在其上使用循环的对象，例如 Array、Map、Set 等。换句话说，扩展运算符允许我们将现有数组或对象中的所有元素复制到另一个数组或对象中。

句法：

var variablename1 = [...value];

让我们通过例子来了解展开运算符的用法。

示例 1：这里我们使用扩展运算符复制了数组（从 cars1 到 cars2 和从 cars1 到 cars3 ）。

Javascript

    const cars1 = ["AUDI","BMW","TATA","MERCEDES"];
    // Copied elements from cars1 to cars2 here
    const cars2 = [...cars1];
  
    // Copied elements from cars1 to cars3 here
    // and also add some new elements in cars3
    const cars3 = [...cars1,"NISSAN","TOYOTA"];
  
    console.log(cars1);
    console.log(cars2);
    console.log(cars3);

输出：

[ 'AUDI', 'BMW', 'TATA', 'MERCEDES' ]
[ 'AUDI', 'BMW', 'TATA', 'MERCEDES' ]
[ 'AUDI', 'BMW', 'TATA', 'MERCEDES', 'NISSAN', 'TOYOTA' ]

示例 2：在此示例中，我们将 采用 用于合并数组的扩展运算符。

Javascript

    const cars1 = ["AUDI","BMW","TATA","MERCEDES"];
    const cars2 = ["NISSAN","TOYOTA"];
    // copied elements from cars1 and cars2 to cars3 here 
    const cars3 = [...cars1, ...cars2];
  
    console.log(cars3);

输出：

[ 'AUDI', 'BMW', 'TATA', 'MERCEDES', 'NISSAN', 'TOYOTA' ]

示例 3：在此示例中，我们 将对对象使用扩展运算符。

Javascript

    // cars1 object
    const cars1 = {
       Brand : "BMW",
       Color : "RED"
    }
    // copy cars1 object using spread 
    // operator to create cars2 object
    const cars2 = {...cars1};
    console.log(cars2);

输出：

{ Brand: 'BMW', Color: 'RED' }

示例 4：在此示例中，我们将使用扩展运算符来合并对象。

Javascript

    // cars1 is a object which is containing
    // the attributes Brand  & Color
    const cars1 = {
        Brand : "Toyota",
        Color : "RED"
    }
    // cars2 is a object which is containing 
    // the attributes Brand, Color & Year
    const cars2 = {
        Brand : "Nissan",
        Color : "BLUE",
        Year : 2004
    }
    const cars3 = {...cars1,...cars2};
    console.log(cars3);

输出：

{ Brand: 'Nissan', Color: 'BLUE', Year: 2004 }

示例 5：在此示例中，我们将使用扩展运算符将字符串拆分为字符串数组。

Javascript

    const car = "AUDI";
    const a = [...car];
    console.log(a);

输出：

[ 'A', 'U', 'D', 'I' ]

示例 6：这里我们将使用带有数组解构的扩展运算符。

Javascript

    const numbers = [3,5,7,8,9];
    // Here we assign a,b and c with 3,5 and 7, 
    // the rest of the elements will all go to others
    const [a,b,c,...others] = numbers;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(others);

输出：

3
5
7
[ 8, 9 ]