事件扩展运算符用过吗？什么场景下

在ES6中，事件扩展运算符可以用于数组和对象的展开操作，用于将一个数组转为用逗号分隔的参数序列或将一个对象转为多个参数的形式传入一个函数中。

一、数组

   扩展运算符可以打印可迭代对象的每一项

console.log(...[1,2,3]); // 1 2 3
console.log(1,...[2,3,4],5); // 1 2 3 4 5
console.log([1,...[2,3,4],5]); // [1, 2, 3, 4, 5]

   1、用法1-复制数组

         使用扩展运算符可以更方便地复制一个数组，而不必使用slice方法。例如

let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]
arr2.push(4); 
console.log(arr2); // [1, 2, 3, 4]

   2、用法2-数组合并 

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5]
// 等同于
var arr4 = arr1.concat(arr2);
console.log(arr4); // [0, 1, 2, 3, 4, 5]

二、对象

  复制对象：使用扩展运算符可以更方便地复制一个对象。例如

let obj = {a: 1, b: 2, c: 3};
let obj2 = {...obj}; // {a: 1, b: 2, c: 3}
obj2.d = 4; 
console.log(obj2); // {a: 1, b: 2, c: 3, d: 4}

  1、用法3-对象合并 

let obj1 = {a: 1, b: 2};
let obj2 = {c: 3, d: 4};
let obj3 = {...obj1, ...obj2}; // {a: 1, b: 2, c: 3, d: 4}
// 等价于
let obj1 = {a:1,b:2};
let obj2 = {c: 3, d: 4};
let obj3 = Object.assign(obj1,obj2);// {a: 1, b: 2, c: 3, d: 4}

   2、用法4-在React或Vue中的运用 

         在React或vue组件中，可以使用扩展运算符来进行props的传递

const params = {name: 'Jine', age: 21}
<CustomComponent {...params} />

   3、用法5-数组去重 

var arr = [2023,'itclancoder',2023, 1024, -9, -9, 2023, 1024, 2, 3, 2, 3, 6, 8,8,8,-8,'itclancoder','itclancoder']
var  set1= [...new  Set(arr)]
//可以直接写出var  set1= new  Set(arr)
//console.log(set1)
//方法1
var newArr=Array.from(set1)
console.log(newArr)
var arr = [2023,'itclancoder',2023, 1024, -9, -9, 2023, 1024, 2, 3, 2, 3, 6, 8,8,8,-8,'itclancoder','itclancoder']
var  set1= [...new  Set(arr)]
//可以直接写成var  set1= new  Set(arr)
//console.log(set1)
//方法2
var newArr= [...set1]
console.log(newArr)

   4、用法6-字符串转字符数组 

const name='itclancoder'
const strarr=[...name]
console.log(strarr)
//['i','t','c','l','a','n','c','o','d','e','r']
//进行简单的字符串截取
strarr.lenght=2
console.log(strarr.join(""));//‘it’