การเรียงลำดับอาร์เรย์ JavaScript

สารบัญ

การเรียงลำดับอาร์เรย์

sort() วิธีการเรียงลำดับอาร์เรย์ตามตัวอักษร:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

การย้อนกลับอาร์เรย์

reverse() วิธีการกลับรายการองค์ประกอบในอาร์เรย์

คุณสามารถใช้มันเพื่อ จัดเรียงอาร์เรย์ตามลำดับจากมากไปน้อย:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

การเรียงลำดับตัวเลข

ตามค่าเริ่มต้น ฟังก์ชัน sort() จะเรียงลำดับค่าเป็น สตริง

วิธีนี้ใช้ได้ดีกับสตริง ("Apple" มาก่อน "Banana")

อย่างไรก็ตาม หากจัดเรียงตัวเลขเป็นสตริง "25" จะมีค่ามากกว่า "100" เพราะ "2" ใหญ่กว่า "1"

ด้วยเหตุนี้ วิธีการ sort() จะสร้างผลลัพธ์ที่ไม่ถูกต้องเมื่อทำการเรียงลำดับ ตัวเลข

คุณสามารถแก้ไขได้โดยระบุ ฟังก์ชันเปรียบเทียบ:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

ใช้เคล็ดลับเดียวกันนี้เพื่อจัดเรียงอาร์เรย์จากมากไปน้อย:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

ฟังก์ชั่นการเปรียบเทียบ

วัตถุประสงค์ของฟังก์ชันเปรียบเทียบคือเพื่อกำหนดการเรียงลำดับทางเลือก คำสั่ง.

ฟังก์ชันการเปรียบเทียบควรส่งกลับค่าลบ ศูนย์ หรือค่าบวก ขึ้นอยู่กับ ข้อโต้แย้ง:

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

เมื่อฟังก์ชัน sort() เปรียบเทียบสองค่า มันจะส่งค่าไปที่ เปรียบเทียบฟังก์ชัน และเรียงลำดับค่าตามค่าที่ส่งคืน (ลบ ค่าศูนย์บวก)

หากผลลัพธ์เป็นลบ a จะถูกเรียงลำดับก่อน <รหัส class="w3-codespan">ข.

หากผลลัพธ์เป็นค่าบวก b จะถูกจัดเรียง ก่อน a

หากผลลัพธ์เป็น 0 จะไม่มีการเปลี่ยนแปลงใด ๆ กับลำดับการจัดเรียงของทั้งสอง ค่านิยม

ตัวอย่าง:

ฟังก์ชันเปรียบเทียบจะเปรียบเทียบค่าทั้งหมดในอาร์เรย์ โดยมี 2 ค่าที่ a เวลา (a, b)

เมื่อเปรียบเทียบ 40 และ 100 sort() วิธีการเรียกใช้ฟังก์ชันเปรียบเทียบ (40, 100)

ฟังก์ชันคำนวณ 40 - 100 (a - b) และ เนื่องจากผลลัพธ์เป็นลบ (-60) ฟังก์ชันการเรียงลำดับจะเรียงลำดับ 40 เป็นค่าที่ต่ำกว่า 100

คุณสามารถใช้ข้อมูลโค้ดนี้เพื่อทดลองกับตัวเลขและ การเรียงลำดับตามตัวอักษร:

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

ลองด้วยตัวคุณเอง →

<!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>

การเรียงลำดับอาร์เรย์แบบสุ่ม

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

วิธีฟิชเชอร์เยตส์

ตัวอย่างข้างต้น array.sort() ไม่ถูกต้อง ก็จะได้บุญบ้าง ตัวเลขเหนือคนอื่นๆ

วิธีที่ถูกต้องที่ได้รับความนิยมมากที่สุดเรียกว่าการสับเปลี่ยนของ Fisher Yates และเคยเป็น เปิดตัวในด้านวิทยาศาสตร์ข้อมูลตั้งแต่ต้นปี 1938!

ใน JavaScript วิธีการสามารถแปลเป็นดังนี้:

ตัวอย่าง

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;
}

ลองด้วยตัวคุณเอง →

<!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>

ค้นหาค่าอาร์เรย์ต่ำสุด (หรือสูงสุด)

