Zusammenfassung der Erweiterungen und neuen Methoden von ES6-Objekten (mit Beispielen)

Dieser Artikel bietet Ihnen eine Zusammenfassung der Erweiterungen und neuen Methoden von ES6-Objekten. Ich hoffe, dass er für Freunde hilfreich ist.

1. Präzise Darstellung von Attributen

ES6 ermöglicht das direkte Schreiben von Variablen und Funktionen als Attribute und Methoden von Objekten. Diese Art des Schreibens ist prägnanter.

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

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

Der obige Code zeigt, dass ES6 das direkte Schreiben von Variablen in Objekte ermöglicht. Zu diesem Zeitpunkt ist der Attributname der Variablenname und der Attributwert der Wert der Variablen. Hier ist ein weiteres Beispiel.

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

Zusätzlich zu Attributabkürzungen können auch Methoden abgekürzt werden.

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

Hier ist ein praktisches Beispiel.

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

Diese Schreibweise ist für den Rückgabewert einer Funktion sehr praktisch.

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

Das CommonJS-Modul gibt eine Reihe von Variablen aus, die sich sehr gut für prägnantes Schreiben eignen.

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
}

Der Zuweiser (Setter) und der Wertgeber (Getter) des Attributs werden tatsächlich auf diese Weise geschrieben.

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

2. Ausdruck des Eigenschaftsnamens

Es gibt zwei Möglichkeiten, die Eigenschaften eines Objekts in JavaScript zu definieren.

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

Die erste Methode des obigen Codes besteht darin, den Bezeichner direkt als Attributnamen zu verwenden, und die zweite Methode besteht darin, den Ausdruck als Attributnamen zu verwenden. Setzen Sie den Ausdruck in diesem Fall in eckige Klammern.
Wenn Sie jedoch Literale zum Definieren von Objekten verwenden (unter Verwendung von geschweiften Klammern), können Sie zum Definieren von Eigenschaften in ES5 nur Methode eins (Bezeichner) verwenden.

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

ES6 ermöglicht die Verwendung von Literalen zum Definieren von Objekten, wobei Methode 2 als Eigenschaftsname des Objekts verwendet wird, d. h. der Ausdruck in Klammern gesetzt wird.

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

Hier ist ein weiteres Beispiel:

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

Ausdrücke können auch zum Definieren von Methodennamen verwendet werden.

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

Hinweis:

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

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

Im obigen Code erhalten [keyA] und [keyB] [object object], sodass [keyB] [keyA] überschreibt und myObject Es gibt nur eines [Objektobjekt]-Attribut am Ende.

Das Namensattribut der Methode

Das Namensattribut der Funktion gibt den Funktionsnamen zurück. Objektmethoden sind ebenfalls Funktionen und verfügen daher auch über ein Namensattribut.

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

person.sayName.name   // "sayName"

Aufzählbarer Typ und Durchlauf von Attributen

Jedes Attribut des Objekts verfügt über ein Beschreibungsobjekt, mit dem das Verhalten beim Ändern des Attributs gesteuert wird. Die Methode Object.getOwnPropertyDescriptor(obj,'foo') kann das Beschreibungsobjekt der Eigenschaft abrufen.
Beschreibt das aufzählbare Attribut eines Objekts, das als Aufzählbarkeit bezeichnet wird. Wenn dieses Attribut falsch ist, bedeutet dies, dass einige Vorgänge das aktuelle Attribut ignorieren.
Derzeit gibt es vier Operationen, die Attribute ignorieren, deren Aufzählungswert falsch ist.

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

ES6 verfügt über insgesamt 5 Methoden zum Durchlaufen der Eigenschaften eines Objekts.
(1) für...in

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 keyword

Wir wissen, dass dieses Schlüsselwort immer auf For the verweist Das aktuelle Objekt, in dem sich die Funktion befindet, hat ES6 ein weiteres ähnliches Schlüsselwort super hinzugefügt, das auf das Prototypobjekt des aktuellen Objekts verweist.

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

Im obigen Code wird in der Methode des Objekts obj.find() über super.foo auf das foo-Attribut des Prototypobjekts proto verwiesen.
Hinweis: Wenn das Schlüsselwort super ein Prototypobjekt darstellt, kann es nur in der Methode des Objekts verwendet werden. Bei Verwendung an anderer Stelle wird ein Fehler gemeldet. Derzeit ermöglicht nur die Abkürzung „Objektmethode“ der Javascript-Engine die Bestätigung, dass die Objektmethode definiert ist.
Innerhalb der JavaScript-Engine entspricht super.foo Object.getPrototypeOf(this).foo oder Object.getPrototypeOf(this).foo.call(this).

Erweiterungsoperator des Objekts

Destrukturierende Zuweisung
Die destrukturierende Zuweisung des Objekts wird verwendet, um den Wert von einem Objekt abzurufen, der allen durchquerbaren, aber noch nicht gelesenen Elementen des Zielobjekts entspricht selbst Attribute werden dem angegebenen Objekt zugewiesen. Alle Schlüssel und ihre Werte werden in das neue Objekt kopiert.

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

Im obigen Code ist die Variable z das Objekt, in dem sich die Destrukturierungszuweisung befindet. Es übernimmt alle ungelesenen Schlüssel (a und b) rechts vom Gleichheitszeichen und kopiert sie zusammen mit ihren Werten.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Erweiterungen und neuen Methoden von ES6-Objekten (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!