JavaScript dizi yöntemleri ve bunların nasıl kullanılacağı

JavaScript dizi yöntemleri ve bunların nasıl kullanılacağı

Diziler diğer birçok dilde olduğu gibi JavaScript için de merkezidir, bu yazıda yaratıcı kullanım örnekleriyle birlikte en kullanışlı dizi yöntemlerini inceleyeceğiz.

Bu makale, JavaScript dizileriyle çalışırken sorunların püf noktalarını ve çözümlerini öğrenmek isteyen, orta seviyeye kadar JavaScript’e yeni başlayanlar için hazırlanmıştır.

Makale aşağıdaki konuları kapsamaktadır.

  1. Temeller
    1. dizi.prototip.uzunluk
    2. Array.prototype.forEach
    3. Dizi.prototip.harita
    4. Dizi.prototip.filtre
    5. dizi.prototip.concat
    6. Dizi.prototip.sort
  2. Daha fazla kullanmak isteyebilecekleriniz
    1. Array.prototype.splice
    2. dizi.prototip.azaltma
    3. Array.prototype.includes
    4. Dizi.prototip.girişler
    5. Dizi.prototip.anahtarları
    6. Benzersiz değerlere sahip dizi

Temeller

dizi .uzunluk

Array.prototype.lengthen temel dizi özelliği, size dizinin uzunluğunu bir tamsayı olarak verir.

Ancak şunu unutmayın length ayrıca bir ayarlayıcıdır, böylece onu diziden öğeleri çıkarmak için kullanabilirsiniz. Yaparsan myArray.length = 0 diziyi boşaltacaksınız.

const array = = [1, 2, 3, 4];

console.log(array.length);


array.length = 2;
console.log(array);

Dizi .forEach()

Array.prototype.forEach dizide dolanır, diziyi kullanmaktan bazı küçük farklılıkları vardır. for anahtar kelime, kullanırken döngüyü kıramayacağınız en önemli varlık .forEachyine de dizilerdeki zincirleme çağrıların sonuna iyi uyuyor .filter ve .map.

const array = [1, 2, 3, 4];

array
  .filter((value) => value > 2)
  .forEach((value) => console.log('value is', value);

Dizi .map()

Array.prototype.map nesneler içeren bir diziden özellikleri çıkararak verileri dönüştürmek için son derece kullanışlıdır.

const people = [
  {
    name: 'Anna',
    birthDate: '2010-02-21'
  },
  {
    name: 'Dave',
    birthDate: '2002-10-26'
  },
  {
    name: 'Sofia',
    birthDate: '1985-03-11'
  }
]

const names = people.map((person) => person.name);

console.log(names);

Listeleri oluştururken de çok kullanışlıdır. lit-html:

const names = ['Anna', 'Dave', 'Sofia'];

const template = html`
  <ul>
    ${names.map((name, index) => html`<li>${name} (position ${index}</li>`)}
  </ul>
`;

Dizi .filtre()

Array.prototype.filter yeni bir filtrelenmiş dizi döndürür:

const scores = [45, 23, 76, 55, 13, 42];

const above30 = scores.filter((score) => score > 30);
console.log(above30);

Düzgün bir numara kullanmaktır Boolean yapıcıyı boş değerlerden bir diziyi filtrelemek için filtre işlevi olarak kullanın:

const names = ['Anna', '', 'Peter', undefined, 'Andrea'].filter(Boolean);

console.log(names);

Dizi .concat()

Array.prototype.concat iki veya daha fazla ayrı değerden yeni bir dizi döndürür:

const names1 = ['Anna', 'Jenny'];
const names2 = ['John', 'Mary'];

console.log(names1.concat(names2);

Dizi .sort()

Bir diziyi (yerinde), yerleşik karşılaştırıcı işlevi aracılığıyla veya geçerli öğenin sıralanacağı yönü belirtmek için -1, 0 veya 1 döndüren özel bir dizi aracılığıyla sıralar.


const array = [435, 7, 34, 673, 43, 2, 7, 23];
array.sort();

console.log(array);



const people = [
  {name: 'Anders', age: 62},
  {name: 'Sara', age: 32},
  {name: 'Anna', age: 43},
  {name: 'Evan', age: 17}
];

people.sort((personA, personB) => {
  if (personA.age < personB.age) {
    return -1;
  } else if (personA.age > personB.age) {
    return 1;
  }

  return 0;
});

console.log(people);






Daha fazla kullanmak isteyebilecekleriniz

Şimdi temelleri ele aldık, daha gelişmiş dizi uygulamalarına bir göz atalım. Bunlar, JavaScript ile verileri dönüştürürken sahip olunması gereken güçlü araçlardır.

Dizi .splice()

En çok yönlü dizi yöntemlerinden biri, bir diziye hem öğe eklemek hem de diziden öğe çıkarmak için kullanılabilir, ayrıca kaldırılan değerleri yeni bir dizi olarak döndürür.

argümanlar const removedValues = array.splice(startIndex, removeCount, ...valuesToAdd); bu da bu yöntemi çeşitli durumlar için faydalı kılar.


const array1 = [1, 2, 3, 4];
const first = array1.splice(0, 1);
console.log(first, array1);



const array2 = [1, 2, 3, 4];
const last = array2.splice(-1, 1);
console.log(last, array2);



const array3 = [1, 2, 3, 4];
array3.splice(0, 1, 10);
console.log(array3);



const array4 = [1, 2, 3, 4];
array4.splice(array4.length, 1, 10);
console.log(array4);

Dizi .reduce()

Array.prototype.reducebir durumu güncellemek için bir dizi eylem uygulamak için kullanılan akı kalıplarıyla çalışan birçok kişiye aşinadır.

Azaltma, bir dizi içinde döngü oluşturmanıza ve bir sonuç üretmek için her dizi değerini belirtilen sırada uygulamanıza olanak tanır.

En basit örnek, bir tamsayı dizisi eklemek olacaktır.

const input = [1, 2, 3, 4];
const sum = number.reduce((accumulator, value) => accumulator + value, 0);
console.log(sum);

Daha ilginç bir kullanım, nihai bir sonuç üretebilecek fonksiyon oluşturma boru hatları oluşturmak olacaktır.

function half(value) {
  return value / 2;
}

function squareRoot(value) {
  return Math.sqrt(value);
}

function add(term) {
  return (value) => value + term;
}

function multiply(factor) {
  return (value) => value * factor;
}

const input = 10;
const pipeline = [half, squareRoot, add(5), multiply(3.14)];
const result = pipeline.reduce(
  (accumulator, method) => method(accumulator),
  input
);

console.log(result);

Şimdi bunu, belirli bir sırayla çeşitli filtreler uygulamak üzere görüntü düzenleme için kullanabileceğinizi hayal edin:

function applyFilters(pipeline, image) {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;

  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);

  const pixels = context.getImageData(0, 0, canvas.width, canvas.height);

  const filteredPixels = pipeline.reduce((accumulator, filter) => filter(accumulator), pixels);

  context.putImageData(filteredPixels, 0, 0);
  image.src = canvas.toDataURL();
}

function brightness(adjustment) {
  return (pixels) => {
    const data = pixels.data;

    for (let i = 0; i < data.length; i += 4) {
      data[i] += adjustment;
      data[i + 1] += adjustment;
      data[i + 2] += adjustment;
    }

    return pixels;
  };
}

function grayscale(pixels) {
  const data = pixels.data;

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];

    
    
    const value = 0.2126 * r + 0.7152 * g + 0.0722 * b;

    data[i] = value;
    data[i + 1] = value;
    data[i + 2] = value;
  }

  return pixels;
}

