Overview:
ES2015 extended array: the array extended operator
ES2015 function expansion: rest / spread parameters (return function nuisance parameter)
ES2019 Extended Object: Object extended operator
First, the operator uses the array of extension
Cloning const arr = [... arr1]
The combined const arr = [... arr1, ... arr2]
Splicing array arr.push (... arr1)
To re-string [... new Set (str)]. Join ( "")
Deduplication Array [... new Set (arr)]
Instead of Apply Math.max.apply(null, [x, y])=>Math.max(...[x, y])
Convert a string to an array [..."hello"]
An array of array-conversion object [...Arguments, ...NodeList]
Conversion may be an array traverse the object [...String, ...Set, ...Map, ...Generator]
Combined with an array of deconstruction assignment const [x, ...rest/spread] = [1, 2, 3]
Calculation Unicode string length Array.from("hello").length=>[..."hello"].length
Second, the operator uses the object extension
Clone (deep clone) const obj = { __proto__: Object.getPrototypeOf(obj1), ...obj1 }
Merge objects const obj = { ...obj1, ...obj2 }
Converts a string to an object { ..."hello" }
Converted into an array of objects { ...[1, 2] }
Combined with the object destructuring assignment const { x, ...rest/spread } = { x: 1, y: 2, z: 3 }
Some of the properties to modify existing objects const obj = { x: 1, ...{ x: 2 } }
Add property { ... { id: 100, name: 'Howard Moon'}, password: 'Password!' }
Merge objects { ...{ id: 100, name: 'Howard Moon' }, ...{ id: 100, password: 'Password!' }}
Remove object properties ({ password, ...{ id: 100, name: 'Howard Moon', password: 'Password!' }}) => rest
Remove dynamic object properties password({ [password]: _, ...{ id: 100, name: 'Howard Moon', password: 'Password!' }}) => rest
Default properties ({ quotes = [], ...object}) => ({ ...object, quotes })
Renaming property ({ ID, ...object }) => ({ id: ID, ...object })
Sort Properties object => ({ id: undefined, ...object })
Third, the destructuring assignment operator with the remaining
let {a, b, ...rest} = {a:10, b:20, c:30, d:40}
//a = 10,b = 20, rest = {c:30, d:40}
Fourth, deconstruction assignment
Exchange value [a, b] = [b, a]
Nested deconstruction {p: [x, {y}]} = {p: [ 'hello', {y: 'world'}]}
//x = 'hello' y='world'
V. Description
Extended operator converter array / list object segmentation parameters are good
Inverse rest / spread parameters
Operators will rest deconstruction source other than the specified attributes in the object in a literal, all enumerated attributes copied to its own calculation target
Internal object literal, Spread operator to enumerate all the operands own property itself, created by the insertion into the object from the surface in an amount of
Reference article:
15000 words summed ES6 all the features (see Figure will be able to write down, worthy of collection) https://juejin.im/post/5d9bf530518825427b27639d#heading-36
Object extension operator 7 kinds of skills https://www.jianshu.com/p/8ec8ca63c12b
ES6 deconstruction assignment https://www.runoob.com/w3cnote/deconstruction-assignment.html