JavaScript นั้นถือได้ว่าเป็นภาษาที่เรียบง่าย แต่เราได้ปรับปรุงอย่างต่อเนื่องด้วยภูมิปัญญาและรูปแบบที่ยืดหยุ่น เมื่อวานนี้เราใช้รูปแบบเหล่านี้กับเฟรมเวิร์ก JavaScript และวันนี้เฟรมเวิร์กเหล่านี้ผลักดันเว็บแอปพลิเคชันของเราอีกครั้ง นักพัฒนาสามเณรหลายคนได้รับการดึงดูดด้วยกรอบ JavaScript ที่ทรงพลัง แต่พวกเขาไม่สนใจทักษะ JavaScript ที่ใช้งานได้จริงซึ่งกว้างใหญ่และกว้างใหญ่เบื้องหลังกรอบ บทความนี้จะให้คำแนะนำที่ครอบคลุมเกี่ยวกับจุดความรู้
1. การทำงานของจำนวนเต็ม JS
ใช้ | 0 และ ~~ เพื่อแปลงจุดลอยตัวเป็นจำนวนเต็มและเร็วกว่า parseint และคณิตศาสตร์ที่คล้ายกันซึ่งจะมีประโยชน์เมื่อจัดการกับเอฟเฟกต์เช่นพิกเซลและการเคลื่อนที่ของภาพเคลื่อนไหว นี่คือการเปรียบเทียบประสิทธิภาพ
var foo = (12.4 / 4.13) | 0; // ผลลัพธ์คือ 3var bar = ~~ (12.4/4.13); // ผลลัพธ์คือ 3
เคล็ดลับเล็ก ๆ น้อย ๆ คือ! - 2 เครื่องหมายอัศเจรีย์คุณสามารถพูดคุยเกี่ยวกับคุณค่าและแปลงเป็นค่าบูลีนได้อย่างรวดเร็ว คุณสามารถทดสอบได้!
var eee = "eee"; แจ้งเตือน (!! eee)
ผลตอบแทนเป็นจริงซึ่งหมายความว่าค่าใด ๆ นำหน้าด้วยมัน! - ทั้งหมดสามารถเท่ากับความจริง เว้นแต่ว่าค่านี้จะเป็นค่าบูลีนหรือไม่ได้กำหนด, null, 0, false, nan, '', เพราะ undefined, null, 0, false, nan, '' กล่าวถึงสิ่งเหล่านี้เป็นเท็จ แต่เดิม - หลังจากนั้นมันก็ยังคงเป็น Fasle
2. เขียนการแจ้งเตือนดั้งเดิมและบันทึกจำนวนกล่องป๊อปอัพ
(function () {var oldalert = window.alert, count = 0; window.alert = function (a) {count ++; oldalert (a + "/n คุณเรียกว่าการแจ้งเตือน" + count + "ครั้งตอนนี้หยุดมันชั่วร้าย!");};}) () แจ้งเตือน ("สวัสดี Haorooms");3. วิธีการแลกเปลี่ยนดิจิตอลไม่ได้ประกาศตัวแปรระดับกลาง
เมื่อแลกเปลี่ยนตัวเลขสองตัววิธีการทั่วไปของเราคือการประกาศตัวแปรระดับกลาง แต่วิธีการของวันนี้ค่อนข้างแปลก คุณไม่จำเป็นต้องประกาศตัวแปรระดับกลางและดูว่ามันถูกนำไปใช้อย่างไร!
var a = 1, b = 2; a = [b, b = a] [0]; console.log ('a:'+a+', b:'+b); // เอาท์พุท a: 2, b: 1วิธีนี้วิธีนี้มีความรู้สึกใหม่หรือไม่?
4. ทุกอย่างเป็นวัตถุ
ในโลกของจาวาสคริปต์ทุกอย่างเป็นวัตถุ นอกเหนือจาก null และ undefined ตัวเลขพื้นฐานอื่น ๆ สตริงและ booleans ยังมีวัตถุห่อหุ้มที่สอดคล้องกัน คุณลักษณะหนึ่งของวัตถุคือคุณสามารถเรียกใช้วิธีการโดยตรง
สำหรับประเภทพื้นฐานตัวเลขมันจะล้มเหลวเมื่อพยายามเรียกวิธีการ toString บนมัน แต่มันจะไม่ล้มเหลวหลังจากถูกปิดล้อมในวงเล็บแล้วเรียก การใช้งานภายในคือการแปลงประเภทพื้นฐานเป็นวัตถุด้วยวัตถุ wrapper ที่สอดคล้องกัน ดังนั้น (1) .tostring () เทียบเท่ากับหมายเลขใหม่ (1) .tostring () ดังนั้นคุณสามารถใช้ประเภทพื้นฐานของตัวเลข, สตริง, บูลีน ฯลฯ เป็นวัตถุเพียงแค่ให้ความสนใจกับไวยากรณ์เพื่อความเหมาะสม
ในเวลาเดียวกันเราสังเกตเห็นว่าตัวเลขในจาวาสคริปต์ไม่ได้ถูกแบ่งออกเป็นจุดลอยตัวและการสร้าง ตัวเลขทั้งหมดเป็นประเภทจุดลอยตัวจริงเพียงแค่ละเว้นจุดทศนิยม ตัวอย่างเช่น 1 ที่คุณเห็นสามารถเขียนเป็น 1 นี่คือเหตุผลที่มีการรายงานข้อผิดพลาดเมื่อคุณพยายามที่ 1. toString () ดังนั้นวิธีที่ถูกต้องในการเขียนควรเป็นเช่นนี้: 1..ToString () หรือเพิ่มวงเล็บตามที่กล่าวไว้ข้างต้น จุดประสงค์ของวงเล็บที่นี่คือการแก้ไข JS Parser และไม่ถือว่าเป็นจุดหลังจาก 1 เป็นจุดทศนิยม การใช้งานภายในเป็นไปตามที่กล่าวไว้ข้างต้นแปลง 1. เป็นวัตถุที่มีวัตถุห่อหุ้มแล้วเรียกใช้วิธีการ
5. การเสียรูปของคำสั่ง IF
เมื่อคุณต้องการเขียนคำสั่ง IF ให้ลองใช้วิธีที่ง่ายกว่าอื่นโดยใช้ตัวดำเนินการแบบลอจิคัลใน JavaScript แทน
var day = (วันที่ใหม่) .getDay () === 0; // แบบดั้งเดิมถ้าคำสั่งถ้า (วัน) {แจ้งเตือน ('วันนี้คือวันอาทิตย์!');}; // ใช้ตรรกะและแทนที่ ifday && Alert ('วันนี้คือวันอาทิตย์!');ตัวอย่างเช่นรหัสด้านบนแรกจะได้รับวันที่วันนี้หากเป็นวันอาทิตย์หน้าต่างป๊อปอัพมิฉะนั้นจะไม่มีอะไรจะทำ เรารู้ว่ามีการลัดวงจรในการดำเนินงานเชิงตรรกะ สำหรับตรรกะและนิพจน์เฉพาะในกรณีที่ทั้งคู่เป็นจริงผลลัพธ์จะเป็นจริง หากตัวแปรวันก่อนหน้าถูกตัดสินว่าเป็นเท็จผลลัพธ์จะเป็นเท็จสำหรับการแสดงออกทั้งหมดดังนั้นการแจ้งเตือนที่ตามมาจะไม่ดำเนินการต่อ หากวันก่อนหน้าเป็นจริงรหัสที่ตามมาจะต้องดำเนินการต่อเพื่อเรียกใช้รหัสต่อไปนี้เพื่อกำหนดความถูกต้องของนิพจน์ทั้งหมด การใช้จุดนี้จะเกิดผลของ IF IF
สำหรับคำสั่งแบบดั้งเดิมหากมีการใช้คำสั่งเกิน 1 คำสั่งจำเป็นต้องใช้เครื่องมือจัดฟันแบบหยิกและการใช้การแสดงออกของเครื่องหมายจุลภาคสามารถดำเนินการรหัสใด ๆ ได้โดยไม่ต้องใช้วงเล็บปีกกา
ถ้า (conditoin) แจ้งเตือน (1), แจ้งเตือน (2), console.log (3);
6. ใช้ === ไม่ใช่ ==
ตัวดำเนินการ == (หรือ! =) จะทำการแปลงประเภทโดยอัตโนมัติเมื่อจำเป็น การดำเนินการ === (หรือ! ==) ไม่ได้ทำการแปลงใด ๆ มันจะเปรียบเทียบค่าและประเภทและถือว่าดีกว่า == ในแง่ของความเร็ว
[10] === 10 // เป็นเท็จ [10] == 10 // เป็น true'10 '== 10 // เป็น true'10' == 10 // เป็นเท็จ [] == 0 // เป็นจริง [] === 0 // เป็นเท็จ '' == เท็จ // เป็นจริง
7. ใช้การปิดเพื่อใช้ตัวแปรส่วนตัว
ฟังก์ชั่นบุคคล (ชื่ออายุ) {this.getName = function () {return name; - this.setName = function (newName) {name = newName; - this.getage = function () {return Age; - this.setage = function (newage) {age = newage; - // แอตทริบิวต์ที่ไม่ได้เริ่มต้นในอาชีพคอนสตรัคเตอร์ VAR; this.getOcCupation = function () {return อาชีพ; - this.setocCupation = ฟังก์ชั่น (newOcc) {อาชีพ = newOcc; -8. สร้างตัวสร้างวัตถุ
ฟังก์ชั่นบุคคล (ชื่อ firstName, LastName) {this.firstName = firstName; this.lastName = LastName;} var saad = บุคคลใหม่ ("saad", "mousliki");9. ระวังใช้ typeof, instanceof และ constructor
var arr = ["a", "b", "c"]; typeof arr; // return "Object" arr array array // truearr.constructor (); -
10. สร้างฟังก์ชั่นการโทรด้วยตนเอง
สิ่งนี้มักจะเรียกว่าฟังก์ชั่นที่ไม่ระบุชื่อที่ไม่ระบุตัวตนหรือนิพจน์ฟังก์ชั่นการโทรทันที นี่คือฟังก์ชั่นที่ดำเนินการโดยอัตโนมัติทันทีหลังจากการสร้างโดยปกติดังนี้:
(function () {// รหัสส่วนตัวบางตัวที่จะดำเนินการโดยอัตโนมัติ}) (); (ฟังก์ชั่น (a, b) {var result = a+b; ผลตอบแทน;}) (10,20)11. รับรายการสุ่มจากอาร์เรย์
รายการ var = [12, 548, 'a', 2, 5478, 'foo', 8852 ,, 'doe', 2145, 119]; var randomitem = รายการ [math.floor (math.random () * items.length)];
12. รับหมายเลขสุ่มภายในช่วงเฉพาะ
ตัวอย่างนี้มีประโยชน์มากเมื่อคุณต้องการสร้างข้อมูลการทดสอบเช่นค่าเงินเดือนแบบสุ่มระหว่างค่าต่ำสุดและค่าสูงสุด
var x = math.floor (math.random () * (สูงสุด - min + 1)) + min;
13. สร้างอาร์เรย์ของตัวเลขระหว่าง 0 ถึงค่าสูงสุดที่ตั้งไว้
var numberarray = [], สูงสุด = 100; สำหรับ (var i = 1; numberarray.push (i ++) <max;); // numbers = [0,1,2,3 ... 100]
14. สร้างสตริงตัวอักษรตัวเลขสุ่ม
ฟังก์ชั่น generaterandomalphanum (len) {var rdmstring = ""; สำหรับ (; rdmstring.length <len; rdmstring += math.random (). toString (36) .substr (2)); ส่งคืน rdmstring.substr (0, len);} // เรียกวิธีการ generaterandomalphanum (15);สิบห้า เบียดเสียดอาร์เรย์ของตัวเลข
หมายเลข var = [5, 458, 120, -215, 228, 400, 122205, -85411]; ตัวเลข = numbers.sort (ฟังก์ชัน () {return math.random () -0.5});/ * ตัวเลขอาร์เรย์จะเท่ากับตัวอย่าง [120, 5, 228, -21516. ฟังก์ชั่นการตัดแต่งของสตริง
string.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};17. ผนวก (ผนวก) อาร์เรย์ไปยังอาร์เรย์อื่น
var array1 = [12, "foo", {ชื่อ: "Joe"}, -2458]; var array2 = ["doe", 555, 100]; array.prototype.push.apply (array1, array2);/* array1 -18. แปลงอาร์กิวเมนต์วัตถุเป็นอาร์เรย์
var argarray = array.prototype.slice.call (อาร์กิวเมนต์); [หมายเหตุของนักแปล: วัตถุอาร์กิวเมนต์เป็นวัตถุอาร์เรย์ของคลาส แต่ไม่ใช่อาร์เรย์จริง]
19. ตรวจสอบว่าพารามิเตอร์เป็นตัวเลข (หมายเลข)
ฟังก์ชั่น isnumber (n) {return! isnan (parsefloat (n)) && isfinite (n);}20. ตรวจสอบว่าพารามิเตอร์เป็นอาร์เรย์หรือไม่
ฟังก์ชั่น isarray (obj) {return object.prototype.toString.call (obj) === '[อาร์เรย์วัตถุ]';}หมายเหตุ: หากวิธีการ ToString () ถูกแทนที่คุณจะไม่ได้รับผลลัพธ์ที่ต้องการโดยใช้เทคนิคนี้ หรือคุณสามารถใช้:
Array.isarray (OBJ); // นี่เป็นวิธีอาร์เรย์ใหม่
หากคุณไม่ได้ใช้หลายเฟรมคุณสามารถใช้วิธีการอินสแตนซ์ของ แต่ถ้าคุณมีหลายบริบทคุณจะได้ผลลัพธ์ที่ไม่ถูกต้อง
var myFrame = document.createElement ('iframe'); document.body.appendchild (myFrame); var myarray = window.frames [window.frames.length-1] .Array; var arr = myArray ใหม่ (a, b, 10); // [a, b, 10] // อินสแตนซ์ของ Will ไม่ทำงานอย่างถูกต้อง MyArray สูญเสียตัวสร้างของเขา // ตัวสร้างไม่ได้แชร์ระหว่างอินสแตนซ์ framesarr ของอาร์เรย์; // เท็จ[หมายเหตุของนักแปล: มีการอภิปรายมากมายเกี่ยวกับวิธีการตัดสินอาร์เรย์บนอินเทอร์เน็ตคุณสามารถ Google ได้ บทความนี้เขียนอย่างละเอียด -
21. รับค่าสูงสุดหรือต่ำสุดในอาร์เรย์ของตัวเลข
หมายเลข var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.apply (คณิตศาสตร์, ตัวเลข);
var mininnumbers = math.min.apply (คณิตศาสตร์, ตัวเลข);
[หมายเหตุของนักแปล: นี่คือทักษะสำหรับการผ่านพารามิเตอร์โดยใช้ฟังก์ชัน Prototype.apply Method]
22. ล้างอาร์เรย์
var myarray = [12, 222, 1000]; myarray.length = 0; // myArray จะเท่ากับ []
23. อย่าใช้ลบเพื่อลบรายการในอาร์เรย์
ใช้ Splice แทนการลบเพื่อลบรายการในอาร์เรย์ การใช้ DELETE เพียงแทนที่รายการต้นฉบับด้วยไม่ได้กำหนดไม่ได้ลบออกจากอาร์เรย์
อย่าใช้วิธีนี้:
รายการ var = [12, 548, 'a', 2, 5478, 'foo', 8852 ,, 'doe', 2154, 119]; items.length; // ส่งคืนรายการ 11 รายการ [3]; // ส่งคืน trueItems.length; // return 11/ * รายการจะเท่ากับ [12, 548, "a", × 1 ที่ไม่ได้กำหนด× 1, 5478, "foo", 8852, × 1 ที่ไม่ได้กำหนด "DOE", 2154, 119] *//
และใช้:
รายการ var = [12, 548, 'a', 2, 5478, 'foo', 8852 ,, 'doe', 2154, 119]; items.length; // return 11items.splice (3,1); items.length; // return 10/ * รายการจะเท่ากับ [12, 548, "A", 5478, "Foo", 8852, × 1 ที่ไม่ได้กำหนด "DOE", 2154, 119] *//
ควรใช้วิธีการลบเพื่อลบคุณสมบัติของวัตถุ
24. ใช้ความยาวเพื่อตัดทอนอาร์เรย์
คล้ายกับวิธีการล้างอาร์เรย์ด้านบนเราใช้แอตทริบิวต์ความยาวเพื่อตัดทอนอาร์เรย์
var myarray = [12, 222, 1,000, 124, 98, 10]; myarray.length = 4; // myArray จะเท่ากับ [12, 222, 1,000, 124]
นอกจากนี้หากคุณตั้งค่าความยาวของอาร์เรย์เป็นค่าที่ใหญ่กว่าค่าปัจจุบันความยาวของอาร์เรย์จะมีการเปลี่ยนแปลงและรายการที่ไม่ได้กำหนดใหม่จะถูกเพิ่มเพื่อเติมเต็ม ความยาวของอาร์เรย์ไม่ใช่คุณสมบัติแบบอ่านอย่างเดียว
myArray.length = 10; // ความยาวอาร์เรย์ใหม่คือ 10myarray [myarray.length - 1]; // ไม่ได้กำหนด
25. ใช้ตรรกะและ/หรือเพื่อทำการตัดสินตามเงื่อนไข
เหมือนกัน (ห้า) ถ้าคำสั่งการเสียรูป!
var foo = 10; foo == 10 && dosomething (); // เทียบเท่ากับ (foo == 10) dosomething (); foo == 5 || Dosomething (); // เทียบเท่ากับ (foo! = 5) dosomething ();
ตรรกะและยังสามารถใช้เพื่อตั้งค่าเริ่มต้นสำหรับพารามิเตอร์ฟังก์ชัน
ฟังก์ชั่น dosomething (arg1) {arg1 = arg1 || 10; // ถ้าไม่ได้ตั้งค่า Arg1 Arg1 จะถูกตั้งค่าเป็น 10 โดยค่าเริ่มต้น}26. ใช้ MAP () วิธีการสำรวจรายการในอาร์เรย์
var squares = [1,2,3,4] .map (ฟังก์ชั่น (val) {return val * val;}); // กำลังสองจะเท่ากับ [1, 4, 9, 16]27. รอบตัวเลขและรักษาตำแหน่งทศนิยม n
var num = 2.443242342; num = num.tofixed (4); // num จะเท่ากับ 2.4432
28. ปัญหาหมายเลขจุดลอยตัว
0.1 + 0.2 === 0.3 // เป็นเท็จ 9007199254740992 + 1 // เท่ากับ 90071992547409929007199254740992 + 2 // เท่ากับ 900719254740994
ทำไมสิ่งนี้ถึงเกิดขึ้น? 0.1+0.2 เท่ากับ 0.3000000000000000000004 คุณควรรู้ว่าหมายเลข JavaScript ทั้งหมดเป็นหมายเลขลอยภายในที่แสดงในไบนารี 64 บิตโดยปฏิบัติตามมาตรฐาน IEEE 754 สำหรับข้อมูลเพิ่มเติมคุณสามารถอ่านโพสต์บล็อกนี้ได้ คุณสามารถใช้วิธี tofixed () และ toprecision () เพื่อแก้ปัญหานี้
29. เมื่อใช้สำหรับการสำรวจคุณสมบัติภายในของวัตถุโปรดตรวจสอบคุณสมบัติ
ตัวอย่างโค้ดต่อไปนี้สามารถหลีกเลี่ยงการเข้าถึงคุณสมบัติของต้นแบบเมื่อข้ามคุณสมบัติวัตถุ
สำหรับ (ชื่อ var ในวัตถุ) {if (object.hasownproperty (ชื่อ)) {// ทำบางสิ่งที่มีชื่อ}}สามสิบผู้ให้บริการจุลภาค
var a = 0; var b = (a ++, 99); console.log (a); // a จะเท่ากับ 1console.log (b); // b เท่ากับ 99
31. ตัวแปรแคชที่ต้องคำนวณและสอบถาม (การคำนวณหรือการสืบค้น)
สำหรับตัวเลือก jQuery เราควรแคชองค์ประกอบ DOM เหล่านี้ดีกว่า
var navright = document.QuerySelector ('#ขวา'); var navleft = document.QuerySelector ('#ซ้าย'); var navup = document.QuerySelector ('#up');32. ตรวจสอบพารามิเตอร์ก่อนที่จะเรียก isfinite ()
isfinite (0/0); // talsefinite ("foo"); // talsefinite ("10"); // trueisfinite (10); // trueisfinite (undfined); // talsefinite (); // talleisfinite (null); // จริง !!!33. หลีกเลี่ยงดัชนีเชิงลบในอาร์เรย์
var numberarray = [1,2,3,4,5]; var จาก = numberarray.indexof ("foo"); // จากเท่ากับ -1numbersarray.splice (จาก, 2); // จะกลับมา [5]ตรวจสอบให้แน่ใจว่าพารามิเตอร์เมื่อเรียกใช้ดัชนีของไม่เป็นลบ
34. การทำให้เป็นอนุกรมและ deserialization ขึ้นอยู่กับ JSON
var person = {ชื่อ: 'saad', อายุ: 26, แผนก: {id: 15, ชื่อ: "r & d"}; json.parse (StringFromperson);/ * personfromstring เท่ากับวัตถุบุคคล *//35. หลีกเลี่ยงการใช้ eval () และตัวสร้างฟังก์ชัน
การใช้ตัวสร้างการประเมินและฟังก์ชั่นนั้นมีราคาแพงมากเพราะทุกครั้งที่พวกเขาเรียกใช้เอ็นจิ้นสคริปต์เพื่อแปลงซอร์สโค้ดให้เป็นรหัสปฏิบัติการ
var func1 = ฟังก์ชั่นใหม่ (functioncode); var func2 = eval (functioncode);
36. หลีกเลี่ยงการใช้กับ ()
การใช้กับ () จะแทรกตัวแปรทั่วโลก ดังนั้นตัวแปรที่มีชื่อเดียวกันจะถูกเขียนทับและทำให้เกิดปัญหาที่ไม่จำเป็น
37. หลีกเลี่ยงการใช้สำหรับการสำรวจอาร์เรย์
หลีกเลี่ยงการใช้วิธีนี้:
var sum = 0; สำหรับ (var i ใน arraynumbers) {sum += arraynumbers [i];}วิธีที่ดีกว่าคือ:
var sum = 0; สำหรับ (var i = 0, len = arraynumbers.length; i <len; i ++) {sum+= arraynumbers [i];}ประโยชน์เพิ่มเติมคือค่าของตัวแปร I และ LEN จะถูกดำเนินการเพียงครั้งเดียวซึ่งจะมีประสิทธิภาพมากกว่าวิธีการต่อไปนี้:
สำหรับ (var i = 0; i <arraynumbers.length; i ++)
ทำไม เนื่องจาก arraynumbers.length คำนวณทุกครั้งที่วนลูป
38. ผ่านฟังก์ชั่นแทนสตริงเมื่อเรียก settimeout () และ setInterval ()
หากคุณผ่านสตริงไปยัง settimeout () หรือ setInterval () สตริงจะถูกแยกวิเคราะห์ราวกับว่ามันถูกใช้กับ eval ซึ่งใช้เวลานานมาก
อย่าใช้:
setInterval ('dosomethingperiodically ()', 1000); settimeout ('dosomethingafterfiveSeconds ()', 5000)และใช้:
setInterval (dosomethingperiodically, 1,000); settimeout (dosomethingfterfterfiveSeconds, 5000);
39. ใช้คำสั่งสวิตช์/เคสแทนรายการ IF/อื่น ๆ
เมื่อตัดสินว่าสถานการณ์มากกว่า 2 การใช้สวิตช์/เคสนั้นมีประสิทธิภาพมากขึ้นและสง่างามมากขึ้น (ง่ายต่อการจัดระเบียบรหัส) แต่อย่าใช้สวิตช์/เคสเมื่อมีการตัดสินมากกว่า 10 ครั้ง
40. ใช้สวิตช์/เคสเมื่อตัดสินช่วงตัวเลข
ในสถานการณ์ต่อไปนี้มีเหตุผลที่จะใช้สวิตช์/เคสเพื่อกำหนดช่วงตัวเลข:
ฟังก์ชั่น getCategory (อายุ) {var category = ""; สวิตช์ (จริง) {case isnan (อายุ): หมวดหมู่ = "ไม่ใช่อายุ"; หยุดพัก; กรณี (อายุ> = 50): หมวดหมู่ = "เก่า"; หยุดพัก; กรณี (อายุ <= 20): category = "baby"; หยุดพัก; ค่าเริ่มต้น: หมวดหมู่ = "หนุ่ม"; หยุดพัก; - กลับหมวดหมู่;} getCategory (5); // จะกลับ "ที่รัก"[หมายเหตุของนักแปล: โดยทั่วไปการพูดถ้า/อื่น ๆ จะเหมาะสมกว่าที่จะตัดสินช่วงตัวเลข สวิตช์/เคสเหมาะสำหรับการตัดสินการกำหนดค่า]
41. ระบุวัตถุต้นแบบสำหรับวัตถุที่สร้างขึ้น
เป็นไปได้ที่จะเขียนฟังก์ชั่นเพื่อสร้างวัตถุที่ระบุพารามิเตอร์เป็นต้นแบบ:
ฟังก์ชั่นโคลน (วัตถุ) {ฟังก์ชั่น oneshotConstructor () {}; oneshotConstructor.prototype = วัตถุ; ส่งคืน oneshotConstructor ใหม่ ();} โคลน (อาร์เรย์) .prototype; -42. ฟังก์ชั่นการหลบหนี HTML
ฟังก์ชั่น Escapehtml (ข้อความ) {var replacements = {"<": "<", ">": ">", "&": "&", "/" ":" ""}; ส่งคืน text.replace (/[<> & "]/g, ฟังก์ชัน (อักขระ) {return replacements [character];});}43. หลีกเลี่ยงการใช้การจับในรอบแรกภายในวง
เมื่อรันไทม์ทุกครั้งที่มีการดำเนินการประโยคการจับวัตถุข้อยกเว้นที่ถูกจับจะถูกกำหนดให้กับตัวแปรและในโครงสร้างการทดสอบการจับรอบสุดท้ายตัวแปรนี้จะถูกสร้างขึ้นทุกครั้ง
หลีกเลี่ยงการเขียนด้วยวิธีนี้:
var object = ['foo', 'bar'], i; สำหรับ (i = 0, len = object.length; i <len; i ++) {ลอง {// ทำสิ่งที่โยนข้อยกเว้น} catch (e) {// จัดการข้อยกเว้น}}}}}}และใช้:
var object = ['foo', 'bar'], i; ลอง {สำหรับ (i = 0, len = object.length; i <len; i ++) {// ทำสิ่งที่โยนข้อยกเว้น}} catch (e) {// จัดการข้อยกเว้น}}44. ตั้งค่าการหมดเวลาสำหรับ XMLHTTPREQUESTS
หลังจากคำขอ XHR ใช้เวลานาน (ตัวอย่างเช่นเนื่องจากปัญหาเครือข่าย) คุณอาจต้องยกเลิกคำขอดังนั้นคุณสามารถใช้ settimeout () สำหรับการโทร XHR
var xhr = ใหม่ xmlhttprequest (); xhr.onreadystatechange = function () {ถ้า (this.readystate == 4) {cleartimeout (หมดเวลา); // ทำอะไรบางอย่างด้วยข้อมูลการตอบกลับ}} var timeout = settimeout (function () {xhr.abort (); // การเรียกเกิดข้อผิดพลาดการโทรกลับ}, 60*1000/*หมดเวลาหลังจากนาที*/); xhr.open ('get', url, true); xhr.send ();นอกจากนี้โดยทั่วไปคุณควรหลีกเลี่ยงคำขอ AJAX ที่ซิงโครไนซ์โดยสิ้นเชิง
สี่สิบห้า จัดการหมดเวลา WebSocket
โดยปกติหลังจากสร้างการเชื่อมต่อ WebSocket หากคุณไม่ได้ใช้งานเซิร์ฟเวอร์จะตัดการเชื่อมต่อ (หมดเวลา) การเชื่อมต่อของคุณหลังจาก 30 วินาที ไฟร์วอลล์จะถูกตัดการเชื่อมต่อหลังจากระยะเวลาไม่ว่าง
เพื่อป้องกันปัญหาการหมดเวลาคุณอาจต้องส่งข้อความที่ว่างเปล่าไปยังฝั่งเซิร์ฟเวอร์เป็นระยะ ๆ ในการทำเช่นนี้คุณสามารถเพิ่มฟังก์ชั่นสองฟังก์ชั่นต่อไปนี้ในรหัสของคุณ: หนึ่งเพื่อให้การเชื่อมต่อและอื่น ๆ เพื่อไม่ได้รับการเชื่อมต่อ ด้วยเคล็ดลับนี้คุณสามารถควบคุมปัญหาการหมดเวลา
ใช้ตัวจับเวลา:
var timerid = 0; ฟังก์ชั่น keepalive () {var timeout = 15000; if (webSocket.readyState == webSocket.Open) {webSocket.Send (''); } timerid = settimeout (keepalive, หมดเวลา);} ฟังก์ชัน cancelkeepalive () {ถ้า (timerid) {canceltimeout (timerid); -ควรเพิ่มวิธีการเก็บข้อมูล () ในตอนท้ายของวิธี ONOPEN () ของการเชื่อมต่อ WebSocket และ Cancelkeepalive () จะถูกเพิ่มในตอนท้ายของวิธี ONCLOSE ()
46. โปรดจำไว้ว่าตัวดำเนินการดั้งเดิมมีประสิทธิภาพมากกว่าการเรียกใช้ฟังก์ชั่นเสมอ ใช้วานิลลา
ตัวอย่างเช่นอย่าใช้:
var min = math.min (a, b); a.push (v);
และใช้:
var min = a <b? AB; A [A.Length] = V;
47. จากจำนวนเต็มสุ่มเลือกค่า
มีสูตรต่อไปนี้ซึ่งมีประโยชน์มากและช่วยให้เราสามารถแสดงคำพูดหรือเหตุการณ์ข่าวที่มีชื่อเสียงได้อย่างสุ่ม!
value = math.floor (math.random () *จำนวนทั้งหมดของค่าที่เป็นไปได้+ ค่าที่เป็นไปได้แรก)
ตัวอย่างเช่น: ในการเลือกค่าระหว่าง 2 ถึง 10 เราสามารถเขียนได้เช่นนี้
var num = math.floor (math.random ()*9+2)
โปรดจำสูตรข้างต้น! -
การใช้งานและฟังก์ชั่นของแถบแนวตั้งเดี่ยวของตัวดำเนินการ JS "|" และการประมวลผลข้อมูล JS
ตอนนี้เมื่อใช้งานจำนวนเต็ม JS มันจะเทียบเท่ากับการลบจุดทศนิยม, Parseint เมื่อจำนวนบวกเทียบเท่ากับ math.floor () และเมื่อจำนวนลบเทียบเท่ากับ math.ceil () หมายเหตุ: หมายเหตุ:
1. Math.Ceil () ถูกใช้เป็นการปัดเศษขึ้น 2. Math.Floor () ใช้เป็นปัดเศษลง 3. Math.Round () Round () ที่ใช้กันทั่วไปในคณิตศาสตร์ console.log (0.6 | 0) // 0console.log (1.1 | 0) // 1console.log (3.65555 | 0) // 3console.log (5.99999 | 0) // 5console.log (-7.777 | 0)
หมายเหตุ: นอกเหนือจากวิธีการคณิตศาสตร์สามวิธีในการประมวลผลหมายเลขเรามักจะใช้ ParseInt (), parsefloat (), tofixed () และ toprecision () ฯลฯ คำอธิบายสั้น ๆ :
การใช้วิธี tofixed มีดังนี้:
100.456001.tofixed (2); //100.47100.456001.tofixed(3); //100.456number.prototype.tofixed.call(100.456001,2); //100.47
ข้อเสีย: หลังการใช้งานมันจะกลายเป็นสตริง
การใช้งาน TOPRECASION มีดังนี้:
99.456001.Toprecision (5); //99.456100.456001.Toprecision(5); //100.46number.prototype.toprecision.call(10.456001,5); //10.456
กฎการดำเนินงานสำหรับแถบแนวตั้งเดี่ยว
หลังจากดูตัวอย่างข้างต้นเรามักจะรู้ว่าแถบแนวตั้งเดียวสามารถดำเนินการปัดเศษซึ่งหมายความว่ามีเพียงส่วนบวกเท่านั้นที่จะถูกเก็บไว้และส่วนทศนิยมจะถูกลบออก อย่างไรก็ตามคำนวณ "| 0" อย่างไร? ทำไม "| 0" บรรลุวัตถุประสงค์ของการปัดเศษ? แถบแนวตั้งเดี่ยวจะเป็นอย่างไรถ้าไม่ใช่ 0?
ด้วยคำถามเหล่านี้ในใจลองดูตัวอย่างต่อไปนี้:
console.log (3 | 4); //7console.log(4|4); //4console.log(8|3); //11console.log(5.3|4.1); //5console.log(9|3455); // 3455
ดูเหมือนว่าจะไม่มีรูปแบบให้หา? ค้นหาออนไลน์ http://tools.vevb.com/table/priority
สิ่งนี้กล่าวถึงแถบแนวตั้งเดียว "|" แต่ไม่มีจาวาสคริปต์
ตกลงฉันจะประกาศคำตอบที่นี่ อันที่จริงแถบแนวตั้งเดี่ยว "|" เป็นผลลัพธ์ที่ได้จากการแปลงเป็นระบบ 2 หลัก ตัวอย่างเช่นลองใช้ตัวอย่างง่ายๆ:
3 | 4 ถูกแปลงเป็นไบนารีและ 011 | 100 การเพิ่ม 111 = 74 | 4 ถูกแปลงเป็นไบนารีและ 100 | 100 การเพิ่ม 100 = 48 | 3 ถูกแปลงเป็นไบนารีและ 1,000 | 011 เพิ่ม 1011 = 11
และอื่น ๆ ฉันจะไม่แสดงรายการพวกเขาทีละคน แถบแนวตั้งเดี่ยว "|" การดำเนินการเป็นผลลัพธ์ที่ได้จากการแปลงเป็นระบบ 2 หลัก! คุณได้เรียนรู้ทั้งหมดหรือไม่?