ES6 학습 강좌 대상 의 확장 상세 설명

하나 속성의 간결 한 표현법
ES6 는 변수 와 함 수 를 대상 으로 하 는 속성 과 방법 을 직접 기록 할 수 있 습 니 다.대상 에 속성 명 만 쓸 수 있 고 속성 값 을 쓰 지 않 아 도 된다 는 뜻 이다.이 때 속성 값 은 속성 이름 이 대표 하 는 변수 와 같 습 니 다.다음은 각각 하나의 예 를 들 어 설명 한다.
속성:

function getPoint(){
 var x = 1 ;
 var y = 2;
 return {x,y}
}

...과 같다

fucntion getPoint(x,y){
 var x = 1 ;
 var y = 2;
 return {x:x,y:y}
}

테스트:

getPoint();//{x:1,y:10}

함수:

var obj = {
 fun(){
 return "simply function";
 }
};

...과 같다

var obj = {
 fun: function(){
 return "simply function";
 }
}

테스트:

obj.fun();//simply function

속성 명 표현 식
ES6 에 서 는 대상 을 정의 할 때 표현 식 을 대상 의 속성 명 이나 방법 명 으로 사용 할 수 있 습 니 다.즉,표현 식 을 괄호 안에 넣 습 니 다.
속성

let propKey = 'foo';

let obj = {
 [propKey] : true,
 ['a'+'bc'] : 123
}

테스트:

obj.foo; //true
obj.abc ; //123

방법.

let obj = {
 ['h'+'ello'](){
 return "hello world";
 }
}

테스트:

obj.hello();//hello world

주의:
속성 명 표현 식 과 프로필 표현 식 을 동시에 사용 할 수 없습니다.

//   
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

//  
var foo = 'bar';
var baz = { [foo] : 'abc'}

3.방법의 name 속성
이것 은 비교적 이해 하기 쉬 워 서 문 자 를 직접 논술 한다.
함수 의 name 속성 은 함수 이름 을 되 돌려 줍 니 다.대상 방법 도 함수 이기 때문에 함수 이름 도 있 습 니 다.

일반적인 상황 방법의 name 속성 반환 함수 명

수치 함수 라면 함수 이름 앞 에'get'

을 추가 합 니 다.

메모리 함수 라면 함수 이름 앞 에"set"

bind 방법 으로 만 든 함수 가 함수 이름 앞 에'bound'를 추가 합 니 다

Function 구조 함수 가 만 든 함수 라면 함수 이름 앞 에'anonymous'

를 추가 합 니 다.

대상 의 방법 이 Symbol 값 이 라면 name 속성 은 이 Symbol 값 에 대한 설명 을 되 돌려 줍 니 다*

4.Oject.is()Object.is()두 값 을 비교 하 는 데 사용 되 는 yan'ge 는 엄 격 히 같다.엄격 한 가격 비교 연산 자(===)의 행위 와 거의 일치한다.다른 점 은 두 가지 밖 에 없다.하 나 는+0 이 고-0 이 아니 라 다른 하 나 는 NaN 이 자신 과 같다.

+0 === -0 //true
NaN === NaN //false

Object.is(+0,-0);//false
Object.is(NaN,NaN);//true

5.Oject.assign()Object.assign()방법 은 원본 대상 의 매 거 진 속성 을 대상 으로 복사 하 는 데 사용 된다.그것 은 적어도 두 개의 인자 가 필요 하 다.첫 번 째 는 목표 대상 이 고 뒤의 것 은 모두 소스 대상 이다.
주의:

매개 변 수 는 대상 이 어야 합 니 다.그렇지 않 으 면 TypeError 오류 가 발생 할 수 있 습 니 다.

대상 이 원본 대상 과 동명 의 속성 이 있 거나 여러 원본 대상 이 동명 의 속성 이 있 으 면 뒤의 속성 은 앞의 속성

을 덮어 씁 니 다.

Object.assign자신의 속성 만 복사 하고 셀 수 없 는 속성 과 계승 속성 은 복사 되 지 않 습 니 다

속성 명 Symbol 값 의 속성 도 Object 에 의 해.assign 복사.

demo：

var target = {a:1,b:2};

var source1 = {a:2,c:5};
var source2 = {a:3,d:6};

Object.assign(target,source1,source2);
target//{a:3,b:2,c:5,d:6}

Object.assign배열 을 처리 할 수 있 지만 대상 으로 볼 수 있다.

Object.assign([1,2,3],[4,5]);
//[4,5,3]

기타 용도

대상 에 속성 추가

대상 추가 방법

클론 대상

여러 대상 통합

속성 에 기본 값 지정

6.속성의 매 거 성
대상 의 속성 이 하나 도 없 으 면 설명 대상(Descriptor)이 있 습 니 다.Object.getOwnPropertyDescriptor(object,prop),object 를 통 해 대상 을 표시 할 수 있 습 니 다.prop 는 대상 의 속성 중 하 나 를 표시 합 니 다.사용 할 때 따옴표 가 필요 합 니 다.설명 대상 에 enumerable(매 거 진 가능)속성 이 있 습 니 다.이 속성 이 매 거 진 가능 한 지 설명 합 니 다.
ES5 에 서 는 enumerable 이 false 인 속성 을 무시 합 니 다.

