Sök…


Syntax

  • objekt = {}
  • objekt = nytt objekt ()
  • object = Object.create (prototyp [, egenskaperObjekt])
  • object.key = värde
  • object ["key"] = värde
  • objekt [Symbol ()] = värde
  • object = {key1: value1, "key2": value2, 'key3': value3}
  • object = {conciseMethod () {…}}
  • object = {[beräknat () + "nyckel"]: värde}
  • Object.defineProperty (obj, propertyName, propertyDescriptor)
  • property_desc = Object.getOwnPropertyDescriptor (obj, propertyName)
  • Object.freeze (obj)
  • Object.seal (obj)

parametrar

Fast egendom Beskrivning
value Värdet som ska tilldelas fastigheten.
writable Oavsett om värdet på fastigheten kan ändras eller inte.
enumerable Oavsett om fastigheten kommer att räknas upp for in slingor eller inte.
configurable Oavsett om det är möjligt att omdefiniera egendomsbeskrivningen eller inte.
get En funktion som ska kallas som kommer att returnera värdet på fastigheten.
set En funktion som ska anropas när egenskapen tilldelas ett värde.

Anmärkningar

Objekt är samlingar av nyckelvärdespar eller egenskaper. Knapparna kan vara String eller Symbol och värden är antingen primitiva (nummer, strängar, symboler) eller referenser till andra objekt.

I JavaScript är en betydande mängd värden objekt (t.ex. funktioner, matriser) eller primitiva som uppträder som immutable objekt (antal, strängar, booleaner). Deras egenskaper eller deras prototype kan nås med obj.prop punkt ( obj.prop ) eller konsol ( obj['prop'] ). Anmärkningsvärda undantag är specialvärdena undefined och null .

Objekt hålls med referens i JavaScript, inte efter värde. Detta betyder att när kopieras eller överförs som argument till funktioner, är "kopian" och originalet referenser till samma objekt, och en ändring av ens egenskaper kommer att ändra samma egenskap hos den andra. Detta gäller inte primitiva, som är oföränderliga och överlämnas av värde.

Object.keys

5

Object.keys(obj) returnerar en matris med ett givet objekts nycklar.

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!"
};

var keys = Object.keys(obj);

console.log(keys); // ["a", "b", "c"]

Grunt kloning

6

ES6s Object.assign() -funktion kan användas för att kopiera alla de otaliga egenskaperna från en befintlig Object till en ny.

const existing = { a: 1, b: 2, c: 3 };

const clone = Object.assign({}, existing);

Detta inkluderar Symbol utöver String egenskaper.

Objekt vila / sprida destruktion, som för närvarande är ett steg 3-förslag ger ett ännu enklare sätt att skapa grunt kloner av objekt instanser:

const existing = { a: 1, b: 2, c: 3 };

const { ...clone } = existing;

Om du behöver stödja äldre versioner av JavaScript är det mest kompatibla sättet att klona ett objekt genom att iterera manuellt över dess egenskaper och filtrera ut ärvda med hjälp av .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

Det tillåter oss att definiera en egenskap i ett befintligt objekt med hjälp av en egendomsbeskrivning.

var obj = { };

Object.defineProperty(obj, 'foo', { value: 'foo' });

console.log(obj.foo);

Konsolutgång

foo

Object.defineProperty kan kallas med följande alternativ:

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 låter dig definiera flera egenskaper åt gången.

var obj = {};
Object.defineProperties(obj, {
  property1: {
    value: true,
    writable: true
  },
  property2: {
    value: 'Hello',
    writable: false
  }      
});

Endast skrivskyddad egendom

5

Med hjälp av egendomsbeskrivningar kan vi göra en egenskap endast läst, och alla försök att ändra dess värde kommer att misslyckas tyst, värdet kommer inte att ändras och inget fel kommer att kastas.

Den writable egenskapen i en fastighetsbeskrivning indikerar om den egenskapen kan ändras eller inte.

var a  = { };

Object.defineProperty(a, 'foo', { value: 'original', writable: false });

