ES6 - オブジェクトにいくつかの一般的なメソッドが追加されました

記事ディレクトリ

1，オブジェクト.is()

==ES5 では 2 つの値が等しいかどうかを比較するには、等価演算子 ( ) と厳密等価演算子 ( ===)の 2 つの演算子しかありませんが、それらにはすべて欠点があり、前者はデータ型
になり、後者はそれ自体と等しくありません。に等しい。自动转换NaN+0-0

まず、この 2 つの比較プロセスについて説明します。

双等号==：

(1) 2 つの値の型が同じ場合、3 つの等号 (===) を比較します。

(2) 2 つの値が異なる型である場合、それらは等しい可能性があります。次の規則に従って比較するには型変換が必要です: 1) 一方が null で、もう一方が未定義の場合、それらは
　
　　　等しい
　　　 2 ) 一方が文字列で、もう一方が値の場合、文字列は比較前に数値に変換されます

三等号===:

(1) 型が異なる場合は不等でなければなりません

(2) 両方が数値であり、同じ値であれば等しい、少なくとも一方がであれば、NaN等しくありません。

(3) 両方が文字列で、各位置の文字が同じである場合、それらは等しくなります。そうでない場合、それらは等しくありません。

(4) 両方の値がtrue、、またはの場合false、等しい

(5) 両方の値が同じオブジェクトまたは関数を参照している場合は等しく、そうでない場合は等しくありません

(6) 両方の値がnull、、またはの場合undefined、等しい

ES6 では、この問題を解決するために「同値等価」アルゴリズムを提案しています。Object.isこれは、このアルゴリズムを導入する新しい方法です。2 つの値が厳密に等しいかどうかを比較するために使用され、厳密な比較演算子 (===) の動作は基本的に同じです。

Object.is('123', '123')
// true
Object.is({
    
    }, {
    
    })
// false
Object.is([], [])
// false

Object.is()2 つの値が同じかどうかを判断します。次のいずれかに該当する場合、2 つの値は同じです。

どちらの値もundefined
どちらの値もnull
両方の値true、または両方false
両方の値は、同じ順序で同じ数の文字で構成される文字列です
両方の値が同じオブジェクトを指します
どちらの値も数値であり、
- 正のゼロです+0
- マイナスゼロです-0
- 全てですNaN
- ゼロをNaN除いてすべて同じ数字です

以下の場合:

      console.log(111 == '111');// true 先转数子再比较是否一样
      
      // 1,判断 undefined 
      console.log(undefined === undefined);  // true
      console.log(Object.is(undefined, undefined)); // true

      // 2,判断 null 
      console.log(null === null); // true
      console.log(Object.is(null,null)); // true

      // 3,判断空数组[]
      console.log([] === []); // false
      console.log(Object.is([],[])); // false

      // 4,需要特别注意下 +0和-0
      console.log(+0 === -0); // true 显然是判断失误了
      console.log(Object.is(+0, -0)); //false

      // 5,判断NaN
      console.log(NaN === NaN); // false  显然也是判断失误了
      console.log(Object.is(NaN,NaN)); // true

Object.is() メソッドを使用すると精度が高くなることがわかります。

2，Object.assign()

基本的な使い方

Object.assign()このメソッドはオブジェクトのマージに使用され、ソースオブジェクト (source) のすべての列挙可能なプロパティをターゲットオブジェクト (target) にコピーします。

      // 目标对象 也可以是一个空对象
      const target = {
    
     name: 'Eula' };
      // 源对象 可以有多个
      const source1 = {
    
     age: 18 };
      const source2 = {
    
     friend: 'Amber' };

      Object.assign(target, source1, source2);
      console.log("target:",target); //{name: 'Eula', age: 18, friend: 'Amber'}

Object.assign()メソッドの最初のパラメータはターゲットオブジェクトで、後続のパラメータはすべてソースオブジェクトです。

注: ターゲットオブジェクトとソースオブジェクトに同じ名前のプロパティがある場合、または複数のソースオブジェクトに同じ名前のプロパティがある場合、次のように、後者のプロパティが前のプロパティをオーバーライドします。

      // 目标对象 
      const target = {
    
     name: 'Eula' }; // 这个会被覆盖掉
      // 源对象 
      const source1 = {
    
     age: 18 };
      const source2 = {
    
     name: 'Amber' };

      Object.assign(target, source1, source2);
      console.log("target:",target); //{name: 'Amber', age: 18}

