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){
            throw new Error('数值太小了！');
        }
        this._whells = value;
    }
}

2. プロパティ名の式

JavaScript でオブジェクトのプロパティを定義するには 2 つの方法があります。

//方法一
obj.foo = true;
//方法二
obj['a'+'bc'] = 123;

上記のコードの最初の方法は、識別子を属性名として直接使用することであり、2 つ目の方法は、式を属性名として使用することです。この場合、式を角かっこで囲みます。
ただし、リテラルを使用してオブジェクトを定義する場合 (中括弧を使用)、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] は [object object] を取得するため、[keyB] は [keyA] を上書きし、myObject は 1 つだけです最後に[object object]属性。

メソッドの 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 キーワード

このキーワードは常に For the関数が配置されている現在のオブジェクトに加えて、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 中国語 Web サイトの他の関連記事を参照してください。