JS 扩展运算符...展开运算符...把可迭代对象数组、字符串、Set、Map拆成一个个独立元素对象则拆解键值对。一、数组上使用1. 复制数组浅拷贝constarr[1,2,3]constarr2[...arr]// arr2 [1,2,3]新数组改arr2不影响原arr⚠️ 浅拷贝数组里面如果是对象拷贝的是引用。2. 合并数组consta[1,2]constb[3,4]constc[...a,...b,5]// [1,2,3,4,5]3. 把数组展开作为函数参数替代applyconstnums[10,20,30]Math.max(...nums)// 30// 等价 Math.max(10,20,30)4. 数组解构配合扩展...只能放在最后一位const[first,...rest][1,2,3,4]// first1 rest[2,3,4]二、对象上使用 ES61. 对象浅拷贝constobj{name:张三,age:18}constobj2{...obj}2. 合并对象后面覆盖前面同名keyconsto1{a:1,b:2}consto2{b:99,c:3}constres{...o1,...o2}// {a:1, b:99, c:3} 后面b覆盖前面b3. 修改部分属性保留原有业务最常用constuser{name:小明,age:20,sex:男}constnewUser{...user,age:21}// {name:小明,age:21,sex:男}4. 对象解构 扩展const{name,...other}{name:小李,age:18,id:1001}// name小李 other{age:18,id:1001}// ...rest必须放解构最后三、字符串展开conststrhelloconsole.log([...str])// [h,e,l,l,o]四、Set去重经典面试constarr[1,2,2,3,3,3]constunique[...newSet(arr)]// [1,2,3]⚠️重要注意点只是浅拷贝嵌套对象/数组内层依旧是引用constlist[{x:1}]constcopy[...list]copy[0].x99;// 原数组对象也会被修改对象扩展只能用于对象字面量不能直接对对象用...obj单独写...obj// ❌语法错误只能放在 {} / [] 里面解构中...rest只能在末尾放前面报错const[...rest,last][1,2,3]// ❌报错只能用于可迭代对象普通对象不能用...放到数组[...obj]❌剩余运算符 vs 扩展运算符 长得一样行为相反...在赋值右边扩展展开constarr2[...arr]...在赋值左边剩余收集const[a,...rest]arrconst{name,...other}obj高频业务场景速记数组/对象浅复制[...arr]{...obj}数组合并[...a,...b]对象合并{...o1,...o2}函数传参展开fn(...arr)数组去重[...new Set(arr)]解构收集剩余const [x,...rest] JS 扩展运算符 `...`
JS 扩展运算符...展开运算符...把可迭代对象数组、字符串、Set、Map拆成一个个独立元素对象则拆解键值对。一、数组上使用1. 复制数组浅拷贝constarr[1,2,3]constarr2[...arr]// arr2 [1,2,3]新数组改arr2不影响原arr⚠️ 浅拷贝数组里面如果是对象拷贝的是引用。2. 合并数组consta[1,2]constb[3,4]constc[...a,...b,5]// [1,2,3,4,5]3. 把数组展开作为函数参数替代applyconstnums[10,20,30]Math.max(...nums)// 30// 等价 Math.max(10,20,30)4. 数组解构配合扩展...只能放在最后一位const[first,...rest][1,2,3,4]// first1 rest[2,3,4]二、对象上使用 ES61. 对象浅拷贝constobj{name:张三,age:18}constobj2{...obj}2. 合并对象后面覆盖前面同名keyconsto1{a:1,b:2}consto2{b:99,c:3}constres{...o1,...o2}// {a:1, b:99, c:3} 后面b覆盖前面b3. 修改部分属性保留原有业务最常用constuser{name:小明,age:20,sex:男}constnewUser{...user,age:21}// {name:小明,age:21,sex:男}4. 对象解构 扩展const{name,...other}{name:小李,age:18,id:1001}// name小李 other{age:18,id:1001}// ...rest必须放解构最后三、字符串展开conststrhelloconsole.log([...str])// [h,e,l,l,o]四、Set去重经典面试constarr[1,2,2,3,3,3]constunique[...newSet(arr)]// [1,2,3]⚠️重要注意点只是浅拷贝嵌套对象/数组内层依旧是引用constlist[{x:1}]constcopy[...list]copy[0].x99;// 原数组对象也会被修改对象扩展只能用于对象字面量不能直接对对象用...obj单独写...obj// ❌语法错误只能放在 {} / [] 里面解构中...rest只能在末尾放前面报错const[...rest,last][1,2,3]// ❌报错只能用于可迭代对象普通对象不能用...放到数组[...obj]❌剩余运算符 vs 扩展运算符 长得一样行为相反...在赋值右边扩展展开constarr2[...arr]...在赋值左边剩余收集const[a,...rest]arrconst{name,...other}obj高频业务场景速记数组/对象浅复制[...arr]{...obj}数组合并[...a,...b]对象合并{...o1,...o2}函数传参展开fn(...arr)数组去重[...new Set(arr)]解构收集剩余const [x,...rest]