JavaScript 개체 Rest 및 Spread 사용에 대한 팁(코드 포함)

이 기사의 내용은 JavaScript 객체 Rest 및 Spread(코드 포함)의 사용 기술에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Rest 및 Spread 연산자는 매개변수를 휴지시키고 배열을 확장하는 것 이상의 용도로 사용할 수 있습니다.

다음은 JavaScript 개체와 함께 Rest 및 Spread를 사용하는 데 대해 잘 알려지지 않은 7가지 팁입니다.

속성 추가

(얕은) 복제된 개체에 추가 속성을 추가하면서 개체를 복제합니다.

이 예에서는 사용자가 복제되고 비밀번호 속성이 userWithPass에 추가됩니다.

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Object merge

두 개체를 새 개체로 병합합니다.

Part1과 Part2를 user1에 병합합니다.

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

객체는 다음 구문을 사용하여 병합할 수도 있습니다.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

객체 속성 제외

결합 가능 구조 분해 나머지 연산자를 사용하여 속성을 제거합니다. 여기서는 비밀번호가 제거되고 나머지 속성은 나머지로 반환됩니다.

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

동적 제외 속성

이 함수는 prop을 매개변수로 받아들입니다. 계산된 개체 속성 이름을 사용하여 복제본에서 속성을 동적으로 제거할 수 있습니다.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

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

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

속성 정렬

때때로 속성이 필요한 순서가 아닌 경우가 있습니다. 몇 가지 트릭을 사용하여 속성을 목록의 맨 위로 밀거나 맨 아래로 이동할 수 있습니다.

id를 첫 번째 위치로 이동하려면 개체를 확장하기 전에 새 개체 앞에 id: undefine을 추가하세요.

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

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

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

비밀번호를 마지막 속성으로 이동하려면 객체에서 비밀번호를 분해하세요. 그런 다음 Rest 연산자를 사용한 후 비밀번호 속성을 재설정하십시오.

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

const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// move password to last property

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

Default Properties

Default 속성은 원본 개체에 포함되지 않은 경우에만 설정되는 값입니다.

이 예에서 user2에는 quote 속성이 포함되어 있지 않습니다. setdefaults 함수는 모든 객체에 quote 속성이 설정되어 있는지 확인하고, 그렇지 않으면 []로 설정됩니다.

setDefaults(user2)를 호출하면 반환 값에 따옴표 속성([])이 포함됩니다.

setDefaults(user4)를 호출할 때 user4에는 이미 quote 속성이 있으므로 이 속성은 수정되지 않습니다.

const user2 = {
  id: 200,
  name: 'Vince Noir'
}

const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}

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

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

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

기본값을 마지막이 아닌 먼저 표시하려면 다음과 같이 작성할 수도 있습니다.

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

속성 이름 변경

결합 위의 기술을 사용하면 속성의 이름을 바꾸는 함수를 만들 수 있습니다.

ID가 대문자여야 하고 ID가 소문자여야 하는 객체 속성 이름이 있다고 가정합니다. 먼저 개체에서 ID를 분해한 다음 개체가 확산될 때 ID로 다시 추가합니다.

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

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

BONUS: 조건부 속성 추가

조건부로 속성을 추가할 수도 있다는 점을 지적해주신 @vinialbano에게 감사드립니다. 이 예에서는 비밀번호가 true인 경우에만 비밀번호가 추가됩니다!

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

이 기사는 여기서 끝났습니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript 튜토리얼 비디오 칼럼을 주목하세요!

위 내용은 JavaScript 개체 Rest 및 Spread 사용에 대한 팁(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!