ES6 자세히 보기 - 확장 객체의 기능

4384 단어 ES6

대상 글꼴 문법 확장


대상의 글씨체가 이렇게 유행하는 이유는 우리가 대상을 만들려면 불필요한 코드를 작성하지 않고 간결한 문법을 통해 실현할 수 있기 때문이다.ES6에서는 다음과 같은 구문을 사용하여 객체의 글자 크기를 더욱 강력하고 간결하게 만듭니다.

속성 초기 값의 약자


ES5 이전 릴리즈에서는 객체의 글꼴 크기가 단순 키 값 쌍 집합에 불과하므로 속성 값을 초기화할 때 중복되는 경우가 있습니다.다음과 같습니다.
function createPerson(name,age){
    return {
        name:name,
        age:age
    };
}

이 코드의createPerson() 함수는 하나의 대상을 만들었는데 그 속성 이름은 함수의 매개 변수와 같다. 되돌아오는 결과에서name과age는 각각 두 번 반복되었다. 그 중 하나는 대상 속성의 이름이고 다른 하나는 속성에 값을 부여하는 변수이다.
ES6에서는 속성을 초기화하는 약자 구문을 사용하여 이러한 속성 이름과 로컬 변수 사이의 중복된 쓰기를 제거할 수 있습니다.대상의 속성이 로컬 변수와 동명일 때, 사칭과 값을 쓸 필요가 없고, 간단하게 속성 이름만 쓰면 된다.다음과 같습니다.
function createPerson(name,age){
    return {
        name,
        age
    };
}

대상의 글씨체에 하나의 속성의 이름만 있을 때javascript 엔진은 접근 가능한 역할 영역에서 같은 이름의 변수를 찾습니다.만약 찾으면, 이 변수의 값은 대상의 글꼴 양의 동명 속성에 부여됩니다.이 예에서 대상의 글꼴 속성name은 국부 변수name의 값을 부여합니다.

대상 방법의 약자 문법


ES5 이전 릴리즈에서 객체에 메서드를 추가하려면 이름을 지정하고 함수를 완전하게 정의해야 합니다.
var person = {
    name:"Jane",
    sayName:function(){
        console.log(this.name);
    }
};

ES6에서는 콜론 및 function 키워드를 제거하는 간단한 구문을 사용합니다.
var person = {
    name:"Jane",
    sayName() {
        console.log(this.name);
    }
};

새로운 방법


Object.is () 방법


JavaScript에서 두 값을 비교하고 싶을 때, 같은 연산자 (==) 또는 전체 연산자 (=====) 를 사용하는 데 익숙해질 수 있으며, 많은 개발자들이 비교할 때 강제 형식 전환을 촉발하는 행위를 피하기 위해 후자를 더 좋아한다.그러나 전등 연산자도 완전히 정확하지 않다. 예를 들어 +0과-0은 자바스크립트 엔진에서 두 개의 완전히 다른 실체로 표시되고 전등 연산자===를 사용하여 둘을 비교하면 두 개의 실체가 같다.마찬가지로 NaN==NaN의 반환값은false이며 isNaN() 방법을 사용해야만 NaN을 정확하게 검출할 수 있습니다.
ES6 Object 도입.is () 방법은 전등 연산자의 부정확한 연산을 보완한다.이 방법은 두 개의 매개 변수를 받아들인다. 만약 이 두 매개 변수의 유형이 같고 같은 값을 가진다면true를 되돌려줍니다.
console.log(+0 == -0);//true 
console.log(+0 === -0);//true
console.log(Object.is(+0,-0));//false

console.log(NaN == NaN);//false
console.log(NaN === NaN);//false
console.log(Object.is(NaN,NaN));//true

console.log(5 == 5);//true
console.log(5 === 5);//true
console.log(5 == "5");//true
console.log(5 === "5");//false
console.log(Object.is(5,5));//true
console.log(Object.is(5,"5"));//false

Object.assign () 방법


    Object.assign () 방법은 임의의 수량의 원본 대상을 받아들일 수 있고 지정한 순서에 따라 속성을 수신 대상에 복사할 수 있기 때문에 여러 개의 원본 대상이 같은 이름의 속성을 가지고 있다면, 순위 뒤의 원본 대상은 순위 앞의 것을 덮어씁니다. 아래와 같습니다.
var receiver = {};

object.assign(receiver,
    {
      type:"js",
      name:"file.js"
    },
     {
      type:"css"
    }
};

console.log(receiver.type);//"css"
console.log(receiver.name);//"file.js"

중복 객체 글꼴 속성


ES5 엄격 모드에는 여러 개의 동일한 이름의 속성이 동시에 존재할 때 오류가 발생하는 객체의 글꼴 반복 속성 확인이 포함됩니다.다음과 같습니다.
"use strict"

var person = {
    name:"Nicholas",
    name:"Greg"  //ES5           
};

그러나 ES6에서 반복 속성 확인이 제거되었습니다. 엄격 모드든 비엄격 모드든 코드는 반복 속성을 더 이상 검사하지 않으며 각 반복 속성 세트에 대해 다음과 같은 마지막 값을 선택합니다.
"use strict"

var person = {
    name:"Nicholas",
    name:"Greg"  //ES6           
};

console.log(person.name);//"Greg"

고유 속성 열거 순서


고유 속성 열거 순서의 기본 규칙은 다음과 같습니다.
  • 모든 숫자 키는 오름차순으로 정렬
  • 모든 문자열 키는 가입 대상의 순서대로 정렬
  • 모든symbol키는 가입 대상의 순서에 따라 정렬
  • var obj = {
        a:1,
        0:1,
        c:1,
        2:1,
        b:1,
        1:1
    };
    obj.d = 1;
    console.log(Object.getOwnPropertyNames(obj).join(""));//"012acbd"

    대상의 원형을 바꾸다


    ES5에 Object가 추가되었습니다.getPrototypeOf () 방법은 임의로 지정한 대상의 원형을 되돌려주지만, 대상이 실례화된 후에 원형을 바꾸는 표준 방법이 부족합니다.그래서 ES6에 Object를 추가했습니다.setPrototypeOf () 방법으로 이 상황을 바꿀 수 있습니다. 이 방법을 통해 임의로 지정한 대상의 원형을 바꾸고 두 가지 파라미터를 받아들일 수 있습니다. 원형이 바뀐 대상과 첫 번째 파라미터의 원형을 대체하는 대상입니다.다음과 같습니다.
    let person = {
        getGreeting(){
          return "Hello";
        }
    };
    
    let dog = {
        getGreeting(){
          return "Woof";
        }
    };
    
    // person     
    let friend = Object.create(person);
    console.log(friend.getGreeting());//"Hello"
    console.log(Object.getPrototypeOf(friend) === person);//true
    
    //      dog
    Object.setPrototypeOf(friend,dog);
    console.log(friend.getGreeting());//"Woof"
    console.log(Object.getPrototypeOf(friend) === dog);//true

    좋은 웹페이지 즐겨찾기