ES6 adds the... Operator, which is usually used to extract the remaining parameters and expand the array in the function. But in fact, its purpose is more than that. This article introduces several techniques to use it to operate JavaScript objects.

1. Add attribute

When you copy an object, add new properties to it.

In the example, the user object is copied to userWithPass and the password property is added.

const user = { id: 110, name: 'Kayson Li'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 110, name: 'Kayson Li'}
userWithPass //=> {  id: 110, name: 'Kayson Li', password: 'Password!' }

2. Merge multiple objects

Use... To merge multiple objects into a new object. part1 and part2 merged into user1:

const part1 = {  id: 110, name: 'Kayson Li' }
const part2 = { id: 110, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 110, name: 'Kayson Li', password: 'Password!' }

3. Remove object properties

You can use a combination of deconstruction and remainder operators to remove the properties of an object. In the example, password is deconstructed, and other properties remain in the rest object and are returned.

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 110,
  name: 'Kayson Li',
  password: 'Password!'
}

noPassword(user) //=> { id: 110, name: 'Kayson Li' }

4. Remove attributes dynamically

Let's take an example. The removeProperty function takes a parameter, prop, and uses the Dynamic property name With this feature, prop can be removed from the copy object dynamically.

const user1 = {
  id: 110,
  name: 'Kayson Li',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                      Dynamic deconstruction

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 110, name: 'Kayson Li' }
removeId(user1) //=> { name: 'Kayson Li', password: 'Password!' }

5. Adjust attribute order

Sometimes the properties of objects are not in the order we want them to be. With some tricks, you can move attributes to the front or back.

In order to move the id to the front, you can put id: undefined in front of the expanded object:

const user3 = {
  password: 'Password!',
  name: 'Bruce',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  Move id to first attribute location

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Bruce' }

To move the password to the last position, first deconstruct the password from the object, and then put the password after the expanded object:

const user3 = {
  password: 'Password!',
  name: 'Bruce',
  id: 300
}

const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// Move password to the end

organize(user3)
//=> { name: 'Bruce', id: 300, password: 'Password!' }

6. Set attribute default value

When an object does not have a property, we sometimes need to add the property to the object and set a default value.

For example, user2 does not have a quotes attribute, and the setDefaults function is used to ensure that all objects have quotes and a default value of [].

Execute setDefaults(user2), and the returned object contains quotes: [].

Execute setDefaults(user4). Since user4 already has quotes, it remains unchanged.

const user2 = {
  id: 200,
  name: 'Jack Ma'
}

const user4 = {
  id: 400,
  name: 'Lu Xun',
  quotes: ["I didn't say that"]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })

setDefaults(user2)
//=> { id: 200, name: 'Jack Ma', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>Name: 'Lu Xun',
//=>Quotes: ["I didn't say that ]
//=> }

If you want this property to be at the top, you can write as follows:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7: Property rename

In combination with the previous techniques, we can write a function that renames an attribute.

Suppose that some objects have upper case ID attributes, and we want to make them all lower case, what should we do? First deconstruct the ID value from the object, then merge the value into the new object, and change it to a lower case ID:

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Zhang Quan Chen"
}

renamed(user) //=>{ID: 500, name: 'whole egg'}

8. There are more elegant operations

You can decide whether to add a property based on the condition, which is very useful when constructing request parameters. For example, we can only add this property when password has a value:

const user = { id: 110, name: 'Kayson Li' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 110, name: 'Kayson Li', password: 'Password!' }

summary

This article introduces a few little-known skills about residual parameters and extension operators, hoping to help you. If you know more tips, please share them in the comment area! More front-end technology dry cargo is in WeChat official account: 1024 translation station