2020’de JavaScript’te Nesnelerle Çalışmanın 9 Yolu – JSManifest

2020'de JavaScript'te Nesnelerle Çalışmanın 9 Yolu – JSManifest

JavaScript, tonlarca diğer dil gibi, hem kolay hem de zor görevleri başarmak için birçok hileye sahiptir. 2020’de JavaScript nesneleriyle çalışmanın 9 yoluna bir göz atalım (Not: Bu, nesnelerle çalışmanın iyi bir kısa listesini oluşturacağını düşündüğüm şeylerin bir listesi. Bazıları ilginç, bazıları iyi biliniyor ve bazıları sadece bilgilendirme amaçlıdır)

Her neyse, JavaScript’te kodlamayı seviyorsanız, nesnelerle çalışmanın diğer türlerle çalışmaktan çok daha eğlenceli olduğu konusunda muhtemelen benimle aynı fikirde olabilirsiniz!

1. Gerçekten Boş Bir Nesne Nasıl Oluşturulur

JavaScript’te nesneler oluşturabileceğinizi biliyor muydunuz? Eh, tabii ki yaptın!

Boş nesneler oluşturabileceğinizi de biliyor muydunuz?

İşte bir örnek:

Bu, düz boş nesneler oluştururken elde edebileceği kadar iyidir. Ancak, dahili olarak değil tamamen boş, çünkü aslında yaptığınız şey şöyle bir şey Object.create(Object.prototype)sizin için içindeki özelliklere erişimi olan bir nesne yaratacak Object.prototypeprototip zincirinin en üstünde yer alır.

Bu, aşağıdaki gibi yöntemleri kullanabileceğiniz anlamına gelir. myEmptyObject.toString().

Gerçekten boş bir nesne oluşturmak için içeri girmeniz yeterlidir null kullanırken:

const myTrulyEmptyObject = Object.create(null)

Yukarıdaki yaklaşımı kullanarak nesneler oluşturduğunuzda, siz onları kendiniz eklemedikçe hiçbir özellik mevcut olmayacaktır!

Hiçbir anlamı olmadığı için %99,99 bunu tavsiye etmem. olumsuzluk temel prototipten çalışın.

Birleştirme Nesnelerinin Varyasyonları

2. Nesnelerin birleştirilmesi varyasyonu #1 (Object.assign)

const novice = { username: 'henry123', level: 10, hp: 100 }

function transform(target) {
  return Object.assign(target, {
    fireBolt(player) {
      player.hp -= 15
      return this
    },
  })
}

const sorceress = transform(novice)
const lucy = { username: 'iamlucy', level: 5, hp: 100 }

sorceress.fireBolt(lucy)

kullandığınızda Object.assign ihtiyacınız olan yöntem hedef object, ek nesneleri ve/veya özellikleri birleştirilecek nesne olarak.

Hedef nesne, ilk argüman Object.assign. Bundan sonraki herhangi bir argüman, ikinci argümandan itibaren hedef nesneyle birleştirilir.

işte mozilla’nın resmi tanım yöntemin:

Object.assign() yöntemi, numaralandırılabilir tüm kendi özelliklerini bir veya daha fazla kaynak nesneden bir hedef nesneye kopyalar. Hedef nesneyi döndürür.

3. Birleştirme nesneleri varyasyonu #2 (Spread sözdizimi)

const novice = { username: 'henry123', level: 10, hp: 100 }

function transform(target) {
  return {
    ...target,
    fireBolt(player) {
      player.hp -= 15
      return this
    },
  }
}

const sorceress = transform(novice)
const lucy = { username: 'iamlucy', level: 5, hp: 100 }

sorceress.fireBolt(lucy)

Nesneleri bu şekilde birleştirdiğinizde, bir nesne değişmezi üzerinde yayılma operatörü.

Bu sözdizimi, resmi ECMAScript 2018 Spesifikasyonuna girdi, bu nedenle bazı insanlar için hala yeni bir ek olarak kabul edilebilir.

Birden çok nesneyi bu şekilde birleştirmek inanılmaz derecede basittir ve kodunuz yine de düzgün ve okunabilir olduğu için birçok kişi bunu önerir, çünkü tek yapmanız gereken üç nokta yazmaktır. Bu kadar.

Nesneleri birleştirme kurallarının hala aynı kaldığını unutmayın, böylece nesneleri bir araya getirmenin en tuhaf yollarını şu şekilde kullanabilirsiniz:

IIFE Fonksiyonlarını Yayma

