Dizi yineleme yöntemleri her dizi öğesi üzerinde çalışır.
forEach()forEach() yöntemi, her dizi öğesi için bir işlevi (geri çağırma işlevi) bir kez çağırır.
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
Yukarıdaki örnekte yalnızca değer parametresi kullanılmaktadır. Örnek yeniden yazılabilir ile:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function once for each array element:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";
}
</script>
</body>
</html>
map()map() yöntemi, her dizi öğesi üzerinde bir işlev gerçekleştirerek yeni bir dizi oluşturur.
map() yöntemi dizi için işlevi yürütmüyor Değeri olmayan öğeler.
map() yöntemi orijinal diziyi değiştirmez.
Bu örnek, her dizi değerini 2 ile çarpar:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
Bir geri çağırma işlevi yalnızca değer parametresini kullandığında, dizin ve dizi parametreler ihmal edilebilir:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The map() Method</h2>
<p>Create a new array by performing a function on each array element:</p>
<p id="demo"></p>
<script>
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
flatMap()ES2019, JavaScript'e Array flatMap() yöntemini ekledi.
flatMap() yöntemi ilk olarak bir dizinin tüm öğelerini eşler ve ardından diziyi düzleştirerek yeni bir dizi oluşturur.
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
JavaScript Dizisi flatMap(), Ocak 2020'den bu yana tüm modern tarayıcılarda desteklenmektedir:
| Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
| Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
filter()filter() yöntemi, testi geçen dizi öğeleriyle yeni bir dizi oluşturur.
Bu örnek, değeri 18'den büyük olan öğelerden yeni bir dizi oluşturur:
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array from all array elements that passes a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
Yukarıdaki örnekte geri çağırma işlevi indeks ve diziyi kullanmaz parametreler, böylece ihmal edilebilirler:
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The filter() Method</h2>
<p>Create a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
reduce()reduce() yöntemi, tek bir değer üretmek (bu değere azaltmak) için her dizi öğesi üzerinde bir işlev çalıştırır.
reduce() yöntemi dizide soldan sağa doğru çalışır. Ayrıca bkz. reduceRight().
reduce() yöntemi orijinal diziyi azaltmaz.
Bu örnek, bir dizideki tüm sayıların toplamını bulur:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Fonksiyonun 4 argüman aldığını unutmayın:
Toplam (başlangıç değeri/önceden döndürülen değer)
Öğe değeri
Öğe dizini
Dizinin kendisi
Yukarıdaki örnekte indeks ve dizi parametreleri kullanılmamaktadır. Olabilir şu şekilde yeniden yazıldı:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduce() yöntemi bir başlangıç değeri kabul edebilir:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduce() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
reduceRight()reduceRight() yöntemi, tek bir değer üretmek (bu değere azaltmak) için her dizi öğesi üzerinde bir işlev çalıştırır.
reduceRight() dizide sağdan sola doğru çalışır. Ayrıca bkz. reduce().
reduceRight() yöntemi orijinal diziyi azaltmaz.
Bu örnek, bir dizideki tüm sayıların toplamını bulur:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Fonksiyonun 4 argüman aldığını unutmayın:
Toplam (başlangıç değeri/önceden döndürülen değer)
Öğe değeri
Öğe dizini
Dizinin kendisi
Yukarıdaki örnekte indeks ve dizi parametreleri kullanılmamaktadır. Olabilir şu şekilde yeniden yazıldı:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reduceRight() Method</h2>
<p>Find the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
her()every() yöntemi, tüm dizi değerlerinin bir testi geçip geçmediğini kontrol eder.
Bu örnek, tüm dizi değerlerinin 18'den büyük olup olmadığını kontrol eder:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
Bir geri çağırma işlevi yalnızca ilk parametreyi (değer) kullandığında, diğeri parametreler ihmal edilebilir:
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The every() Method</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
bazı()some() yöntemi, bazı dizi değerlerinin testi geçip geçmediğini kontrol eder.
Bu örnek, bazı dizi değerlerinin 18'den büyük olup olmadığını kontrol eder:
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The some() Method</h2>
<p>The some() method checks if some array values pass a test:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
indexOf()indexOf() yöntemi bir dizide bir öğe değerini arar ve konumunu döndürür.
Not: İlk öğenin konumu 0'dır, ikinci öğenin konumu 1'dir vb.
"Apple" öğesi için bir dizi arayın:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.indexOf(item, start)Gerekli. Aranacak öğe.
İsteğe bağlı. Aramaya nereden başlanacağı. Negatif değerler verilen pozisyonda sondan saymaya başlayacak ve sonuna kadar aranacaktır.
Array.indexOf(), öğe bulunamazsa -1 değerini döndürür.
Öğe birden fazla mevcutsa ilk öğenin konumunu döndürür. meydana gelmesi.
lastIndexOf()Array.lastIndexOf(), Array.indexOf() ile aynıdır, ancak belirtilen öğenin son oluşumunun konumunu döndürür.
"Apple" öğesi için bir dizi arayın:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
array.lastIndexOf(item, start)Gerekli. Aranacak öğe
İsteğe bağlı. Aramaya nereden başlanacağı. Negatif değerler verilen konumda sondan saymaya başlayacak ve başa doğru arama yapacaktır
find()find() yöntemi, bir değeri ileten ilk dizi öğesinin değerini döndürür test fonksiyonu.
Bu örnek, daha büyük olan ilk öğeyi bulur (değerini döndürür) 18'den büyük:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 is " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
find() bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() Internet Explorer'da desteklenmez.
findIndex()findIndex() yöntemi, ilk dizi öğesinin dizinini döndürür. bir test fonksiyonunu geçer.
Bu örnek, 18'den büyük olan ilk öğenin dizinini bulur:
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>
<p id="demo"></p>
<script>
const numbers = [4, 9, 16, 25, 29];
document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Fonksiyonun 3 argüman aldığını unutmayın:
Öğe değeri
Öğe dizini
Dizinin kendisi
findIndex() bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() Internet Explorer'da desteklenmez.
Array.from()Array.from() yöntemi, uzunluğu olan herhangi bir nesneden bir Array nesnesi döndürür özellik veya yinelenebilir herhangi bir nesne.
Bir Dizeden Dizi Oluşturun:
Array.from("ABCDEFG");Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>
<p>Return an array object from any object with a length property or any iterable object.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
from() bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() Internet Explorer'da desteklenmez.
Keys()Array.keys() yöntemi, bir dizinin anahtarlarını içeren bir Array Iterator nesnesini döndürür.
Dizinin anahtarlarını içeren bir Array Iterator nesnesi oluşturun:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>
<p>Return an Array Iterator object with the keys of the array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
keys() bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() Internet Explorer'da desteklenmez.
girişler()Bir Dizi Yineleyici oluşturun ve ardından anahtar/değer çiftleri üzerinde yineleme yapın:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>
<p>entries() returns an Array Iterator object with key/value pairs:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>
</body>
</html>
entries() yöntemi, anahtar/değer çiftlerine sahip bir Array Iterator nesnesi döndürür:
[0, "Muz"]
[1, "Portakal"]
[2, "Elma"]
[3, "Mango"]
entries() yöntemi orijinal diziyi değiştirmez.
entries() bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
entries() Internet Explorer'da desteklenmez.
include()ECMAScript 2016, dizilere Array.includes() özelliğini ekledi. Bu, bir dizide bir öğenin mevcut olup olmadığını kontrol etmemizi sağlar (indexOf'un aksine NaN dahil).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is trueKendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The includes() Method</h2>
<p>Check if the fruit array contains "Mango":</p>
<p id="demo"></p>
<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");
</script>
</body>
</html>
array.includes(search-item)Array.includes() NaN değerlerinin kontrol edilmesini sağlar. Array.indexOf()'un aksine.
includes() bir ECMAScript 2016 özelliğidir.
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes(), Internet Explorer'da desteklenmez.
... operatörü yinelenebilir bir diziyi (dizi gibi) daha fazla öğeye genişletir:
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "spread" operator spreads elements of iterable objects:</p>
<p id="demo"></p>
<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>
... bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
... Internet Explorer'da desteklenmiyor.
Array referansının tamamı için şu adrese gidin:
JavaScript Dizi Referansını Tamamlayın.
Referans tüm Dizilerin açıklamalarını ve örneklerini içerir özellikleri ve yöntemleri.