บทนำใหม่เกี่ยวกับการทำลายโครงสร้างการมอบหมาย

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

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

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

1. การทำลายล้างแบบซ้อน

ความสามารถในการเข้าถึงคีย์ระดับบนสุดภายในออบเจ็กต์หรือองค์ประกอบแรกของอาร์เรย์นั้นมีประสิทธิภาพ แต่ก็ค่อนข้างจำกัดเช่นกัน มันขจัดความซับซ้อนเพียงระดับเดียวเท่านั้น และเรายังคงลงเอยด้วยชุดของจุดหรือ [0] การอ้างอิงเพื่อเข้าถึงสิ่งที่เราต้องการจริงๆ

ตามที่ปรากฏ การทำลายโครงสร้างสามารถทำงานเกินระดับบนสุด และอาจมีเหตุผลที่ถูกต้องในการทำเช่นนั้น นำตัวอย่างการตอบสนองของอ็อบเจ็กต์นี้จากคำขอ HTTP เราต้องการไปไกลกว่าวัตถุข้อมูลและเข้าถึงเฉพาะผู้ใช้ ตราบใดที่เรารู้กุญแจที่เราต้องการ ก็ไม่เป็นปัญหา

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

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

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

โปรดทราบว่าควรใช้คุณลักษณะเหล่านี้อย่างรอบคอบ เช่นเดียวกับเครื่องมืออื่นๆ รับรู้กรณีการใช้งานและผู้ชมของฐานรหัสของคุณ พิจารณาความง่ายในการอ่านและความสะดวกในการเปลี่ยนแปลง ตัวอย่างเช่น หากคุณต้องการเข้าถึงอาร์เรย์ย่อยเท่านั้น แผนที่อาจเหมาะสมกว่า

2. การทำลายวัตถุและอาร์เรย์

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

นำตัวอย่างของอาร์เรย์นี้ภายในวัตถุ

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

กรณีใช้ตรงข้ามก็ใช้ได้เช่นกัน อาร์เรย์ของวัตถุ

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

ตามที่ปรากฎ เรามีปัญหาเล็กน้อยในตัวอย่างนี้ เราสามารถเข้าถึงได้เฉพาะชื่อของผู้ใช้รายแรกเท่านั้น มิฉะนั้น เราจะพยายามใช้ 'ชื่อ' เพื่ออ้างอิงสองสตริงที่แตกต่างกัน ซึ่งไม่ถูกต้อง สถานการณ์การทำลายล้างครั้งต่อไปของเราควรแยกแยะออก

3. นามแฝง

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

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

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

4. ค่าเริ่มต้น

การทำลายล้างมักจะถือว่าค่าที่อ้างอิงอยู่ที่นั่น แต่ถ้าไม่มีล่ะ การทิ้งโค้ดด้วยค่าที่ไม่ได้กำหนดไว้ไม่ใช่เรื่องน่ายินดี นั่นคือเมื่อค่าเริ่มต้นมีประโยชน์

มาดูกันว่ามันทำงานอย่างไรกับวัตถุ

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

หากคีย์ที่อ้างอิงมีค่าอยู่แล้ว ค่าดีฟอลต์จะถูกละเว้น หากไม่มีคีย์ในอ็อบเจ็กต์ ค่าดีฟอลต์จะถูกใช้

เราสามารถทำสิ่งที่คล้ายกันสำหรับอาร์เรย์ได้

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

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

5. ละเลยค่านิยม

หนึ่งในส่วนที่ดีที่สุดของการทำลายโครงสร้างคือมันช่วยให้คุณเข้าถึงค่าที่เป็นส่วนหนึ่งของโครงสร้างข้อมูลขนาดใหญ่ได้ ซึ่งรวมถึงการแยกค่าเหล่านั้นและละเว้นเนื้อหาที่เหลือ หากคุณเลือก

เราเห็นตัวอย่างของสิ่งนี้ก่อนหน้านี้แล้ว แต่ให้แยกแนวคิดที่เรากำลังพูดถึง

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

ในตัวอย่างนี้ เราไม่เคยทำลายโครงสร้าง organization และนั่นก็ไม่เป็นไร ยังคงพร้อมใช้งานสำหรับการอ้างอิงภายในวัตถุ user เช่นนั้น

 user.organization

สำหรับอาร์เรย์ จริงๆ แล้วมีสองวิธีในการ "ละเว้น" องค์ประกอบ ในตัวอย่างอ็อบเจ็กต์ เรากำลังอ้างอิงค่าภายในโดยเฉพาะโดยใช้ชื่อคีย์ที่เกี่ยวข้อง เมื่ออาร์เรย์ถูกทำลาย ชื่อตัวแปรจะถูกกำหนดตามตำแหน่ง เริ่มต้นด้วยการละเว้นองค์ประกอบที่ส่วนท้ายของอาร์เรย์

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

เราทำลายโครงสร้างองค์ประกอบแรกและองค์ประกอบที่สองในอาร์เรย์ และส่วนที่เหลือไม่เกี่ยวข้อง แต่แล้วองค์ประกอบในภายหลังล่ะ? ถ้าอิงตามตำแหน่ง เราต้องทำลายแต่ละองค์ประกอบจนกว่าจะถึงส่วนที่เราต้องการใช่หรือไม่?

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

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

และเราสามารถทำได้ทั้งสองอย่างพร้อมกัน ข้ามองค์ประกอบทุกที่ที่เราต้องการโดยใช้ตัวแทนจุลภาค และอีกครั้ง เช่นเดียวกับตัวอย่างอ็อบเจ็กต์ อิลิเมนต์ "ละเว้น" ยังคงพร้อมใช้งานสำหรับการอ้างอิงภายในอาร์เรย์ roleCounts

ตัวอย่างวองกี้

พลังและความเก่งกาจของการทำลายโครงสร้างยังหมายความว่าคุณสามารถทำสิ่งที่แปลกประหลาดอย่างแท้จริง ไม่ว่าจะสะดวกหรือไม่ก็พูดยาก แต่ก็คุ้มค่าที่จะรู้ว่ามันเป็นทางเลือก!

ตัวอย่างหนึ่งคือ คุณสามารถใช้การทำลายโครงสร้างเพื่อทำสำเนาแบบตื้นได้

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

อีกสิ่งหนึ่งที่การทำลายโครงสร้างสามารถใช้สำหรับเป็น dereference

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

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

บทสรุป

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

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