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 속성 은 함수 이름 을 되 돌려 줍 니 다.대상 방법 도 함수 이기 때문에 함수 이름 도 있 습 니 다.
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()
방법 은 원본 대상 의 매 거 진 속성 을 대상 으로 복사 하 는 데 사용 된다.그것 은 적어도 두 개의 인자 가 필요 하 다.첫 번 째 는 목표 대상 이 고 뒤의 것 은 모두 소스 대상 이다.주의:
Object.assign
자신의 속성 만 복사 하고 셀 수 없 는 속성 과 계승 속성 은 복사 되 지 않 습 니 다
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]
기타 용도대상 의 속성 이 하나 도 없 으 면 설명 대상(Descriptor)이 있 습 니 다.
Object.getOwnPropertyDescriptor(object,prop)
,object 를 통 해 대상 을 표시 할 수 있 습 니 다.prop 는 대상 의 속성 중 하 나 를 표시 합 니 다.사용 할 때 따옴표 가 필요 합 니 다.설명 대상 에 enumerable(매 거 진 가능)속성 이 있 습 니 다.이 속성 이 매 거 진 가능 한 지 설명 합 니 다.ES5 에 서 는 enumerable 이 false 인 속성 을 무시 합 니 다.
for…in
순환:대상 자체 와 계승 만 옮 겨 다 니 는 매 거 진 속성(계승 포함)Object.keys()
:대상 자체 의 매 거 진 속성 을 되 돌려 주 는 키Json.stringify()
:직렬 화 대상 자체 의 매 거 진 속성 만Object.assign()
:대상 자체 의 매 거 진 속성 만 복사Reflect.enumerate()
:모든for…in
순환 이 옮 겨 다 니 는 속성 을 되 돌려 줍 니 다(계승 포함)ES6 에는 대상 의 속성 을 옮 겨 다 닐 수 있 는 6 가지 방법 이 있 습 니 다.
for…in
대상 자체 와 계승 할 수 있 는 매 거 진 속성 순환(Symbol 속성 포함 하지 않 음)Object.keys(obj)
한 배열 을 되 돌려 줍 니 다.대상 자체(계승 포함 되 지 않 음)의 모든 매 거 진 속성(Symbol 속성 은 포함 되 지 않 지만 매 거 진 속성 은 포함 되 어 있 습 니 다)Object.getOwnPropertySymbols(obj)
대상 자체 의 모든 Symbol 속성 을 포함 하 는 배열 을 되 돌려 줍 니 다.Relect.ownKeys(obj)
한 배열 을 되 돌려 줍 니 다.대상 의 모든 속성 을 포함 하고 속성 명 은 Symbol 이나 문자열 을 포함 하 며 매 거 진 여부 에 관 계 없 이Reflect.enumerate(obj)
Iterator 대상 을 되 돌려 줍 니 다.대상 자체 와 계승 할 수 있 는 모든 매 거 진 속성(Symbol 포함 하지 않 음)은 for...in 과 같 습 니 다
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}
총결산이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.