随着前端技术的不断发展，ES9 中新增了一种操作符 —— Spread 操作符。这种操作符可以用于数组、对象和函数调用等场景中。本文将详细介绍 Spread 操作符的作用及实际应用，并提供相应的示例代码，帮助读者更好地理解和掌握 Spread 操作符的使用方法。
Spread 操作符的作用
1. 数组展开
Spread 操作符可以将数组展开，将数组中的每个元素分别提取出来，用于构造新的数组、函数参数等。示例代码如下：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在上面的代码中，使用 ... 来展开 arr1 和 arr2，然后用 [] 将它们包裹起来，生成了一个新的数组 arr3。
2. 对象展开
除了数组，Spread 操作符还可以用于对象展开。它可以将一个对象的所有属性和方法展开，用于构造新的对象。示例代码如下：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'male', job: 'developer' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Tom', age: 18, gender: 'male', job: 'developer' }在上面的代码中，使用 ... 来展开 obj1 和 obj2，然后用 {} 将它们包裹起来，生成了一个新的对象 obj3。
3. 函数调用
Spread 操作符还可以用于函数调用，将一个数组或对象作为函数的参数，将其展开成多个参数传递给函数。示例代码如下：
-- -------------------- ---- ------- -------- ------ -- -- - ------ - - - - -- - ----- --- - --- -- --- ------------------------- -- - ----- --- - - -- -- -- -- -- - -- ---------------------------------------- -- -
在上面的代码中，使用 ... 将数组 arr 和对象 obj 展开，然后作为函数 sum 的参数传递给它。可以看到，函数 sum 的参数列表中只有三个参数，但使用 Spread 操作符后，我们可以将一个数组或对象作为参数传递给函数，使得函数调用更加灵活和方便。
Spread 操作符的实际应用
1. 数组合并
使用 Spread 操作符可以很方便地合并多个数组，生成一个新的数组。示例代码如下：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const arr4 = [...arr1, ...arr2, ...arr3]; console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
在上面的代码中，使用 ... 将 arr1、arr2 和 arr3 展开，然后用 [] 将它们包裹起来，生成了一个新的数组 arr4。
2. 对象合并
使用 Spread 操作符可以很方便地合并多个对象，生成一个新的对象。示例代码如下：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'male', job: 'developer' };
const obj3 = { address: 'Beijing' };
const obj4 = { ...obj1, ...obj2, ...obj3 };
console.log(obj4); // { name: 'Tom', age: 18, gender: 'male', job: 'developer', address: 'Beijing' }在上面的代码中，使用 ... 将 obj1、obj2 和 obj3 展开，然后用 {} 将它们包裹起来，生成了一个新的对象 obj4。
3. 数组拷贝
使用 Spread 操作符可以很方便地拷贝一个数组，生成一个新的数组。示例代码如下：
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3] console.log(arr1 === arr2); // false
在上面的代码中，使用 ... 将 arr1 展开，然后用 [] 将它们包裹起来，生成了一个新的数组 arr2。可以看到，arr1 和 arr2 指向不同的数组对象。
4. 对象拷贝
使用 Spread 操作符可以很方便地拷贝一个对象，生成一个新的对象。示例代码如下：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { ...obj1 };
console.log(obj2); // { name: 'Tom', age: 18 }
console.log(obj1 === obj2); // false在上面的代码中，使用 ... 将 obj1 展开，然后用 {} 将它们包裹起来，生成了一个新的对象 obj2。可以看到，obj1 和 obj2 指向不同的对象。
总结
本文介绍了 ES9 中的 Spread 操作符的作用及实际应用，包括数组展开、对象展开、函数调用、数组合并、对象合并、数组拷贝和对象拷贝等。使用 Spread 操作符可以让代码更加简洁、灵活和易于维护，希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66262760c9431a720c27a8ca