Sorting Array di JavaScript: Cara Membuat dan Contoh Codenya

Method sort() berfungsi untuk mengurutkan array menurut abjad.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Method sort() berfungsi untuk mengurutkan array menurut abjad.</p>

<button onclick="myFunction()">Cobalah</button>

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

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

function myFunction() {
  fruits.sort();
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Section Artikel

1 Membalikan Array
2 Urutan Numerik
3 Fungsi Perbandingan
4 Mengurutkan Array dalam Urutan Acak
5 Method Fisher Yates
6 Temukan Nilai Array Tertinggi atau Terendah
7 Menggunakan Math.max () pada Array
8 Menggunakan Math.min () pada Array
9 Method My Min / Max JavaScript
10 Sorting Object Arrays

Membalikan Array

Method reverse() berfungsi untuk membalikkan elemen dalam array.

Method ini dapat digunakan untuk mengurutkan array dalam urutan menurun.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort Reverse</h2>

<p>Method reverse() berfungsi untuk membalikkan elemen dalam array.</p>
<p>Dengan menggabungkan sort () dan reverse (), Anda dapat mengurutkan array dalam urutan menurun.</p>
<button onclick="myFunction()">Cobalah</button>

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

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

function myFunction() {
  // First sort the array
  fruits.sort();
  // Then reverse it:
  fruits.reverse();
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Urutan Numerik

Secara default, fungsi sort() adalah mengurutkan nilai sebagai string.

Method ini berfungsi dengan baik untuk menggurutkan string (“Apple” muncul sebelum “Banana”).

Namun, jika tipe datanya berbentuk angka maka akan diurutkan sebagai string, “25” lebih besar dari “100”, karena “2” lebih besar dari “1”.

Maka dari itu, method sort() akan memberikan hasil yang salah saat mengurutkan angka.

Hal ini dapat diperbaiki dengan menggunakan fungsi perbandingan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p> Klik tombol untuk mengurutkan array dalam urutan dari kecil ke besar. </p>
<button onclick="myFunction()">Klik disini</button>

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

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

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

</body>
</html>

Gunakan cara yang sama untuk mengurutkan array menurun.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p> Klik tombol untuk mengurutkana array secara menurun. </p>
<button onclick="myFunction()">Cobalah</button>

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

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

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

</body>
</html>

Fungsi Perbandingan

Tujuan dari fungsi perbandingan adalah untuk menentukan sort alternatif.

Fungsi perbandingan harus mengembalikan nilai negatif, nol, atau positif, bergantung pada argumen:

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

Saat fungsi sort() membandingkan dua nilai, fungsi tersebut mengirimkan nilai ke fungsi perbandingan, dan mengurutkan nilai sesuai dengan nilai yang kembalian (negatif, nol, positif)

Jika hasilnya negatif a disortir sebelum b.

Jika hasilnya positif b disortir sebelum a.

Jika hasilnya 0, tidak ada perubahan yang dilakukan dengan urutan kedua nilai tersebut.

Contoh:

Fungsi perbandingan membandingkan semua nilai dalam array, dua nilai sekaligus (a, b).

Saat membandingkan 40 dan 100, method sort() memanggil fungsi perbandingan (40, 100).

Fungsi menghitung 40 – 100 (a – b), dan karena hasilnya negatif (-60), fungsi pengurutan akan mengurutkan 40 sebagai nilai yang lebih rendah dari 100.

Anda dapat menggunakan contoh kode ini untuk mencoba pengurutan numerik dan alfabet.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p> Klik tombol untuk mengurutkan array menurut abjad atau numerik. </p>
<button onclick="myFunction1()">Abjad</button>
<button onclick="myFunction2()">Numerik</button>

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

<script>
var 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>

Mengurutkan Array dalam Urutan Acak

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p> Klik tombol (berulang kali) untuk mengurutkan array dalam urutan acak. </p>
<button onclick="myFunction()">Coba</button>

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

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

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

</body>
</html>

Method Fisher Yates

Contoh di atas tentang penggunaan array.sort() menghasilkan hasil yang tidak akurat.

Method yang paling tepat dan populer, disebut pengacakan Fisher Yates, dan diperkenalkan dalam ilmu data sejak tahun 1938!

Dalam JavaScript, method tersebut dapat diterjemahkan menjadi seperti ini.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<h3>Fisher Yates Method</h3>

<p> Klik tombol (berulang kali) untuk mengurutkan array dalam urutan acak. </p>
<button onclick="myFunction()">Coba</button>

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

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

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

</body>
</html>

Temukan Nilai Array Tertinggi atau Terendah

Tidak ada fungsi bawaan untuk menemukan nilai max atau min dalam array.

Namun, setelah kita mengurutkan array, kita dapat menggunakan indeks untuk mendapatkan nilai tertinggi dan terendah.

Mengurutkan dari atas ke bawah.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Angka terendah adalah <span id="demo"></span>.</p>

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

</body>
</html>

Mengurutkan secara menurun.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Angka tertinggi adalah <span id="demo"></span>.</p>

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

</body>
</html>

Mengurutkan seluruh array adalah method yang sangat tidak efisien jika hanya ingin mencari nilai tertinggi atau terendah.

Menggunakan Math.max () pada Array

Solusi yang lain kita dapat menggunakan Math.max.apply untuk menemukan angka tertinggi dalam sebuah array.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Angka tertinggi adalah <span id="demo"></span>.</p>

<script>
var 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]) setara dengan Math.max (1, 2, 3).

Menggunakan Math.min () pada Array

Kita dapat menggunakan Math.min.apply untuk menemukan angka terendah dalam sebuah array.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Angka terendah adalah <span id="demo"></span>.</p>

<script>
var 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>

Method My Min / Max JavaScript

Solusi tercepatnya adalah dengan menggunakan method “homemade”.

Fungsi ini mengulang melalui setiap array dan membandingkan setiap nilai dengan nilai tertinggi yang ditemukan:

Contoh:

(Temukan Max)

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Angka tertinggi adalah <span id="demo"></span>.</p>

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

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

</body>
</html>

Fungsi ini mengulang melalui array dan membandingkan setiap nilai dengan nilai terendah yang ditemukan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Angka terendah adalah <span id="demo"></span>.</p>

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

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

</body>
</html>

Sorting Object Arrays

Array JavaScript sering kali berisi objek.

Contoh:

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

Meskipun objek memiliki properti dari tipe data yang berbeda, method sort() bisa digunakan untuk mengurutkan array.

Solusinya adalah dengan menulis fungsi perbandingan untuk membandingkan nilai properti.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p> Klik tombol untuk mengurutkan object mobil berdasarkan usia. </p>
<button onclick="myFunction()">Sort</button>

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

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

displayCars();

function myFunction() {
  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>

Untuk embandingkan properti string akan sedikit lebih rumit.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p> Klik tombol untuk mengurutkan object mobil berdasarkan tipe. </p>
<button onclick="myFunction()">Sort</button>

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

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

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    var x = a.type.toLowerCase();
    var 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>

javascript sorting

Sorting Array di JavaScript: Cara Membuat dan Contoh Codenya

Membalikan Array

Urutan Numerik

Fungsi Perbandingan

Mengurutkan Array dalam Urutan Acak

Method Fisher Yates

Temukan Nilai Array Tertinggi atau Terendah

Menggunakan Math.max () pada Array

Menggunakan Math.min () pada Array

Method My Min / Max JavaScript

Sorting Object Arrays

Method Array JavaScript: Script dan Cara Membuatnya

Iterasi Array di JavaScript: Code dan Cara Membuatnya

You may also like