es6의 새로운 기능은 무엇입니까?

es6 새로운 기능: 1. 개체에 속성 추가 3. 개체의 속성 삭제 5. 개체 속성의 위치 조정 ; 8. 조건부 속성.

이 문서의 운영 환경: Windows 7 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6 새로운 기능:

1. 객체에 속성 추가

다음 코드에 표시된 대로 객체를 복제하고 (얕은) 복제된 객체에 추가 속성을 추가합니다.

const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }userWithPass //=> { id: 10, name: 'Tom', password: 'Password!' }

이 예에서는 사용자는 userWithPass로 복제되고 userWithPass 객체는 비밀번호 속성을 추가하며 코드는 간단하고 효율적입니다.

2. 객체 병합

작동 방법을 설명하는 예를 제공합니다

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

이 예에서는 part1과 part2를 하나의 객체 user1로 병합합니다. 다음 방법으로 객체를 병합할 수도 있습니다.

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

3 . 객체의 속성을 삭제합니다

REST 연산자와 함께 소멸을 사용하여 속성을 삭제할 수 있습니다.

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

4. 동적으로 속성 삭제

객체 속성 이름을 사용한 다음, RemoveProperty에서 속성 이름을 전달하여 속성을 삭제할 수 있습니다

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

5. 객체 속성의 위치를 ​​조정합니다

때때로 속성이 변경됩니다. 우리가 필요한 순서를 충족하지 않습니다. 몇 가지 트릭을 사용하여 속성을 목록의 맨 위로 올리거나 맨 아래로 이동할 수 있습니다. 예:

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = object => ({ id: undefined, ...object })// -------------// /// move id to the first propertyorganize(user3)//=> { id: 300, password: 'Password!', name: 'Naboo' }

이 예에서는 ID가 첫 번째 위치로 이동되었습니다. 다음 예에서는 비밀번호 속성을 다음 위치로 이동합니다.

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { name: 'Naboo', id: 300, password: 'Password!' }

6. 기본 속성

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 })

7. 개체의 속성 이름을 바꿉니다.

예를 들어 일부 시나리오에서는 개체 속성의 대소문자를 변경해야 할 수 있으며 다음에서 이름을 바꿀 수 있습니다. way

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renamed(user) //=> { id: 500, name: 'Bob Fossil' }//将大写ID改成了小写的

8. 조건부 속성

이름에서 알 수 있듯이 이는 개체의 속성이 조건을 통해 제어된다는 것을 보여줍니다.

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 동영상 튜토리얼

위 내용은 es6의 새로운 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!