Belajar Basic Konsep Algoritma Buble Short
Hai semuanya Hari ini saya akan menunjukkan kepada Anda bagaimana menerapkan algoritma bubble sort. Bahasa yang saya gunakan adalah javascript, yang digunakan untuk HTML dan CSS dan framework ReactJS di bagian frontend atau GUI.
Ayo mulai…
Apa itu algoritma bubble sort?
Algoritma bubble sort adalah algoritma yang membandingkan dua elemen yang berdekatan untuk mengurutkan sebuah array dan menukarnya jika mereka tidak berada dalam urutan yang diinginkan. Urutan di sini bisa seperti naik atau turun.
Cara kerja Buble Short
Beberapa array tidak tersortir arr = [1, 4, 2, 5, -2, 3] Tugasnya adalah mengurutkan array menggunakan bubble sort.
Bubble sort membandingkan elemen-elemen pada indeks 0, dan jika indeks ke-0 kurang dari indeks ke-1, nilainya dipertukarkan, dan jika indeks ke-0 kurang dari indeks ke-1, tidak ada yang terjadi.
Indeks pertama kemudian dibandingkan dengan indeks kedua, kemudian indeks kedua dibandingkan dengan indeks ketiga.
Syntax
BubbleSort(array){
for i -> 0 to arrayLength
for j -> 0 to (arrayLength — i — 1)
if arr[j] > arr[j + 1]
swap(arr[j], arr[j + 1])
}
Penerapan
import React from 'react'
import './App.css';function App() {// Creating the bblSort function
function bblSort(arr){ for(var i = 0; i < arr.length; i++){ // Last i elements are already in place
for(var j = 0; j < ( arr.length - i -1 ); j++){ // Checking if the item at present iteration
// is greater than the next iteration
if(arr[j] > arr[j+1]){ // If the condition is true then swap them
var temp = arr[j]
arr[j] = arr[j + 1]
arr[j+1] = temp
}
}
} }
// This is our unsorted array
var arr = [234, 43, 55, 63, 5, 6, 235, 547,100,98,70,900,80,1];
const UnSortedArray = arr.map((number) =>
<li>{number}</li>
); //function calling
bblSort(arr) //this is our sorted array
const SortedArray = arr.map((number) =>
<li>{number}</li>
); return (
<div className='main-div'>
<div className='bg-dark text-light text-center'>
<h1 className='display-3 text-light my-3'>Unsorted Array</h1>
<ul>
{UnSortedArray}
</ul>
</div>
<div className='bg-primary text-light text-center'>
<h1 className='display-3 text-light my-3'>Sorted Array Using Bubble Sort</h1>
<ul>
{SortedArray}
</ul>
</div>
</div>
);
}export default App
CSS Part
Catatan : Saya menggunakan bootstrap dalam kode saya, jadi instal menggunakan npm atau cdn.
Terima kasih telah memeriksa posting ini