giriiş
Klasik for döngüsünden forEach() yöntemine kadar, JavaScript'te bir veri kümesinde yineleme yapmak için kullanılan çeşitli teknikler ve yöntemler vardır. En popüler yöntemlerden biri .map() yöntemidir. .map(), ana dizideki her öğe için belirli bir işlevi çağırarak bir dizi oluşturur. .map(), yalnızca çağıran dizide değişiklik yapan mutasyon yöntemlerinin aksine, yeni bir JS dizisi oluşturan mutasyon dışı bir yöntemdir. Bu yöntem, dizilerle çalışırken birçok farklı şekilde kullanılabilir. Bu eğitimde, JavaScript'te .map()'in dört önemli kullanımını göreceksiniz: dizi öğelerinden bir işlevi çağırmak, dizeleri dizilere dönüştürmek, JavaScript kitaplıklarında listeleri görüntülemek ve dizi nesnelerini yeniden biçimlendirmek.
Ön koşullar
Bu eğitim için kodlama gerekmiyor, ancak örnekleri takip etmek istiyorsanız Node.js REPL veya tarayıcı geliştirici araçlarını kullanabilirsiniz.
Bir dizideki her öğe için bir JS işlevi nasıl çağrılır
.map(), argümanlarından biri olarak bir geri çağırma işlevi kabul eder ve bu işlevin önemli bir parametresi, işlev tarafından işlenen öğenin geçerli değeridir. Bu, zorunlu bir parametredir. Bu parametreyi kullanarak, bir dizideki herhangi bir öğeyi değiştirebilir ve yeni dizinizin değiştirilmiş üyesi olarak döndürebilirsiniz.
İşte bir örnek:
const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweeterArray)Bu çıktı konsola kaydedilir:
Output
[ 4, 6, 8, 10, 70 ]
Bunu daha temiz hale getirmek için aşağıdaki şekilde basitleştirilebilir:
// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);Aynı çıktı konsola kaydedilir:
Output
[ 4, 6, 8, 10, 70 ]
sweetArray.map(makeSweeter) gibi bir koda sahip olmak kodunuzu biraz daha okunabilir hale getirir.
Bir JS dizesini diziye nasıl dönüştürebilirim?
map() dizi prototipine aittir. Bu adımda, bir dizeyi diziye dönüştürmek için kullanacaksınız. Burada dizeler için bir yöntem geliştirmeyeceksiniz. Bunun yerine, özel .call() yöntemini kullanacaksınız.
JavaScript'teki her şey bir nesnedir ve metotlar bu nesnelere bağlı fonksiyonlardır. Call(), bir nesnenin metnini başka bir nesnede kullanmanıza olanak tanır. Yani, .map() metnini bir diziye, bir dizeye kopyalayabilirsiniz.
Call() fonksiyonuna bağlam argümanları ve parametreleri ana fonksiyon argümanlarına geçirilebilir.
İşte bir örnek:
const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName)Bu çıktı konsola kaydedilir:
Output
[ "Sa", "aa", "ma", "ma", "ya" ]Burada, bir dizge üzerinde .map() fonksiyonunu kullandınız ve .map()'in beklediği fonksiyon argümanını geçirdiniz.
Bu, bir dizenin split() metodu gibi çalışır; tek farkı, her bir dize karakterinin bir dizide döndürülmeden önce değiştirilebilmesidir.
JavaScript kitaplıklarında listeler nasıl oluşturulur?
React gibi JavaScript kütüphaneleri, bir listedeki öğeleri görüntülemek için .map() kullanır. Ancak bunun için JSX sözdizimi gerekir, çünkü .map() yöntemi JSX sözdizimine sarılmıştır.
İşte bir React bileşeninin örneği:
import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);Bu, bir liste içeren bir div oluşturan durumsuz bir React bileşenidir. Tek tek liste öğeleri, bir ad dizisi üzerinde yineleme yapmak için .map() kullanılarak oluşturulur. Bileşen, kök kimliğe sahip DOM öğesi üzerinde ReactDOM kullanılarak oluşturulur.
JavaScript dizi nesneleri nasıl yeniden biçimlendirilir
.map(), bir dizideki nesneler arasında yineleme yapmak, her bir nesnenin içeriğini değiştirmek ve geleneksel dizilere benzer şekilde yeni bir dizi döndürmek için kullanılabilir. Bu değişiklik, geri çağırma işlevinde döndürülen verilere göre yapılır.
İşte bir örnek:
const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByLikes);Bu çıktı konsola kaydedilir:
Output
[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]
Burada, dizideki her nesneyi köşeli parantez ve nokta gösterimi kullanarak değiştirdiniz. Bu kullanım örneği, alınan verileri bir ön uç uygulamasında depolamadan veya ayrıştırmadan önce işlemek veya sıkıştırmak için kullanılabilir.
Sonuç
Bu eğitimde, JavaScript'te .map() yönteminin dört kullanımına baktık. Diğer yöntemlerle birlikte kullanıldığında, .map()'in işlevselliği genişletilebilir.
