JavaScript kullanarak bir dizideki tüm girişler arasında nasıl dolaşabilirim?
Bunun gibi bir şey olduğunu düşündüm:
forEach(instance in theArray)
Burada theArray
benim dizimdir, ancak bu yanlış görünüyor.
Edit: Bu cevap umutsuzca güncel değil. Daha modern bir yaklaşım için, bir dizide mevcut olan yöntemler bölümüne bakın. İlgi çekici yöntemler:
JavaScript içindeki bir diziyi yinelemenin standart yolu bir Vanilya for
-döngüsü:
var length = arr.length,
element = null;
for (var i = 0; i < length; i++) {
element = arr[i];
// Do something with element
}
Ancak, bu yaklaşımın yalnızca yoğun bir diziniz varsa ve her bir dizin bir öğe tarafından işgal edilmişse iyidir. Dizi seyrekse, bu yaklaşımla performans sorunlarıyla karşılaşabilirsiniz, çünkü dizide gerçekten bulunmayan birçok indeks üzerinde yineleme yaparsınız. Bu durumda, bir for .. in
-döngüsü daha iyi bir fikir olabilir. Ancak, yalnızca istenen dizilim özelliklerinin (yani dizi öğeleri) uygulanmasını sağlamak için uygun korumaları kullanmanız gerekir, çünkü for..in
-döngüsü de eski tarayıcılarda numaralandırılır; ek özellikler enumerable
olarak tanımlanır.
ECMAScript 5 içinde dizi prototipinde bir forEach yöntemi olacaktır, ancak eski tarayıcılarda desteklenmez. Bu nedenle, sürekli olarak kullanabilmek için, onu destekleyen bir ortamınız olmalıdır (örneğin, sunucu tarafı JavaScript için Node.js ) veya bir "Polyfill" kullanın. Bununla birlikte, bu işlevsellik için Polyfill önemsizdir ve kodu okumayı kolaylaştırdığından, eklenmesi iyi bir polyfill'dir.
jQuery kütüphanesini kullanıyorsanız, jQuery.each :
$.each(yourArray, function(index, value) {
// do your stuff here
});
DÜZENLE :
Soruya göre, kullanıcı jquery yerine javascript'te kod ister, yani düzenleme
var length = yourArray.length;
for (var i = 0; i < length; i++) {
// Do something with yourArray[i].
}
Bence reverse döngü için burada bir söz hak ediyor:
_for (var i = array.length; i--; ) {
// process array[i]
}
_
len
değişkeni bildirmeniz ya da _array.length
_ ile karşılaştırmanız gerekmez, bunların her ikisi de bir dakikalık optimizasyon olabilir.array[i]
_ konumunda bir öğe kaldırır veya eklersiniz), sonra bir ileri döngü sola kaydırılan öğeyi atlar i, veya sağa kaydırılan i 'i yeniden işle. Geleneksel bir döngüde, belki güncelleme i işlem gerektiren bir sonraki öğeye işaret etmek için - 1, ancak yineleme yönünü tersine çevirmek genellikle bir basit ve daha şık çözüm .forEach()
ve ES6'nın _for ... of
_ 'ını kaybeder.Bazı geliştiriciler, ileriye doğru döngü oluşturmak için iyi bir neden olmadıkça, döngü için tersini varsayılan olarak kullanır.
Performans kazancı genellikle önemsiz olmakla birlikte, bir tür çığlık atar:
"Sadece listedeki her öğeye bunu yap, sipariş umrumda değil!"
Ancak pratikte değil aslında güvenilir bir niyet göstergesidir, çünkü do durumlarından ayırt edilemez siparişi önemsiyorum ve gerçekte need tersine dönmeyi yapın. Bu nedenle, aslında ECMAScript de dahil olmak üzere birçok dilde mevcut olmayan ama örneğin forEachUnordered()
olarak adlandırılabilecek bir şey olan "umursamıyorum" amacını doğru bir şekilde ifade etmek için başka bir yapıya ihtiyaç duyulacaktı.
Eğer sipariş önemli değilse ve verimlilik bir endişe kaynağıysa (bir oyunun veya animasyon motorunun en içsel döngüsünde) bir kaygı ise, tersini döngü olarak kullanmak için kabul edilebilir. desen. Unutmayın, mevcut kodda bir döngü için bir ters görmenin , sırasının alakasız olduğu anlamına gelmez .
Genel olarak, açıklık ve güvenliğin daha fazla endişe verici olduğu daha üst düzey kodlar için, varsayılan şablonunuz olarak Array::forEach
komutunu kullanmanızı tavsiye ederim:
for
ve while
döngülerinde her zaman olası bir sürpriz olduğunu gösterir.)O zaman kodunuzdaki döngünün tersini gördüğünüzde, bu iyi bir nedenden dolayı tersine çevrildiğine dair bir ipucu (belki de yukarıda açıklanan nedenlerden biri). Ve döngü için geleneksel bir ileri görmek, kaymanın gerçekleşebileceğini gösterebilir.
(Amaç tartışması size bir şey ifade etmiyorsa, siz ve kodunuz Crockford'un dersini --- Programlama Stili ve Beyniniz .
_for (var i = 0; i < array.length; i++) { ... } // Forwards
for (var i = array.length; i--; ) { ... } // Reverse
_
_i--
_ öğesinin orta fıkra (genellikle bir karşılaştırma gördüğümüz) olduğunu ve son fıkranın boş olduğunu (genellikle _i++
_ gördüğümüz) fark edersiniz. Bu, _i--
_ öğesinin devam için condition olarak kullanıldığı anlamına gelir. Önemli bir şekilde, her yinelemede önce çalıştırılır ve kontrol edilir.
Patlamadan _array.length
_ 'da nasıl başlayabilir?
_i--
_ çalıştırıldığından önce her yinelemede, ilk yinelemede, aslında _array.length - 1
_ öğesinden erişeceğiz. Dizi-out-of-aut undefined
öğe.
Neden dizin 0'dan önce yinelemeyi durdurmuyor?
Döngü, _i--
_ koşulu bir falsey değerini değerlendirdiğinde (0 verdiğinde) yinelemeyi durdurur.
İşin püf noktası, _--i
_ 'dan farklı olarak, takip eden _i--
_ operatörünün i
değerini azalttığı, ancak before değerindeki azalmayı vermesidir. Konsolunuz bunu gösterebilir:
_> var i = 5; [i, i--, i];
_
_[5, 5, 4]
_
Böylece, son yinelemede, i daha önceydi 1 ve _i--
_ ifadesi onu 0 olarak değiştirir; aslında verim 1 (truthy) ve bu nedenle koşul geçer. Bir sonraki yinelemede _i--
_ değişiyor i ( - 1 değerini değiştiriyor ancak sonuçta 0 (falsey) değerini alıyor, uygulamasına neden oluyor derhal döngünün altından düşmek için.
Döngü için geleneksel iletimlerde, _i++
_ ve _++i
_ birbirleriyle değiştirilebilir (Douglas Crockford'un işaret ettiği gibi). Bununla birlikte, döngü için tersine, azalmamız aynı zamanda koşul ifademiz olduğu için, öğeyi 0 dizininde işlemek istiyorsak _i--
_ ile yapışmalıyız.
Bazı insanlar for
döngüsünün tersine küçük bir ok çizmeyi ve göz kırpmayı bitirmeyi sever:
_for (var i = array.length; i --> 0 ;) {
_
Krediler, WYL’ye dönüyor, bana döngünün tersinin faydalarını ve dehşetlerini gösteriyorlar.
Bazı C - stil dilleri, numaralandırmalar arasında dolaşmak için foreach
öğesini kullanır. JavaScript'te bu, for..in
loop yapısı ile yapılır.
var index,
value;
for (index in obj) {
value = obj[index];
}
Bir yakalama var. for..in
, nesnenin numaralandırılabilir üyelerinin her biri ve prototipindeki üyeler arasında geçiş yapar. Nesnenin prototipi ile miras alınan değerleri okumaktan kaçınmak için, özelliğin nesneye ait olup olmadığını kontrol edin:
for (i in obj) {
if (obj.hasOwnProperty(i)) {
//do stuff
}
}
Ek olarak, ECMAScript 5 , bir geri arama kullanarak bir dizi üzerinde numaralandırmak için kullanılabilecek Array.prototype
işlevine forEach
yöntemini ekledi (polyfill dokümandadır, bu nedenle eski tarayıcılar için yine de kullanabilirsiniz):
arr.forEach(function (val, index, theArray) {
//do stuff
});
Geri arama false
döndürdüğünde Array.prototype.forEach
'nin kırılmadığına dikkat etmek önemlidir. jQuery ve Underscore.js , kısa devre yapılabilecek döngüler sağlamak için each
üzerinde kendi varyasyonlarını sağlar.
Bir dizi üzerinde döngü yapmak istiyorsanız, standart üç bölümlü for
döngüsünü kullanın.
for (var i = 0; i < myArray.length; i++) {
var arrayItem = myArray[i];
}
myArray.length
dosyasını önbelleğe alarak veya geriye doğru yineleyerek bazı performans optimizasyonları elde edebilirsiniz.
Bunun eski bir yazı olduğunu biliyorum ve çoktan çok iyi cevaplar var. Biraz daha eksiksiz olması için AngularJS kullanarak başka bir tane atacağımı düşündüm. Tabii ki, bu yalnızca Angular kullanıyorsanız geçerlidir, açıkçası, yine de yine de koymak istiyorum.
angular.forEach
, 2 argüman ve isteğe bağlı üçüncü bir argüman alır. İlk argüman yinelenecek nesne (dizi), ikinci argüman yineleyici işlevidir ve isteğe bağlı üçüncü argüman nesne içeriğidir (temelde döngü içinde 'this' olarak adlandırılır).
ForEach her açısal döngüyü kullanmanın farklı yolları vardır. En basit ve muhtemelen en çok kullanılan
var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
//item will be each element in the array
//do something
});
Öğeleri bir diziden diğerine kopyalamak için yararlı olan başka bir yol da
var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
this.Push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);
Bunu yapmak zorunda olmamanıza rağmen, basitçe aşağıdakileri yapabilirsiniz ve bu önceki örneğe denktir:
angular.forEach(temp, function(item) {
temp2.Push(item);
});
Şimdi, Vanilya aromalı for
döngüsünün aksine angular.forEach
işlevini kullanmanın artıları ve eksileri var.
Avantaj
angular.forEach
ES5 forEach döngüsünü kullanır. Şimdi, forEach döngüler forop döngülerinden çok daha yavaş olduğundan, eksiler bölümünde etkinliğe ulaşacağım. Bunu bir profesyonel olarak söylüyorum çünkü tutarlı ve standartlaştırılmış olması güzel.Tam olarak aynı şeyi yapan aşağıdaki 2 iç içe döngüyü düşünün. Diyelim ki 2 tane nesne dizimiz var ve her nesne, bir dize (ya da her neyse) bir Value özelliğine sahip olan bir sonuç dizisi içeriyor. Ve diyelim ki sonuçların her birini yinelemeliyiz ve eğer eşitlerse, bazı eylemler gerçekleştirin:
angular.forEach(obj1.results, function(result1) {
angular.forEach(obj2.results, function(result2) {
if (result1.Value === result2.Value) {
//do something
}
});
});
//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
for (var j = 0; j < obj2.results.length; j++) {
if (obj1.results[i].Value === obj2.results[j].Value) {
//do something
}
}
}
Bunun çok basit bir varsayım örneği olduğunu kabul ediyorum, ancak ikinci yaklaşımı kullanarak döngüler için gömülü üçlü yazdım ve okunması ve yazması zor oldu çok zordu.
Eksileri
angular.forEach
ve doğal forEach
, bu konuda, her ikisi de normal for
döngüsünden çok daha yavaş yavaşlar. % 90 daha yavaş . Bu yüzden büyük veri kümeleri için, yerel for
döngüsüne uyması en iyisidir.continue
aslında bir angular.forEach
ile devam etmek için " kaza " tarafından desteklenir, basitçe angular.forEach(array, function(item) { if (someConditionIsTrue) return; });
işlevine bir return;
deyimi koyarsınız bu yinelemenin işlevinin dışında kalmasına neden olur. Bu aynı zamanda, doğal forEach
öğesinin mola desteklememesi veya devam etmemesi nedeniyle de ortaya çıkıyor.Eminim başka avantajlar ve dezavantajlar da vardır ve lütfen uygun gördüğünüzü eklemekten çekinmeyin. Verimliliğe ihtiyacınız varsa, döngü gereksinimleriniz için sadece yerel for
döngüsüne sadık kaldığımı hissediyorum. Ancak, veri kümeleriniz daha küçükse ve okunabilirlik ve yazılabilirlik karşılığında bir miktar verimlilik tamamsa, o zaman elbette o kötü çocukta bir angular.forEach
atın.
Diziyi boşaltma sakıncası yoksa:
var x;
while(x = y.pop()){
alert(x); //do something
}
x
, y
dosyasının son değerini içerecek ve diziden kaldırılacaktır. Ayrıca ilk öğeyi y
dosyasından çıkaracak ve kaldıracak shift()
öğesini kullanabilirsiniz.
Bir forEach uygulaması ( bakınız jsFiddle ):
function forEach(list,callback) {
var length = list.length;
for (var n = 0; n < length; n++) {
callback.call(list[n]);
}
}
var myArray = ['hello','world'];
forEach(
myArray,
function(){
alert(this); // do something
}
);
Şimdi kolay bir çözüm, underscore.js kütüphanesi kullanmaktır. each
gibi pek çok yararlı araç sağlıyor ve işi otomatik olarak yerel forEach
'e devredecek.
A CodePen örneği nasıl çalıştığını _:
var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});
Array.prototype.forEach()
için belgeler .for each (variable in object)
dosyasının ECMA-357 ( EAX ) standardının bir parçası olarak kullanımdan kaldırıldığı açıklanmaktadır.for (variable of object)
işlevini kullanarak bir sonraki yineleme yöntemini açıklar.Aşağıdaki gibi jQuery içinde foreach
dosyasının üç uygulaması vardır.
var a = [3,2];
$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3
Muhtemelen for(i = 0; i < array.length; i++)
döngüsü en iyi seçenek değildir. Niye ya? Eğer bu varsa:
var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";
Bu yöntem array[0]
'dan array[2]
'a kadar çağırır. Birincisi, bu sizin ilk önce sahip olmadığınız değişkenlere atıfta bulunacak, ikincisi dizide değişkenlere sahip olmayacak ve üçüncüsü bu kod kodlayıcı olacaktır. Buraya bak, kullandığım şey:
for(var i in array){
var el = array[i];
//If you want 'i' to be INT just put parseInt(i)
//Do something with el
}
Ve bir işlev olmasını istiyorsanız, bunu yapabilirsiniz:
function foreach(array, call){
for(var i in array){
call(array[i]);
}
}
Eğer kırmak istiyorsanız, biraz daha mantık:
function foreach(array, call){
for(var i in array){
if(call(array[i]) == false){
break;
}
}
}
Örnek:
foreach(array, function(el){
if(el != "!"){
console.log(el);
} else {
console.log(el+"!!");
}
});
Dönüyor:
//Hello
//World
//!!!
ES6'dan itibaren:
list = [0, 1, 2, 3]
for (let obj of list) {
console.log(obj)
}
of
, in
ile ilişkili garipliklerden kaçınır ve başka bir dilin for
döngüsü gibi çalışmasını sağlar ve let
, işlev içindeki aksine i
'ı bağlar.
Yalnızca bir komut olduğunda (örn. Yukarıdaki örnekte) parantezler ({}
) çıkarılabilir.
Bu, endonun 0'da başladığı, seyrek olmayan liste için bir yineleyicidir; bu, document.getElementsByTagName veya document.querySelectorAll)
function each( fn, data ) {
if(typeof fn == 'string')
eval('fn = function(data, i){' + fn + '}');
for(var i=0, L=this.length; i < L; i++)
fn.call( this[i], data, i );
return this;
}
Array.prototype.each = each;
Kullanım örnekleri:
Örnek 1
var arr = [];
[1, 2, 3].each( function(a){ a.Push( this * this}, arr);
arr = [1, 4, 9]
Örnek # 2
each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');
Her p etiketi class="blue"
alır
Örnek # 3
each.call(document.getElementsByTagName('p'),
"if( i % 2 == 0) this.className = data;",
'red'
);
Diğer her p etiketi class="red"
> alır
Örnek # 4
each.call(document.querySelectorAll('p.blue'),
function(newClass, i) {
if( i < 20 )
this.className = newClass;
}, 'green'
);
Ve sonunda ilk 20 mavi p etiketi yeşile dönüştü
Dize işlevi olarak kullanırken dikkatli olun: işlev bağlam dışında oluşturulur ve yalnızca değişken kapsam belirleme yaptığınız yerlerde kullanılmalıdır. Aksi takdirde, kapsam belirlemenin daha sezgisel olduğu işlevleri geçmek daha iyidir.
Yerel JavaScript içinde hiçbir for each
döngüsü yok. Bu işlevi elde etmek için kitaplıkları kullanabilirsiniz ( Underscore.js önerilir), döngü içinde basit bir for
kullanın.
for (var instance in objects) {
...
}
Bununla birlikte, daha basit for
döngüsünü kullanmanın nedenleri olabileceğini unutmayın (bkz. Yığın Taşması sorusu NEDEN BU KADAR K&OUML;T&UUML; BIR FIKIR DIZISI YINELEME ILE &LDQUO;I&CCEDIL;IN&HELLIP;&RDQUO; KULLANIYOR?)
var instance;
for (var i=0; i < objects.length; i++) {
var instance = objects[i];
...
}
Aşağıdaki gibi JavaScript'te bir dizi arasında dolaşmak için birkaç yol vardır:
for - en yaygın olanıdır. Döngü için tam kod bloğu
var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>
while - bir koşul geçerken döngü. En hızlı döngü gibi görünüyor
var text = "";
var i = 0;
while (i < 10) {
text += i + ") something<br>";
i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>
do/while - koşul doğru olduğunda bir kod bloğunda da dolaşın, en az bir kez çalışacaktır
var text = ""
var i = 0;
do {
text += i + ") something <br>";
i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>
İşlevsel döngüler - forEach
, map
, filter
, ayrıca reduce
(işlev boyunca döngü yaparlar, ancak dizinizle bir şey yapmanız gerekirse kullanılır.
// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>
Dizilerde işlevsel programlama hakkında daha fazla bilgi ve örnekler için, blog yazısına bakınız JavaScript'te işlevsel programlama: harita, filtre ve azalt.
ECMAScript5 (Javascript'teki sürüm) Dizilerle çalışmak için.
forEach - Dizideki her öğeyi sıralar ve her öğeyle ne gerekiyorsa yaparsınız.
['C', 'D', 'E'].forEach(function(element, index) {
console.log(element + " is the #" + (index+1) + " in musical scale");
});
// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale
Durumda, daha fazla dahili özellik kullanarak dizi üzerinde işlem yapmakla ilgileniyorsanız.
map - Geri çağırma işlevinin sonucu ile yeni bir dizi oluşturur. Bu yöntem, dizinizin öğelerini biçimlendirmeniz gerektiğinde kullanılması iyidir.
// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
return elem.toUpperCase();
});
// Output: ['BOB', 'JOE', 'JEN']
reduc - Adından da anlaşılacağı gibi, para birimi öğesinde geçen işlevi ve önceki uygulamanın sonucunu çağırarak diziyi tek bir değere indirger.
[1,2,3,4].reduce(function(previous, current) {
return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10
every - Dizideki tüm öğeler geri çağırma işlevinde testi geçerse doğru veya yanlış döndürür.
// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];
ages.every(function(elem) {
return elem >= 18;
});
// Output: false
filter - Süzgeci, her birine çok benzeyen, belirtilen işleve sadık dönen öğelerin bulunduğu bir dizi döndürür.
// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
return (elem % 2 == 0)
});
// Output: [2,4,6]
Umarım bu yararlı olacaktır.
forEach
içine girebilecek hiçbir dahili yetenek yok. Yürütmeyi kesmek için aşağıdaki gibi Array#some
işlevini kullanın:
[1,2,3].some(function(number) {
return number === 1;
});
Bu işe yarar çünkü some
, dizi sırasına göre yapılan herhangi bir geri çağırma işleminin geri kalanının yürütülmesine kısa devre yapan doğru döndürür döndürmez gerçek değer verir. Orijinal Cevap Bkz. some için dizi prototipi
Ben de bunu, bu sözdizimini de isteyen birileri için bir ters döngü bileşimi ve yukarıdaki bir cevap olarak eklemek istiyorum.
var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
console.log(item);
}
Artıları:
Bunun yararı: Daha önce başka bir satırda bildirilmesi gerekmeyecek olan ilk halihazırda referansa sahipsiniz. Nesne dizisi üzerinden döngü yaparken kullanışlıdır.
Eksileri:
Bu, referans yanlış olduğunda - kesilecektir (falsey (tanımsız, vb.). Yine de bir avantaj olarak kullanılabilir. Ancak okumayı biraz zorlaştırır. Ayrıca tarayıcıya bağlı olarak, orijinalinden daha hızlı çalışması için optimize edilemeyebilir.
$.map
kullanarak jQuery yolu:
var data = [1, 2, 3, 4, 5, 6, 7];
var newData = $.map(data, function(element) {
if (element % 2 == 0) {
return element;
}
});
// newData = [2, 4, 6];
ES6 --- ile Döngüleri Kullanma yıkıcı ve spread operatörü
Bazı javascript gazileri dağınık, gençler veya bazı insanlar yararlı bulabilir olsa da, ES6’ya yeni başlayanlar için tahrip etme ve yayılma operatörünün kullanımı oldukça faydalı oldu.
Aşağıdaki örnekler
for...of
deyimi ve.forEach
yöntemini kullanacaktır.Örnek 6, 7 ve 8 , _
.map
_, _.filter
_, _.reduce
_ gibi herhangi bir fonksiyonel ilmekle kullanılabilir. _.sort
_, _.every
_, _.some
_, bu yöntemler hakkında daha fazla bilgi için Array Object 'e bakın.
Örnek 1: Normal _for...of
_ döngü - burada numara yok.
_let arrSimple = ['a', 'b', 'c'];
for (let letter of arrSimple) {
console.log(letter);
}
_
Örnek 2: Kelimeleri karakterlere ayırma
_let arrFruits = ['Apple', 'orange', 'banana'];
for (let [firstLetter, ...restOfTheWord] of arrFruits) {
// Create a shallow copy using the spread operator
let [lastLetter] = [...restOfTheWord].reverse();
console.log(firstLetter, lastLetter, restOfTheWord);
}
_
Örnek 3: key
ve value
ile döngü
_// let arrSimple = ['a', 'b', 'c'];
// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type:
// `arrWithIndex: [number, string][]`
let arrWithIndex = [
[0, 'a'],
[1, 'b'],
[2, 'c'],
];
// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);
// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);
for (let [key, value] of arrWithIndex) {
console.log(key, value);
}
_
Örnek 4: Nesne özelliklerini satır içi alın
_let arrWithObjects = [{
name: 'Jon',
age: 32
},
{
name: 'Elise',
age: 33
}
];
for (let { name, age: aliasForAge } of arrWithObjects) {
console.log(name, aliasForAge);
}
_
Örnek 5: İhtiyacınız olan şeyin derin nesne özelliklerini alın
_let arrWithObjectsWithArr = [{
name: 'Jon',
age: 32,
tags: ['driver', 'chef', 'jogger']
},
{
name: 'Elise',
age: 33,
tags: ['best chef', 'singer', 'dancer']
}
];
for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
console.log(name, firstItemFromTags, restOfTags);
}
_
Örnek 6: Örnek ( Örnek 3 _.forEach
_ ile kullanılmış mı?
_let arrWithIndex = [
[0, 'a'],
[1, 'b'],
[2, 'c'],
];
// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it
arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
console.log(forEachIndex, mappedIndex, item);
});
_
Örnek 7: Örnek ( Örnek 4 _.forEach
_ ile kullanılmış mı?
_let arrWithObjects = [{
name: 'Jon',
age: 32
},
{
name: 'Elise',
age: 33
}
];
// NOTE: Destructuring objects while using shorthand functions
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
console.log(name, aliasForAge)
});
_
Örnek 8: Örnek ( Örnek 5 _.forEach
_ ile kullanılmış mı?
_let arrWithObjectsWithArr = [{
name: 'Jon',
age: 32,
tags: ['driver', 'chef', 'jogger']
},
{
name: 'Elise',
age: 33,
tags: ['best chef', 'singer', 'dancer']
}
];
arrWithObjectsWithArr.forEach(({
name,
tags: [firstItemFromTags, ...restOfTags]
}) => {
console.log(name, firstItemFromTags, restOfTags);
});
_
Fikrinize en yakın yol, dizinin her elemanı için çalıştırılacak olan bir clojure işlevini kabul eden Array.forEach()
işlevini kullanmak olacaktır.
myArray.forEach(
(item) => {
// do something
console.log(item);
}
);
Uygulanabilir başka bir yol, aynı şekilde çalışan Array.map()
işlevini kullanmak, ancak her öğenin mutates
işlevini kullanmak ve şöyle döndürmek olacaktır:
var myArray = [1, 2, 3];
myArray = myArray.map(
(item) => {
return item + 1;
}
);
console.log(myArray); // [2, 3, 4]
Lambda sözdizimi genellikle IE 10 ya da altında çalışmaz.
Ben genellikle
[].forEach.call(arrayName,function(value,index){
console.log("value of the looped element" + value);
console.log("index of the looped element" + index);
});
If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters
$("#ul>li").each(function(**index,value**){
console.log("value of the looped element" + value);
console.log("index of the looped element" + index);
});
Bunun için ForEach'i arayabilirsiniz:
let Array = [1,3,2];
theArray.forEach((element)=>{
// use the element of the array
console.log(element)
}
eleman, her dizinin değerini 0'dan dizinin uzunluğuna sahip olacaktır.
Çıktı:
1
3
2
Açıklama:
forEach prototip sınıfında. buna Array.prototype.forEach (...);
prototip: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b
Bunun gibi bir dizi üzerinde de değişiklik yapabilirsiniz:
for(let i=0;i<theArray.length;i++){
console.log(i); //i will have the value of each index
}
ok işleviyle bir nesne dizisi arasında dolaşmak istiyorsanız:
let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];
arr.forEach((person)=>{
console.log('i am '+person.name+' and i am '+person.age+ ' old');
})
Bir dizi üzerinde yineleme yaparken genellikle aşağıdaki hedeflerden birini gerçekleştirmek isteyebiliriz:
Dizinin üzerinde yineleme yapmak ve yeni dizi oluşturmak istiyoruz:
Array.prototype.map
Dizinin üzerinde yineleme yapmak istiyoruz ve yeni bir dizi oluşturmuyoruz:
Array.prototype.forEach
for..of
loop
JS'de bu iki amacı da gerçekleştirmenin birçok yolu vardır. Ancak, bazıları diğerlerinden daha uygun. Aşağıda, javascript'te dizi yinelemesini gerçekleştirmek için sık kullanılan bazı metodları (en uygun imo) bulabilirsiniz.
Map
map()
, bir dizinin her elemanını dönüştürebilen ve sonra bir yeni dizi döndüren Array.prototype
üzerinde yer alan bir işlevdir. map()
, bir geri çağırma işlevini argüman olarak alır ve aşağıdaki şekilde çalışır:
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map((element, index, array) => {
return element * 2;
})
console.log(arr);
console.log(newArr);
map()
işlevine argüman olarak geçirdiğimiz geri çağırma, her öğe için gerçekleştirilir. Ardından, orijinal dizi ile aynı uzunlukta olan bir dizi döndürülür. Bu yeni dizide eleman, map()
işlevine argüman olarak iletilen geri çağırma işlevi tarafından dönüştürülür.
map
ile forEach
ve for..of
loop gibi diğer döngü mekanizmaları arasındaki belirgin fark,map
öğesinin yeni dizi olarak geri dönmesi ve eski dizinin bozulmadan kalmasıdır (açıkça splice
gibi düşünerek işlediğiniz durumlar hariç).
Ayrıca map
işlevinin geri çağrısının, geçerli yinelemenin dizin numarasını ikinci bir argüman olarak sağladığını unutmayın. Ayrıca, üçüncü argüman, map
'nin çağrıldığı diziyi sağlıyor mu. Bazen bu özellikler çok faydalı olabilir.
forEach
kullanarak döngüforEach
, Array.prototype
'da bulunan ve geri çağırma işlevini argüman olarak alan bir işlevdir. Daha sonra dizideki her eleman için bu geri çağırma işlevini yürütür. map()
işlevinin aksine, forEach işlevi hiçbir şey döndürmez (undefined
). Örneğin:
let arr = [1, 2, 3, 4, 5];
arr.forEach((element, index, array) => {
console.log(element * 2);
if (index === 4) {
console.log(array)
}
// index, and oldArray are provided as 2nd and 3th argument by the callback
})
console.log(arr);
map
işlevi gibi, forEach
geri çağrısı, geçerli yinelemenin dizin numarasını ikinci bir argüman olarak sunar. Ayrıca üçüncü argüman, forEach
'nin çağrıldığı diziyi sağlar.
for..of
öğesini kullanarak öğeler arasında döngüfor..of
döngüsü, bir dizinin (veya herhangi bir yinelenebilir nesnenin) her bir elemanı boyunca döngü yapar. Aşağıdaki şekilde çalışır:
let arr = [1, 2, 3, 4, 5];
for(let element of arr) {
console.log(element * 2);
}
Yukarıdaki örnekte element
, bir dizi öğesini temsil eder ve arr
, döngülemek istediğimiz dizidir. element
adının keyfi olması ve 'el' gibi başka bir isim veya bu durum söz konusu olduğunda daha açıklayıcı bir şey seçmiş olmamız değil.
for..in
döngüsünü for..of
döngüsüyle karıştırmayın. for..in
, dizinin tüm numaralandırılabilir özellikleri arasında döngü sağlarken, for..of
döngüsü yalnızca dizi öğeleri arasında döngü kurar. Örneğin:
let arr = [1, 2, 3, 4, 5];
arr.foo = 'foo';
for(let element of arr) {
console.log(element);
}
for(let element in arr) {
console.log(element);
}
Büyük bir diziniz varsa, biraz verimlilik elde etmek için iterators
kullanmanız gerekir. Yineleyiciler belirli JavaScript koleksiyonlarının bir özelliğidir ( Map
, Set
, String
, Array
). Hatta, for..of
başlık altında iterator
kullanır.
Yineleyiciler, bir listedeki öğeleri bir akışmış gibi birer birer tüketmenize izin vererek verimliliği artırır. Bir yineleyiciyi özel yapan, bir koleksiyonu nasıl geçtiğidir. Diğer döngüler, üzerinde yineleme yapabilmek için tüm koleksiyonu önden yüklemelidir, oysa bir yineleyicinin yalnızca koleksiyondaki mevcut konumu bilmesi gerekir.
Geçerli öğeye, yineleyicinin next
yöntemini çağırarak erişirsiniz. Bir sonraki yöntem, geçerli öğenin value
değerini ve koleksiyonun sonuna ne zaman ulaştığınızı belirtmek için bir boolean
döndürür. Aşağıdaki bir diziden bir yineleyici oluşturma örneğidir.
Normal dizinizi yineleyiciye dönüştürerek bu şekilde values()
yöntemini kullanın:
const myArr = [2,3,4]
let it = myArr.values();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
Ayrıca normal dizinizi yineleyiciye dönüştürebilirsiniz: Symbol.iterator
böyle:
const myArr = [2,3,4]
let it = myArr[Symbol.iterator]();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
Ayrıca normal array
'ınızı iterator
biçimine dönüştürebilirsiniz:
let myArr = [8, 10, 12];
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
};
};
var it = makeIterator(myArr);
console.log(it.next().value); // {value: 8, done: false}
console.log(it.next().value); // {value: 10, done: false}
console.log(it.next().value); // {value: 12, done: false}
console.log(it.next().value); // {value: undefined, done: true}
NOT:
iterable
değildir. Bu durumda for..in
kullanın, çünkü değerler yerine tuşlarla çalışır.iteration protocol
burada hakkında daha fazla bilgi okuyabilirsiniz.
var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
console.log("Index" + index);
console.log("Element" + item);
})
// Looping through arrays using foreach ES6 way
var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
console.log("index :",index); // index
console.log("value :", val); // value
});
Geri arama olarak bir işlevi kabul eden ve dizinin içinde bulunan her öğe için bir kez çalışan forEach () API'sini (Javascript tarafından sağlanan) kullanabilirsiniz.
https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html
Python'dan geliyorum ve bu yolu daha net buldum.
dizi, dizi, örnek dizi
for(let instance of theArray)
{
console.log("The instance",instance);
}
veya
for( instance in theArray)
{
console.log("The instance",instance);
}
karşılaştırmak:
theArray.forEach(function(instance) {
console.log(instance);
});
ama günün sonunda her ikisi de aynı şeyi yapıyor
Kodunuzu işlevsel bir şekilde tutmak istiyorsanız, haritayı kullanın:
theArray.map(instance => do_something);
Bu şekilde gelecekteki operasyonlar için yeni bir dizi oluşturacak ve arzu edilmeyen herhangi bir yan etkiyi geçeceksiniz.
forEach()
işlevini kullanmak istiyorsanız, şöyle görünecektir -
theArray.forEach ( element => {
console.log(element);
});
for()
işlevini kullanmak istiyorsanız, şöyle görünecektir -
for(let idx = 0; idx < theArray.length; idx++){
let element = theArray[idx];
console.log(element);
}