for…in순환:대상 자체 와 계승 만 옮 겨 다 니 는 매 거 진 속성(계승 포함)

Object.keys():대상 자체 의 매 거 진 속성 을 되 돌려 주 는 키

Json.stringify():직렬 화 대상 자체 의 매 거 진 속성 만

ES6 추가 동작

Object.assign():대상 자체 의 매 거 진 속성 만 복사

Reflect.enumerate():모든for…in순환 이 옮 겨 다 니 는 속성 을 되 돌려 줍 니 다(계승 포함)

7.속성의 이동
ES6 에는 대상 의 속성 을 옮 겨 다 닐 수 있 는 6 가지 방법 이 있 습 니 다.

for…in대상 자체 와 계승 할 수 있 는 매 거 진 속성 순환(Symbol 속성 포함 하지 않 음)

Object.keys(obj)한 배열 을 되 돌려 줍 니 다.대상 자체(계승 포함 되 지 않 음)의 모든 매 거 진 속성(Symbol 속성 은 포함 되 지 않 지만 매 거 진 속성 은 포함 되 어 있 습 니 다)

Object.getOwnPropertySymbols(obj)대상 자체 의 모든 Symbol 속성 을 포함 하 는 배열 을 되 돌려 줍 니 다.

Relect.ownKeys(obj)한 배열 을 되 돌려 줍 니 다.대상 의 모든 속성 을 포함 하고 속성 명 은 Symbol 이나 문자열 을 포함 하 며 매 거 진 여부 에 관 계 없 이

Reflect.enumerate(obj)Iterator 대상 을 되 돌려 줍 니 다.대상 자체 와 계승 할 수 있 는 모든 매 거 진 속성(Symbol 포함 하지 않 음)은 for...in 과 같 습 니 다

상기 6 가지 방법 으로 대상 의 속성 을 옮 겨 다 니 며 같은 속성 을 옮 겨 다 니 는 순서 규칙 을 준수 합 니 다.

먼저 모든 속성 이름 이 수치 인 속성 을 옮 겨 다 니 며 숫자 에 따라 정렬

그 다음 에 모든 속성 이름 이 문자열 인 속성 을 옮 겨 다 니 며 생 성 시간 에 따라 정렬

마지막 으로 모든 속성 이름 이 Symbol 값 인 속성 을 옮 겨 다 니 며 생 성 시간 에 따라 정렬

Reflect.ownkeys({[Symbol()]:0,b:0,10:0,2:0,a:0})
//[‘2','10','b','a',Symbol()]

여덟, proto 속성,Object.setPrototypeOf(),Object.getPrototypeOf()
proto 속성
(앞 뒤 에는 밑줄 이 두 개 있어 야 하 는데 여기 에는 표시 되 지 않 았 다).현재 대상 을 읽 거나 설정 하 는 prototype 대상 입 니 다.그러나 일반적으로 이 속성 을 직접 조작 하지 않 고Object.setProtortypeOf() (쓰기 조작),Object.getPrototypeOf()(읽 기 조작)또는Object.create() (생 성 조작)을 통 해 대체 합 니 다.Object.setProtortypeOf()

let proto = {};
let obj = { x : 10};
Object.setProtortypeOf(obj,proto);

proto.y = 20;
proto.z = 40;

obj.x //10
obj.y //20
obj.z //40

Object.getProtortypeOf()

function Rectangle(){}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangele.prototype // true

9.대상 의 확장 연산 자
ES7 에 서 는 rest 인자/확장 연산 자(...)를 대상 에 도입 하 는 것 을 제안 합 니 다.
나머지 매개 변수
Rest 매개 변 수 는 한 대상 에서 값 을 추출 하 는 데 사 용 됩 니 다.읽 히 지 않 은 모든 속성 을 제 정 된 대상 에 할당 하 는 것 과 같 습 니 다.모든 키 와 값 은 새 대상 에 복 사 됩 니 다.주의해 야 할 것 은 rest 매개 변수의 복 제 는 얕 은 복사 이 며,원형 대상 의 속성 을 복사 하지 않 습 니 다.
간단 한 데모

 let {x,y,...k} = {x:2, y:3,z:4,a:5};
x //2
y //3
k //{z:4,a:5}

확장 연산 자
확장 연산 자 는 매개 변수 대상 의 모든 속성 을 추출 하여 현재 대상 으로 복사 합 니 다.

let z = {a:3 ,b:4};
let n = {...z};
n //{a:3,b:4}

확장 연산 자 는 두 대상 을 합 칠 수 있다.

let a = { c:5,d:6 };
let b = { e:7,f:8 };
let ab = {...a,...b};
ab //{c:5,d:6,e:7,f:7}

확장 연산 자 는 속성 을 사용자 정의 할 수 있 으 며,새 대상 에서 기 존 인 자 를 덮어 씁 니 다.

let a = {x:1,y:2};
let aWithOverides = {...a,x:3,y:4};
aWithOverides //{x:4,y:4}

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.