JavaScript Nesneleri Görüntüleme

JavaScript nesnesinin görüntülenmesi [object Object] çıktısını alacaktır.

Javascript'de nesne görüntülemelerinde bir nesneyi dizi olarak veya bir nesneyi string olarak görüntülemedir.

JavaScript nesnelerini görüntülemek için bazı yaygın çözümler şunlardır:

• Nesne Özelliklerini ada göre görüntüleme
• Bir Döngüde Nesne Özelliklerini Görüntüleme
• Nesneyi Dizi olarak görüntüleme Object.values, Object.keys ve Object.entries method kullanma
• JSON.stringify() kullanarak Nesneyi string olarak görüntüleme

Nesne Özelliklerini Görüntüleme

Bir nesnenin özellikleri bir string olarak görüntülenebilir:

var personel = {name:"Ahmet", age:25, city:"Ankara"};

document.getElementById("test").innerHTML = 

personel.name + "," + personel.age + "," + personel.city;

Nesneyi Bir Döngüde Görüntüleme

Bir nesnenin özellikleri bir döngüde yazılabilir:

var x, txt = "";
var person = {name:"Ahmet", age:25, city:"Ankara"};

for (x in person) {
  txt += person[x] + " ";
};

document.getElementById("test").innerHTML = txt;

ÇIKTI:

Nesneleri Diziye Çevirme

Herhangi bir JavaScript nesnesi, aşağıdakiler kullanılarak bir diziye dönüştürülebilir.

• Object.values()
• Object.keys()
• Object.entries()

Object.values() Kullanma

Son olarak, ES2017 ile artık resmileşti! Bir Nesneyi Diziye dönüştürmek için 3 methodumuz var.

const numbers = {
  one: 1,
  two: 2,
};

var myArray = Object.values(numbers);
console.log(myArray) // [ 1, 2 ]

Object.values() 2016'dan beri tüm büyük tarayıcılarda desteklenmektedir.

ES6 - Object.keys Kullanımı

Şimdi, nesne'deki Tüm anahtarları hızlı bir şekilde bir diziye dönüştüren yerleşik bir method var:

const numbers = {
  one: 1,
  two: 2,
};

var arr = Object.keys(numbers);

console.log(arr) // [ 'one', 'two' ]

Object.entries Kullanımı

ES2017 Özellik burada bitmedi. Döngü kullanmadan Methodumuzla hem anahtar hemde değerleri yazdırabiliriz.

const numbers = {
  one: 1,
  two: 2,
};

var arr = Object.entries(numbers);

console.log(arr) // [ ['one', 1], ['two', 2] ]

Diziyi tekrar Nesneye Çevirme

Bir sonraki sorunuz şu olabilir, şimdi diziyi bir nesneye nasıl geri dönüştürebilirim? Merak etmeyin, Object.fromEntries Adında yeni bir method var. Esasen Object.entries Methodun tam tersidir.

const array = [
  ['one', 1],
  ['two', 2],
];

var Nesne = Object.fromEntries(array);

console.log(Nesne)// { one: 1, two: 2 }

JSON.stringify() Kullanma

Herhangi bir JavaScript nesnesi, JSON.stringify() Methodu ile dizilebilir (bir dizeye dönüştürülebilir).

JSON'un yaygın bir kullanımı, bir web sunucusuyla / sunucusundan veri alışverişi yapmaktır.

Bir web sunucusuna veri gönderirken, verilerin bir dizge olması gerekir.

JSON (JavaScript Object Notation) değerleri ve nesneleri temsil etmek genel bir formattır. RFC 4627 standardında olduğu gibi açıklanmıştır . Başlangıçta JavaScript için yapıldı, ancak diğer birçok dilde de işlemek için kitaplıklar var. Bu nedenle, istemci JavaScript kullandığında ve sunucu Ruby / PHP / Java / Whatever üzerine yazıldığında veri alışverişi için JSON kullanmak kolaydır.

JavaScript methodlar sağlar:

• JSON.stringify nesneleri JSON'a dönüştürmek için.
• JSON.parse JSON'u bir nesneye geri dönüştürmek için.

let student = {
  name: 'Ahmet',
  age: 27,
  isAdmin: false,
  ders: ['html', 'css', 'js'],
  memur: null
};

let json = JSON.stringify(student);

console.log(typeof json);

console.log(json);

ÇIKTI:

string

{
 "name":"Ahmet",
 "age":27,
 "isAdmin":false,
 "ders":["html","css","js"],
 "memur":null
}
 

JSON.stringify(student) method, nesneyi alır ve bir dizeye dönüştürür.

JSON.stringify(student) methodu Nesnemizin içine ne yazdıysak olduğu gibi yazdı süslü parantezlerde dahil.

JSON ile kodlanmış bir nesnenin, nesne değişmezinden birkaç önemli farklılığı olduğunu lütfen unutmayın:

• Dizeler çift tırnak kullanır. JSON'da tek tırnak veya ters işaret yok. Böylece 'Ahmet' olur "Ahmet".
• Nesne özellik adları da çift tırnaklıdır. Bu zorunludur. Böylece age:27 olur "age":27

Bir tarih nesnesi'de JSON.stringify(student) methoduda Tarih olarak ekrana yazdırabilir.

let student = {
  name: 'Ahmet',
  age: 27,
  isAdmin: false,
  ders: ['html', 'css', 'js'],
  memur: null,
  bugun: new Date()
};

let json = JSON.stringify(student);

console.log(json);

ÇIKTI:

{
"name":"Ahmet",
"age":27,
"isAdmin":false,
"ders":["html","css","js"],
"memur":null,
"bugun":"2021-03-30T09:04:25.350Z"
}

Tarih nesnemizide consol ekranına yazdırdı.

JSON.stringify(student) methodu Nesnelerde ki fonksiyonlar için çalışmaz.

let student = {
  name: 'Ahmet',
  isAdmin: false,
  ders: ['html', 'css', 'js'],
  memur: null,
  age: function(){return 27;}
};

let json = JSON.stringify(student);

console.log(json);

ÇIKTI:

{
"name":"Ahmet",
"isAdmin":false,
"ders":["html","css","js"],
"memur":null
}