Yarından Önce Bilmeniz Gereken 10 JavaScript Uygulaması – JSManifest

Yıllar boyunca takıma katılan çok sayıda genç geliştirici ve stajyerim oldu ve hepsinin ortak olduğu bir şey buldum (çoğu zaman): Daha kısa olduğunda kodda bir şeyler yapmak için gereksiz yere daha uzun yollar yazıyorlar ( yanı sıra performans) yolları aynı şeyi yap.

Bununla birlikte, bu gönderi çoğunlukla dili öğrenen JavaScript geliştiricilerinin yanı sıra JavaScript’te daha fazlasını potansiyel olarak öğrenmek isteyenlere yönelik olacaktır. Geliştirme kariyerimin sonraki aşamalarına kadar bilmediğim bazı ipuçları var.

Lafı fazla uzatmadan, İşte Yarından Önce Bilmeniz Gereken 10 JavaScript Uygulaması:

Dizileri Benzersiz Olarak Filtreleme

ES6, bugün kod tabanımızın çoğunu etkileyen özellikleri tanıttı. Orada yayılmış operatörün yanı sıra Ayarlamak nesne. Bu ikisi, bir dizi filtreyi filtreleyen tek bir astarda birleştirilebilir. ilkel değerler tamamen benzersiz olmak için:

const symb1 = Symbol('hello')
const symb2 = Symbol('hello')


const arr = [1, '1',1, 3, 'morning', null, '', 3, 121,true,symb1,symb1, 121, true, symb1, symb2]
const uniqueArr = [...new Set(arr)]

Sonuç:

;[1, '1', 3, 'morning', null, '', 121, true, Symbol(hello), Symbol(hello)]

Not: Bu JavaScript numarası, yalnızca aşağıdakileri içeren diziler için en temiz çözümdür. ilkel veri türleri gibi boolean, string, undefined, null, number. İçin Symbol tip, her biri inşa edilmiş Symbol benzersiz yani Symbol(hello) ve Symbol(hello) aslında iki farklı örnektir (değişken olarak bildirilir) symb1 ve symb2)

Boolean’a Dönüştürme

JavaScript, tüm değerleri şu şekilde ele alır: doğru veya yalan hariç true ve false kendilerine değer verir. Bu, dilin semantiği tarafından amaçlanmaktadır:

if ('true') {
  
}
if ('false') {
  
}
if (null) {
  
}
if (0) {
  
} else if (function () {}) {
  
}
if (new Array().fill(null)) {
  
}
if (Object.create(null)) {
  
}
if (1) {
  
}

JavaScript’teki tüm değerler doğrudur (aksi belirtilmedikçe):, false, '', null, NaN, undefinedve 0 hangi JavaScript tamamen yanlış olarak yorumlanır.

Değerleri dönüştürmenin en kısa yolu boole (true veya false) ile değerleri olumsuzlayarak ! Aşağıda gösterildiği gibi:

const isTrue = !0
const isFalse = !1
const alsoFalse = !!0
console.log(isTrue) 
console.log(typeof true) 

Bu tür bir zorlama, özellikle basit ve daha küçük işlevler oluşturmak istediğinizde, birden çok girdi alan işlevleri işlerken gerçekten yararlı olabilir:

Ayrıca bununla birlikte 0 ve 1 onları da dönüştürebiliriz true ve false aynen kolayca:

console.log(+true) 
console.log(+false) 

true eşdeğerdir 1 ve false eşdeğerdir 0:

console.log(-true) 
console.log(-false) 

Değerleri dizelere dönüştürme

Basit bir işlemle değerleri hızlı bir şekilde dizelere dönüştürebiliriz. + operatörün hemen ardından alıntılar:

const val = 1 + ''
console.log(val) 
console.log(typeof val) 

Değerleri sayılara dönüştürme

Önceki örneğe benzer şekilde, aynı karakter dizilerini sayılara da dönüştürebiliriz. + operatör, onunla dizeleri önekleyerek:

let age = '80'
age = +age

Bunu sayıları artırmak için kullanabiliriz true veya false aynı zamanda (unutmayın true eşdeğerdir 1 ve false olarak 0):

let age = 30
age = age + true


age = 30
age = age + false

Bileşik Atama (kısa devre) operatörleri

Mantıksal Ve (&&)

Bunun yerine:

const john = { id: null, age: 30, email: 'john@gmail.com' }
const mike = { id: '456', age: 31, email: 'mike@gmail.com' }
const sally = { id: '789', age: 32, email: 'sally@gmail.com' }
const kelly = { id: null, age: 25, email: 'kelly@gmail.com' }
const george = { id: '131415', age: 40, email: 'george@gmail.com' }