a.foo = 'new';

console.log(a.foo);

Konsolutgång

original-

Ej många nummer

5

Vi kan undvika att en fastighet dyker upp for (... in ...) öglor

Egenskapsbeskrivarens enumerable egendom berättar om den egenskapen kommer att räknas upp medan objektet går igenom objektets egenskaper.

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]);
}

Konsolutgång

visa

Lås fastighetsbeskrivning

5

En fastighetsdeskriptor kan låsas så att inga ändringar kan göras i den. Det kommer fortfarande att vara möjligt att använda egenskapen normalt, tilldela och hämta värdet från den, men varje försök att omdefiniera den kommer att kasta ett undantag.

Egenskapsbeskrivarens configurable egenskap används för att inte tillåta ytterligare ändringar i deskriptorn.

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});

Det här felet kommer att kastas:

TypeError: Kan inte omdefiniera egenskap: foo

Och fastigheten kommer fortfarande endast att läsas.

obj.foo = "new value";
console.log(foo);

Konsolutgång

originalvärde

Tillbehörsegenskaper (få och ställa in)

5

Behandla en egenskap som en kombination av två funktioner, en för att få värdet från den, och en annan för att ställa in värdet i den.

Egenskapsbeskrivarens get egenskap är en funktion som kommer att kallas för att hämta värdet från egenskapen.

Den set egenskapen är också en funktion, den kommer att kallas när egenskapen har tilldelats ett värde, och det nya värdet kommer att skickas som ett argument.

Du kan inte tilldela ett value eller writable till en deskriptor som har get eller 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"

Egenskaper med specialtecken eller reserverade ord

Även om notering av myObject.property vanligtvis skrivs som myObject.property , myObject.property detta bara tecken som normalt finns i JavaScript-variabelnamn , som huvudsakligen är bokstäver, siffror och understreck ( _ ).

Om du behöver specialtecken, till exempel utrymme, ☺, eller innehåll som tillhandahålls av användaren, är detta möjligt med [] parentesnotation.

myObject['special property ☺'] = 'it works!'
console.log(myObject['special property ☺'])

Helsiffriga egenskaper:

Förutom specialtecken kräver egendomens namn som är alla siffror parentesnotation. I det här fallet behöver dock inte egenskapen skrivas som en sträng.

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'

Ledande nollor rekommenderas emellertid inte, eftersom det tolkas som Octal-notation. (TODO, vi bör producera och länka till ett exempel som beskriver oktal, hexadecimal och exponentnotation)

Se även: [Arrays are Objects] -exempel.

Dynamiska / variabla egenskaper

Ibland måste egenskapens namn lagras i en variabel. I det här exemplet frågar vi användaren vilket ord som måste letas upp och tillhandahåller sedan resultatet från ett objekt som jag har namngivet dictionary .

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)

Notera hur vi använder [] fäste notation för att titta på variabeln word ; om vi skulle använda det traditionella . notation, då skulle det ta värdet bokstavligen, följaktligen:

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)

Du kan också skriva bokstavliga värden med [] notation genom att ersätta det variabla word med en sträng 'apple' . Se exemplet [Egenskaper med specialtecken eller reserverade ord].


Du kan också ställa in dynamiska egenskaper med parentessyntaxen:

var property="test";
var obj={
 [property]=1;
};

console.log(obj.test);//1

Det gör samma sak som:

var property="test";
var obj={};
obj[property]=1;

Matriser är föremål

Friskrivningsklausul: Skapa arrayliknande objekt rekommenderas inte. Det är dock bra att förstå hur de fungerar, särskilt när du arbetar med DOM. Detta förklarar varför vanliga arrayoperationer inte fungerar på DOM-objekt som returneras från många DOM- document . (dvs querySelectorAll , form.elements )

Antar att vi skapade följande objekt som har några egenskaper du kan förvänta dig att se i en array.

var anObject = {
    foo: 'bar',
    length: 'interesting',
    '0': 'zero!',
    '1': 'one!'
};

