JavaScript Dizi Sıralaması

İçindekiler

    İçindekiler tablosunu göster

Bir Diziyi Sıralama

sort() yöntemi bir diziyi alfabetik olarak sıralar:

Örnek

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The sort() method sorts an array alphabetically:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Bir Diziyi Ters Çevirme

reverse() yöntemi bir dizideki öğeleri tersine çevirir.

Bunu yapmak için kullanabilirsiniz bir diziyi azalan düzende sıralayın:

Örnek

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Sort in Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

// First sort the array
fruits.sort();

// Then reverse it:
fruits.reverse();

document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Sayısal Sıralama

Varsayılan olarak sort() işlevi, değerleri dizeler olarak sıralar.

Bu, dizeler için işe yarar ("Apple", "Banana"dan önce gelir).

Ancak sayılar dize olarak sıralanırsa "25", "100"den büyüktür, Çünkü "2", "1"den büyüktür.

Bu nedenle, sort() yöntemi sıralama sırasında yanlış sonuç üretecektir sayılar.

Bir karşılaştırma işlevi sağlayarak bunu düzeltebilirsiniz:

Örnek

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in ascending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;  

points.sort(function(a, b){return a - b});
document.getElementById("demo2").innerHTML = points;
</script>

</body>
</html>

Bir diziyi azalan şekilde sıralamak için aynı numarayı kullanın:

Örnek

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;

points.sort(function(a, b){return b - a});
document.getElementById("demo2").innerHTML = points;
</script>

</body>
</html>

Karşılaştırma İşlevi

Karşılaştırma fonksiyonunun amacı alternatif bir sıralama tanımlamaktır. emir.

Karşılaştırma işlevi, duruma bağlı olarak negatif, sıfır veya pozitif bir değer döndürmelidir. argümanlar:

function(a, b){return a - b}

sort() işlevi iki değeri karşılaştırdığında değerleri karşılaştırma işlevi ve değerleri döndürülen (negatif, sıfır, pozitif) değer.

Sonuç negatifse a önce sıralanır b.

Sonuç pozitifse b sıralanır a'dan önce.

Sonuç 0 ise ikisinin sıralamasında herhangi bir değişiklik yapılmaz. değerler.

Örnek:

Karşılaştırma işlevi dizideki tüm değerleri, aynı anda iki değeri karşılaştırır. zaman (a, b).

40 ile 100'ü karşılaştırırken sort() yöntemi, karşılaştırma işlevini(40, 100) çağırır.

İşlev 40 - 100 (a - b) değerini hesaplar ve sonuç negatif (-60) olduğundan sıralama işlevi 40'ı 100'den düşük bir değer olarak sıralar.

Sayısal olarak denemeler yapmak için bu kod pasajını kullanabilirsiniz ve alfabetik sıralama:

<button onclick="myFunction1()">Sort Alphabetically</button>
<button 
 onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
 
<script>
const points = [40, 100, 1, 5, 25, 10];
 document.getElementById("demo").innerHTML = points;
function 
 myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML 
 = points;
}
function myFunction2() {
  points.sort(function(a, b){return 
 a - b});
  document.getElementById("demo").innerHTML = points;
}
 </script>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Bir Diziyi Rastgele Sırayla Sıralama

Örnek

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(){return 0.5 - Math.random()});

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Fisher Yates Yöntemi

Yukarıdaki örnek olan array.sort() doğru değildir. Bazılarının lehine olacak sayılar diğerlerinin üzerindedir.

En popüler doğru yönteme Fisher Yates karıştırma adı verilir ve veri bilimine 1938 gibi erken bir tarihte tanıtıldı!

JavaScript'te yöntem şuna çevrilebilir:

Örnek

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * (i+1));
  let k = points[i];
  
  points[i] = points[j];
  points[j] = k;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<h2>The Fisher Yates Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  for (let i = points.length -1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i+1));
    let k = points[i];
    points[i] = points[j];
    points[j] = k;
  }
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

En Düşük (veya En Yüksek) Dizi Değerini Bulun

Maksimum veya minimumu bulmak için yerleşik işlevler yoktur bir dizideki değer.

Ancak bir diziyi sıraladıktan sonra En yüksek ve en düşük değerleri elde etmek için endeks.

Artan sıralama:

Örnek

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

Azalan sıralama:

Örnek

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

Yalnızca en yüksek (veya en düşük) değeri bulmak istiyorsanız tüm diziyi sıralamak çok verimsiz bir yöntemdir.

Bir Dizide Math.max() Kullanımı

Bir dizideki en yüksek sayıyı bulmak için Math.max.apply komutunu kullanabilirsiniz:

Örnek

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

</body>
</html>

Math.max.apply(null, [1, 2, 3]), Math.max(1, 2) ile eşdeğerdir , 3).

Bir Dizide Math.min() Kullanımı

Bir dizideki en düşük sayıyı bulmak için Math.min.apply komutunu kullanabilirsiniz:

Örnek

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>

</body>
</html>

Math.min.apply(null, [1, 2, 3]), Math.min(1, 2) ile eşdeğerdir , 3).

Min/Maks JavaScript Yöntemlerim

En hızlı çözüm "ev yapımı" yöntemi kullanmaktır.

Bu işlev, her değeri en yüksek değerle karşılaştıran bir dizi boyunca döngü yapar. bulunan değer:

Örnek (Maksimum Bul)

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
        
  if (arr[len] > max) {
      
  max = arr[len];
    }
  }
  return max;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}
</script>

</body>
</html>

Bu işlev, her değeri en düşük değerle karşılaştıran bir dizi boyunca döngü yapar. bulunan değer:

Örnek (Mini Bul)

 function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    
  if (arr[len] < min) {
      
  min = arr[len];
    }
  }
  return min;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}
</script>

</body>
</html>

Nesne Dizilerini Sıralama

JavaScript dizileri genellikle nesneler içerir:

Örnek

const cars = [
  
 {type:"Volvo", year:2016},
  
 {type:"Saab", year:2001},
  
 {type:"BMW", year:2010}
];

Nesneler farklı veri türlerinin özelliklerine sahip olsa bile sort() yöntemi Diziyi sıralamak için kullanılabilir.

Çözüm, özellik değerlerini karşılaştırmak için bir karşılaştırma işlevi yazmaktır:

Örnek

cars.sort(function(a, b){return a.year - b.year});

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort car objects on age:</p>

<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

cars.sort(function(a, b){return a.year - b.year});
displayCars();

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Dize özelliklerini karşılaştırmak biraz daha karmaşıktır:

Örnek

cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
    if (x < y) {return -1;}
  
 if (x > y) {return 1;}
  return 0;
});

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort car objects on type.</p>

<button onclick="myFunction()">Sort</button>
<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    let x = a.type.toLowerCase();
    let y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Kararlı Dizi sort()

ES2019, Array sort() yöntemini revize etti.

2019'dan önce spesifikasyon, QuickSort gibi kararsız sıralama algoritmalarına izin veriyordu.

ES2019'dan sonra tarayıcıların kararlı bir sıralama algoritması kullanması gerekir:

Öğeleri bir değere göre sıralarken, öğelerin aynı değere sahip diğer öğelere göre göreceli konumlarını korumaları gerekir.

Örnek

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

<p id="demo"></p>

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Yukarıdaki örnekte fiyata göre sıralama yapılırken isimlerin yer aldığı sonucun çıkmasına izin verilmemektedir. bunun gibi başka bir göreceli konumda:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

Tam Dizi Referansı

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.