ES6 학습 요약(둘)

18289 단어 웹 프런트엔드

객체 확장


문법의 조정 1. 중복 정의된 속성에 대한 검사를 추가하여 마지막 속성을 실제 값으로 한다.
var obj1 = {
    name: "digua",
    name: "tudou"
} //  tudou, es5 

2. 대상의 속성을 규정하는 매거 순서는 주로 Object에 나타난다.getOwnPropertyNames 및 Reflect.ownKeys 방법상.열거 순서는 다음과 같다. (1) 모든 숫자 유형 키는 오름차순으로 배열되고, (2) 문자열 유형은 대상에 추가된 순서(3) 기호 유형 키는 대상에 추가된 순서대로 배열된다.
대상 정의 속성의 확장 1. 대상을 만들 때 더욱 간결한 방법이 있다. ES5가지 대상 정의 표현 방법은 키 값 쌍의 조합이어야 한다. 그러면 일부 상황에서 대상은 초기화할 때 중복될 수 있다.
//ES5
function createJson (name, age) {
   return {
       name: name,
       age: age
   }
}

위의 코드는 ES6에서 더 쉽게 작성할 수 있습니다.
//ES6
function createJson (name, name) {
    return {
        name,
        age    
    }
}
// ,js 

ES6에서도 객체 접근 방식이 단순화됨
//es5
var person = {
    name: 'demo',
    dosomething: function () { console.log(this.name) }
}
//es6
let person = {
    name: 'demo',
    dosomething() { console.log(this.name) }
}

2.'【]'정의와 대상 속성에 접근하는 기능을 확장하여 동적 속성 이름을 지원할 수 있다.
// es6
let first = "name"
let person = {
   [first + ' a']: 'digua',
   [first + ' b']: 'tudou'
}
console.log(person) // person: {"name a": "digua", "name b": "tudou"}
console.log(person[first + ' a']) // digua

Object 객체에 대한 새로운 메서드 1, Object.is(param1,param2) 방법은 전달된 매개 변수가 같은지 비교하는 데 사용되며'=='전등 비교의 일부 부족함을 보완했다. 대부분의 경우 전등 비교 결과와 같다.
// === 
console.log(5 === "5")  // false
console.log(+0 === -0) // true
console.log(NaN === NaN) // false
// Object.is()
Object.is(5, "5") // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

2、Obeject.assign () 방법 이 방법은 원본 대상에서 목표 대상에 대한 얕은 복사 (얕은 복사) 를 하는데 사용된다. 즉, 복사된 원본 대상의 속성이 하나의 대상일 때 복제하는 것은 그 인용이다.원본 대상의 대상 속성의 어떤 변화도 목표 대상에 반영되고 반대로도 마찬가지다.전례대로
let obj1 = { name: "digua", person: { name: "tudou" } }
let obj2 = { age: "100" }
Object.assign(obj2, obj1)
obj2.name // digua
obj2.person.name = "coco"
obj1.person.name // coco   obj2 

3、Object.getPrototypeof () 방법 이 방법은 임의로 지정한 대상의 원형을 수정할 수 있습니다.예컨대
let person = {
    sayName() {
      return "digua"
    }
}
let dog = {
    sayName() {
      return "kk"
    }
}
let friend = Object.create(person)
console.log(friend.sayName()) // digua
console.log(Object.getPrototypeOf(friend) === person) //true
// setPrototypeOf 
Object.setPrototypeOf(friend, dog)
console.log(friend.sayName()) // kk
console.log(Object.getPrototypeOf(friend) === dog) //true

슈퍼 () 를 사용하여 원형의 방법을 호출합니다. 슈퍼 () 로 호출된 방법은 내부의this 귀속을 설정하여 이this 값을 자동으로 사용하여 작업을 진행합니다.이것은 이 ES5에서 사용하는 Object보다 낫다.getPrototypeOf () 와call () 을 결합하여 사용하면 원형적인 방법을 호출하는 것이 더욱 간편하고 발생할 수 있는 오류도 줄일 수 있습니다.예컨대
// es5
let person = {
	sayname() {
	   return "Hello";
	}
};
//   person
let friend = {
	sayname() {
	return Object.getPrototypeOf(this).sayname.call(this) + ", hi!";
	}
};
Object.setPrototypeOf(friend, person);
//   friend
let relative = Object.create(friend);
console.log(person.sayname()); // "Hello"
console.log(friend.sayname()); // "Hello, hi!"
console.log(relative.sayname()); // error!
// relative this friend 

//es6   friend sayname super   , this person 
let friend = {
	sayname() {
	   return super.sayname() + ", hi!";
	}
};

[[HomeObject]] 함수 내부 속성이 새로 추가되었습니다. 함수에 내부 속성이 [[HomeObject]]이면 이 함수는 하나의 방법으로 분류됩니다.
let person = {
    sayname() {
       console.log('digua')
   }
}
//  person.sayname   [[HomeObject]] person

좋은 웹페이지 즐겨찾기