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

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

    좋은 웹페이지 즐겨찾기