扩展运算符的使用技巧

Posted 2020-11-22 bearrunning

概述：

ES2015数组扩展:数组的扩展运算符

ES2015函数扩展:rest/spread参数(返回函数多余参数)

ES2019对象扩展:对象的扩展运算符

一、数组的扩展运算符使用

克隆 const arr = [...arr1]

合并 const arr = [...arr1,...arr2]

拼接数组 arr.push(...arr1)

去重字符串 [...new Set(str)].join("")

去重数组 [...new Set(arr)]

代替apply Math.max.apply(null, [x, y]) => Math.max(...[x, y])

转换字符串为数组 [..."hello"]

转换类数组对象为数组  [...Arguments, ...NodeList]

转换可遍历对象为数组 [...String, ...Set, ...Map, ...Generator]

与数组解构赋值结合 const [x, ...rest/spread] = [1, 2, 3]

计算Unicode字符串长度 Array.from("hello").length => [..."hello"].length

 

二、对象的扩展运算符使用

克隆对象(深克隆) const obj = { __proto__: Object.getPrototypeOf(obj1), ...obj1 }

合并对象 const obj = { ...obj1, ...obj2 }

转换字符串为对象 { ..."hello" }

转换数组为对象 { ...[1, 2] }

与对象解构赋值结合 const { x, ...rest/spread } = { x: 1, y: 2, z: 3 }

修改现有对象部分属性 const obj = { x: 1, ...{ x: 2 } }

添加属性 { ... { id: 100, name: ‘Howard Moon‘}, password: ‘Password!‘ }

合并对象 { ...{ id: 100, name: ‘Howard Moon‘ }, ...{ id: 100, password: ‘Password!‘ }}

移除对象属性 ({ password, ...{ id: 100, name: ‘Howard Moon‘, password: ‘Password!‘ }}) => rest

动态移除对象属性 password => ({ [password]: _, ...{ id: 100, name: ‘Howard Moon‘, password: ‘Password!‘ }}) => rest

默认属性 ({ quotes = [], ...object}) => ({ ...object, quotes })

重命名属性 ({ ID, ...object }) => ({ id: ID, ...object })

属性排序 object => ({ id: undefined, ...object })

 

三、解构赋值与剩余运算符的搭配

let {a, b, ...rest} = {a:10, b:20, c:30, d:40}

//a = 10,b = 20, rest = {c:30, d:40}

四、解构赋值

交换数值 [a,b] = [b,a]

嵌套解构 {p:[x,{y}]} = {p:[‘hello‘,{y:‘world‘}]}

//x = ‘hello‘ y=‘world‘

五、说明

扩展运算符转换数组/对象为用都好分割的参数列表

rest/spread参数的逆运算

rest操作符会将解构源的除了在对象字面量中指明的属性之外的，所有可枚举自有属性拷贝到它的运算对象中

对象字面量内部，spread操作符将自身运算对象的所有可枚举的自有属性，插入到通过自面量创建的对象中

参考文章：

1.5万字概括ES6全部特性(看图就能记下，值得收藏)  https://juejin.im/post/5d9bf530518825427b27639d#heading-36

对象扩展运算符的7种技巧 https://www.jianshu.com/p/8ec8ca63c12b

ES6解构赋值 https://www.runoob.com/w3cnote/deconstruction-assignment.html