es6의 새로운 기능은 무엇입니까?-일반적인 문제-php.cn

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

coldplay.xixi

풀어 주다： 2023-01-13 00:32:58

원래의

106091명이 탐색했습니다.

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

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

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

es6 새로운 기능:

1. 객체에 속성 추가

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

const user = { id: 10, name: &#39;Tom&#39;}const userWithPass = { ...user, password: &#39;Password!&#39; }user //=> { id: 10, name: &#39;Tom&#39; }userWithPass //=> { id: 10, name: &#39;Tom&#39;, password: &#39;Password!&#39; }

로그인 후 복사

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

2. 객체 병합

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

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

로그인 후 복사

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

const partial = { id: 100, name: &#39;Howard Moon&#39; }const user = { ...partial, id: 100, password: &#39;Password!&#39; }user //=> { id: 100, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39; }

로그인 후 복사

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

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

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

로그인 후 복사

4. 동적으로 속성 삭제

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

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

로그인 후 복사

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

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

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

로그인 후 복사

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

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

로그인 후 복사

6. 기본 속성

const user2 = { id: 200, name: &#39;Vince Noir&#39;}const user4 = { id: 400, name: &#39;Bollo&#39;, quotes: ["I&#39;ve got a bad feeling about this..."]}const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes })setDefaults(user2)//=> { id: 200, name: &#39;Vince Noir&#39;, quotes: [] }setDefaults(user4)//=> {//=> id: 400,//=> name: &#39;Bollo&#39;,//=> quotes: ["I&#39;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: &#39;Bob Fossil&#39; }//将大写ID改成了小写的

로그인 후 복사

8. 조건부 속성

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

const user = { id: 100, name: &#39;Howard Moon&#39; }const password = &#39;Password!&#39;const userWithPassword = { ...user, id: 100, ...(password && { password })}userWithPassword //=> { id: 100, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39; }

로그인 후 복사