ES6 - Quelques méthodes courantes ajoutées aux objets

1，Object.is()

Pour comparer si deux valeurs sont égales dans ES5, il n'y a que deux opérateurs : l'opérateur d'égalité ( ==) et l'opérateur d'égalité stricte ( ===)
, mais ils ont tous des inconvénients, le premier sera 自动转换de type données, le second NaNn'est pas égal à lui-même, et +0égal à -0.

Permettez-moi d'abord de parler du processus de comparaison des deux :

双等号==：

(1) Si les deux types de valeur sont identiques, comparez trois signes égaux (===)

(2) Si les deux valeurs sont de types différents, elles peuvent également être égales. La conversion et la comparaison de types doivent être effectuées selon les règles suivantes : 1)
　
　　　 Si l'une est nulle et l'autre indéfinie, alors elles sont égales.
　　　 2) Si l'une est une chaîne et l'autre une valeur, put Les chaînes sont converties en valeurs numériques avant comparaison

三等号===:

(1) Si les types sont différents, ils doivent être inégaux

(2) Si les deux sont des valeurs numériques et ont la même valeur, alors elles sont égales ; si au moins l’une d’elles est NaN, alors elles ne sont pas égales.

(3) Si les deux sont des chaînes et que les caractères dans chaque position sont identiques, alors ils sont égaux, sinon ils ne sont pas égaux.

(4) Si les deux valeurs sont true, ou false, alors égales

(5) Si les deux valeurs font référence au même objet ou à la même fonction, alors elles sont égales, sinon elles ne sont pas égales

(6) Si les deux valeurs sont null, ou undefined, alors égales

ES6 propose l'algorithme « Égalité de même valeur » pour résoudre ce problème. Object.isC'est une nouvelle façon de déployer cet algorithme. Il est utilisé pour comparer si deux valeurs sont strictement égales et le comportement de l'opérateur de comparaison stricte (===) est fondamentalement le même.

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

Object.is()Détermine si deux valeurs sont identiques. Deux valeurs sont identiques si l'une des conditions suivantes est vraie :

• Les deux valeurs sontundefined
• Les deux valeurs sontnull
• Les deux valeurs sont trueou les deuxfalse
• Les deux valeurs sont des chaînes composées du même nombre de caractères dans le même ordre
• Les deux valeurs pointent vers le même objet
• Les deux valeurs sont des nombres et
  • sont positifs zéro+0
  • sont moins zéro-0
  • sont tousNaN
  • NaNsont tous le même nombre sauf zéro et

Les cas suivants :

      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

On peut voir que l’utilisation de la méthode Object.is() aura une plus grande précision.

---

2，Object.asign()

• utilisation de base

Object.assign()La méthode est utilisée pour la fusion d'objets, en copiant toutes les propriétés énumérables de l'objet source (source) vers l'objet cible (cible).

      // 目标对象 也可以是一个空对象
      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()Le premier paramètre de la méthode est l'objet cible et les paramètres suivants sont tous des objets source.

Remarque : Si l'objet cible et l'objet source ont des propriétés portant le même nom, ou si plusieurs objets source ont des propriétés portant le même nom, les dernières propriétés remplaceront les propriétés précédentes, comme suit :

      // 目标对象 
      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()Les propriétés copiées sont limitées, seules les propriétés de l'objet source sont copiées (les propriétés héritées ne sont pas copiées) et les propriétés non énumérables ne sont pas copiées ( enumerable: false).

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

Dans le code ci-dessus, Object.assign()l'objet à copier n'a qu'une seule propriété non énumérable ageet cette propriété n'a pas été copiée. Si vous enumerable passez à true, vous pouvez copier avec succès ;

• Remarques sur la méthode Assign() :

(1) copie superficielle

Object.assign()La méthode effectue une copie superficielle, pas une copie profonde. C'est-à-dire que si la valeur d'une propriété de l'objet source est un objet, alors la copie de l'objet cible obtient une référence à cet objet.

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

Object.assign()Ce qui est copié est une référence à cet objet. Toute modification apportée à cet objet sera reflétée sur l'objet cible.

(2) Remplacement des attributs du même nom

Pour de tels objets imbriqués, une fois qu'un attribut portant le même nom est rencontré, Object.assign()la seule façon de le gérer est de le remplacer, pas de l'ajouter.

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

La version personnalisée fournie par certaines bibliothèques de fonctions Object.assign()(telles que _.defaultsDeep()la méthode de Lodash) peut être fusionnée avec la copie complète.

---

3，Object.getOwnPropertyDescriptors()

非继承属性Cette méthode renvoie l'objet description de toutes les propriétés ( ) de l'objet spécifié ; comme suit :

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

Les résultats imprimés sont les suivants :

---

4，Object.setPrototypeOf() et getPrototypeOf()

• setPrototypeOf()

Object.setPrototypeOfLa méthode est utilisée pour définir l'objet prototype d'un objet ; l'exemple suivant consiste à ajouter un attribut age au prototype obj :

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

• getPrototypeOf(）

Cette méthode Object.setPrototypeOfcorrespond à la méthode et est utilisée pour lire l'objet prototype d'un objet.Ce qui suit est pour lire le nouvel attribut prototype d'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() et entrées()

（1）Objet.keys()

Renvoie un tableau de toutes les propriétés énumérables de self (non héritées) 键名.

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

（2）Object.values()

Renvoie un tableau de toutes les propriétés énumérables de self (non héritées) 键值.

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

（3）Object.entries()

Renvoie un tableau de toutes les propriétés énumérables de l'objet lui-même (non héritées) 键值对.
Remarque : entries方法Cet objet est également renvoyé 键值对, enveloppé dans un tableau.

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

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

1, keys() est une traversée de noms de clés

      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() est un parcours de valeurs clés

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

3. Entry() est un parcours de paires clé-valeur

      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()La méthode est Object.entries()l'opération inverse pour convertir un tableau de paires clé-valeur en un objet.

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

L'objectif principal de cette méthode est de restaurer la structure de données de la paire clé-valeur en un objet, elle est donc particulièrement adaptée pour convertir Mapla structure en un objet.

// 例一
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 }

Une utilisation de cette méthode consiste à coopérer avec URLSearchParamsdes objets pour convertir des chaînes de requête en objets.

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

7，Object.hasOwn()

Object.hasOwn()Il est utilisé pour juger s'il s'agit de son propre attribut.

Les propriétés des objets JavaScript sont divisées en deux types : les propriétés propres et les propriétés héritées. Les instances d'objet disposent d'une hasOwnProperty()méthode qui peut également déterminer si une propriété est une propriété native.

Object.hasOwn()Deux paramètres peuvent être acceptés, le premier est l'objet à juger et le second est le nom de l'attribut :

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

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

Dans l'exemple ci-dessus, l'attribut a de l'objet foo est un attribut hérité et l'attribut b est un attribut natif. Object.hasOwn()Renvoie l'attribut a falseet renvoie l'attribut b true.

Object.hasOwn()L'un des avantages de est qu'aucune erreur ne sera signalée pour les objets qui n'héritent pas de Object.prototype, mais hasOwnProperty() signalera une erreur.

const obj = Object.create(null);

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

Dans l'exemple ci-dessus, l'objet obj renvoyé par Object.create(null) n'a pas de prototype et n'hérite d'aucune propriété, ce qui provoque le signalement d'une erreur lors de l'appel de obj.hasOwnProperty(), mais Object.hasOwn() peut gérer cela. situation normalement.