es 6入門-オブジェクトの拡張

7917 ワード

1、属性の簡潔な表現法
ES 6は、オブジェクトの属性と方法として変数と関数を直接書き込むことができます.このような書き方はもっと簡潔です.
var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

//    
var baz = {foo: foo};
上のコードにより、ES 6はオブジェクトの中に直接変数を書き込むことができます.この場合、属性名は変数名、属性値は変数の値となります.次は別の例です.
function f(x, y) {
  return {x, y};
}

//    

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}
属性の簡略化以外に、方法も簡単に書くことができます.
var o = {
  method() {
    return "Hello!";
  }
};

//    

var o = {
  method: function() {
    return "Hello!";
  }
};
次は実際の例です.
var birth = '2000/01/01';

var Person = {

  name: '  ',

  //   birth: birth
  birth,

  //    hello: function ()...
  hello() { console.log('     ', this.name); }

};
このような書き方は関数の戻り値に対してとても便利です.
function getPoint() {
  var x = 1;
  var y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}
2、属性名表現
ES 6は、文字数で対象を定義できる場合、メソッド2(式)を対象とした属性名で、式を四角い括弧に入れる.
var lastWord = 'last word';

var 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
3、方法のname属性
関数のname属性は、関数名を返します.オブジェクト方法も関数ですので、name属性もあります.
const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"
上のコードでは、メソッドのname属性は、関数名(すなわち、メソッド名)を返します.
4、Object.is()
二つの値が厳密に等しいかどうかを比較するために使用されます.演算子(==)を厳密に比較する行為と基本的に一致します.違うところは二つだけあります.一つは+0は-0に等しくなく、二つはNaNは自身に等しいです.
+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
5、Object.assin()
オブジェクトのマージに使用して、ソースオブジェクトのエニュメレート・プロパティーを対象オブジェクトにコピーします.
var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
なお、ターゲットとソースオブジェクトが同名の属性を持つ場合、または複数のソースオブジェクトが同名の属性を持つ場合、後の属性は前の属性をカバーします.
var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
パラメータが一つしかないなら、Object.assignは直接にこのパラメータに戻ります.このパラメータがオブジェクトでない場合は、まずオブジェクトに変換して返します.このパラメータがオブジェクトでない場合は、まずオブジェクトに変換して返します.
6、Object.keys()、Object.values()、Object.entries()です.
ES 5はObject.keys方法を導入して、一つの配列に戻ります.メンバーはパラメータオブジェクト自体の(相続を含まない)すべてのアクセス可能な属性のキー名です.
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
ES 2017はObject.keysに対応するObject.valuesとObject.entriesを導入し、オブジェクトを巡回する補完手段としてfor...ofサイクルに使用されます.
Object.valuesメソッドは、パラメータオブジェクト自体のすべてのアクセス可能な属性のキーの値を返します.
var obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
//     ,         ,       ,       ,        b、c、a。
Object.entriesメソッドは、パラメータオブジェクト自体のすべてのアクセス可能な属性のキーペアを返します.
var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]
//     ,        ,Object.entries        Symbol     。      Reflect.ownEntries()  ,           。