Explication détaillée des nouvelles fonctions et affectation de déstructuration des objets dans ES6 (exemple de code)

Cet article vous apporte une explication détaillée (exemple de code) des nouvelles fonctions et de l'affectation de déstructuration des objets dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

ES6 améliore l'utilisation des objets grâce à une expansion de la syntaxe littérale, de nouvelles méthodes, des prototypes améliorés, etc., et simplifie le processus d'extraction de données des objets grâce à la déconstruction.

Extension de syntaxe littérale

L'utilisation de littéraux pour créer des objets en mode ES6 est plus concise Pour les propriétés d'objet, la valeur initiale de la propriété peut être abrégée et peut être utilisée. Nom de propriété calculé. La définition des méthodes d'objet élimine les deux-points et les mots-clés de fonction. Les exemples sont les suivants :

// Demo1
var value = "name", age = 18
var person = {
  age, // age: age
  ['my' + value]: 'Jenny',  // myname
  sayName () {  // sayName: function()
    console.log(this.myname)
  }
}
console.log(person.age) // 18
console.log(person.myname) // Jenny
person.sayName(); // Jenny

Pour les attributs littéraux d'objet définis à plusieurs reprises, le mode strict ES5 effectuera une vérification d'attribut en double et lancera An. Une erreur s'est produite et ES6 a supprimé ce mécanisme, qu'il s'agisse du mode strict ou du mode non strict, les attributs portant le même nom prendront la dernière valeur .

// demo2
var person = {
  ['my' + value]: 'Jenny',
  myname: 'Tom',
  myname: 'Lee',
}
console.log(person.myname) // Lee

Nouvelles méthodes

Un objectif de conception suivi depuis ES5 est d'éviter de créer de nouvelles fonctions globales et de ne pas créer de nouvelles méthodes sur object.prototype.
Afin de faciliter la mise en œuvre de certaines tâches, ES6 introduit de nouvelles méthodes sur l'objet global Object.

Object.is()

ES6 introduit la méthode Object.is() pour compenser le calcul inexact de l'opérateur d'égalité.

L'opérateur de congruence ne déclenchera pas la conversion de type lors de la comparaison. Les résultats de Object.is() sont similaires, mais pour +0 et -0 (deux entités différentes dans le moteur JS) et spéciaux Les résultats de la comparaison de les valeurs NaN sont différentes, comme le montre l'exemple :

// demo3
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(Object.is(5, '5')) // false

console.log(+0 == -0) // true
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false

console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true

En résumé, Object.is() effectue un jugement d'égalité plus strict sur toutes les valeurs. Bien entendu, l’utilisation ou non de Object.is() au lieu de l’opérateur d’égalité (===) dépend de la question de savoir si ces cas particuliers affectent votre code.

Object.assign()

ES6 ajoute Object.assign() pour implémenter le mode Mixin, où un objet reçoit les propriétés et les méthodes d'un autre objet. Notez qu'il est reçu plutôt qu'hérité, par exemple en recevant l'objet dans demo1 :

// demo4
var friend = {}
Object.assign(friend, person)
friend.sayName() // Jenny
console.log(friend.age) // 18
console.log(Object.getPrototypeOf(friend) === person) // false

Avant Object.assign(), de nombreuses bibliothèques JS personnalisaient la méthode de mélange mixin() pour implémenter la combinaison d'objets. similaire à :

function mixin(receiver, supplier) {
  Object.keys(supplier).forEach(function (key) {
    receiver[key] = supplier[key]
  })
  return receiver
}

On peut voir que la méthode mixin() utilise l'opération d'affectation "=" et ne peut pas copier l'attribut d'accesseur De même, Object.assign() ne peut pas copier le. attribut accesseur, mais ne l'exécute que lors de l'opération d'affectation, la propriété accesseur sera finalement convertie en propriété data de l'objet récepteur. Un exemple est le suivant :

// demo5
var animal = {
  name: 'lili',
  get type () {
    return this.name + type
  },
  set type (news) {
    type = news
  }
}
animal.type = 'cat'
console.log(animal.type) // lilicat

var pet = {}
Object.assign(pet, animal)
console.log(animal) // { name: 'lili', type: [Getter/Setter] }
console.log(pet) // { name: 'lili', type: 'lilicat' }

Object.setPrototypeOf( )

Normalement, le prototype est spécifié lors de sa création via le constructeur ou Object.create() . ES6 ajoute la méthode Object.setPrototypeOf() pour modifier le prototype d'un objet.

Par exemple, créez un objet codeur qui hérite de l'objet personne, puis modifiez le prototype de l'objet codeur :

// demo6
let person = {
  myname: 'Jenny',
  sayName () { 
    console.log(this.myname)
  }
}

// 创建原型为 person 的 coder 对象
let coder = Object.create(person) 
coder.sayName() // Jenny
console.log(Object.getPrototypeOf(coder) === person) // true

let hero = {
  myname: 'lee',
  sayName () {
    console.log(this.myname)
  }
}

// 改变 coder 对象的原型为 hero
Object.setPrototypeOf(coder, hero)
coder.sayName() // lee
console.log(Object.getPrototypeOf(coder) === hero) // true

Le prototype de l'objet est stocké dans la propriété propriétaire interne [[ Prototype]], appelez Object. getPrototypeOf() renvoie la valeur qui y est stockée et appelle Object.setPrototypeOf() pour modifier sa valeur. Cette méthode renforce le fonctionnement des prototypes d'objets. La section suivante se concentre sur d'autres manières de faire fonctionner les prototypes.

Prototype d'objet amélioré

