มาล้างความสับสนเกี่ยวกับเมธอด slice (), splice (), & split () ใน JavaScript

วิธีการในตัวของ JavaScript ช่วยเราได้มากในขณะเขียนโปรแกรมเมื่อเราเข้าใจอย่างถูกต้อง ผมอยากจะอธิบายสามของพวกเขาในบทความนี้คือslice(), splice()และsplit()วิธีการ อาจเป็นเพราะการตั้งชื่อของพวกเขาคล้ายกันจึงมักสับสนแม้กระทั่งในหมู่นักพัฒนาที่มีประสบการณ์

ฉันแนะนำให้นักเรียนและนักพัฒนารุ่นเยาว์อ่านบทความนี้อย่างละเอียดเพราะสามารถถามวิธีการทั้งสามนี้ได้ในการสัมภาษณ์งาน

คุณสามารถดูสรุปแต่ละวิธีได้ในตอนท้าย หากคุณต้องการคุณสามารถดูวิดีโอเวอร์ชันด้านล่าง:

เริ่มกันเลย…

อาร์เรย์ JavaScript

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

บางครั้งเราจำเป็นต้องดำเนินการกับอาร์เรย์เหล่านั้น จากนั้นเราจะใช้วิธีการบางอย่างเช่น JS ชิ้น () และประกบกัน () คุณสามารถดูวิธีการประกาศอาร์เรย์ใน JavaScript ได้ด้านล่าง:

let arrayDefinition = [];   // Array declaration in JS

ตอนนี้ขอประกาศอาร์เรย์อื่นด้วยประเภทข้อมูลที่แตกต่างกัน ฉันจะใช้มันด้านล่างในตัวอย่าง:

let array = [1, 2, 3, "hello world", 4.12, true];

การใช้งานนี้ใช้ได้ใน JavaScript อาร์เรย์ที่มีประเภทข้อมูลต่างกัน: สตริงตัวเลขและบูลีน

ชิ้น ()

ชิ้น ()วิธีการสำเนาเป็นส่วนหนึ่งที่ได้รับของอาร์เรย์และผลตอบแทนที่คัดลอกส่วนหนึ่งเป็นแถวใหม่ มันไม่ได้เปลี่ยนอาร์เรย์เดิม

array.slice(from, until);

  • จาก:แบ่งอาร์เรย์โดยเริ่มจากดัชนีองค์ประกอบ
  • จนถึง:แบ่งอาร์เรย์จนกว่าดัชนีองค์ประกอบอื่น

ตัวอย่างเช่นฉันต้องการแบ่งสามองค์ประกอบแรกจากอาร์เรย์ด้านบน เนื่องจากองค์ประกอบแรกของอาร์เรย์ถูกจัดทำดัชนีไว้ที่ 0 เสมอฉันจึงเริ่มแบ่งส่วน“ จาก” 0

array.slice(0, until);

ตอนนี้เป็นส่วนที่ยุ่งยาก เมื่อฉันต้องการแบ่งสามองค์ประกอบแรกฉันต้องให้พารามิเตอร์untilเป็น 3 วิธีslice () ไม่รวมองค์ประกอบสุดท้ายที่กำหนด

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

สิ่งนี้สามารถสร้างความสับสนได้ นั่นเป็นเหตุผลที่ฉันเรียกพารามิเตอร์ที่สองว่า "จนถึง"

let newArray = array.slice(0, 3);   // Return value is also an array

สุดท้ายฉันกำหนด Array ที่แบ่งส่วนให้กับตัวแปรnewArray ตอนนี้เรามาดูผลลัพธ์:

หมายเหตุสำคัญ: เมธอดSlice ()ยังสามารถใช้สำหรับสตริงได้

ประกบ ()

ชื่อของฟังก์ชันนี้คล้ายกับslice ()มาก ความคล้ายคลึงกันของการตั้งชื่อนี้มักทำให้นักพัฒนาสับสน ประกบกัน ()วิธีการเปลี่ยนแปลงอาร์เรย์โดยเพิ่มหรือลบองค์ประกอบจากมัน มาดูวิธีการเพิ่มและลบองค์ประกอบด้วยsplice ( ) :

การลบองค์ประกอบ

ในการลบองค์ประกอบเราต้องให้พารามิเตอร์ดัชนีและจำนวนองค์ประกอบที่จะลบ:

array.splice(index, number of elements);

ดัชนีเป็นจุดเริ่มต้นของการลบองค์ประกอบ องค์ประกอบที่มีหมายเลขดัชนีน้อยกว่าจากดัชนีที่ระบุจะไม่ถูกลบออก:

array.splice(2);  // Every element starting from index 2, will be removed

หากเราไม่กำหนดพารามิเตอร์ที่สองทุกองค์ประกอบที่เริ่มต้นจากดัชนีที่กำหนดจะถูกลบออกจากอาร์เรย์:

