ECMAScript 6の新特性——「オブジェクトの拡張」

4802 ワード

1属性の簡潔な表現法
ES 6は、オブジェクトの属性と方法として変数と関数を直接書き込むことができます.
属性を書き込み
var name = "value";
var obj = {
    name
};
console.log(obj.name); //value
書き込み方法
var func = function(){return "function"};
var obj = {
    func
};
console.log(obj.func()); //function
例を挙げます
let name = "Oliver";
let sayName = function() {
    console.log(this.name);
};
let person = {
    name,
    sayName
};
console.log(person.name); //Oliver
person.sayName(); //Oliver
伝統的な書き方:
let person = {
    name: "Oliver",
    sayName: function() {
        console.log(this.name);
    }
};
console.log(person.name); //Oliver
person.sayName(); //Oliver
属性の値を記入する必要はありません.
function log(x, y) {
    return {x, y};
}
console.log(log(1, 2)); //Object {x: 1, y: 2}
伝統的な書き方:
function log(x, y) {
    return {x: x, y: y};
}
console.log(log(1, 2)); //Object {x: 1, y: 2}
このような書き方の属性名は常に文字列です.
2属性名式
JavaScript言語には対象の属性を定義する方法があります.
var o = {};
function f() {return "boo" + "lean";}
o.bool = true; //   
o[f()] = false; //   
console.log(o); //Object {bool: true, boolean: false}
ただし、文字どおりにオブジェクトを定義する場合は、方法の一つしか使えません.
var o = {
    bool: true
};
console.log(o); //Object {bool: true}
ES 6は使用方法2をサポートします.
function f() {
    return "bool" + "ean";
}
var o = {
    bool: true,
    [f()]: false
};
console.log(o); //Object {bool: true, boolean: false}
3方法のname属性
関数のname属性は関数名を返します.オブジェクトメソッドも関数ですので、name属性もあります.
4 Object.is()
この方法は(==)と基本的に一致しています.+0は-0に等しくなく、NaNは自身に等しいです.
console.log(NaN === NaN); //false
console.log(Object.is(NaN, NaN)); //true
console.log(+0 === -0); //true
console.log(Object.is(+0, -0)); //false
5 Object.assign()
ソースオブジェクトのすべてのエニュメレート・プロパティーをターゲットオブジェクトにコピーします.最初のパラメータはターゲットオブジェクトで、その後のパラメータはソースオブジェクトです.
var o1 = {
    a: 1
};
var o2 = {
    b: 2,
    c: 3
};
Object.assign(o1, o2);
console.log(o1); //Object {a: 1, b: 2, c: 3}
同じ名前の属性で、後ろは前面をカバーします.
var o1 = {
    a: 1
};
var o2 = {
    a: 2,
    b: 3
};
Object.assign(o1, o2);
console.log(o1); //Object {a: 2, b: 3}
ネストオブジェクトは、追加ではなく代替処理です.
var o1 = {
    a: {
        b: 1,
        c: 2
    },
    d: 1
};
var o2 = {
    a: {
        b: "str"
    },
    d: 4
};
Object.assign(o1, o2);
console.log(o1);
//Object {a: Object, d: 4}
    //a:Object
        //b:"str"
    //__proto__:Object
    //d:4
//__proto__:Object
配列、処理方法はオブジェクトとして扱われます.
var a = [1, 2, 3, 4, 5];
var b = [2, 0];
Object.assign(a, b);
console.log(a); //[2, 0, 3, 4, 5]
6属性の巡回
ES 6は全部で6つの方法でオブジェクトの属性を遍歴することができます.
  • for...in:for…inサイクルは、オブジェクト自体のエニュメレート・属性(Symbol属性を含まない)を巡回する.
  • Object.keys(obj):Object.keysはオブジェクト自体の(引き継ぎを含まない)エニュメレート・属性のすべてを含む配列を返します.
  • Object.getOwnPropertyNames(obj):Object.getOwn PropertyNamesは、オブジェクト自体のすべての属性(Symbol属性を含まないが、列挙できない属性を含む)を含む配列を返します.
  • Object.getOwnPropertySymbols(obj):Object.getOwn PropertySymboolsは、オブジェクト自体のすべてのSymbol属性を含む配列を返します.
  • Reflect.ownKeys(obj):Reflect.ownKeysは、オブジェクト自体の属性のすべてを含み、属性名がSymbolまたは文字列であっても、列挙可能であるかどうかに関わらず、配列を返します.
  • Reflect.enumerate(obj):Reflect.enumerateはIteratorオブジェクトに戻り、オブジェクト自体のエニュメレーション属性と継承されたすべてのエニュメレーション属性(Symbol属性を含まない)は、for...inサイクルと同じである.
  • 以上の6つの方法は、オブジェクトの属性を遍歴し、同じ属性遍歴の順序規則を遵守します.
  • は、最初にすべての属性名が数値の属性を巡回して、数字によって並べ替えられます.
  • は次に、すべての属性名が文字列の属性を巡回し、生成時間に従って並べ替えられます.
  • は最後にSymbol値という属性を巡回し、生成時間に従って並べ替えます.
  • 7 Object.get ProttypeOf()とObject.set ProttotypeOf()__proto__を使用してprototypeを取得することはできるだけ避けます.
    代わりに、以下のObject.setPrototypeOf()( )Object.getPrototypeOf()( )Object.create()( )を使用する.
    var o = {
        name: "Oliver",
        age: 18
    };
    var proto = {};
    Object.setPrototypeOf(o, proto);
    
    proto.getName = function() {
        return this.name;
    };
    
    console.log(o.getName()); //Oliver
    console.log(Object.getPrototypeOf(o));
    //Object {} getName : () __proto__ : Object
    
    8 ES 7:Object.values()、Object.entries()
    ES 5にはObject.keysが1つの配列に戻ります.メンバーはパラメータオブジェクト自体の(引き継ぎを含まない)すべてのアクセス可能な属性のキー名です.
    var o = {
        name: "Oliver",
        age: 18
    };
    console.log(Object.keys(o)); //["name", "age"]
    
    ES 7の提案またはObject.values()、Object.entries()の2つの方法に参加します.
    類似配列の上記のいくつかの方法.
    9 ES 7:オブジェクトの拡張演算子
    現在、ES 7の提案では、Resetデフォース/拡張演算子(…)をオブジェクトに導入する.
    10 ES 7:Object.getOwn PropertyDescriptors()
    ES 5にはObject.getOwn PropertyDescripter()があります.