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
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
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
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
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
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
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)
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
. (dvsquerySelectorAll
,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
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
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
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 (...)
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:
- dataegenskap : egenskapens namn är kopplat till ett värde.
- 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
ellerwritable
eller båda - Valfria fält:
configurable
,enumerable
Prov:
{
value: 10,
writable: true;
}
Tillbehörsbeskrivare -
- Obligatoriska fält:
get
ellerset
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
ärtrue
om och bara om typen av den här egenskapens deskriptor kan ändras och om egenskapen kan tas bort från motsvarande objekt. -
enumerable
ärtrue
om och bara om den här egenskapen dyker upp under uppräkningen av egenskaperna på motsvarande objekt. -
writable
ärtrue
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, ellerundefined
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, ellerundefined
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 .
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.
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,
for..in
slinganDenna 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"]
Object.keys()
-funktionDenna 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 ochObject.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"]
Object.getOwnProperties()
-funktionenDenna 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 ()
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 ()
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