Several magical uses of JS ES6 spread operator

1. Add attributes

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

The example copies the user object to userWithPass and adds the password property.

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

Multiple objects can be combined into a new object using ... Merge part1 and part2 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 destructuring in conjunction with the rest operator to remove properties from an object. In this example, password is deconstructed and other attributes are retained in the rest object and returned.

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

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

4. Dynamically remove attributes

Let’s look at an example. The removeProperty function accepts a parameter prop. Using the dynamic property name feature, prop can be dynamically removed from the copied object.

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 the order of attributes

Sometimes the properties of an object are not in the order we want. Using some tricks, you can move attributes to the front or back.

To move the id to the front, you can put id: undefined before the expanded object:

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

const organize = object => ({ id: undefined, ...object })
// -------------
// /
// Move id to the first attribute position organize(user3)
//=> { id: 300, password: 'Password!', name: 'Bruce' }

To move password to the last position, first deconstruct password from object, and then put 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 property default values

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

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

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 never said this..."]
}

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

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

setDefaults(user4)
//=> {
//=> id: 400,
//=> name: 'Lu Xun',
//=> quotes: ["I never said this..."]
//=> }

If you want this attribute to be at the front, you can write it like this:

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

7: Attribute renaming

Combining the previous techniques, we can write a function to rename attributes.

Suppose some objects have uppercase ID attributes, and we want to change them to lowercase. What should we do? First, deconstruct the ID value from the object, and then merge this value into the new object and change it to a lowercase id:

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

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

renamed(user) //=> { id: 500, name: '张全蛋' }

8. There are more amazing operations

You can decide whether to add a certain attribute based on conditions, which is very useful when constructing request parameters. For example, we add this attribute only if 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!' }

The above are the details of several wonderful uses of JS ES6 spread operator. For more information about JS ES6 spread operator, please pay attention to other related articles on 123WORDPRESS.COM!