Object.assign()コピーされるプロパティは制限されており、ソースオブジェクトのプロパティのみがコピーされ (継承されたプロパティはコピーされません)、列挙不可能なプロパティはコピーされません ( enumerable: false)。

     let copyA = Object.assign(
        {
    
     name: "Eula" },
        Object.defineProperty({
    
    }, "age", {
    
    
          enumerable: false, // 不可枚举
          value: 18 // 为此属性添加值 18 
        })
      );
      
      console.log("copyA：",copyA);//{ name: "Eula" }

上記のコードでは、Object.assign()コピーされるオブジェクトには列挙不可能なプロパティが 1 つだけありage、このプロパティはコピーされていません。enumerable に変更するとtrue、正常にコピーできます。

Assign() メソッドの注意事項:

(1) 浅いコピー

Object.assign()このメソッドは、深いコピーではなく、浅いコピーを実行します。つまり、ソースオブジェクトのプロパティの値がオブジェクトの場合、ターゲットオブジェクトのコピーはこのオブジェクトへの参照を取得します。

      const obj1 = {
    
    my:{
    
     name: "Eula"} };
      const obj2 = Object.assign({
    
    }, obj1);
      // 改变源对象的属性
      obj1.my.name = "Amber"
      console.log(obj2); //{my: {name: 'Amber'}}

Object.assign()コピーされるのは、このオブジェクトへの参照です。このオブジェクトに対する変更はターゲットオブジェクトに反映されます。

(2) 同名の属性の置換

このようなネストされたオブジェクトの場合、同じ名前の属性が見つかった場合、Object.assign()それに対処する唯一の方法は、追加ではなく置換することです。

      const target = {
    
     my: {
    
     name: "Eula", age: 18 } };
      const source = {
    
     my: {
    
     name: "Amber" } };
      let res = Object.assign(target, source);
      console.log(res);// {my: {name: 'Amber'}}

一部の関数ライブラリObject.assign()(Lodash のメソッドなど_.defaultsDeep()) によって提供されるカスタムバージョンは、ディープコピーとマージできます。

3，Object.getOwnPropertyDescriptors()

このメソッドは、次のように、指定されたオブジェクトのすべてのプロパティ ( )非继承属性の説明オブジェクトを返します。

     const obj1 = {
    
    
        name: "Eula",
        fun: function () {
    
    
          return "优菈";
        }
      };
      const  Descriptors = Object.getOwnPropertyDescriptors(obj1)
      console.log("Descriptors:",Descriptors);

印刷結果は次のとおりです。
ここに画像の説明を挿入

4，Object.setPrototypeOf() と getPrototypeOf()

setPrototypeOf()

Object.setPrototypeOfこのメソッドは、オブジェクトのプロトタイプオブジェクトを設定するために使用されます。次の例は、obj プロトタイプに属性 age を追加する例です。

      let obj1 = {
    
     name: "Eula" };
      let obj2 = {
    
     age: 18 };
      // 下面是给obj1添加一个属性 name
      Object.setPrototypeOf(obj1, obj2);
      console.log(obj1.age); //18

