Sık Karşılaşılan Sorunlar için JavaScript Kod Parçacığı

Son Güncelleme 27 Temmuz 2021

Her programlama dilinin kusurları ve tuhaflıkları vardır. JavaScript dili ve kullanılan JavaScript kod parçacığı bile bir istisna değildir. Yazı dili son yıllarda garip davrandı, ancak bu gün en yaygın kullanılan dillerden biri. Çoğunlukla, internet tarayıcılarının birincil etkileşimli dili olduğu içindir.

Programcılar ve kodlayıcılar olarak, basit kod parçacıklarına ihtiyaç duyduğumuz tekrarlayan, basit görev problemlerimiz olduğu zamanlar vardır. Bu blogda, bazı JavaScript kod parçacıklarının bir parçası olarak ES6 komut dosyası kullanarak kolayca çözülebilecek bazı yaygın sorunları sunacağım.

JavaScript Kod Parçacığı İpucu: 'var' yerine 'let' kullanın

let var gibidir, ancak kapsamı olmasına izin verir . let yalnızca bildirildiği ve bir değer atandığı blok kapsamı düzeyinde erişilebilir. var , tanımladığı blok kapsamı ile ilgili herhangi bir düzeyde erişilebilir. Aşağıdaki örnekte, 'num1' değişkeni bir If deyimi içinde tanımlanmıştır ve bu nedenle işlev dışında erişilebilir değildir.

 Eğer doğruysa) {
  say1 = 40 olsun;
}

sayı2 = 20 olsun;

konsol.log(sayı2, sayı1);
konsol.log(sayı1);

Çıktı:
20
Tanımsız

 a = 25 olsun;
b = 50 olsun;

Eğer doğruysa) {
  a = 100 olsun;
  var c = 5;
  konsol.log(a/c);
  konsol.log(b/c);
}

konsol.log(c);
konsol.log(a);

Çıktı:
20
10
5
25

Değişken Değeri Değişmediğinde 'const' Kullanın

const , değiştirilemeyen bir değişkene sabit bir değer atar. Bir const değişkeni tanımlandığında, JavaScript, değerin adresini değişkene başvurur.

JavaScript Kod Parçacığı'nın Ok İşlevi, İşlevler için Yeni Bir Sözdizimi

ES6'daki JavaScript kod parçacıklarının İşlevleri, daha basit bir ifade olan '() => {}' ile değiştirildi.

 // Eski Sözdizimi
function merhaba() {
  konsol.log("Merhaba Dünya..!");
}

// Yeni Sözdizimi
var myHello = () => {
  konsol.log("Merhaba Dünya..!");
}

Yeni sözdizimi başlangıçta biraz kafa karıştırıcı olabilir. Sözdiziminin iki bölümü vardır.

 var myHello = ()

