ES6 객체의 확장 및 새로운 메소드 요약(예제 포함)

이 기사는 ES6 객체의 확장 및 새로운 방법에 대한 요약을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 속성의 간결한 표현

ES6에서는 변수와 함수를 객체의 속성과 메서드로 직접 작성할 수 있습니다. 이런 종류의 글은 더 간결합니다.

const foo = 'bar';
const baz = {foo};
baz//{foo:'bar'}

//等同于
const baz = {foo:foo}

위 코드는 ES6에서 변수를 객체에 직접 작성할 수 있음을 보여줍니다. 이때 속성명은 변수명, 속성값은 변수의 값이 된다. 또 다른 예가 있습니다.

function f(x,y){
    return {x,y}
}
//等同于
function f(x,y){
    return {x:x,y:y};
}
f(1,2)//{x:1,y:2}

속성 약어 외에도 메소드도 약어화할 수 있습니다.

const o ={
    method(){
        return 'Hello!'
    }
}
//等同于
const o = {
    method:function(){
        return 'Hellow';
    }
}

다음은 실제적인 예입니다.

let birth = '2000/01/01';
const Person ={
    name:'张三',
    //等同于birth：birth
    birth,
    //等同于hello :function()....
    hello(){
        console.log('我的名字是',this.name) 
    }
}

이러한 작성 방법은 함수의 반환 값에 매우 편리합니다.

function getPoint(){
    const x =1;
    const y = 10;
    return {x,y}
}
getPoint()//{x:1,y:10}

CommonJS 모듈은 변수 세트를 출력하므로 간결한 글쓰기에 매우 적합합니다.

let ms = {};
function getItem(key){
    return key in ms ?ms[key]:null;
}
function setItem(key,value){
    ms[key] = value;
}
function clear(){
    ms={}
} 
module.exports = {getItem,setItem,clear};
//等同于
module.exports = {
    getItem:getItem,
    setItem:setItem,
    clearLclear
}

속성의 setter와 getter는 실제로 이런 식으로 작성됩니다.

const cart = {
    _wheels:4,
    get wheels(){
        return this._wheels;
    },
    set wheels (value){
        if(value<this._wheels><p><strong>2. 속성 이름 표현</strong></p>
<p>JavaScript에서 객체의 속성을 정의하는 방법에는 두 가지가 있습니다. </p>
<pre class="brush:php;toolbar:false">//方法一
obj.foo = true;
//方法二
obj['a'+'bc'] = 123;

위 코드의 첫 번째 방법은 식별자를 속성 이름으로 직접 사용하는 것이고, 두 번째 방법은 표현식을 속성 이름으로 사용하는 것입니다. 이 경우 표현식을 대괄호 안에 넣으세요.
그러나 리터럴을 사용하여 객체를 정의하는 경우(중괄호 사용) ES5에서 속성을 정의하는 데 방법 1(식별자)만 사용할 수 있습니다.

var obj ={
    foo:true,
    abc:123
}

ES6에서는 객체를 정의할 때 리터럴을 사용할 수 있습니다. 방법 2는 객체의 속성 이름으로 사용됩니다. 즉, 표현식이 괄호 안에 배치됩니다.

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

여기 또 다른 예가 있습니다:

let lastWord = 'last word';
const a = {
    'first word':'hello',
    [lastWord]:'world'
};
a['first word']//hello
a[lastWord]//world
a['last word']//world

표현식은 메소드 이름을 정의하는 데에도 사용될 수 있습니다.

let obj = {
    ['h'+'ello'](){
        return 'hi'
    }
}
obj.hello()//hi;

참고:

属性名表达式与简洁表示法，不能同时使用，会报错。
属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object object],这一点要特别小心。

const keyA = {a:1};
const keyB = {b:2};
const myObject = {
    [keyA]:'valueA',
    [keyB]:'valueB'
};
myObject;// Object {[object Object]: "valueB"}

위 코드에서 [keyA] 및 [keyB]는 [객체 객체]를 모두 가져오므로 [keyB]는 [keyA]를 덮어쓰고 myObject는 끝에 하나의 [객체 객체] 속성만 갖습니다. .

메서드의 name 속성

함수의 name 속성은 함수 이름을 반환합니다. 객체 메서드도 함수이므로 name 속성도 갖습니다.

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

속성의 열거 가능한 유형 및 탐색

객체의 각 속성에는 속성 변경 동작을 제어하는 ​​데 사용되는 설명 객체가 있습니다. Object.getOwnPropertyDescriptor(obj,'foo') 메소드는 속성의 설명 객체를 얻을 수 있습니다.
열거 가능성이라는 개체의 열거 가능 특성을 설명합니다. 이 특성이 false인 경우 특정 작업이 현재 특성을 무시한다는 의미입니다.
현재 열거 가능 값이 false인 속성을 무시하는 4가지 작업이 있습니다.

for...in循环：只遍历对象自身的和继承的可枚举的属性。(不包含Symbol属性)
Object.keys():返回对象自身的所有可枚举的属性的键名,返回一个数组。(不包含Symbol)
JSON.stringify():只串行化对象自身的可枚举的属性。
object.assign():忽略enumrable为false的属性，只拷贝对象自身的可枚举的属性。

ES6에는 객체의 속성을 탐색하는 총 5가지 메서드가 있습니다.
(1) for...in

for...in循环遍历对象自身的和继承的可枚举属性(不包含Symbol属性)。

(2) Object.keys(obj)

object.keys返回一个数组，包含对象自身的（不含继承的）所有可枚举属性（不包含Symbol属性）的键名。

(3) Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有属性(不含Symbol属性，但是包括不可枚举属性)的键名。

(4) Object.getOwnPropertySymbols(obj)

返回一个数组，包含对象自身的所有Symbol属性的键名。

(5 ) Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是Symbol或字符串，也不管是否可枚举。

super 키워드

우리는 this 키워드가 항상 함수가 있는 현재 객체를 가리킨다는 것을 알고 있으며, ES6에는 현재의 프로토타입 객체를 가리키는 또 다른 유사한 키워드 super를 추가했습니다. 물체.

const proto = {
    foo:'hello'
};
const obj = {
    foo:'world',
    find(){
        return super.foo;
    }
};
Object.setPrototypeOf(obj,proto);
obj.find();//hello

위 코드의 객체 obj.find() 메소드에서 프로토타입 객체 proto의 foo 속성은 super.foo를 통해 참조됩니다.
참고: super 키워드가 프로토타입 객체를 나타내는 경우 해당 객체의 메서드에서만 사용할 수 있습니다. 다른 곳에서 사용하면 오류가 보고됩니다. 현재는 객체 메소드 약어만을 사용하여 Javascript 엔진이 객체 메소드가 정의되었는지 확인할 수 있습니다.
JavaScript 엔진 내에서 super.foo는 Object.getPrototypeOf(this).foo 또는 Object.getPrototypeOf(this).foo.call(this)과 동일합니다.

객체 확산 연산자

구조 분해 할당
객체 분해 할당은 객체에서 값을 가져오는 데 사용됩니다. 이는 탐색 가능하지만 대상 객체 자체의 속성을 아직 읽지 않은 모든 속성을 지정된 객체에 할당하는 것과 같습니다. 모든 키와 해당 값이 새 개체에 복사됩니다.

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

위 코드에서 변수 z는 구조 분해 할당이 위치한 객체입니다. 등호 오른쪽에 있는 읽지 않은 모든 키(a 및 b)를 가져와 해당 값과 함께 복사합니다.

위 내용은 ES6 객체의 확장 및 새로운 메소드 요약(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!