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

5

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

6

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

5

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

5

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

5

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

5

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)

5

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

5

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

5

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

6
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 (...)

7

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:

  1. data-eigenschap : de naam van de eigenschap is gekoppeld aan een waarde.
  2. 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 of writable of beide
  • Optionele velden: configurable , enumerable

Monster:

{
   value: 10,
   writable: true;
}

Accessor descriptoren -

  • Verplichte velden: get of set 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 is true als en alleen als het type van deze eigenschapsbeschrijving kan worden gewijzigd en als de eigenschap uit het overeenkomstige object kan worden verwijderd.
  • enumerable is true als en alleen als deze eigenschap wordt weergegeven tijdens de inventarisatie van de eigenschappen op het overeenkomstige object.
  • writable is true 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, of undefined 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, of undefined 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 .

5.1

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.

5

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,

  1. for..in lus

    Deze 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"]
    
  2. Object.keys()

    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 en Object.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"]
    
  1. Object.getOwnProperties()

    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 ()

8

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 ()

8

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



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow