이 기사의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!