getPrototypeOf(）

このメソッドはObject.setPrototypeOfメソッドと一致し、オブジェクトのプロトタイプオブジェクトを読み取るために使用されます。次は、obj1 の新しいプロトタイプ属性を読み取る方法です。

      let obj1 = {
    
     name: "Eula" };
      let obj2 = {
    
     age: 18 };
      // 下面是给obj1添加一个属性 name
      Object.setPrototypeOf(obj1, obj2);
      
      // 获取里面原型对象
      console.log(Object.getPrototypeOf(obj1)); //  { age: 18 }

5，Object.keys()、values()およびentrys()

（1） Object.keys()

self のすべての列挙可能なプロパティの配列を返します (継承されません) 键名。

      const ys = {
    
     KamisatoAyaka: '神里绫华', ShenliLingren: '神里绫人' };
      let ysKeys = Object.keys(ys)
      console.log(ysKeys); //  ['KamisatoAyaka', 'ShenliLingren'] 注意：只返回了对象每一项的键名

（2）Object.values()

self のすべての列挙可能なプロパティの配列を返します (継承されません) 键值。

      const ys = {
    
     KamisatoAyaka: '神里绫华', ShenliLingren: '神里绫人' };
      let ysvalues = Object.values(ys)
      console.log(ysvalues); // ['神里绫华', '神里绫人'] 注意：只返回了对象每一项的键值

（3）Object.entries()

オブジェクト自体のすべての列挙可能なプロパティ (継承されていない) の配列を返します键值对。
注:entries方法このオブジェクトも键值对配列でラップされて返されます。

      const ys = {
    
     KamisatoAyaka: "神里绫华", ShenliLingren: "神里绫人" };
      let ysentries = Object.entries(ys);
      console.log(ysentries);
      // 同时返回了键值对 并用一个数组包装
      //  ['KamisatoAyaka', '神里绫华']
      //  ['ShenliLingren', '神里绫人']

以下是配合for of 循环使用：

1、keys() はキー名の走査です

      let obj = {
    
    
        Amber: "安柏",
        Eula: "优菈",
        KamisatoAyaka: "神里绫华"
      };
	  // for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历
      for (let key of Object.keys(obj)) {
    
    
        console.log(key); // Amber,Eula,KamisatoAyaka  拿到的都是对象的键名
      }
      console.log(Object.keys(obj)); //(3) ['Amber', 'Eula', 'KamisatoAyaka']

2、values() はキー値の走査です

      let obj = {
    
    
        Amber: "安柏",
        Eula: "优菈",
        KamisatoAyaka: "神里绫华"
      };
      for (let key of Object.values(obj)) {
    
    
        console.log(key); // 安柏,优菈,神里绫华  拿到的都是对象的值
      }
      console.log(Object.values(obj)); //(3) ['安柏', '优菈', '神里绫华']

3.entrys() はキーと値のペアの走査です

      let obj = {
    
    
        Amber: "安柏",
        Eula: "优菈",
        KamisatoAyaka: "神里绫华"
      };
      for (let key of Object.entries(obj)) {
    
    
        console.log(key);
        // ['Amber', '安柏']
        // ['Eula', '优菈']
        // ['KamisatoAyaka', '神里绫华']
      }

      console.log(Object.entries(obj));
      // 会以一个数组重新包装起来
      // [
      //   ["Amber", "安柏"],
      //   ["Eula", "优菈"],
      //   ["KamisatoAyaka", "神里绫华"]
      // ];

6，Object.fromEntries()

Object.fromEntries()このメソッドは、Object.entries()キーと値のペアの配列をオブジェクトに変換する逆操作です。

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

このメソッドの主な目的は、キーと値のペアのデータ構造をオブジェクトに復元することであるため、Map構造をオブジェクトに変換する場合に特に適しています。

// 例一
const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

Object.fromEntries(entries)
// { foo: "bar", baz: 42 }

// 例二
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

このメソッドの用途の 1 つは、オブジェクトと連携してURLSearchParamsクエリ文字列をオブジェクトに変換することです。

Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }

7，Object.hasOwn()

Object.hasOwn()自身の属性かどうかを判断するために使用されます。

JavaScript オブジェクトのプロパティは、独自のプロパティと継承されたプロパティの 2 種類に分類されます。オブジェクトインスタンスには、hasOwnProperty()プロパティがネイティブプロパティであるかどうかを判断できるメソッドがあります。

Object.hasOwn()2 つのパラメータを受け入れることができます。1 つ目は判定対象のオブジェクト、2 つ目は属性名です。

const foo = Object.create({
    
     a: 123 });
foo.b = 456;

Object.hasOwn(foo, 'a') // false
Object.hasOwn(foo, 'b') // true

上記の例では、オブジェクト foo の属性 a は継承属性、属性 b はネイティブ属性です。Object.hasOwn()属性 a については戻りfalse、属性 b については戻りますtrue。

Object.hasOwn()の利点の 1 つは、Object.prototype を継承していないオブジェクトについてはエラーが報告されないことですが、hasOwnProperty() はエラーを報告します。

const obj = Object.create(null);

obj.hasOwnProperty('foo') // 报错
Object.hasOwn(obj, 'foo') // false

上記の例では、Object.create(null) によって返されるオブジェクト obj にはプロトタイプがなく、プロパティも継承しないため、obj.hasOwnProperty() を呼び出すときにエラーが報告されますが、Object.hasOwn() はこれを処理できます。通常の状況。