const getProfileOfAgeWithSubmittedEmail = (minAge, ...profiles) => {
  for (const profile of profiles) {
    let age

    if (profile.email && profile.age) {
      age = profile.age
    }

    if (typeof age === 'number' && age >= minAge) {
      return profile
    }
  }
}


const profile = getProfileOfAgeWithSubmittedEmail(32, john, mike, sally, kelly, george)

Mantıksal ve (&&) Şebeke:

const getProfileOfAgeWithSubmittedEmail = (minAge, ...profiles) => {
  for (const profile of profiles) {
    const age = profile.email && profile.age
    if (typeof age === 'number' && age >= minAge) {
      return profile
    }
  }
}


const profile = getProfileOfAgeWithSubmittedEmail(32, john, mike, sally, kelly, george)

Bu, tek bir satırda üç ayrı şey yapar:

1. Değerlendirmek profile.email
2. Sonuç ise (profile.email) dır-dir sahtesonra dönüş profile.email
3. Aksi takdirde sonuç doğrusonra değerlendirmek birlikte dönüş profile.age

Daha kısa ama aynı zamanda kodunuzda çok kullandığınızda doğal olarak yazdığınızı anlamaya başlayacaksınız. const onun yerine let (veya var) daha fazlası, atanan değerlerin asla değişmeyeceğini düşünüyorsanız en iyi uygulamadır değerlendirdikten sonra hangi yazılı anahtardır temizleyici kod.

Mantıksal Veya (||)

Bunun yerine yukarıdakine benzer şekilde:

const getProfileOfAgeWithMissingId = (maxAge, ...profiles) => {
  for (const profile of profiles) {
    let id

    if (profile.age < maxAge) {
      id = profile.id
    }

    if (!id) return profile
  }
}


const profile = getProfileOfAgeWithMissingId(30, john, mike, sally, kelly, george)

Mantıksal ve (||) operatörü daha kısa bir alternatif olarak:

const getProfileOfAgeWithMissingId = (maxAge, ...profiles) => {
  for (const profile of profiles) {
    const id = profile.age < maxAge || profile.id
    if (!id) return profile
  }
}


const profile = getProfileOfAgeWithMissingId(30, john, mike, sally, kelly, george)

Bu, tek bir satırda üç ayrı şey yapar:

1. Değerlendirmek profile.age < maxAge
2. sonuç ise sahtesonra dönüş false
3. Aksi takdirde sonuç doğrusonra değerlendirmek birlikte sonucu döndür nın-nin profile.id

Bu şekilde kısa devre yapmanın avantajı, iki koşula (#2 ve #3) bir kod satırında (profile.age < maxAge || profile.id) harika olan!

Mantıksal Atama Operatörleri ES2021)

Bunun yerine:

const john = { id: null, age: 30, email: 'john@gmail.com' }
const mike = { id: '456', age: 31, email: 'mike@gmail.com' }

let person1
let person2

person1 = person1 || (person1 = john)

console.log(person1)

Bunun yerine şunu yapabiliriz:

const john = { id: null, age: 30, email: 'john@gmail.com' }
const mike = { id: '456', age: 31, email: 'mike@gmail.com' }

let person1
let person2

person1 ||= john

console.log(person1)

Sözdiziminde pek bir fark yoktur, ancak yararı person1 ||= john dır-dir kısa devre nereye atandığı john yalnızca şu durumlarda değerlendirilir: person dır-dir sahte.

Kısa devre mantıksal atama operatörünün diğer eşdeğerleri şunlardır:

person1 &&= john 
person1 ??= john 

Özellik Anahtarlarını Özelleştirme

İlginç bir numara, nesnelerin başka bir nesneye atandığında dizelere nasıl zorladığını özelleştirmektir. o nesnenin bir özelliği olarak.

Normalde nesneleri özellik olarak atadığımızda '[object Object]':

const john = {
  id: null,
  age: 30,
  email: 'john@gmail.com',
}

const obj = {}

obj[john] = john

console.log(obj)

sonuç:

{ "[object Object]": { "id": null, "age": 30, "email": "john@gmail.com" } }

Bu çok ideal değil çünkü kullanmak istesek böyle olurdu. JSON.stringify verileri bir veri kaynağına kaydetmek için:

const output = JSON.stringify(obj, null, 2)
console.log(output)

Tüm nesneler varsayılan olarak [object Object] ve nesneler aynı anda bir nesnede yalnızca 1 benzersiz anahtar tutabilir, bunları anahtar olarak kullanmak istediğimizde diğer verileri de kaybederiz (dönüştürme Map örneğin JavaScript nesnelerini tutabildiklerinde JSON temsillerine nesneler).