ไม่มีฟังก์ชันในตัวสำหรับการค้นหาค่าสูงสุดหรือต่ำสุด ค่าในอาร์เรย์

อย่างไรก็ตาม หลังจากคุณเรียงลำดับอาร์เรย์แล้ว คุณสามารถใช้ ดัชนีเพื่อให้ได้ค่าสูงสุดและต่ำสุด

เรียงลำดับจากน้อยไปหามาก:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

เรียงลำดับจากมากไปน้อย:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

การเรียงลำดับอาร์เรย์ทั้งหมดเป็นวิธีการที่ไม่มีประสิทธิภาพมาก หากคุณต้องการค้นหาเฉพาะค่าสูงสุด (หรือต่ำสุด) เท่านั้น

การใช้ `Math.max()` บนอาร์เรย์

คุณสามารถใช้ Math.max.apply เพื่อค้นหาจำนวนสูงสุดในอาร์เรย์:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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 , 3).

การใช้ `Math.min()` บนอาร์เรย์

คุณสามารถใช้ Math.min.apply เพื่อค้นหาตัวเลขที่ต่ำที่สุดในอาร์เรย์:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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 , 3).

วิธีการ JavaScript ต่ำสุด/สูงสุดของฉัน

วิธีแก้ไขที่เร็วที่สุดคือใช้วิธี "ทำเอง"

ฟังก์ชันนี้จะวนซ้ำผ่านอาร์เรย์เพื่อเปรียบเทียบแต่ละค่ากับค่าสูงสุด พบมูลค่า:

ตัวอย่าง (ค้นหาสูงสุด)

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

ลองด้วยตัวคุณเอง →

<!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>

ฟังก์ชันนี้จะวนซ้ำผ่านอาร์เรย์เพื่อเปรียบเทียบแต่ละค่ากับค่าต่ำสุด พบมูลค่า:

ตัวอย่าง (ค้นหาขั้นต่ำ)

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

ลองด้วยตัวคุณเอง →

<!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>

การเรียงลำดับอาร์เรย์วัตถุ

อาร์เรย์ JavaScript มักจะมีวัตถุ:

ตัวอย่าง

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

แม้ว่าวัตถุจะมีคุณสมบัติประเภทข้อมูลที่แตกต่างกัน แต่วิธี sort() สามารถใช้เพื่อเรียงลำดับอาร์เรย์

วิธีแก้ไขคือเขียนฟังก์ชันเปรียบเทียบเพื่อเปรียบเทียบค่าคุณสมบัติ:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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>

การเปรียบเทียบคุณสมบัติของสตริงนั้นซับซ้อนกว่าเล็กน้อย:

ตัวอย่าง

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;
});

ลองด้วยตัวคุณเอง →

<!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>

อาร์เรย์ที่เสถียร `sort()`

ES2019 แก้ไข วิธีการ Array sort()

ก่อนปี 2019 ข้อกำหนดดังกล่าวอนุญาตให้มีอัลกอริธึมการเรียงลำดับที่ไม่เสถียร เช่น QuickSort

หลังจาก ES2019 เบราว์เซอร์ต้องใช้อัลกอริธึมการเรียงลำดับที่เสถียร:

เมื่อเรียงลำดับองค์ประกอบตามค่า องค์ประกอบจะต้องรักษาตำแหน่งที่สัมพันธ์กับองค์ประกอบอื่นที่มีค่าเดียวกัน

ตัวอย่าง

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 }
];

ลองด้วยตัวคุณเอง →

<!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>

ในตัวอย่างข้างต้น เมื่อเรียงลำดับราคา ผลลัพธ์จะไม่อนุญาตให้ออกมาพร้อมกับชื่อ ในตำแหน่งสัมพัทธ์อื่นเช่นนี้:

การอ้างอิงอาร์เรย์ที่สมบูรณ์

หากต้องการข้อมูลอ้างอิง Array ฉบับสมบูรณ์ โปรดไปที่:

การอ้างอิงอาร์เรย์ JavaScript ที่สมบูรณ์

ข้อมูลอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของ Array ทั้งหมด คุณสมบัติและวิธีการ

การเรียงลำดับอาร์เรย์ JavaScript

สารบัญ