ตัวอย่างที่สองฉันให้พารามิเตอร์ที่สองเป็น 1 ดังนั้นองค์ประกอบที่เริ่มต้นจากดัชนี 2 จะถูกลบทีละรายการทุกครั้งที่เราเรียกเมธอดsplice () :

array.splice(2, 1);

หลังจากการโทรครั้งแรก:

หลังจากการโทรครั้งที่ 2:

สามารถดำเนินต่อไปได้จนกว่าจะไม่มีดัชนี 2 อีกต่อไป

การเพิ่มองค์ประกอบ

สำหรับการเพิ่มองค์ประกอบเราต้องกำหนดให้เป็นพารามิเตอร์ที่ 3, 4, 5 (ขึ้นอยู่กับจำนวนที่จะเพิ่ม) ให้กับวิธีการประกบ () :

array.splice (ดัชนีจำนวนองค์ประกอบองค์ประกอบองค์ประกอบ);

ตัวอย่างเช่นฉันกำลังเพิ่มaและbในส่วนเริ่มต้นของอาร์เรย์และฉันไม่ลบอะไรเลย:

array.splice(0, 0, 'a', 'b');

แยก ()

วิธี Slice ()และ splice ()ใช้สำหรับอาร์เรย์ แยก ()วิธีใช้สำหรับสตริง มันแบ่งสตริงออกเป็นสตริงย่อยและส่งคืนเป็นอาร์เรย์ ต้องใช้ 2 พารามิเตอร์และทั้งสองเป็นทางเลือก

string.split(separator, limit);

  • ตัวคั่น:กำหนดวิธีการแยกสตริง ... โดยใช้เครื่องหมายจุลภาคอักขระ ฯลฯ
  • ขีด จำกัด :จำกัด จำนวนการแยกด้วยหมายเลขที่กำหนด

แยก ()วิธีการไม่ทำงานโดยตรงอาร์เรย์ แต่ครั้งแรกที่เราสามารถแปลงองค์ประกอบของอาร์เรย์ของเราเป็นสตริงแล้วเราสามารถใช้แยก ()วิธีการ

เรามาดูวิธีการทำงาน

ประการแรกเราแปลงอาร์เรย์ของเราเป็นสตริงด้วยtoString ()วิธีการ:

let myString = array.toString();

ตอนนี้เรามาแยกmyStringด้วยเครื่องหมายจุลภาคจำกัด ไว้ที่สามสตริงย่อยและส่งคืนเป็นอาร์เรย์:

let newArray = myString.split(",", 3);

อย่างที่เราเห็นmyStringถูกแบ่งด้วยลูกน้ำ เนื่องจากเรา จำกัด การแบ่งไว้ที่ 3 จึงส่งคืนองค์ประกอบ 3 รายการแรกเท่านั้น

หมายเหตุ:หากเรามีการใช้งานเช่นนี้:array.split("");อักขระแต่ละตัวของสตริงจะถูกแบ่งเป็นสตริงย่อย:

สรุป:

ชิ้น ()

  • คัดลอกองค์ประกอบจากอาร์เรย์
  • ส่งคืนเป็นอาร์เรย์ใหม่
  • ไม่เปลี่ยนอาร์เรย์เดิม
  • เริ่มการแบ่งส่วนตั้งแต่…จนถึงดัชนีที่กำหนด: array.slice (from, until)
  • Slice ไม่มีพารามิเตอร์ดัชนี“ ถึง”
  • สามารถใช้ได้ทั้งกับอาร์เรย์และสตริง

ประกบ ()

  • ใช้สำหรับเพิ่ม / ลบองค์ประกอบจากอาร์เรย์
  • ส่งคืนอาร์เรย์ขององค์ประกอบที่ถูกลบ
  • เปลี่ยนอาร์เรย์
  • สำหรับการเพิ่มองค์ประกอบ: array.splice (ดัชนีจำนวนองค์ประกอบองค์ประกอบ)
  • สำหรับการลบองค์ประกอบ: array.splice (ดัชนีจำนวนองค์ประกอบ)
  • ใช้ได้กับอาร์เรย์เท่านั้น

แยก ()

  • แบ่งสตริงออกเป็นสตริงย่อย
  • ส่งคืนพวกมันในอาร์เรย์
  • ใช้ 2 พารามิเตอร์ทั้งสองเป็นทางเลือก: string.split (ตัวคั่นขีด จำกัด )
  • ไม่เปลี่ยนสตริงเดิม
  • ใช้ได้กับสตริงเท่านั้น

มีวิธีการในตัวอื่น ๆ อีกมากมายสำหรับอาร์เรย์และสตริง JavaScript ซึ่งช่วยให้ทำงานกับโปรแกรม JavaScript ได้ง่ายขึ้น จากนั้นคุณสามารถอ่านบทความใหม่ของฉันเกี่ยวกับวิธีการย่อยของ JavaScript

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บไซต์อย่าลังเลที่จะติดตามฉันบน Youtube !

ขอบคุณสำหรับการอ่าน!