JavaScript Objects, Square Brackets และ Algorithms

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

คำนำวัตถุ

เริ่มต้นด้วยการสร้างวัตถุง่ายๆที่แสดงถึงรถยนต์ propertiesวัตถุแต่ละคนมีสิ่งที่เรียกว่า คุณสมบัติคือตัวแปรที่เป็นของวัตถุ วัตถุที่รถของเราจะมีสามคุณสมบัติ: make, และmodelcolor

มาดูกันว่าจะเป็นอย่างไร:

const car = { make: 'Ford', model: 'Fiesta', color: 'Red'};

เราสามารถอ้างถึงคุณสมบัติแต่ละอย่างของวัตถุโดยใช้สัญกรณ์จุด ตัวอย่างเช่นหากเราต้องการทราบว่ารถของเรามีสีอะไรเราสามารถใช้สัญกรณ์จุดแบบนี้car.colorได้

เราสามารถส่งออกโดยใช้console.log:

console.log(car.color); //outputs: Red

อีกวิธีในการอ้างถึงคุณสมบัติคือการใช้เครื่องหมายวงเล็บเหลี่ยม:

console.log(car['color']); //outputs: Red

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

นั่นคือแทนที่จะเป็นการเข้ารหัสชื่อคุณสมบัติเฉพาะเราสามารถระบุเป็นสตริงในตัวแปร:

const propertyName = 'color';const console.log(car[propertyName]); //outputs: Red

ใช้การค้นหาแบบไดนามิกด้วยสัญกรณ์วงเล็บเหลี่ยม

ลองดูตัวอย่างที่เราสามารถใช้สิ่งนี้ได้ สมมติว่าเราเปิดร้านอาหารและอยากได้ราคาของรายการในเมนูของเรา วิธีหนึ่งที่ทำได้คือการใช้if/elseงบ

มาเขียนฟังก์ชั่นที่จะยอมรับชื่อไอเท็มและส่งคืนราคา:

function getPrice(itemName){ if(itemName === 'burger') { return 10; } else if(itemName === 'fries') { return 3; } else if(itemName === 'coleslaw') { return 4; } else if(itemName === 'coke') { return 2; } else if(itemName === 'beer') { return 5; }}

แม้ว่าแนวทางข้างต้นจะใช้ได้ผล แต่ก็ไม่เหมาะ เราได้เข้ารหัสเมนูไว้ในโค้ดของเรา ตอนนี้ถ้าเมนูของเราเปลี่ยนไปเราจะต้องเขียนโค้ดของเราใหม่และปรับใช้ใหม่ นอกจากนี้เราอาจมีเมนูยาว ๆ และการต้องเขียนโค้ดทั้งหมดนี้จะยุ่งยาก

แนวทางที่ดีกว่าคือการแยกข้อมูลและตรรกะของเราออกจากกัน ข้อมูลจะมีเมนูของเราและตรรกะจะค้นหาราคาจากเมนูนั้น

เราสามารถแทนค่าmenuเป็นวัตถุโดยที่ชื่อคุณสมบัติหรือที่เรียกว่าคีย์สอดคล้องกับค่า

ในกรณีนี้คีย์จะเป็นชื่อสินค้าและมูลค่าจะเป็นราคาสินค้า:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};

การใช้สัญกรณ์วงเล็บเหลี่ยมเราสามารถสร้างฟังก์ชันซึ่งจะรับสองอาร์กิวเมนต์:

  • วัตถุเมนู
  • สตริงที่มีชื่อรายการ

และคืนราคาของสินค้านั้น:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};
function getPrice(itemName, menu){ const itemPrice = menu[itemName]; return itemPrice;}
const priceOfBurger = getPrice('burger', menu);console.log(priceOfBurger); // outputs: 10

สิ่งที่เรียบร้อยเกี่ยวกับแนวทางนี้คือเราได้แยกข้อมูลของเราออกจากตรรกะของเรา ในตัวอย่างนี้ข้อมูลจะอยู่ในโค้ดของเรา แต่อาจมาจากฐานข้อมูลหรือ API ได้อย่างง่ายดาย มันไม่ได้อยู่คู่กับตรรกะการค้นหาของเราอีกต่อไปซึ่งจะแปลงชื่อสินค้าเป็นราคาสินค้า

โครงสร้างข้อมูลและอัลกอริทึม

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

ลองดูตัวอย่างเหตุผลที่เราอาจต้องการใช้แผนที่ สมมติว่าเราเปิดร้านหนังสือและมีรายชื่อหนังสือ หนังสือแต่ละเล่มมีตัวระบุเฉพาะที่เรียกว่า International Standard Book Number (ISBN) ซึ่งเป็นตัวเลข 13 หลัก เราจัดเก็บหนังสือของเราไว้ในอาร์เรย์และต้องการให้สามารถค้นหาโดยใช้ ISBN

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

const books = [{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita'}, { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts'}, { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript'}];
function getBookByIsbn(isbn, books){ for(let i = 0; i < books.length; i++){ if(books[i].isbn === isbn) { return books[i]; } }}
const myBook = getBookByIsbn('978-1593275846', books);

ซึ่งใช้ได้ดีในตัวอย่างนี้เนื่องจากเรามีหนังสือเพียงสามเล่ม (เป็นร้านหนังสือเล็ก ๆ ) อย่างไรก็ตามหากเราเป็น Amazon การทำซ้ำหนังสือหลายล้านเล่มอาจช้ามากและมีราคาแพงในการคำนวณ

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

มาดูกันว่าเราจะทำให้อัลกอริทึมของเรามีประสิทธิภาพมากขึ้นได้อย่างไรโดยใช้โครงสร้างข้อมูลอื่น

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

คีย์จะเป็น ISBN และค่าจะเป็นวัตถุในหนังสือที่เกี่ยวข้อง:

const books = { '978-0099540946':{ isbn: '978-0099540946', author: 'Mikhail Bulgakov', title: 'Master and Margarita' }, '978-0596517748': { isbn: '978-0596517748', author: 'Douglas Crockford', title: 'JavaScript: The Good Parts' }, '978-1593275846': { isbn: '978-1593275846', author: 'Marijn Haverbeke', title: 'Eloquent JavaScript' }};
function getBookByIsbn(isbn, books){ return books[isbn];}
const myBook = getBookByIsbn('978-1593275846', books);

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

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

สรุป

  • We have seen we can access the values of object properties using dot notation and square bracket notation
  • We learned how we can dynamically look up values of property by using variables with square bracket notation
  • We have also learned that a map datastructure maps keys to values. We can use keys to directly look up values in a map which we implement using an object.
  • We had a first glance at how algorithm performance is described using Big O notation. In addition, we saw how we can improve the performance of a search by converting an array of objects into a map and using direct lookup rather than iteration.

Want to test your new found skills? Try the Crash Override exercise on Codewars.

Want to learn how to write web applications using JavaScript? I run Constructor Labs, a 12 week JavaScript coding bootcamp in London. The technologies taught include HMTL, CSS, JavaScript, React, Redux, Node and Postgres. Everything you need to create an entire web app from scratch and get your first job in the industry. Fees are £3,000 and next cohort starts on 29th May. Applications are open now.