Zoeken…
Syntaxis
- object = {}
- object = new Object ()
- object = Object.create (prototype [, propertiesObject])
- object.key = waarde
- object ["key"] = waarde
- object [Symbol ()] = waarde
- object = {key1: value1, "key2": value2, 'key3': value3}
- object = {conciseMethod () {…}}
- object = {[computed () + "key"]: waarde}
- Object.defineProperty (obj, propertyName, propertyDescriptor)
- property_desc = Object.getOwnPropertyDescriptor (obj, propertyName)
- Object.freeze (obj)
- Object.seal (obj)
parameters
Eigendom | Beschrijving |
---|---|
value | De waarde die aan de eigenschap moet worden toegewezen. |
writable | Of de waarde van het onroerend goed kan worden gewijzigd of niet. |
enumerable | Of de eigenschap wordt geïnventariseerd for in lussen of niet. |
configurable | Of het mogelijk zal zijn om de eigenschapsbeschrijving opnieuw te definiëren of niet. |
get | Een aan te roepen functie die de waarde van de eigenschap retourneert. |
set | Een functie die moet worden aangeroepen wanneer aan de eigenschap een waarde wordt toegewezen. |
Opmerkingen
Objecten zijn verzamelingen sleutel / waarde-paren of eigenschappen. De sleutels kunnen String
s of Symbol
s zijn en waarden zijn primitieven (getallen, strings, symbolen) of verwijzingen naar andere objecten.
In JavaScript zijn een aanzienlijk aantal waarden objecten (bijv. Functies, arrays) of primitieven die zich gedragen als onveranderlijke objecten (getallen, strings, booleans). Hun eigenschappen of de eigenschappen van hun prototype
kunnen worden benaderd met behulp van obj.prop
( obj.prop
) of haakjes ( obj['prop']
) notatie. Opmerkelijke uitzonderingen zijn de speciale waarden undefined
en null
.
Objecten worden in JavaScript bewaard, niet op waarde. Dit betekent dat wanneer gekopieerd of doorgegeven als argumenten voor functies, de "kopie" en het origineel verwijzingen zijn naar hetzelfde object, en een wijziging in de eigenschappen van een persoon dezelfde eigenschap van de ander zal veranderen. Dit geldt niet voor primitieven, die onveranderlijk zijn en van waarde zijn.
Object.keys
Object.keys(obj)
retourneert een reeks sleutels van een bepaald object.
var obj = {
a: "hello",
b: "this is",
c: "javascript!"
};
var keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]
Ondiep klonen
De functie Object.assign()
ES6 kan worden gebruikt om alle opsombare eigenschappen van een bestaande Object
instantie naar een nieuwe te kopiëren.
const existing = { a: 1, b: 2, c: 3 };
const clone = Object.assign({}, existing);
Dit omvat Symbol
naast String
.
Object rest / spread destructuring dat momenteel een fase 3-voorstel is, biedt een nog eenvoudigere manier om ondiepe klonen van Object-exemplaren te maken:
const existing = { a: 1, b: 2, c: 3 };
const { ...clone } = existing;
Als u oudere versies van JavaScript moet ondersteunen, is de meest compatibele manier om een object te klonen door handmatig de eigenschappen ervan over te nemen en geërfde eigenschappen eruit te filteren met .hasOwnProperty()
.
var existing = { a: 1, b: 2, c: 3 };
var clone = {};
for (var prop in existing) {
if (existing.hasOwnProperty(prop)) {
clone[prop] = existing[prop];
}
}
Object.defineProperty
Hiermee kunnen we een eigenschap in een bestaand object definiëren met behulp van een eigenschapsbeschrijving.
var obj = { };
Object.defineProperty(obj, 'foo', { value: 'foo' });
console.log(obj.foo);
Console-uitgang
foo
Object.defineProperty
kan worden opgeroepen met de volgende opties:
Object.defineProperty(obj, 'nameOfTheProperty', {
value: valueOfTheProperty,
writable: true, // if false, the property is read-only
configurable : true, // true means the property can be changed later
enumerable : true // true means property can be enumerated such as in a for..in loop
});
Object.defineProperties
kunt u meerdere eigenschappen tegelijk definiëren.
var obj = {};
Object.defineProperties(obj, {
property1: {
value: true,
writable: true
},
property2: {
value: 'Hello',
writable: false
}
});
Alleen-lezen eigendom
Met behulp van eigenschapsbeschrijvingen kunnen we een eigenschap alleen-lezen maken en elke poging om de waarde ervan te wijzigen, zal stil mislukken, de waarde wordt niet gewijzigd en er wordt geen fout gegenereerd.
De writable
eigenschap in een eigenschapsbeschrijving geeft aan of die eigenschap kan worden gewijzigd of niet.
var a = { };
Object.defineProperty(a, 'foo', { value: 'original', writable: false });
a.foo = 'new';
console.log(a.foo);
Console-uitgang
origineel
Niet opsombaar eigendom
We kunnen voorkomen dat een eigenschap verschijnt for (... in ...)
lussen
De enumerable
eigenschap van de eigenschapsbeschrijving geeft aan of die eigenschap wordt opgesomd terwijl de eigenschappen van het object worden doorlopen.
var obj = { };
Object.defineProperty(obj, "foo", { value: 'show', enumerable: true });
Object.defineProperty(obj, "bar", { value: 'hide', enumerable: false });
for (var prop in obj) {
console.log(obj[prop]);
}
Console-uitgang
tonen
Beschrijving onroerend goed vergrendelen
De descriptor van een eigenschap kan worden vergrendeld, zodat er geen wijzigingen in kunnen worden aangebracht. Het is nog steeds mogelijk om de eigenschap normaal te gebruiken en de waarde ervan toe te wijzen en op te halen, maar elke poging om deze opnieuw te definiëren zal een uitzondering veroorzaken.
De configurable
eigenschap van de eigenschapsdescriptor wordt gebruikt om verdere wijzigingen van de descriptor niet toe te staan.
var obj = {};
// Define 'foo' as read only and lock it
Object.defineProperty(obj, "foo", {
value: "original value",
writable: false,
configurable: false
});
Object.defineProperty(obj, "foo", {writable: true});
Deze fout wordt gegenereerd:
TypeError: Kan eigenschap: foo niet opnieuw definiëren
En de eigenschap zal nog steeds alleen worden gelezen.
obj.foo = "new value";
console.log(foo);
Console-uitgang
originele waarde
Accesor eigenschappen (ophalen en instellen)
Behandel een eigenschap als een combinatie van twee functies, een om er de waarde uit te halen en een andere om de waarde in te stellen.
De eigenschap get
van de eigenschapsbeschrijving is een functie die wordt aangeroepen om de waarde uit de eigenschap op te halen.
De eigenschap set
is ook een functie, deze wordt aangeroepen wanneer aan de eigenschap een waarde is toegewezen en de nieuwe waarde wordt doorgegeven als argument.
U kunt geen value
of writable
toewijzen aan een descriptor die get
of set
var person = { name: "John", surname: "Doe"};
Object.defineProperty(person, 'fullName', {
get: function () {
return this.name + " " + this.surname;
},
set: function (value) {
[this.name, this.surname] = value.split(" ");
}
});
console.log(person.fullName); // -> "John Doe"
person.surname = "Hill";
console.log(person.fullName); // -> "John Hill"
person.fullName = "Mary Jones";
console.log(person.name) // -> "Mary"
Eigenschappen met speciale tekens of gereserveerde woorden
Hoewel de objecteigenschapnotatie meestal wordt geschreven als myObject.property
, staat dit alleen tekens toe die normaal worden gevonden in namen van JavaScript-variabelen , voornamelijk letters, cijfers en onderstrepingstekens ( _
).
Als u speciale tekens nodig hebt, zoals spatie, ☺ of door de gebruiker geleverde inhoud, is dit mogelijk met behulp van []
bracketnotatie.
myObject['special property ☺'] = 'it works!'
console.log(myObject['special property ☺'])
Alle cijfers eigenschappen:
Naast speciale tekens moeten voor eigenschapsnamen die uit alle cijfers bestaan haakse notatie worden gebruikt. In dit geval hoeft de eigenschap echter niet als een tekenreeks te worden geschreven.
myObject[123] = 'hi!' // number 123 is automatically converted to a string
console.log(myObject['123']) // notice how using string 123 produced the same result
console.log(myObject['12' + '3']) // string concatenation
console.log(myObject[120 + 3]) // arithmetic, still resulting in 123 and producing the same result
console.log(myObject[123.0]) // this works too because 123.0 evaluates to 123
console.log(myObject['123.0']) // this does NOT work, because '123' != '123.0'
Voorloopnullen worden echter niet aanbevolen, omdat dit wordt geïnterpreteerd als Octale notatie. (TODO, we moeten een voorbeeld produceren en er een link naar maken die de octale, hexadecimale en exponentnotatie beschrijft)
Zie ook: [Arrays are Objects] -voorbeeld.
Dynamische / variabele eigenschapnamen
Soms moet de eigenschapsnaam worden opgeslagen in een variabele. In dit voorbeeld vragen we de gebruiker welk woord moet worden opgezocht en geven we het resultaat van een object dat ik een dictionary
heb genoemd.
var dictionary = {
lettuce: 'a veggie',
banana: 'a fruit',
tomato: 'it depends on who you ask',
apple: 'a fruit',
Apple: 'Steve Jobs rocks!' // properties are case-sensitive
}
var word = prompt('What word would you like to look up today?')
var definition = dictionary[word]
alert(word + '\n\n' + definition)
Merk op hoe we []
haakjesnotatie gebruiken om naar de variabele met de naam word
te kijken; als we het traditionele zouden gebruiken .
notatie, dan zou het de waarde letterlijk nemen, vandaar:
console.log(dictionary.word) // doesn't work because word is taken literally and dictionary has no field named `word`
console.log(dictionary.apple) // it works! because apple is taken literally
console.log(dictionary[word]) // it works! because word is a variable, and the user perfectly typed in one of the words from our dictionary when prompted
console.log(dictionary[apple]) // error! apple is not defined (as a variable)
Je kunt ook letterlijke waarden schrijven met []
notatie door het variabele word
vervangen door een string 'apple'
. Zie het voorbeeld [Eigenschappen met speciale tekens of gereserveerde woorden].
U kunt ook dynamische eigenschappen instellen met de bracket-syntaxis:
var property="test";
var obj={
[property]=1;
};
console.log(obj.test);//1
Het doet hetzelfde als:
var property="test";
var obj={};
obj[property]=1;
Arrays zijn objecten
Disclaimer: het maken van matrixachtige objecten wordt niet aanbevolen. Het is echter handig om te begrijpen hoe ze werken, vooral wanneer u met DOM werkt. Dit zal verklaren waarom reguliere array-bewerkingen niet werken op DOM-objecten die worden geretourneerd vanuit veel DOM-
document
. (bijv.querySelectorAll
,form.elements
)
Stel dat we het volgende object hebben gemaakt met een aantal eigenschappen die u in een array zou verwachten.
var anObject = {
foo: 'bar',
length: 'interesting',
'0': 'zero!',
'1': 'one!'
};
Vervolgens maken we een array.
var anArray = ['zero.', 'one.'];
Merk nu op hoe we zowel het object als de array op dezelfde manier kunnen inspecteren.
console.log(anArray[0], anObject[0]); // outputs: zero. zero!
console.log(anArray[1], anObject[1]); // outputs: one. one!
console.log(anArray.length, anObject.length); // outputs: 2 interesting
console.log(anArray.foo, anObject.foo); // outputs: undefined bar
Omdat anArray
in feite een object is, net als anObject
, kunnen we zelfs aangepaste, wollige eigenschappen toevoegen aan anArray
Disclaimer: arrays met aangepaste eigenschappen worden meestal niet aanbevolen omdat ze verwarrend kunnen zijn, maar het kan handig zijn in geavanceerde gevallen waarin u de geoptimaliseerde functies van een array nodig hebt. (bijv. jQuery-objecten)
anArray.foo = 'it works!';
console.log(anArray.foo);
We kunnen zelfs van een anObject
een array-achtig object maken door een length
toe te voegen.
anObject.length = 2;
Vervolgens kunt u de C-stijl for
loop gebruiken om over anObject
te itereren alsof het een array is. Zie Array Iteration
Merk op dat anObject
slechts een matrix-achtige object. (ook bekend als een lijst) Het is geen echte array. Dit is belangrijk, omdat functies zoals push
en forEach
(of een andere handige functie in Array.prototype
) niet standaard werken op array-achtige objecten.
Veel van de DOM- document
retourneren een lijst (dat wil zeggen querySelectorAll
, form.elements
) die vergelijkbaar is met het array-achtige anObject
we hierboven hebben gemaakt. Zie Matrixachtige objecten omzetten in arrays
console.log(typeof anArray == 'object', typeof anObject == 'object'); // outputs: true true
console.log(anArray instanceof Object, anObject instanceof Object); // outputs: true true
console.log(anArray instanceof Array, anObject instanceof Array); // outputs: true false
console.log(Array.isArray(anArray), Array.isArray(anObject)); // outputs: true false
Object.freeze
Object.freeze
maakt een object onveranderlijk door te voorkomen dat nieuwe eigenschappen worden toegevoegd, bestaande eigenschappen worden verwijderd en de opsomming, configureerbaarheid en schrijfbaarheid van bestaande eigenschappen wordt gewijzigd. Het voorkomt ook dat de waarde van bestaande eigenschappen wordt gewijzigd. Het werkt echter niet recursief, wat betekent dat onderliggende objecten niet automatisch worden bevroren en kunnen worden gewijzigd.
De bewerkingen na het bevriezen mislukken stil tenzij de code in de strikte modus wordt uitgevoerd. Als de code in de strikte modus staat, wordt een TypeError
gegenereerd.
var obj = {
foo: 'foo',
bar: [1, 2, 3],
baz: {
foo: 'nested-foo'
}
};
Object.freeze(obj);
// Cannot add new properties
obj.newProperty = true;
// Cannot modify existing values or their descriptors
obj.foo = 'not foo';
Object.defineProperty(obj, 'foo', {
writable: true
});
// Cannot delete existing properties
delete obj.foo;
// Nested objects are not frozen
obj.bar.push(4);
obj.baz.foo = 'new foo';
Object.seal
Object.seal
voorkomt het toevoegen of verwijderen van eigenschappen van een object. Nadat een object is verzegeld, kunnen de eigenschapsbeschrijvingen niet worden geconverteerd naar een ander type. In tegenstelling tot Object.freeze
kunnen eigenschappen worden bewerkt.
Pogingen om deze bewerkingen op een verzegeld object uit te voeren, mislukken stil
var obj = { foo: 'foo', bar: function () { return 'bar'; } };
Object.seal(obj)
obj.newFoo = 'newFoo';
obj.bar = function () { return 'foo' };
obj.newFoo; // undefined
obj.bar(); // 'foo'
// Can't make foo an accessor property
Object.defineProperty(obj, 'foo', {
get: function () { return 'newFoo'; }
}); // TypeError
// But you can make it read only
Object.defineProperty(obj, 'foo', {
writable: false
}); // TypeError
obj.foo = 'newFoo';
obj.foo; // 'foo';
In de strikte modus geven deze bewerkingen een TypeError
(function () {
'use strict';
var obj = { foo: 'foo' };
Object.seal(obj);
obj.newFoo = 'newFoo'; // TypeError
}());
Een Iterable-object maken
var myIterableObject = {};
// An Iterable object must define a method located at the Symbol.iterator key:
myIterableObject[Symbol.iterator] = function () {
// The iterator should return an Iterator object
return {
// The Iterator object must implement a method, next()
next: function () {
// next must itself return an IteratorResult object
if (!this.iterated) {
this.iterated = true;
// The IteratorResult object has two properties
return {
// whether the iteration is complete, and
done: false,
// the value of the current iteration
value: 'One'
};
}
return {
// When iteration is complete, just the done property is needed
done: true
};
},
iterated: false
};
};
for (var c of myIterableObject) {
console.log(c);
}
Console-uitgang
een
Object rust / verspreiding (...)
Object.assign({}, obj1, ..., objn);
is gewoon syntactische suiker voor Object.assign({}, obj1, ..., objn);
Het wordt gedaan met de ...
operator:
let obj = { a: 1 };
let obj2 = { ...obj, b: 2, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 };
Als Object.assign
doet het oppervlakkig samenvoegen, niet diep samenvoegen.
let obj3 = { ...obj, b: { c: 2 } };
console.log(obj3); // { a: 1, b: { c: 2 } };
OPMERKING : deze specificatie bevindt zich momenteel in fase 3
Beschrijvingen en benoemde eigenschappen
Eigenschappen zijn leden van een object. Elke genoemde eigenschap is een paar (naam, descriptor). De naam is een tekenreeks die toegang toestaat (met behulp van de puntnotatie object.propertyName
of het vierkante haakjes object.propertyName
object['propertyName']
). De descriptor is een record van velden die de bevahiour van de eigenschap definiëren wanneer deze wordt benaderd (wat gebeurt er met de eigenschap en wat is de waarde die wordt geretourneerd bij toegang tot de eigenschap). Over het algemeen koppelt een eigenschap een naam aan een gedrag (we kunnen het gedrag als een zwarte doos beschouwen).
Er zijn twee soorten benoemde eigenschappen:
- data-eigenschap : de naam van de eigenschap is gekoppeld aan een waarde.
- accessor-eigenschap : de naam van de eigenschap is gekoppeld aan een of twee accessor-functies.
Demonstratie:
obj.propertyName1 = 5; //translates behind the scenes into
//either assigning 5 to the value field* if it is a data property
//or calling the set function with the parameter 5 if accessor property
//*actually whether an assignment would take place in the case of a data property
//also depends on the presence and value of the writable field - on that later on
Het type van de eigenschap wordt bepaald door de velden van de descriptor en een eigenschap kan niet van beide typen zijn.
Gegevensdescriptoren -
- Verplichte velden:
value
ofwritable
of beide - Optionele velden:
configurable
,enumerable
Monster:
{
value: 10,
writable: true;
}
Accessor descriptoren -
- Verplichte velden:
get
ofset
of beide - Optionele velden:
configurable
,enumerable
Monster:
{
get: function () {
return 10;
},
enumerable: true
}
betekenis van velden en hun standaardwaarden
configurable
, enumerable
en writable
: - Deze sleutels zijn allemaal standaard
false
. -
configurable
istrue
als en alleen als het type van deze eigenschapsbeschrijving kan worden gewijzigd en als de eigenschap uit het overeenkomstige object kan worden verwijderd. -
enumerable
istrue
als en alleen als deze eigenschap wordt weergegeven tijdens de inventarisatie van de eigenschappen op het overeenkomstige object. -
writable
istrue
als en alleen als de waarde die aan de eigenschap is gekoppeld, kan worden gewijzigd met een toewijzingsoperator.
get
en set
:
- Deze sleutels zijn standaard
undefined
. -
get
is een functie die dient als getter voor de eigenschap, ofundefined
als er geen getter is. De functie return wordt gebruikt als de waarde van de eigenschap. -
set
is een functie die als een setter voor de eigenschap fungeert, ofundefined
als er geen setter is. De functie ontvangt als enige argument de nieuwe waarde die aan de eigenschap wordt toegewezen.
value
:
- Deze sleutel is standaard
undefined
. - De waarde die aan de eigenschap is gekoppeld. Kan elke geldige JavaScript-waarde zijn (nummer, object, functie, enz.).
Voorbeeld:
var obj = {propertyName1: 1}; //the pair is actually ('propertyName1', {value:1,
// writable:true,
// enumerable:true,
// configurable:true})
Object.defineProperty(obj, 'propertyName2', {get: function() {
console.log('this will be logged ' +
'every time propertyName2 is accessed to get its value');
},
set: function() {
console.log('and this will be logged ' +
'every time propertyName2\'s value is tried to be set')
//will be treated like it has enumerable:false, configurable:false
}});
//propertyName1 is the name of obj's data property
//and propertyName2 is the name of its accessor property
obj.propertyName1 = 3;
console.log(obj.propertyName1); //3
obj.propertyName2 = 3; //and this will be logged every time propertyName2's value is tried to be set
console.log(obj.propertyName2); //this will be logged every time propertyName2 is accessed to get its value
Object.getOwnPropertyDescriptor
Verkrijg de beschrijving van een specifieke eigenschap in een object.
var sampleObject = {
hello: 'world'
};
Object.getOwnPropertyDescriptor(sampleObject, 'hello');
// Object {value: "world", writable: true, enumerable: true, configurable: true}
Object klonen
Als u een volledige kopie van een object wilt (dat wil zeggen de objecteigenschappen en de waarden binnen die eigenschappen, enz ...), wordt dat diepe klonen genoemd .
Als een object kan worden geserialiseerd naar JSON, kunt u er een diepe kloon van maken met een combinatie van JSON.parse
en JSON.stringify
:
var existing = { a: 1, b: { c: 2 } };
var copy = JSON.parse(JSON.stringify(existing));
existing.b.c = 3; // copy.b.c will not change
Merk op dat JSON.stringify
Date
objecten converteert naar tekenreeksrepresentaties in ISO-indeling, maar JSON.parse
converteert de string niet terug naar een Date
.
JavaScript heeft geen ingebouwde functie voor het maken van diepe klonen en het is over het algemeen om vele redenen niet mogelijk om voor elk object diepe klonen te maken. Bijvoorbeeld,
- objecten kunnen niet-opsombare en verborgen eigenschappen hebben die niet kunnen worden gedetecteerd.
- object getters en setters kunnen niet worden gekopieerd.
- objecten kunnen een cyclische structuur hebben.
- functie-eigenschappen kunnen afhankelijk zijn van de status in een verborgen bereik.
Ervan uitgaande dat u een "leuk" object hebt waarvan de eigenschappen alleen primitieve waarden, datums, arrays of andere "leuke" objecten bevatten, kan de volgende functie worden gebruikt voor het maken van diepe klonen. Het is een recursieve functie die objecten met een cyclische structuur kan detecteren en in dergelijke gevallen een fout kan veroorzaken.
function deepClone(obj) {
function clone(obj, traversedObjects) {
var copy;
// primitive types
if(obj === null || typeof obj !== "object") {
return obj;
}
// detect cycles
for(var i = 0; i < traversedObjects.length; i++) {
if(traversedObjects[i] === obj) {
throw new Error("Cannot clone circular object.");
}
}
// dates
if(obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// arrays
if(obj instanceof Array) {
copy = [];
for(var i = 0; i < obj.length; i++) {
copy.push(clone(obj[i], traversedObjects.concat(obj)));
}
return copy;
}
// simple objects
if(obj instanceof Object) {
copy = {};
for(var key in obj) {
if(obj.hasOwnProperty(key)) {
copy[key] = clone(obj[key], traversedObjects.concat(obj));
}
}
return copy;
}
throw new Error("Not a cloneable object.");
}
return clone(obj, []);
}
Object.assign
De methode Object.assign () wordt gebruikt om de waarden van alle opsombare eigen eigenschappen van een of meer bronobjecten naar een doelobject te kopiëren. Het retourneert het doelobject.
Gebruik het om waarden toe te wijzen aan een bestaand object:
var user = {
firstName: "John"
};
Object.assign(user, {lastName: "Doe", age:39});
console.log(user); // Logs: {firstName: "John", lastName: "Doe", age: 39}
Of om een ondiepe kopie van een object te maken:
var obj = Object.assign({}, user);
console.log(obj); // Logs: {firstName: "John", lastName: "Doe", age: 39}
Of voeg veel eigenschappen samen van meerdere objecten tot één:
var obj1 = {
a: 1
};
var obj2 = {
b: 2
};
var obj3 = {
c: 3
};
var obj = Object.assign(obj1, obj2, obj3);
console.log(obj); // Logs: { a: 1, b: 2, c: 3 }
console.log(obj1); // Logs: { a: 1, b: 2, c: 3 }, target object itself is changed
Primitieven worden ingepakt, null en ongedefinieerd worden genegeerd:
var var_1 = 'abc';
var var_2 = true;
var var_3 = 10;
var var_4 = Symbol('foo');
var obj = Object.assign({}, var_1, null, var_2, undefined, var_3, var_4);
console.log(obj); // Logs: { "0": "a", "1": "b", "2": "c" }
Let op, alleen tekenreeksen kunnen eigen opsombare eigenschappen hebben
Gebruik het als verkleiner: (voegt een array samen met een object)
return users.reduce((result, user) => Object.assign({}, {[user.id]: user})
Iteratie van objecteigenschappen
Met deze lus hebt u toegang tot elke eigenschap die bij een object hoort
for (var property in object) {
// always check if an object has a property
if (object.hasOwnProperty(property)) {
// do stuff
}
}
U moet de extra controle voor hasOwnProperty
omdat een object eigenschappen kan hebben die zijn overgenomen van de basisklasse van het object. Het niet uitvoeren van deze controle kan fouten veroorzaken.
U kunt ook de functie Object.keys
gebruiken die een array retourneert die alle eigenschappen van een object bevat en vervolgens kunt u deze array Array.forEach
functie Array.map
of Array.forEach
.
var obj = { 0: 'a', 1: 'b', 2: 'c' };
Object.keys(obj).map(function(key) {
console.log(key);
});
// outputs: 0, 1, 2
Eigenschappen ophalen van een object
Kenmerken van eigenschappen:
Eigenschappen die uit een object kunnen worden opgehaald, kunnen de volgende kenmerken hebben,
- enumerable
- Niet - Op te tellen
- eigen
Tijdens het maken van de eigenschappen met Object.defineProperty (s) , konden we de kenmerken ervan instellen, behalve "eigen" . Eigenschappen die beschikbaar zijn in het directe niveau en niet in het prototypeniveau ( __proto__
) van een object worden als eigen eigenschappen genoemd.
En de eigenschappen die aan een object worden toegevoegd zonder Object.defindProperty(ies)
, hebben niet hun opsommingseigenschap. Dat betekent dat het als waar wordt beschouwd.
Doel van de opsomming:
Het belangrijkste doel van het instellen van ontelbare kenmerken voor een eigenschap is om de beschikbaarheid van de specifieke eigenschap te verkrijgen bij het ophalen van het object, met behulp van verschillende programmatische methoden. Die verschillende methoden zullen hieronder diep worden besproken.
Methoden voor het ophalen van eigenschappen:
Eigenschappen van een object kunnen op de volgende manieren worden opgehaald,
for..in
lusDeze lus is erg handig bij het ophalen van ontelbare eigenschappen van een object. Bovendien zal deze lus ontelbare eigen eigenschappen ophalen en hetzelfde ophalen door de prototypeketen te doorlopen totdat het prototype als nul wordt beschouwd.
//Ex 1 : Simple data var x = { a : 10 , b : 3} , props = []; for(prop in x){ props.push(prop); } console.log(props); //["a","b"] //Ex 2 : Data with enumerable properties in prototype chain var x = { a : 10 , __proto__ : { b : 10 }} , props = []; for(prop in x){ props.push(prop); } console.log(props); //["a","b"] //Ex 3 : Data with non enumerable properties var x = { a : 10 } , props = []; Object.defineProperty(x, "b", {value : 5, enumerable : false}); for(prop in x){ props.push(prop); } console.log(props); //["a"]
Deze functie werd onthuld als onderdeel van EcmaScript 5. Het wordt gebruikt om talloze eigen eigenschappen van een object op te halen. Voorafgaand aan de release gebruikten mensen om eigen eigenschappen van een object op te halen door
for..in
loop enObject.prototype.hasOwnProperty()
combineren.//Ex 1 : Simple data var x = { a : 10 , b : 3} , props; props = Object.keys(x); console.log(props); //["a","b"] //Ex 2 : Data with enumerable properties in prototype chain var x = { a : 10 , __proto__ : { b : 10 }} , props; props = Object.keys(x); console.log(props); //["a"] //Ex 3 : Data with non enumerable properties var x = { a : 10 } , props; Object.defineProperty(x, "b", {value : 5, enumerable : false}); props = Object.keys(x); console.log(props); //["a"]
Met deze functie worden zowel opsommende als niet-opsombare, eigen eigenschappen van een object opgehaald. Het werd ook uitgebracht als onderdeel van EcmaScript 5.
//Ex 1 : Simple data var x = { a : 10 , b : 3} , props; props = Object.getOwnPropertyNames(x); console.log(props); //["a","b"] //Ex 2 : Data with enumerable properties in prototype chain var x = { a : 10 , __proto__ : { b : 10 }} , props; props = Object.getOwnPropertyNames(x); console.log(props); //["a"] //Ex 3 : Data with non enumerable properties var x = { a : 10 } , props; Object.defineProperty(x, "b", {value : 5, enumerable : false}); props = Object.getOwnPropertyNames(x); console.log(props); //["a", "b"]
Diversen :
Een techniek voor het ophalen van alle (eigen, opsombare, niet-opsombare, alle prototypeniveau) eigenschappen uit een object wordt hieronder gegeven,
function getAllProperties(obj, props = []){
return obj == null ? props :
getAllProperties(Object.getPrototypeOf(obj),
props.concat(Object.getOwnPropertyNames(obj)));
}
var x = {a:10, __proto__ : { b : 5, c : 15 }};
//adding a non enumerable property to first level prototype
Object.defineProperty(x.__proto__, "d", {value : 20, enumerable : false});
console.log(getAllProperties(x)); ["a", "b", "c", "d", "...other default core props..."]
En dit wordt ondersteund door de browsers die EcmaScript 5 ondersteunen.
Converteer de waarden van een object naar een array
Gezien dit object:
var obj = {
a: "hello",
b: "this is",
c: "javascript!",
};
U kunt de waarden naar een array converteren door het volgende te doen:
var array = Object.keys(obj)
.map(function(key) {
return obj[key];
});
console.log(array); // ["hello", "this is", "javascript!"]
Itereren over objectitems - Object.entries ()
De voorgestelde methode Object.entries()
retourneert een reeks sleutel / waarde-paren voor het gegeven object. Het retourneert geen iterator zoals Array.prototype.entries()
, maar de array die wordt geretourneerd door Object.entries()
kan toch worden herhaald.
const obj = {
one: 1,
two: 2,
three: 3
};
Object.entries(obj);
Resulteert in:
[
["one", 1],
["two", 2],
["three", 3]
]
Het is een handige manier om de sleutel / waarde-paren van een object te herhalen:
for(const [key, value] of Object.entries(obj)) {
console.log(key); // "one", "two" and "three"
console.log(value); // 1, 2 and 3
}
Object.values ()
De methode Object.values()
retourneert een array van de eigen opsombare eigenschapswaarden van een bepaald object, in dezelfde volgorde als door een for ... in-lus (het verschil is dat een for-in-lus eigenschappen in de prototypeketen opsomt ook).
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
Notitie:
Raadpleeg deze link voor browserondersteuning