function opacity(adjustment) {
  return (pixels) => {
    const data = pixels.data;

    for (let i = 0; i < data.length; i += 4) {
      data[i + 3] = adjustment;
    }

    return pixels;
  };
}


const image = document.querySelector('img');
applyFilters([grayscale, brightness(2.3), opacity(0.7)], image);

Artık filtreleri toplamaya devam edebilir ve her zamankinden daha karmaşık boru hatları oluşturabilirsiniz.

Oldukça havalı!

Dizi .includes()

Array.prototype.includes bir döndürür Boolean dizinin verilen değeri içerip içermediğini gösterir.

console.log([3, 4].includes(4));

Bu yöntem, if ifadelerinde azaltmak veya koşullar için de kullanılabilir:


if (value === 'dropdown' || value === 'buttons' || value === 'radio') {

}


const allowedValues = ['dropdown', 'buttons', 'radio'];
if (allowedValues.includes(value)) {

}

Bu, kodun okunabilirliğini çok artırır!

Not: Ara sıra .includes ile kolayca karıştırılabilir. .contains yöntemi olan .classList elemanların kullanımı. diziler kullanır .includes ve sadece .includes.

Dizi .entries()

Array.prototype.entries dizi yok etme sözdizimi ile birlikte bir for-of döngüsünde kullanılabilecek bir anahtar/değer yineleyici döndürür.

const words = ['alpha', 'beta', 'gamma'];

for (const [index, word] of words.entries()) {
  console.log(index, word);
}




Dizi .keys()

Array.prototype.keys bir dizi içindeki tüm anahtarlar için bir yineleyici döndürür:

const words = ['alpha', 'beta', 'gamma'];

for (const index of words.keys()) {
  console.log(index);
}




Benzersiz değerlere sahip dizi (Set ile yayılma operatörünü kullanarak)

Bir diziden yalnızca benzersiz değerleri elde etmek için forma sözdizimi ve Set yapıcı (Set, yalnızca benzersiz değerler içerebilen bir yapıcıdır, tüm kopyalar yoksayılır).

const array = [1, 4, 5, 6, 6, 4, 3, 2, 1];
const unique = [...new Set(array)];

console.log(unique);

Şimdilik hepsi bu kadar! Öğrenme pratiğini sürdürün.

Bir cevap yazın

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