JavaScript'te JSON'un bilmediğiniz 5 gizli özelliği

JSON'un sağlayabileceği bu 5 özelliği bilmediğinize bahse girerim!

JSON, verileri canlandırmak gibi harika işler yapabilir, verileri kodlamak/kodunu çözmek için özel bir biçim kullanabilir, dizilenmiş verilerde belirli özellikleri gizleyebilir ve JSON'unuzu biçimlendirebilir! 🤯

Kulağa ilginç geliyor mu? Hadi hemen başlıyalım!

1. Biçimlendirme

Varsayılan stringifier, çirkin görünen JSON'u da küçültür.

const user = {
  name: 'John',
  age: 30,
  isAdmin: true,
  friends: ['Bob', 'Jane'],
  address: {
    city: 'New York',
    country: 'USA'
  }
};

console.log(JSON.stringify(user));
//=> {"name":"John","age":30,"isAdmin":true,"friends":["Bob","Jane"],"address":{"city":"New York","country":"USA"}}

JSON.stringify'ın yerleşik bir biçimlendiricisi de mevcut!

console.log(JSON.stringify(user, null, 2));
// {
//   "name": "John",
//   "age": 30,
//   "isAdmin": true,
//   "friends": [
//     "Bob",
//     "Jane"
//   ],
//   "address": {
//     "city": "New York",
//     "country": "USA"
//   }
// }

2. String verilerinde belirli özellikleri gizleme

JSON.stringify, çoğu kişi tarafından bilinmeyen ikinci bir argümana sahip. Çıktıda hangi verinin tutulup hangilerinin tutulmayacağına karar veren bir işlevdir

İşte bir kullanıcının şifresini gizleyebileceğimiz basit bir örnek.

.
const user = {
  name: 'John',
  password: '12345',
  age: 30
};

console.log(JSON.stringify(user, (key, value) => {
    if (key === 'password') {
            return;
    }

    return value;
}));

// output
{"name":"John","age":30}

3. Özel çıktı biçimleri oluşturmak için toJSON'u kullanma

Bir nesne toJSON işlevini uygularsa, JSON.stringify onu verileri dizgeleştirmek için kullanır.

Bunu düşünün:

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }
}

console.log(JSON.stringify(new Fraction(1, 2)))

Bu, {"pay":1,"payda":2} çıktısını verir. Ama ya bunu 1/2 dizesiyle değiştirmek istersek?

toJSON girin:

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }

  toJSON() {
      return `${this.numerator}/${this.denominator}`
  }
}

console.log(JSON.stringify(new Fraction(1, 2)))

JSON.stringify, toJSON özelliğine uyar ve "1/2" çıktısını alır.

4. Verileri canlandırmak(json-parse)

Yukarıdaki kesir örneğimiz iyi çalışıyor. Peki ya verileri canlandırmak istiyorsak? JSON'u tekrar ayrıştırdığımızda kesir sihirli bir şekilde geri getirilseydi harika olmaz mıydı? Yapabiliriz!

Canlandırıcılara girin!(json-parse)

class Fraction {
  constructor(n, d) {
    this.numerator = n;
    this.denominator = d;
  }

  toJSON() {
      return `${this.numerator}/${this.denominator}`
  }

  static fromJSON(key, value) {
    if (typeof value === 'string') {
        const parts = value.split('/').map(Number);
        if (parts.length === 2) return new Fraction(parts);
    }

    return value;
  }
}

const fraction = new Fraction(1, 2);
const stringified = JSON.stringify(fraction);
console.log(stringified);
// "1/2"
const revived = JSON.parse(stringified, Fraction.fromJSON);
console.log(revived);
// Fraction { numerator: 1, denominator: 2 }

Bir reviver(json-parse) işlevi belirtmek için JSON.parse'a ikinci bir argüman iletebiliriz.

Canlandıranın(json-parse) işi, dizilmiş verileri orijinal biçimine "canlandırmak". Burada, Fraction sınıfının JSON'dan gelen statik özelliği olan bir canlandırmayı geçiyoruz.

Bu durumda canlandırıcı, değerin geçerli bir kesir olup olmadığını kontrol eder ve eğer öyleyse, yeni bir Fraction nesnesi oluşturur ve onu döndürür.

5. Verileri gizlemek için canlandırıcıları (json-parse)

kullanma

Çözücüler gibi, canlandırıcılar da verileri gizlemek için kullanılabilir. Aynı şekilde çalışır.

İşte bir örnek:

const user = JSON.stringify({
  name: 'John',
  password: '12345',
  age: 30
});

console.log(JSON.parse(user, (key, value) => {
    if (key === 'password') {
            return;
    }

    return value;


}));

// output 
{ name: 'John', age: 30 }
```
`


kaynak: https://dev.to/siddharthshyniben/5-secret-features-of-json-you-didnt-know-about-5bbg