Då skapar vi en matris.

var anArray = ['zero.', 'one.'];

Lägg nu märke till hur vi kan inspektera både objektet och matrisen på samma sätt.

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

Eftersom anArray faktiskt är ett objekt, precis som anObject , kan vi till och med lägga till anpassade ordliga egenskaper till anArray

Friskrivningsklausul: Arrayer med anpassade egenskaper rekommenderas vanligtvis inte eftersom de kan vara förvirrande, men det kan vara användbart i avancerade fall där du behöver de optimerade funktionerna i en array. (dvs jQuery-objekt)

anArray.foo = 'it works!';
console.log(anArray.foo);

Vi kan till och med göra att ett anObject blir ett arrayliknande objekt genom att lägga till en length .

anObject.length = 2;

Sedan kan du använda C-stil for loop för att iterera över ett anObject precis som om det är en array. Se Array Iteration

Observera att anObject endast är ett arrayliknande objekt. (även känd som en lista) Det är inte en riktig array. Detta är viktigt eftersom funktioner som push and forEach (eller någon bekvämhetsfunktion som finns i Array.prototype ) inte fungerar som standard på matrisliknande objekt.

Många av DOM- document kommer att returnera en lista (dvs querySelectorAll , form.elements ) som liknar den anObject vi skapade ovan. Se Konvertera arrayliknande objekt till matriser

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 gör ett objekt oföränderligt genom att förhindra tillägg av nya egenskaper, borttagning av befintliga egenskaper och modifiering av befintliga egenskapernas antal, konfigurerbarhet och skrivbarhet. Det förhindrar också att värdet på befintliga egenskaper ändras. Det fungerar emellertid inte rekursivt vilket innebär att barnföremål inte frysas automatiskt och kan ändras.

Åtgärderna efter frysningen misslyckas tyst om inte koden körs i strikt läge. Om koden är i strikt läge TypeError en TypeError .

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 förhindrar tillägg eller borttagning av egenskaper från ett objekt. När ett objekt har förseglats kan dess egenskapsbeskrivare inte konverteras till en annan typ. Till skillnad från Object.freeze tillåter det att egenskaper redigeras.

Försök att göra dessa åtgärder på ett förseglat objekt kommer att misslyckas tyst

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';

I strikt läge kommer dessa operationer att kasta en TypeError

(function () {
    'use strict';

    var obj = { foo: 'foo' };

    Object.seal(obj);

    obj.newFoo = 'newFoo'; // TypeError
}());

Skapa ett Iterable-objekt

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); 
}

Konsolutgång

Ett

Rastning / spridning av objekt (...)

7

Objektspridning är bara syntaktiskt socker för Object.assign({}, obj1, ..., objn);

Det görs med operatören ...

let obj = { a: 1 };

let obj2 = { ...obj, b: 2, c: 3 };

console.log(obj2); // { a: 1, b: 2, c: 3 };

Som Object.assign gör det grunt sammanslagning, inte djup sammanslagning.

let obj3 = { ...obj, b: { c: 2 } };

console.log(obj3); // { a: 1, b: { c: 2 } };

OBS : Denna specifikation finns för närvarande i steg 3

Beskrivare och namngivna egenskaper

Egenskaper är medlemmar i ett objekt. Varje namngivna egenskap är ett par (namn, deskriptor). Namnet är en sträng som tillåter åtkomst (med hjälp av dot notation object.propertyName eller kvadratkonsolens notationsobjekt object['propertyName'] ). Beskrivaren är en post med fält som definierar egenskapens förskott när den nås (vad som händer med fastigheten och vad är värdet som returneras från åtkomst till den). I stort sett kopplar en egenskap ett namn till ett beteende (vi kan tänka på beteendet som en svart ruta).

Det finns två typer av namngivna egenskaper:

  1. dataegenskap : egenskapens namn är kopplat till ett värde.
  2. accessor-egenskap : egenskapens namn är associerat med en eller två accessor-funktioner.