Le prototype est la base de l'héritage JS ES6 a apporté de nombreuses améliorations au prototype afin d'utiliser le prototype de manière plus flexible. En plus du nouveau Object.setPrototypeOf() pour changer le prototype, le mot-clé Super est également introduit pour simplifier l'accès au prototype

Super mot-clé

ES6 introduit Super pour accéder au prototype de l'objet. plus facilement. La section précédente a présenté qu'ES5 peut utiliser Object.getPrototypeOf() pour renvoyer le prototype d'objet. Un exemple illustre la commodité de Super. Lorsqu'un objet doit réutiliser des méthodes prototypes et redéfinir ses propres méthodes, les deux méthodes d'implémentation sont les suivantes :

// demo7
let coder1 = {
  getName () {
    console.log("coder1 name: ")
    Object.getPrototypeOf(this).sayName.call(this)
  }
}

// 设置 coder1 对象的原型为 hero（demo6）
Object.setPrototypeOf(coder1, hero)
coder1.getName() // coder1 name: lee

let coder2 = {
  getName () {
    console.log("coder2 name: ")
    super.sayName()
  }
}

Object.setPrototypeOf(coder2, hero)
coder2.getName() // coder2 name: lee

La méthode getName de l'objet coder1 nécessite également un appel ( this) pour garantir son utilisation. Qu'est-ce que c'est que la méthode prototype, qui est relativement compliquée, et des erreurs de débordement de pile d'appels récursifs se produiront dans l'héritage multiple, mais l'utilisation directe de Super est très simple et sûre.

Notez que Super doit être utilisé dans la méthode d'abréviation, sinon une erreur sera signalée. Par exemple, le code suivant a une erreur de syntaxe lors de son exécution :

let coder4= {
  getName: function () { // getName () 正确
    super.sayName() // SyntaxError: 'super' keyword unexpected here
  }

Parce que dans l'exemple. getName devient un attribut défini par la fonction anonyme, dans Il est actuellement illégal d'appeler une Super référence en contexte. Si vous ne comprenez pas, vous pouvez examiner de plus près les objets dépendants de la méthode.

Objets subordonnés des méthodes

Avant ES6, les "méthodes" étaient des propriétés d'objet avec des fonctions plutôt que des données. ES6 définissait officiellement les méthodes comme ayant [[HomeObject]] à l'intérieur de l'attribut. fonctions. L'attribut

[[HomeObject]] stocke l'objet subordonné de la méthode actuelle, par exemple :

let coder5 = {
  sayName () {
    console.log("I have HomeObject")
  }
}

function shareName () {
    console.log("No HomeObject")
}

La valeur de l'attribut [[HomeObject]] de la méthode sayName() de la L'objet coder5 est coder5 et la fonction définie shareName() ne l'attribue pas à l'objet, donc sa propriété [[HomeObject]] n'est pas définie, ce qui est important lors de l'utilisation de Super.

Super consiste à appeler Object.getPrototypeOf() sur l'attribut [[HomeObject]] pour obtenir la référence du prototype, puis à rechercher le prototype pour obtenir la fonction du même nom, et enfin à définir cette liaison pour appeler le méthode correspondante.

Affectation de déstructuration

ES6 fournit une nouvelle fonctionnalité pour les littéraux de tableau et d'objet - la déstructuration, qui peut simplifier le processus d'extraction de données et réduire le code homogène. Un exemple de syntaxe de base pour la déstructuration est le suivant :

let user = {
  name: 'jenny',
  id: 18
}
let {name, id} = user
console.log(name, id) // jenny 18

注意在这段代码中，user.name 存储在与对象属性名同名的 name 变量中。

默认值

如果解构时变量名称与对象属性名不同，即在对象中不存在，那么这个变量会默认为undefined：

let user = {
  name: 'jenny',
  id: 18
}
let {name, id, job} = user
console.log(name, id, job) // jenny 18 undefined

非同名变量赋值

非同名变量的默认值为undefined，但更多时候是需要为其赋值的，并且会将对象属性值赋值给非同名变量。ES6 为此提供了扩展语法，与对象字面量属性初始化程序很像：

let user = {
  name: 'jenny',
  id: 18
}
let {name, id = 16, job = 'engineer'} = user
console.log(name, id, job) // jenny 18 engineer

let {name: localName, id: localId} = user
console.log(localName, localId) // jenny 18

let {name: otherName = 'lee', job: otherJob = 'teacher'} = user
console.log(otherName, otherJob) // jenny teacher

可以看出这种语法实际与对象字面量相反，赋值名在冒号左，变量名在右，并且解构赋值时，只是更新了默认值，不能覆盖对象原有的属性值。

嵌套解构

解构嵌套对象的语法仍然类似对象字面量，使用花括号继续查找下层结构：

let user = {
  name: 'jenny',
  id: 18,
  desc: {
    pos: {
      lng: 111,
      lat: 333
    }
  }
}

let {desc: {pos}} = user
console.log(pos) // { lng: 111, lat: 333 }

let {desc: {pos: {lng}}} = user
console.log(lng) // 111

let {desc: {pos: {lng: longitude}}} = user
console.log(longitude) // 111

对象类别

ES6 规范定义了对象的类别，特别是针对浏览器这样的执行环境。

普通（Ordinary）对象
具有 JS 对象所有的默认内部行为

特异（Exotic）对象
具有某些与默认行为不符的内部行为

标准（Standard）对象
ES6 规范中定义的对象
可以是普通对象或特异对象，例如 Date、Array 等

内建对象
脚本开始执行时存在于 JS 执行环境中的对象
所有标准对象都是内建对象

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!