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 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:

Ahmet 25 Ankara
Döngüde person [x] kullanmanız gerekir. person.x çalışmayacaktır (Çünkü x bir değişkendir).

Nesneleri Diziye Çevirme


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

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:


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:

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
}
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

5353

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.