JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


JavaScript Sorting Arrays


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

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

ตัวอย่าง

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

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

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

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

ตัวอย่าง

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

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

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

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

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

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

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

ตัวอย่าง

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

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

ตัวอย่าง

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


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

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

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

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

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

ถ้าผลเป็นลบaจะเรียงลำดับ bก่อน

ถ้าผลเป็นบวกbจะเรียงลำดับaก่อน

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

ตัวอย่าง:

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

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

ฟังก์ชันคำนวณ 40 - 100 (a - b)และเนื่องจากผลลัพธ์เป็นค่าลบ (-60) ฟังก์ชัน sort จะเรียงลำดับ 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>

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

ตัวอย่าง

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


วิธีการของฟิชเชอร์เยทส์

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

วิธีการที่ถูกต้องที่ได้รับความนิยมมากที่สุด เรียกว่าการสับเปลี่ยนของฟิชเชอร์ เยทส์ และถูกนำมาใช้ในวิทยาศาสตร์ข้อมูลตั้งแต่ปี 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)
  let k = points[i]
  points[i] = points[j]
  points[j] = k
}


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

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

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

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

ตัวอย่าง

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

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

ตัวอย่าง

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

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


การใช้ Math.max() บน Array

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

ตัวอย่าง

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

Math.max.apply(null, [1, 2, 3])Math.max(1, 2, 3)มี ค่าเท่ากับ


การใช้ Math.min() บน Array

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

ตัวอย่าง

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

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

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

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

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


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

อาร์เรย์ 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});

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

ตัวอย่าง

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

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

สำหรับการอ้างอิง Array ฉบับสมบูรณ์ ไปที่:

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

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

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ใช้วิธีอาร์เรย์ที่ถูกต้องเพื่อจัดเรียงfruitsอาร์เรย์ตามตัวอักษร

const fruits = ["Banana", "Orange", "Apple", "Kiwi"];
;