Oggetti in javscript

Un oggetto aggrega più valori e consente di archiviare e recuperare tali valori in base al nome.

Un oggetto è una raccolta non ordinata di proprietà, ognuna delle quali ha un nome e un valore . I nomi delle proprietà sono generalmente stringhe, quindi possiamo dire che gli oggetti mappano le stringhe ai valori.

Oltre a mantenere il proprio insieme di proprietà, un oggetto JavaScript eredita anche le proprietà di un altro oggetto, noto come " prototipo ".

Qualsiasi valore in JavaScript che non sia una stringa, un numero, un simbolo o true, false, null o undefined è un oggetto. E anche se stringhe, numeri e valori booleani non sono oggetti, possono comportarsi come oggetti immutabili.

Gli oggetti sono mutabili e manipolati per riferimento piuttosto che per valore . Se la variabile x si riferisce a un oggetto e il codice let y = x; viene eseguito, la variabile y contiene un riferimento allo stesso oggetto, non una copia di quell'oggetto. Eventuali modifiche apportate all'oggetto tramite la variabile y sono visibili anche tramite la variabile x.

In questo articolo, approfondiremo gli oggetti con esempi per capire come gli oggetti funzionano sotto il cofano in javascript.

Creazione di oggetti -

Ci sono 3 modi per creare un oggetto in javascript. I seguenti modi sono discussi di seguito:

1. Valori letterali oggetto — Un valore letterale oggetto è un elenco separato da virgole di coppie nome:valore separate da due punti, racchiuse tra parentesi graffe.

let empty = {};                //An object with no properties
let point = { x: 0, y: 0 };   //Two numeric properties

let o = new Object();      // Create an empty object: same as {}
let a = new Array();       // Create an empty array: same as []
let r = new Map();         // Create a Map object for key/value mapping

const orgObject = { company: 'ABC' };
const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } });
console.log(employee);          // { company: "ABC" }
console.log(employee.name);     // "EmployeeOne"

Interrogazione e impostazione delle proprietà -

Per ottenere il valore di una proprietà, utilizzare gli operatori punto (.) o parentesi quadra ([]) .

let author = book.author;       // Get the "author" property of the book.
let title = book["main title"]; // Get the "main title" property of the book.

book.edition = 7;                   // Create an "edition" property of book.
book["main title"] = "ECMAScript"; // Change the "main title" property.

L' operatore delete rimuove una proprietà da un oggetto. Se il valore della proprietà è un oggetto e non ci sono più riferimenti all'oggetto, l'oggetto contenuto in quella proprietà viene infine rilasciato automaticamente.

delete book.author;         // The book object now has no author property.
delete book["main title"]; // Now it doesn't have "main title", either.

Verifica delle proprietà dell'oggetto -

1. Il metodo hasOwnProperty() di un oggetto verifica se quell'oggetto ha una propria proprietà con il nome dato. Restituisce false per le proprietà ereditate:

let o = { x: 1 };
o.hasOwnProperty("x")      // => true: o has an own property x
o.hasOwnProperty("y")     // => false: o doesn't have a property y

let obj = { x: 1 };
"x" in obj // => true: obj has an own property "x"
"y" in obj // => false: obj doesn't have a property "y"

Un'operazione comune nei programmi JavaScript è la necessità di copiare le proprietà di un oggetto in un altro oggetto. In ES6, questa capacità arriva al linguaggio JavaScript di base sotto forma di Object.assign() . Object.assign() si aspetta due o più oggetti come argomenti . Modifica e restituisce il primo argomento, che è l'oggetto di destinazione, ma non altera il secondo o eventuali argomenti successivi, che sono gli oggetti di origine.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); //output: Object { a: 1, b: 4, c: 5 }

La serializzazione degli oggetti è il processo di conversione dello stato di un oggetto in una stringa dalla quale può essere successivamente ripristinato. Le funzioni JSON.stringify() e JSON.parse() serializzano e ripristinano oggetti JavaScript.

let o = {x: 1, y: {z: [false, null, ""]}}; // Define a test object
let s = JSON.stringify(o); // s == '{"x":1,"y":{"z": [false,null,""]}}'
let p = JSON.parse(s); // p == {x: 1, y: {z: [false, null, ""]}}

Versioni recenti di JavaScript hanno esteso la sintassi per i letterali oggetto in diversi modi utili. La sezione seguente spiega queste estensioni.

1. Proprietà abbreviate — Prima di ES6, un oggetto letterale era una raccolta di coppie nome-valore. Con la sintassi letterale dell'oggetto di base, finiresti per ripetere ogni identificatore due volte:

function createMachine(name, status) {
  return {
  name: name,
  status: status
  };
}

function createMachine(name, status) {
  return {
  name,
  status
  };
}

Le parentesi quadre consentono di utilizzare i valori letterali stringa e le variabili come nomi di proprietà.

let name = 'machine name';
let machine = {
  [name]: 'server',
  'machine hours': 10000
};
console.log(machine[name]); // server
console.log(machine['machine hours']); // 10000

In ES6, il nome della proprietà calcolata fa parte della sintassi letterale dell'oggetto e utilizza la notazione tra parentesi quadre.

let prefix = 'machine';
let machine = {
  [prefix + ' name']: 'server',
  [prefix + ' hours']: 10000
};
console.log(machine['machine name']); // server
console.log(machine['machine hours']); // 10000

3. Sintassi concisa del metodo

Prima di ES6, quando si definisce un metodo per un oggetto letterale, è necessario specificare il nome e la definizione completa della funzione come mostrato nell'esempio seguente:

let server = {
  name: "Server",
  restart: function () {
    console.log("The" + this.name + " is restarting…");
  }
};

let server = {
  name: 'Server',
  restart() {
    console.log("The" + this.name + " is restarting…");
  }
};

const odd = [1,3,5];
const combined = [2,4,6, …odd];
console.log(combined); //[ 2, 4, 6, 1, 3, 5 ]

Questi prossimi post faranno parte di una serie che discute le nozioni di base e gli argomenti avanzati su JavaScript.

• Dichiarazioni in Javascript
• Altri blog in arrivo

Se questa storia ti è piaciuta, fai clic sul pulsante e condividila, in modo che anche gli altri possano trovarla! Inoltre, sentiti libero di lasciare un commento qui sotto.

Groww Engineering pubblica aneddoti tecnici, le ultime tecnologie e modi migliori per affrontare problemi di programmazione comuni. Puoi iscriverti qui per ricevere gli ultimi aggiornamenti.

Stiamo assumendo. Visualizza le offerte di lavoro qui .