Bu sorunu çözmek için şunları tanımlayabiliriz: toString() yöntemi ve istediğimiz değeri döndür bir özellik olarak atandığında anahtar olarak nesneler üzerinde:

const john = {
  id: null,
  age: 30,
  email: 'john@gmail.com',
  toString: () => `John_${john.age}_${john.email}`,
}

const obj = { [john]: john }


console.log(obj)

Çıktı:

{
  "John_30_john@gmail.com": {
    "id": null,
    "age": 30,
    "email": "john@gmail.com"
  }
}

Şimdi bile oluşturabiliriz Map örnekler ve bunları istediğimiz bir biçimde kolayca seri hale getirin:

const createPerson = (options) => {
  const person = {}
  for (const [key, value] of Object.entries(options.props)) {
    person[key] = value
  }
  if (typeof options.key === 'function') {
    Object.defineProperty(person, 'toString', {
      value: function getPropertyKey() {
        return options.key(person)
      },
    })
  }
  return person
}

const john = createPerson({
  props: { id: null, email: 'john@gmail.com' },
  key: (values) => {
    return `John_${values.age}_${values.email}`
  },
})

const mike = createPerson({
  props: { id: '456', age: 31, email: 'mike@gmail.com' },
  key: (values) => `Mike_${values.email}`,
})

const map = new Map()

map.set(john, john)
map.set(mike, mike)

map.toJSON = function () {
  const output = Object.assign(
    {},
    [...this.entries()].reduce((acc, [key, value]) => {
      acc[key] = value
      return acc
    }, {}),
  )

  return output
}

john.age = 30

console.log(JSON.stringify(map, null, 2))

Sonuç:

{
  "John_30_john@gmail.com": {
    "id": null,
    "email": "john@gmail.com",
    "age": 30
  },
  "Mike_mike@gmail.com": {
    "id": "456",
    "age": 31,
    "email": "mike@gmail.com"
  }
}

Zorunlu Özellik Dize Etiketlerini Özelleştirme

Önceki örnekte, nesnelerin JSON dizili çıktısının nasıl özelleştirileceğini öğrendik. Ama aynı zamanda özelleştirebiliriz etiket bir bölümü zorla [object Object] değer:

function Warrior() {
  Object.defineProperty(this, Symbol.toStringTag, {
    value: 'Warrior',
  })
  this.hp = 100
}

const sally = new Warrior()

console.log(sally.toString()) 

Biz Yapabilmek kullanmak this[Symbol.toStringTag] = 'Warrior'ancak örneğimizi günlüğe kaydettiğimizde konsolda görünebilir:

Warrior { hp: 100, [Symbol(Symbol.toStringTag)]: 'Warrior' }

Kullanarak Object.defineProperty konsolda görüntülenmesini engelleriz. (Bunu şu şekilde yapılandırabiliriz: enumerable Emlak)

function Warrior() {
  Object.defineProperty(this, Symbol.toStringTag, {
    enumerable: true, 
    value: 'Warrior',
  })
  this.hp = 100
}

Bunun için iyi bir kullanım durumu, bir nesnenin bizim gibi bir şeyin örneği olup olmadığını kolayca kontrol eden bazı yardımcı işlevlere sahip olmaktır. Warrior:

function isWarrior(value) {
  return String(value) === '[object Warrior]'
}

const sally = new Warrior()

console.log(isWarrior(sally)) 

Başa Eklenmiş Bağımsız Değişkenlerle Kısmi İşlevler Oluşturma

Çağrılabilecek başına eklenen argümanları alan fonksiyonlar oluşturabiliriz. sonra Başa eklenen argümanlarla ek olarak yeni argümanlar.

Örneğin:

function isOlder(person, targetPerson) {
  return targetPerson.age > person.age
}

console.log(isOlder(john, mike))

Sonucu başa eklenen bir değerle karşılaştıran yeni bir yeniden kullanılabilir işlevi kolayca yapabiliriz:

const isOlderThanJohn = isOlder.bind(null, john)

console.log(isOlderThanJohn(mike))


console.log(isOlderThanJohn({ age: 11 }))

Dizilerdeki Son Öğeyi Alma

Dizilerdeki son öğeyi almanın bir yolu, daha yaygın olarak kullanılanıdır:

const people = [john, mike, kelly, sally]
const lastPerson = people[people.length - 1]

Kullanabileceğimiz bir numara, .slice diziler üzerinde yöntem. JavaScript negatif tamsayıları alabildiğinden .slice değer almaya başlayacak son diziden başlarsak, son öğeyi almak için hızlı bir şekilde kullanılabilecek dizinin -1:

const people = [john, mike, kelly, sally]
const lastPerson = people.slice(-1)

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!