Résumé des extensions et nouvelles méthodes des objets ES6 (avec exemples)

Le contenu de cet article est un résumé de l'expansion et des nouvelles méthodes des objets ES6 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Représentation concise des attributs

ES6 permet d'écrire des variables et des fonctions directement sous forme d'attributs et de méthodes d'objets. Ce type d'écriture est plus concis.

const foo = 'bar';
const baz = {foo};
baz//{foo:'bar'}

//等同于
const baz = {foo:foo}

Le code ci-dessus montre qu'ES6 permet d'écrire des variables directement dans des objets. À l'heure actuelle, le nom de l'attribut est le nom de la variable et la valeur de l'attribut est la valeur de la variable. Voici un autre exemple.

function f(x,y){
    return {x,y}
}
//等同于
function f(x,y){
    return {x:x,y:y};
}
f(1,2)//{x:1,y:2}

En plus des abréviations d'attributs, les méthodes peuvent également être abrégées.

const o ={
    method(){
        return 'Hello!'
    }
}
//等同于
const o = {
    method:function(){
        return 'Hellow';
    }
}

Voici un exemple pratique.

let birth = '2000/01/01';
const Person ={
    name:'张三',
    //等同于birth：birth
    birth,
    //等同于hello :function()....
    hello(){
        console.log('我的名字是',this.name) 
    }
}

Cette façon d'écrire est très pratique pour la valeur de retour d'une fonction.

function getPoint(){
    const x =1;
    const y = 10;
    return {x,y}
}
getPoint()//{x:1,y:10}

Le module CommonJS génère un ensemble de variables, ce qui est très approprié pour une écriture concise.

let ms = {};
function getItem(key){
    return key in ms ?ms[key]:null;
}
function setItem(key,value){
    ms[key] = value;
}
function clear(){
    ms={}
} 
module.exports = {getItem,setItem,clear};
//等同于
module.exports = {
    getItem:getItem,
    setItem:setItem,
    clearLclear
}

L'assignateur (setter) et l'évaluateur (getter) de l'attribut sont en fait écrits de cette manière.

const cart = {
    _wheels:4,
    get wheels(){
        return this._wheels;
    },
    set wheels (value){
        if(value<this._wheels){
            throw new Error('数值太小了！');
        }
        this._whells = value;
    }
}

2. Expression du nom de propriété

Il existe deux manières de définir les propriétés d'un objet en JavaScript.

//方法一
obj.foo = true;
//方法二
obj['a'+'bc'] = 123;

La première méthode du code ci-dessus consiste à utiliser directement l'identifiant comme nom d'attribut, et la deuxième méthode consiste à utiliser l'expression comme nom d'attribut. Dans ce cas, placez l'expression dans un carré. parenthèses.
Cependant, si vous utilisez des littéraux pour définir des objets (à l'aide d'accolades), vous ne pouvez utiliser que la première méthode (identifiant) ​​pour définir des propriétés dans ES5.

var obj ={
    foo:true,
    abc:123
}

Lorsque ES6 autorise la définition littérale d'un objet, utilisez la méthode 2 comme nom de propriété de l'objet, c'est-à-dire mettez l'expression entre parenthèses.

let propKey = 'foo';
let obj ={
    [propKey]:true,
    ['a'+'bc']:123
}

Voici un autre exemple :

let lastWord = 'last word';
const a = {
    'first word':'hello',
    [lastWord]:'world'
};
a['first word']//hello
a[lastWord]//world
a['last word']//world

Les expressions peuvent également être utilisées pour définir des noms de méthodes.

let obj = {
    ['h'+'ello'](){
        return 'hi'
    }
}
obj.hello()//hi;

Remarque :

属性名表达式与简洁表示法，不能同时使用，会报错。
属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object object],这一点要特别小心。

const keyA = {a:1};
const keyB = {b:2};
const myObject = {
    [keyA]:'valueA',
    [keyB]:'valueB'
};
myObject;// Object {[object Object]: "valueB"}

Dans le code ci-dessus, [keyA] et [keyB] obtiennent [object object], donc [keyB] changera [ keyA] est écrasé et myObject n'a finalement qu'un seul attribut [object object].

L'attribut name de la méthode

L'attribut name de la fonction renvoie le nom de la fonction. Les méthodes objets sont également des fonctions, elles ont donc également un attribut name.

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

Type énumérable et parcours des attributs

Chaque attribut de l'objet a un objet de description, qui est utilisé pour contrôler le comportement de modification de l'attribut. La méthode Object.getOwnPropertyDescriptor(obj,'foo') peut obtenir l'objet de description de la propriété.
Décrit la propriété énumérable d'un objet, appelée énumérabilité. Si cette propriété est fausse, cela signifie que certaines opérations ignoreront la propriété actuelle.
Actuellement, quatre opérations ignorent les attributs dont l'énumérable est faux.

for...in循环：只遍历对象自身的和继承的可枚举的属性。(不包含Symbol属性)
Object.keys():返回对象自身的所有可枚举的属性的键名,返回一个数组。(不包含Symbol)
JSON.stringify():只串行化对象自身的可枚举的属性。
object.assign():忽略enumrable为false的属性，只拷贝对象自身的可枚举的属性。

ES6 dispose d'un total de 5 méthodes pour parcourir les propriétés d'un objet.
(1) pour...dans

for...in循环遍历对象自身的和继承的可枚举属性(不包含Symbol属性)。

(2) Object.keys(obj)

object.keys返回一个数组，包含对象自身的（不含继承的）所有可枚举属性（不包含Symbol属性）的键名。

(3) Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有属性(不含Symbol属性，但是包括不可枚举属性)的键名。

(4) Object.getOwnPropertySymbols(obj)

返回一个数组，包含对象自身的所有Symbol属性的键名。

(5) Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是Symbol或字符串，也不管是否可枚举。

super mot-clé

Nous savons que le mot-clé this pointe toujours vers l'objet actuel où se trouve la fonction, et ES6 a ajouté un autre mot-clé similaire super, qui pointe vers l'objet prototype de l'objet actuel.

const proto = {
    foo:'hello'
};
const obj = {
    foo:'world',
    find(){
        return super.foo;
    }
};
Object.setPrototypeOf(obj,proto);
obj.find();//hello

Dans le code ci-dessus, dans la méthode objet obj.find(), l'attribut foo du prototype d'objet proto est référencé via super.foo.
Remarque : lorsque le mot-clé super représente un objet prototype, il ne peut être utilisé que dans la méthode de l'objet. S'il est utilisé ailleurs, une erreur sera signalée. Actuellement, seule l'abréviation de la méthode objet permet au moteur Javascript de confirmer que la méthode objet est définie.
Dans le moteur JavaScript, super.foo est équivalent à Object.getPrototypeOf(this).foo ou Object.getPrototypeOf(this).foo.call(this).

Opérateur d'extension d'objet

Affectation de déstructuration
L'affectation de déstructuration d'un objet est utilisée pour obtenir la valeur d'un objet, qui est équivalente à tous les éléments traversables mais pas encore lus de l'objet cible lui-même Les attributs sont attribués à l'objet spécifié. Toutes les clés et leurs valeurs seront copiées dans le nouvel objet.

let{x,y,...z} = {x:1,y:2,a:3,b；4};
x//1,
y//2,
z//{a:3,b:4}

Dans le code ci-dessus, la variable z est l'objet où se trouve l'affectation de déstructuration. Il prend toutes les clés non lues (a et b) à droite du signe égal et les copie avec leurs valeurs.

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!