JavaScript’teki işlevler şunlardır: güçlü birçok yönden. pratik olarak yapabilirsin herhangi bir şey onlarla! Bu, işlevlerin JavaScript’te nasıl olduğunun doğasından kaynaklanmaktadır — aslında bunlar birinci sınıf vatandaşlarböylece onları her yere atabilir ve istediğiniz gibi ortalığı dağıtabilirsiniz!

Örneğin, JavaScript’teki işlevler hala nesneler olduğundan, bu, işlevlere nesnelermiş gibi davranınbu da onları fırlatıp onlarla harika şeyler yapabileceğiniz anlamına gelir.

Bunları, aşağıda gösterildiği gibi, garip şekillerde nesne değişmezleriyle birleştirmek için bile kullanabilirsiniz:

import React from 'react'
import {
  EditIcon,
  DeleteIcon,
  ResetIcon,
  TrashIcon,
  UndoIcon,
} from '../lib/icons'
import * as utils from '../utils

export const audioExts = ['mp3', 'mpa', 'ogg', 'wav']

const icons = {
  edit: {
    component: EditIcon,
    onClick: () => window.alert('You clicked the edit component'),
    name: 'edit',
  },
  delete: {
    component: DeleteIcon,
    name: 'delete',
  },
   
  
  ...(function() {
    return audioExts.reduce((acc, ext) => {
      acc[ext] = {
        component: MdAudiotrack,
        title: 'Audio Track',
      }
      return acc
  })(),
}

Dan beri IIFEs kendi kendini çağırıyor, hemen birleştirilecek bir nesneyi döndürüyoruz. icons nesne. Sonuç sadece aynı nesne olurdu, ancak birleştirmelerle:

export const audioExts = ['mp3', 'mpa', 'ogg', 'wav']

const icons = {
  edit: {
    component: EditIcon,
    onClick: () => window.alert('You clicked the edit component'),
    name: 'edit',
  },
  delete: {
    component: DeleteIcon,
    name: 'delete',
  },
  
  mp3: {
    component: MdAudiotrack,
    title: 'Audio Track',
  },
  mpa: {
    component: MdAudiotrack,
    title: 'Audio Track',
  },
  ogg: {
    component: MdAudiotrack,
    title: 'Audio Track',
  },
  wav: {
    component: MdAudiotrack,
    title: 'Audio Track',
  },
}

4. 2020’de Mevcut Mülkleri Kontrol Etme

Topluluğu kesinlikle kasıp kavuran bir özellik (eminim hepimiz aynı fikirdeyiz) Opsiyonel Zincirleme. Bu yeni operatör formu alıyor .? ve bağlantılı nesneler zincirinin derinliklerinde bulunan bir özelliğin değerinin okunmasına izin verir. açıkça doğrulamak zorunda kalmadan zincirdeki her referansın geçerli olduğunu.

Bu, aşağıdaki gibi derinlemesine iç içe nesne yapınız varsa, şu anlama gelir:

const food = {
  fruits: {
    apple: {
      dates: {
        expired: '2019-08-14',
      },
    },
  },
}

Artık aşağıdaki gibi tekrarlayan kodlar yazmanıza gerek yok:

function getAppleExpirationDate(obj) {
  if (food.fruits && food.fruits.apple && food.fruits.apple.dates) {
    return food.fruits.apple.dates.expired
  }
}

İsteğe bağlı zincirleme kullanarak çok daha kolay hale gelir:

function getAppleExpirationDate(obj) {
  return food?.fruits?.apple?.dates?.expired
}

Kodunuzun her yerinde kullanmak çok daha temiz hissettiriyor.

Bunun gibi bir işlev:

function findFatDogs(dog, result = []) {
  if (dog && dog.children) {
    return dog.children.reduce((acc, child) => {
      if (child && child.weight > 100) {
        return acc.concat(child)
      } else {
        return acc.concat(findFatDogs(child))
      }
    }, result)
  }
  return result
}

Kolayca buna dönüşebilir okunabilirliğini korurken:

function findFatDogs(dog, result = []) {
  if (dog?.children) {
    return dog.children.reduce((acc, child) => {
      return child?.weight > 100
        ? acc.concat(child)
        : acc.concat(findFatFrogs(child))
    }, result)
  }
  return result
}

Ve bu sadece takdir etmeni sağlıyor daha güzel her zamankinden daha fazla.

(Not: Bu yazının yazıldığı sırada, tüm modern tarayıcılar bu özelliği desteklememektedir, ancak kullanmaya başlayabilirsiniz. TypeScript bugün ve eski tarayıcıların okuyabileceği sözdizimine geri derlendiğinden, istediğiniz her şeyi isteğe bağlı zincirlemeye başlayın.

#5 Geçersiz Kılarak Nesneleri Çağır .toString()

Nesneler, nesne değişmezlerinin anahtarları olarak atandığında, dizili hale gelirler. Bu, bazı güzel kullanım durumları getiriyor.

Aşağıdaki örneğe bir göz atalım:

function Command(name, execute) {
  this.name = name
  this.execute = execute
}

Command.prototype.toString = function() {
  return this.name
}

const createCommandHub = function() {
  const commands = {}

  return {
    add(command) {
      commands[command.name] = command
    },
    execute(command, ...args) {
      return commands[command].execute(...args)
    },
  }
}

const cmds = createCommandHub()

const talkCommand = new Command('talk', function(wordsToSay) {
  console.log(wordsToSay)
})

const destroyEverythingCommand = new Command('destroyEverything', function() {
  throw new Error('Destroying everything')
})

cmds.add(talkCommand)
cmds.add(destroyEverythingCommand)

cmds.execute(talkCommand, 'Is talking a talent?')

Bu parçacığı çalıştırırsanız, kodun çalıştığını ve sonucun şu olduğunu göreceksiniz:

Komutu ekleme şeklimize yakından bakarsanız, bunun gibi bir hata vermesi gerektiğini görebilirsiniz:

sonuç ön geçersiz kılma tostring nesne prototip yöntemi

Olmamasının nedeni, Command yapıcıyı da geçersiz kıldık toString aşağıda gösterildiği gibi prototip yöntemi:

sonuç geçersiz kılma tostring nesne prototipi method2

İlkel olmayan tür değerleri bir nesnenin özellikleri olarak atandığında, JavaScript, onları anahtar olarak eklemeden önce, nesneye geri dönerek onları dizgeleştirmeye çalışır. .toString prototip üzerinde yöntem.

@reduxjs/araç seti bu hileyi, eylemlerin doğrudan anahtarlar olarak geçmesine izin vermek için kullanır, örneğin, bunlar, eyleme atanan azaltıcı işlevini anahtarlar eşlediğinde doğrudan kullanılabilirler. .type değer.

6. Yıkım

Amony, dile yapılan herhangi bir büyük eklemedir. nesne yok etme:

const obj = {
  foods: {
    apples: ['orange', 'pineapple'],
  },
}

const { foods } = obj

console.log(foods) 

7. Bozulmuş mülkleri yeniden adlandırma

const obj = {
  foods: {
    apples: ['orange', 'pineapple'],
  },
}

const { foods: myFoods } = obj

console.log(myFoods) 

Nesneler üzerinde yineleme

8. Bir nesnenin anahtarları üzerinde yineleme (for in)

Bir nesnenin anahtarları üzerinde yineleme yapmanın kolay bir yolu, for in sözdizimi:

const obj = {
  foods: {
    apples: ['orange', 'pineapple'],
  },
  water: {
    f: '',
  },
  tolupa: function() {
    return this.name
  },
}

const { foods } = obj

for (let k in obj) {
  console.log(k)
}

9. Bir nesnenin anahtar varyasyonu #2 üzerinde yineleme (Object.keys)

Kullanabileceğiniz farklı bir yaklaşım, Object.keys yöntem:

const obj = {
  foods: {
    apples: ['orange', 'pineapple'],
  },
  water: {
    f: '',
  },
  tolupa: function() {
    return this.name
  },
}

const { foods } = obj

const keys = Object.keys(obj)
console.log(keys)

Buradaki fark, anahtarları birlikte çalışacağınız bir dizi içinde alacaksınız. Zincirleme işlemleri ve daha yapılandırılmış bir değere dönüştürme gibi ek şeyler yapmak isterseniz de daha kullanışlıdır. çok fazla daha kullanışlı:

const people = {
  bob: {
    age: 15,
    gender: 'male',
  },
  jessica: {
    age: 24,
    gender: 'female',
  },
  lucy: {
    age: 11,
    gender: 'female',
  },
  sally: {
    age: 14,
    gender: 'female',
  },
}

const { males, females } = Object.keys(people).reduce(
  (acc, name) => {
    const person = people[name]
    if (person.gender === 'male') {
      acc.males.push(name)
    } else {
      acc.females.push(name)
    }
    return acc
  },
  { males: [], females: [] },
)

console.log(males) 
console.log(females) 

Çö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!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.