JavaScript Kod Parçacığının ilk kısmı bir değişken bildirir ve ona () işlevini atar. Sadece değişkenin bir fonksiyon olduğunu söylüyor.

 => { //bir şeyler yap } 

İkinci kısım, fonksiyonun gövde kısmını bildirir. Kıvrımlı parantezli ok kısmı gövde kısmını tanımlar.

Diğer örnekler ancak parametrelerle.

 let withParameters = (a, b) => {
  konsol.log(a+b);
}

withParameters(10, 20);

Çıktı:
30

 sumOfNum = (a, b = 10) => {
  a + b'yi döndür;
}

konsol.log(sumOfNum(20);
konsol.log(sumOfNum(20,30);

Çıktı:
30
50

Yeni' için… of…' Döngü

for…of , küçük bir değişiklikle for… in'e çok benzer. for…of , Array gibi bir öğe listesi üzerinden yinelenir ve öğeleri (dizinlerini değil) tek tek döndürür. 'num' değişkeninin dizindeki her bir öğeyi çıktı olarak verdiğini unutmayın, dizini değil.

 sayılar = [5,6,7,8];

for (sayı sayısı olsun) {
  konsol.log(değer);
}

Çıktı:
5
6
7
8

 izin ver str = 'Arturo';

for (let char of str) {
  konsol.log(char);
}

Çıktı:
A
r
t
sen
r
Ö

Değişken Atamasını Yok Etme

Bir diziden değişkenleri tek tek atamak zaman alıcı ve aptalcadır. Bunu daha hızlı ve daha kolay gerçekleştirmek için yıkıcı atamayı kullanın:

 let profile = ['John', 32, 'mühendis'];

let [isim, yaş, iş] = profil;

konsol.log(isim);

Çıktı:
John

Bir Nesne Dizisinde Belirli Bir Nesneyi Bulun

JavaScript'te gerçekleştirmeniz gereken en yaygın görevlerden biri, belirli bir nesneyi bulmak için bir dizi nesneyi yinelemektir. Bul yöntemi burada basit bir çözümdür. Argüman olarak isimsiz bir işlev kullanarak seçim kriterlerini girmeniz yeterlidir ve hazırsınız:

 personele izin ver = [
  { id: 0, isim: 'Nina' },
  { id: 1, ad: 'Kevin' },
  { kimlik: 2, ad: 'John' }
]

let çalışan = staff.find(emp => em.name === 'John');

konsol.log(istemci);

Çıktı:
{ kimlik: 2, ad: 'John' }

Bir Nesne Anahtarları ve Değerleri Üzerinde Döngü Yapmak

Veri yapımız, çeşitli anahtar/değer çiftlerini içeren karmaşık bir nesne olabilir. Her bir çifti yinelemek biraz tuhaf olabilir, ancak Object işlevini kullanmaya başladığımızda bu çok basit.

Nesnenin anahtarları yakalandıktan sonra, aynı anda anahtarlar ve değerler arasında dolaşabiliriz. Aşağıdaki çözümde, döngü sırasında anahtar ve değer değişkenlerini kullanarak her bir çifte erişiyoruz.

 let myObject = { Peter: 15, John: 20, Anne: 35 };

Object.keys(myObject).forEach((anahtar, değer) => {
  //...bir şey yap
  konsol.log(anahtar, değer);
});

Çıktı:
15
John 20
Anne 35

Koşullara Göre Nesne Dizisini Filtreleme

Bazen, belirli bir koşula göre öğeleri filtrelemek istediğimiz çok sayıda veriye sahibiz. Bunu başarmak için bir filtre işlevi yapabiliriz. Aşağıdaki çözümde bir dizi dosya yolu vardır. Bazı dosyalar 'data1' dizininde, diğerleri ise 'data2' dizinindedir. Sadece belirli bir dizini filtrelemek istediğimizi düşünelim:

 konum ver = [
  "dosyalar/veri1/dosya",
  "dosyalar/veri1/dosya2",
  "dosyalar/veri2/dosya",
  "dosyalar/veri2/dosya2"
];

let filter = location.filter(path => path.includes('data2'));

konsol.log(filtre);

Çıktı:
[ 'dosyalar/dir2/dosya', 'dosyalar/dir2/dosya2' ]

Yol dizesinin 'data2' dizesini içermesi gerektiğini belirterek, içinde 'data2' içermeyen yolları filtreleriz. Unutulmamalıdır ki, filtreye hangi işlevi iletirseniz geçirin, öğenin sonuca dahil edilmesi için true döndürmesi gerekir.

Aynı Ada Sahip Bir Nesneye Anahtar Atama

Bir nesneye anahtar atarken, anahtar atamak istediğiniz değeri tutan değişkenle aynı ada sahipse, değer atamasını tamamen atlayabilirsiniz. Bu, hepimizin yapmaktan nefret ettiği bir şeyi tekrar etmek zorunda kalmanızı engeller. Bu örneğe bir göz atın:

 isim = 'John';
yaş = 32 olsun;
izin ver iş = 'mühendis';

// bunun yerine
let profile1 = { isim: isim, yaş: yaş, iş: iş };

// Bunu yap
let profile2 = { isim, yaş, iş };

konsol.log(profil2);

Çıktı:
{ isim: 'John', yaş: 32, iş: 'mühendis' }

ES6 Spread Operatörünü Kullanma '…'

Yayma operatörü, bir diziyi tam anlamıyla "yaymanıza" izin verir. Bu, bir diziyi bir argüman listesine dönüştürmek veya hatta iki diziyi birleştirmek için kullanılabilir. Ayrıca, bir işleve ilişkin bir argüman listesi oluşturmak için de kullanabilirsiniz.

İlk örnekte, spread operatörünün bir dizi üzerinde nasıl çalıştığını ve her bir öğeyi ayrı bir öğeye dönüştürdüğünü gösteriyoruz.

 sayılar1 = [1,2,3,4,5] olsun;

konsol.log(...sayılar1);

Çıktı:
1 2 3 4 5

İkinci örnek, her iki içeriği de içeren yeni bir geçici dizi oluşturarak iki dizinin içeriğini birleştirir.

 sayılar2 = [6,7,8,9,10];

let birleştirilmiş = [...sayılar1, ...sayılar2];

konsol.log(...birleştirilmiş);

Çıktı:
1 2 3 4 5 6 7 8 9 10

Son örnek, yayılma operatörünün bir diziyi bir işleve ilişkin argümanlar listesine nasıl dönüştürebileceğini gösterir. Math.max, kendisine iletilen bağımsız değişkenler listesindeki en yüksek sayıyı döndürür. Bu argümanlardan biri en yüksek olan 10 idi.

 sayılar1 = [1,2,3,4,5] olsun;

sayılar2 = [6,7,8,9,10];

let birleştirilmiş = [...sayılar1, ...sayılar2];

konsol.log(Math.max(...birleştirilmiş));

Çıktı:
10

Yeni Alıcılar ve Ayarlayıcı İşlevleri

Alıcılar ve ayarlayıcılar, ES6'da sunulan kullanışlı özelliklerden biridir. JavaScript'te sınıflar kullanıyorsak kullanışlı olur.

 class KişiAdı {
  yapıcı(isim) {
    this.name = isim;
  }
  adını al() {
    this.name döndür;
  }
  İsim(isim) {
    this.name = isim;
  }
}

let kişi = new KişiAdı("Jon Snow");
konsol.log(kişi.Ad); // (A)

person.Name = "Dany"; // (B)
konsol.log(kişi.Ad);

Çıktı:
Jon Kar
Dany

PersonName sınıfında 'get' ve 'set' özelliklerine sahip iki fonksiyon olduğunu görebiliriz. 'get' özelliği, değişkenin değerini almak için kullanılır ve 'set' özelliği, değeri değişkene ayarlamak için kullanılır. Get Name fonksiyonunun (A) parantezsiz çağrıldığını ve set Name fonksiyonunun (B) parantezsiz çağrıldığını görebiliriz ve bu tıpkı değişkene bir değer atamak gibidir.