Demonstration:

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

Egenskapens typ bestäms av dess deskriptorsfält och en egenskap kan inte vara av båda typerna.

Dataskrivare -

  • Obligatoriska fält: value eller writable eller båda
  • Valfria fält: configurable , enumerable

Prov:

{
   value: 10,
   writable: true;
}

Tillbehörsbeskrivare -

  • Obligatoriska fält: get eller set eller båda
  • Valfria fält: configurable , enumerable

Prov:

{
    get: function () {
        return 10;
    },
    enumerable: true
}

betydelse av fält och deras standardvärden

configurable , enumerable och writable :

  • Dessa nycklar är alla som false .
  • configurable är true om och bara om typen av den här egenskapens deskriptor kan ändras och om egenskapen kan tas bort från motsvarande objekt.
  • enumerable är true om och bara om den här egenskapen dyker upp under uppräkningen av egenskaperna på motsvarande objekt.
  • writable är true om och bara om värdet som är associerat med egenskapen kan ändras med en tilldelningsoperatör.

get och set :

  • Dessa tangenter är som standard undefined .
  • get är en funktion som fungerar som en getter för fastigheten, eller undefined om det inte finns någon getter. Funktionsreturen kommer att användas som värdet på egenskapen.
  • set är en funktion som fungerar som en setter för egenskapen, eller undefined om det inte finns någon setter. Funktionen får som enda argument det nya värdet som tilldelas egenskapen.

value :

  • Denna nyckel är som standard undefined .
  • Värdet förknippat med fastigheten. Kan vara valfritt JavaScript-värde (antal, objekt, funktion osv.).

Exempel:

    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

Få beskrivningen av en specifik egenskap i ett objekt.

var sampleObject = {
    hello: 'world'
};

Object.getOwnPropertyDescriptor(sampleObject, 'hello');
// Object {value: "world", writable: true, enumerable: true, configurable: true}

Kloning av objekt

När du vill ha en komplett kopia av ett objekt (dvs objektegenskaperna och värdena i dessa egenskaper osv ...) kallas det djup kloning .

5,1

Om ett objekt kan serialiseras till JSON, kan du skapa en djup klon av det med en kombination av JSON.parse och 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

Observera att JSON.stringify omvandlar Date objekt till ISO-format sträng representationer, men JSON.parse kommer inte konvertera strängen tillbaka till en Date .

Det finns ingen inbyggd funktion i JavaScript för att skapa djupa kloner, och det är i allmänhet inte möjligt att skapa djupa kloner för alla objekt av många skäl. Till exempel,

  • objekt kan ha otalbara och dolda egenskaper som inte kan upptäckas.
  • objektgetters och setters kan inte kopieras.
  • objekt kan ha en cyklisk struktur.
  • funktionsegenskaper kan bero på tillstånd i en dold omfattning.

Förutsatt att du har ett "trevligt" objekt vars egenskaper endast innehåller primitiva värden, datum, matriser eller andra "fina" objekt, kan följande funktion användas för att skapa djupa kloner. Det är en rekursiv funktion som kan upptäcka objekt med en cyklisk struktur och kommer att kasta ett fel i sådana fall.

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

Metoden Object.assign () används för att kopiera värdena på alla otaliga egna egenskaper från ett eller flera källobjekt till ett målobjekt. Det returnerar målobjektet.

Använd den för att tilldela värden till ett befintligt objekt:

var user = {
    firstName: "John"
};

Object.assign(user, {lastName: "Doe", age:39});
console.log(user); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

Eller skapa en grund kopia av ett objekt:

var obj = Object.assign({}, user);

console.log(obj); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

Eller slå samman många egenskaper från flera objekt till ett:

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

Primitiva kommer att lindas, null och odefinierade kommer att ignoreras:

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" }

Observera att endast strängomslag kan ha egna otaliga egenskaper

Använd den som reducerare: (sammanfogar en matris till ett objekt)

