ในบทความนี้เราจะแบ่งปันเคล็ดลับ 12 ข้อเกี่ยวกับ JavaScript เคล็ดลับเหล่านี้อาจช่วยให้คุณแก้ปัญหาบางอย่างในงานจริงของคุณ
ใช้ !! ตัวดำเนินการเพื่อแปลงค่าบูลีน
บางครั้งเราจำเป็นต้องตรวจสอบว่ามีตัวแปรอยู่หรือตรวจสอบว่าค่ามีค่าที่ถูกต้องหรือไม่และถ้ามีอยู่ก็จะส่งคืนจริง เพื่อที่จะทำการตรวจสอบดังกล่าวเราสามารถใช้ !! ผู้ประกอบการที่จะใช้งานมันสะดวกและเรียบง่ายมาก สำหรับตัวแปรคุณสามารถใช้ !! ตัวแปรสำหรับการตรวจจับ ตราบใดที่ค่าของตัวแปรคือ: 0, null, "", undefined หรือ nan มันจะกลับมาเป็นเท็จมิฉะนั้นมันจะกลับมาจริง ตัวอย่างเช่นตัวอย่างต่อไปนี้:
บัญชีฟังก์ชั่น (เงินสด) {this.cash = เงินสด; this.hasmoney = !! เงินสด; } บัญชี var = บัญชีใหม่ (100.50); console.log (account.cash); // 100.50 console.log (account.hasmoney); // true var emportaccount = บัญชีใหม่ (0); console.log (emportaccount.cash); // 0 console.log (emportaccount.hasmoney); // เท็จในตัวอย่างนี้ตราบใดที่ค่าของบัญชีแคชมากกว่า 0 ค่าที่ส่งคืนโดยบัญชี hasmoney เป็นจริง
ใช้ + เพื่อแปลงสตริงเป็นตัวเลข
เคล็ดลับนี้มีประโยชน์มาก มันง่ายมากและสามารถแปลงเป็นตัวเลขได้โดยการตัดข้อมูลสตริง อย่างไรก็ตามมันเหมาะสำหรับข้อมูลสตริงมิฉะนั้นจะส่งคืน NAN เช่นตัวอย่างต่อไปนี้:
ฟังก์ชั่น tonumber (strnumber) {return +strnumber; } console.log (tonumber ("1234")); // 1234 console.log (tonumber ("ACB")); // น่านนอกจากนี้ยังใช้ได้สำหรับวันที่ในกรณีนี้มันจะส่งคืนหมายเลขการประทับเวลา:
คัดลอกรหัสดังนี้: console.log (+วันที่ใหม่ ()) // 1461288164385 และสัญลักษณ์เงื่อนไข
หากคุณมีรหัสเช่นนี้:
if (Conected) {login (); -นอกจากนี้คุณยังสามารถย่อตัวแปรและใช้ && และเชื่อมต่อพวกเขาเข้าด้วยกัน ตัวอย่างเช่นตัวอย่างข้างต้นสามารถย่อได้ดังนี้:
การคัดลอกรหัสมีดังนี้: Conected && login ();
หากคุณสมบัติหรือฟังก์ชั่นบางอย่างมีอยู่ในวัตถุคุณสามารถทำการตรวจจับได้ดังที่แสดงในรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้: ผู้ใช้ && user.login ();
ใช้ || ผู้ดำเนินการ
มีคุณสมบัติพารามิเตอร์เริ่มต้นใน ES6 เพื่อจำลองคุณสมบัตินี้ในเบราว์เซอร์เก่า || ตัวดำเนินการสามารถใช้งานได้และค่าเริ่มต้นจะถูกส่งผ่านเป็นพารามิเตอร์ที่สอง หากค่าที่ส่งคืนโดยพารามิเตอร์แรกเป็นเท็จค่าที่สองจะถูกพิจารณาว่าเป็นค่าเริ่มต้น ดังในตัวอย่างต่อไปนี้:
ฟังก์ชั่นผู้ใช้ (ชื่ออายุ) {this.name = name || "Oliver Queen"; this.age = อายุ || 27; } var user1 = ผู้ใช้ใหม่ (); console.log (user1.name); // Oliver Queen Console.log (user1.age); // 27 var user2 = ผู้ใช้ใหม่ ("Barry Allen", 25); console.log (user2.name); // Barry Allen Console.log (user2.age); // 25แคชอาร์เรย์ความยาวในลูป
เคล็ดลับนี้ง่ายมากและสิ่งนี้จะส่งผลกระทบอย่างมากต่อประสิทธิภาพการทำงานเมื่อต้องรับมือกับวงอาร์เรย์ขนาดใหญ่ โดยพื้นฐานแล้วทุกคนจะเขียนอาร์เรย์ของการทำซ้ำแบบซิงโครนัสเช่นนี้:
สำหรับ (var i = 0; i <array.length; i ++) {console.log (array [i]); -หากเป็นอาร์เรย์ขนาดเล็กนี่เป็นสิ่งที่ยอดเยี่ยมหากคุณจัดการกับอาร์เรย์ขนาดใหญ่รหัสนี้จะคำนวณขนาดอาร์เรย์ใหม่ในแต่ละการทำซ้ำซึ่งจะทำให้เกิดความล่าช้า เพื่อหลีกเลี่ยงปรากฏการณ์นี้ array.length สามารถใช้เป็นแคช:
ความยาว var = array.length; สำหรับ (var i = 0; i <length; i ++) {console.log (array [i]); -คุณสามารถเขียนได้เช่นนี้:
สำหรับ (var i = 0, length = array.length; i <length; i ++) {console.log (อาร์เรย์ [i]); -ตรวจจับคุณสมบัติในวัตถุ
เคล็ดลับนี้มีประโยชน์เมื่อคุณต้องการตรวจพบว่ามีคุณสมบัติบางอย่างและหลีกเลี่ยงการใช้งานฟังก์ชั่นหรือคุณสมบัติที่ไม่ได้กำหนด หากคุณวางแผนที่จะปรับแต่งรหัสเบราว์เซอร์ที่เข้ากันได้ข้ามกันคุณสามารถใช้เคล็ดลับนี้ได้ ตัวอย่างเช่นคุณต้องการใช้ document.querySelector () เพื่อเลือก ID และทำให้เข้ากันได้กับเบราว์เซอร์ IE6 แต่ฟังก์ชั่นนี้ไม่มีอยู่ในเบราว์เซอร์ IE6 ดังนั้นจึงมีประโยชน์มากในการใช้ตัวดำเนินการนี้เพื่อตรวจสอบว่าฟังก์ชั่นนี้มีอยู่หรือไม่เช่นตัวอย่างต่อไปนี้:
if ('querySelector' ในเอกสาร) {document.QuerySelector ("#id"); } else {document.getElementById ("id"); -ในตัวอย่างนี้หากฟังก์ชัน querySelector ไม่มีอยู่ในเอกสารแล้วเอกสารจะถูกเรียก
รับองค์ประกอบสุดท้ายในอาร์เรย์
array.prototype.slice (เริ่มต้นสิ้นสุด) ใช้เพื่อให้ได้องค์ประกอบอาร์เรย์ระหว่างการเริ่มต้นและสิ้นสุด หากคุณไม่ได้ตั้งค่าพารามิเตอร์สิ้นสุดค่าความยาวเริ่มต้นของอาร์เรย์จะถือเป็นค่าสุดท้าย แต่นักเรียนบางคนอาจไม่ทราบว่าฟังก์ชั่นนี้สามารถยอมรับค่าลบเป็นพารามิเตอร์ หากคุณตั้งค่าลบเป็นค่าของการเริ่มต้นคุณจะได้รับองค์ประกอบสุดท้ายของอาร์เรย์ ชอบ:
var array = [1,2,3,4,5,6]; console.log (array.slice (-1)); // [6] console.log (array.slice (-2)); // [5,6] console.log (array.slice (-3)); // [4,5,6]
การตัดทอนอาร์เรย์
เคล็ดลับนี้ส่วนใหญ่ใช้เพื่อล็อคขนาดของอาร์เรย์และมีประโยชน์มากหากใช้ในการลบองค์ประกอบบางอย่างในอาร์เรย์ ตัวอย่างเช่นอาร์เรย์ของคุณมี 10 องค์ประกอบ แต่คุณต้องการเพียงห้าองค์ประกอบแรกเท่านั้นจากนั้นคุณสามารถตัดทอนอาร์เรย์ได้โดย array.length = 5 ดังในตัวอย่างต่อไปนี้:
var array = [1,2,3,4,5,6]; console.log (array.length); // 6 array.length = 3; console.log (array.length); // 3 console.log (อาร์เรย์); // [1,2,3]
เปลี่ยนทั้งหมด
ฟังก์ชั่น String.replace () ช่วยให้คุณใช้สตริงหรือนิพจน์ทั่วไปเพื่อแทนที่สตริง ฟังก์ชั่นนี้เองแทนที่สตริงแรกเท่านั้น อย่างไรก็ตามคุณสามารถใช้ /g ในนิพจน์ทั่วไปเพื่อจำลองฟังก์ชันฟังก์ชัน replaceAll ():
var string = "John John"; console.log (string.replace (/hn/, "ana")); // "Joana John" console.log (string.replace (/hn/g, "ana")); // "Joana Joana"
ผสานอาร์เรย์
หากคุณต้องการผสานสองอาร์เรย์คุณมักจะใช้ฟังก์ชั่น array.concat ():
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.concat (array2)); // [1,2,3,4,5,6];
ฟังก์ชั่นนี้ไม่เหมาะสำหรับการรวมอาร์เรย์ขนาดใหญ่สองอันเพราะมันจะใช้หน่วยความจำจำนวนมากเพื่อเก็บอาร์เรย์ที่สร้างขึ้นใหม่ ในกรณีนี้คุณสามารถใช้ array.pus (). ใช้ (arr1, arr2) เพื่อสร้างอาร์เรย์ใหม่แทน วิธีนี้ไม่ได้ใช้เพื่อสร้างอาร์เรย์ใหม่มันรวมตัวเลขแรกและหมายเลขที่สองเข้าด้วยกันในขณะที่ลดการใช้หน่วยความจำ:
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.push.apply (array1, array2)); // [1,2,3,4,5,6];
แปลง Nodelist เป็นอาร์เรย์
หากคุณเรียกใช้ฟังก์ชั่น Document.QuerySelectorAll ("P") มันอาจส่งคืนอาร์เรย์ขององค์ประกอบ DOM นั่นคือวัตถุ Nodelist แต่วัตถุนี้ไม่มีฟังก์ชันฟังก์ชันของอาร์เรย์เช่น sort (), ลด (), map (), ตัวกรอง () ฯลฯ เพื่อให้ฟังก์ชั่นอาเรย์ดั้งเดิมเหล่านี้ใช้กับพวกเขารายการโหนดจะต้องถูกแปลงเป็นอาร์เรย์ คุณสามารถใช้ [] .slice.call (องค์ประกอบ) เพื่อนำไปใช้:
องค์ประกอบ var = document.QuerySelectorAll ("P"); // nodelist var arrayElements = [] .slice.call (องค์ประกอบ); // ตอนนี้ nodelist เป็นอาร์เรย์ var arrayelements = array.from (องค์ประกอบ); // นี่เป็นอีกวิธีหนึ่งในการแปลง Nodelist เป็นอาร์เรย์การหดตัวขององค์ประกอบอาร์เรย์
สำหรับองค์ประกอบการสลับของอาร์เรย์ไม่จำเป็นต้องใช้ห้องสมุดภายนอกใด ๆ เช่น Lodash เพียงทำสิ่งนี้:
var list = [1,2,3]; console.log (list.sort (function () {math.random () - 0.5})); // [2,1,3]สรุป
ตอนนี้คุณได้เรียนรู้เคล็ดลับ JavaScript ที่มีประโยชน์ ฉันหวังว่าเคล็ดลับเหล่านี้สามารถช่วยคุณแก้ปัญหาบางอย่างในที่ทำงานหรือบทความนี้จะเป็นประโยชน์กับคุณ หากคุณมีเคล็ดลับ JavaScript ที่ยอดเยี่ยมโปรดแบ่งปันกับเราในความคิดเห็น