return users.reduce((result, user) => Object.assign({}, {[user.id]: user})

Objektegenskaper iteration

Du kan komma åt varje egenskap som tillhör ett objekt med denna slinga

for (var property in object) {
    // always check if an object has a property
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Du bör inkludera den extra kontrollen för hasOwnProperty eftersom ett objekt kan ha egenskaper som ärvs från objektets basklass. Om du inte utför den här kontrollen kan det uppstå fel.

5

Du kan också använda Object.keys funktionen som returnerar en Array som innehåller alla egenskaper för ett objekt och sedan kan du gå igenom den här arrayen med Array.map eller Array.forEach funktionen.

var obj = { 0: 'a', 1: 'b', 2: 'c' };

Object.keys(obj).map(function(key) {
    console.log(key);
}); 
// outputs: 0, 1, 2

Hämtar egenskaper från ett objekt

Egenskaper:

Egenskaper som kan hämtas från ett objekt kan ha följande egenskaper,

  • uppräkningsbar
  • Icke - Antal
  • egen

Samtidigt som vi skapade egenskaperna med hjälp av Object.defineProperty (s) , kunde vi ställa in dess egenskaper utom "egna" . Egenskaper som finns tillgängliga på den direkta nivån inte i prototypnivån ( __proto__ ) för ett objekt kallas som egna egenskaper.

Och egenskaperna som läggs till i ett objekt utan att använda Object.defindProperty(ies) kommer inte att ha sin otaliga egenskap. Det betyder att det betraktas som sant.

Syfte med uppräknbarhet:

Det huvudsakliga syftet med att sätta en mängd egenskaper till en egenskap är att göra den specifika egenskapens tillgänglighet när man hämtar den från sitt objekt med hjälp av olika programmatiska metoder. Dessa olika metoder kommer att diskuteras djupt nedan.

Metoder för att hämta egenskaper:

Egenskaper från ett objekt kan hämtas med följande metoder,

  1. for..in slingan

    Denna slinga är mycket användbar för att hämta otaliga egenskaper från ett objekt. Dessutom kommer denna slinga att hämta otaliga egna egenskaper såväl som den gör samma hämtning genom att gå igenom prototypkedjan tills den ser prototypen som noll.

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

    Denna funktion avslöjades som en del av EcmaScript 5. Den används för att hämta otaliga egna egenskaper från ett objekt. Före utgivningen brukade människor hämta egna egenskaper från ett objekt genom att kombinera for..in loop och Object.prototype.hasOwnProperty() -funktionen.

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

    Denna funktion kommer att hämta både otaliga och icke-antalet egna egenskaper från ett objekt. Det släpptes också som en del av 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"]
    

Övrigt:

Nedan ges en teknik för att hämta alla (egna, talbara, icke-räknbara, alla prototypnivåer) egenskaper från ett objekt,

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..."]

Och detta stöds av webbläsarna som stöder EcmaScript 5.

Konvertera objektets värden till array

Med tanke på detta objekt:

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!",
};

Du kan konvertera dess värden till en matris genom att göra:

var array = Object.keys(obj)
    .map(function(key) {
        return obj[key];
    });

console.log(array); // ["hello", "this is", "javascript!"]

Iterera över objektposter - Object.entries ()

8

Den föreslagna Object.entries() returnerar en matris med nyckel- / värdepar för det givna objektet. Det returnerar inte en iterator som Array.prototype.entries() , men Array som returneras av Object.entries() kan itereras oavsett.

const obj = {
    one: 1,
    two: 2,
    three: 3
};

Object.entries(obj);

Resulterar i:

[
    ["one", 1],
    ["two", 2],
    ["three", 3]
]

Det är ett användbart sätt att iterera över ett objekts nyckel- / värdepar:

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

Object.values() returnerar en matris med ett givet objekts egna otalbara egendomsvärden, i samma ordning som tillhandahålls av en för ... i slinga (skillnaden är att en för-in slinga räknar upp egenskaper i prototypkedjan också).

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

Notera:

För webbläsarsupport, se den här länken



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow