learn wpu

jscheatsheet

แหล่งที่มาเพิ่มเติม: https://developer.mozilla.org/id/docs/web/javascript/a_re-introduction_to_javascript

ชนิดข้อมูล

• หมายเลข: (15 หลัก)

  1. ตัวเลขที่ไม่มีทศนิยม: 10, 123456, 3000
  2. ตัวเลขทศนิยม: 3.14, 0.5, 100.00
  3. เลขชี้กำลัง: 123E5 // 12300000, 123E-5 // 0.00123
  4. ตัวเลขติดลบ: -0.134, -2, -100.00
  5. หมายเลขแปด (ฐาน 8)
  6. เลขฐานสิบหก (ฐาน 16)
  7. หมายเลขพิเศษ: -infinity, Nan

• ผู้ดำเนินการ

  1. unary (ต้องใช้ 1 ตัวถูกดำเนินการ) หมายเลข typeof, สตริง, บูลีน
  2. ไบนารี (ต้องใช้ 2 ตัวถูกดำเนินการ) เลขคณิต: +, -, _, /, % (โมดูลัส) ผู้ดำเนินการก่อนหน้า: Kurung, Kali, Divide, Add, Less ข. การกำหนด: =, +=, -=, _ =, /=, %= c การเปรียบเทียบ (เปรียบเทียบ): == ,! - ==,>,> =, <, <= D. logic: &&, || ,! ก. สตริง: Cumatination +
  3. ternary (ต้องใช้ 3 ตัวถูกดำเนินการ) เงื่อนไข (เงื่อนไข)? ถูก: ผิด (x % 2 == 0)? "แม้แต่": "แปลก"

• อักขระหลบหนีสตริง

  • 0 = null
  • -
  • -
  • -
  • n = บรรทัดใหม่
  • t = แท็บ
  • b backspace
  • uxxxx = Unicode

ตัวแปร

• การประกาศ: ลงทะเบียนตัวแปรในขอบเขตที่เหมาะสม

• การเริ่มต้น: การจัดหาหน่วยความจำสำหรับตัวแปร

• การกำหนด: กำหนดค่าเฉพาะเป็นตัวแปร

  ข้อกำหนดตัวแปร:

  • ไม่มีช่องว่าง
  • อูฐ
  • ไม่ได้เริ่มต้นด้วยตัวเลข
  • อย่าใช้คำหลักและคำที่สงวนไว้
  • ขอบเขตตัวแปร: ท้องถิ่นและทั่วโลก

• var, let & const

Refactoring: กระบวนการเปลี่ยนรหัสให้ดีขึ้นโดยไม่ต้องเปลี่ยนฟังก์ชั่น

 Alasan:

-   Readability
-   DRY, dont repeat yourself
-   Testability
-   Performance
-   Maintainability

• ฟังก์ชั่นกล่องป๊อปอัป:

  • เตือน
  • แจ้ง
  • ยืนยัน

กระแสควบคุม

• การทำซ้ำ (วนซ้ำ)

  1. ในขณะที่. ในขณะที่ (เงื่อนไข) {action}; ข. ค่าเริ่มต้นของขณะที่ (เงื่อนไขการเลิกจ้าง) {การกระทำ; เพิ่มขึ้น/ลดลง; -

  2. สำหรับ (ค่าเริ่มต้น; เงื่อนไขการเลิกจ้าง; เพิ่มขึ้น/ ลดลง) {การกระทำ; -

  3. สำหรับของ (สตริง, อาร์เรย์, อาร์กิวเมนต์, typedArray, แผนที่, ชุด, iterables ที่ผู้ใช้กำหนด) ชื่อ const = 'Rama'; สำหรับ (const n ของชื่อ) {console.log (n); -

  4. สำหรับใน (enumerable / คุณสมบัติจากวัตถุ) const mhs = {ชื่อ: 'พระราม', อายุ: 29, อีเมล: '[email protected]',}; สำหรับ (m ใน mhs) {console.log (mhs [m]); -

  5. ทำในขณะที่

• การเลือก (การเลือก)

  1. ถ้าอื่นถ้า (เงื่อนไข) {การกระทำ 1; } else {การกระทำ 2; -
  2. ถ้าถ้า (เงื่อนไข 1) {การกระทำ 1; } อื่นถ้า (เงื่อนไข 2) {การกระทำ 2; } อื่นถ้า (เงื่อนไข n) {การกระทำ n; } else {การกระทำเริ่มต้น; -
  3. สวิตช์สวิตช์ (นิพจน์) {กรณี "ค่า 1": การกระทำ 1; [break;] กรณี "ค่า 2": การกระทำ 2; [break;] กรณี "value n": การกระทำ n; [break;] ค่าเริ่มต้น: การดำเนินการเริ่มต้น [break;]}

การทำงาน

• ฟังก์ชั่นในตัว

  1. เตือน ();
  2. ยืนยัน ();
  3. พรอมต์ ();
  4. แยก ();
  5. ชิ้น ();
  6. เป็นต้น

• ฟังก์ชั่นที่ผู้ใช้กำหนด nameFunction (พารามิเตอร์/อาร์กิวเมนต์ *เป็นตัวเลือก) {ฟังก์ชันร่างกาย; ค่าส่งคืน; *ตัวเลือก} console.log (namefunction (อาร์กิวเมนต์));

  1. การประกาศฟังก์ชั่น
  • ตัวระบุฟังก์ชั่น (parameterList opt) {function body}
  • ยืดหยุ่นมากขึ้น
  • เข้าใจง่ายตัวอย่างเริ่มต้น: จำนวนฟังก์ชั่นตัวเลข (a, b) {ตัวอักษรทั้งหมด; ทั้งหมด = a + b; ผลตอบแทนทั้งหมด; -
  2. การแสดงออกของฟังก์ชั่น
  • ต้องกำหนดก่อนที่จะถูกเรียก
  • มีประสิทธิภาพมากขึ้น (การปิด, อาร์กิวเมนต์สำหรับฟังก์ชั่นอื่น, iife) ตัวระบุการประกาศ = ฟังก์ชั่น (ParameterList Pest) {function body} ตัวอย่าง: ให้จำนวนตัวเลข = ฟังก์ชั่น (a, b) {ให้ผลรวม; ทั้งหมด = a + b; ผลตอบแทนทั้งหมด; -

ขอบเขต

• ขอบเขตทั่วโลก / หน้าต่างให้ A = 1; console.log (a);
• ฟังก์ชั่นการทดสอบฟังก์ชั่นฟังก์ชั่น () {ให้ b = 2; } ทดสอบ (); console.log (b);
• การทดสอบฟังก์ชันขอบเขตบล็อก () {ให้ c = 3; console.log (c); } ทดสอบ ();

การเรียกซ้ำ: ฟังก์ชั่นที่เรียกตัวเอง

การดำเนินการ:

• การเปลี่ยนห่วง
• ซีรีส์ Fibonacci
• การค้นหาและค้นหารายการข้อมูลรายการและตัวอย่างต้นไม้: ฟังก์ชั่นแฟกทอเรียล (n) {ถ้า (n === 0) ส่งคืน 1; ส่งคืน n * factorial (n -1); -

โครงสร้างข้อมูล

• อาร์เรย์: การรวบรวมองค์ประกอบ (ค่า / ตัวแปร) ซึ่งแต่ละองค์ประกอบมีดัชนี ฟังก์ชั่นอาร์เรย์:

  • อำนวยความสะดวกในการจัดการ / การจัดการข้อมูล / ข้อมูล
  • ตัวอย่างการจัดการหน่วยความจำ: ให้ hari = ["วันจันทร์", "วันอังคาร", "วันพุธ", 1];

• การจัดการอาร์เรย์

  • จำนวนองค์ประกอบ: ความยาว
  • การรวม: เข้าร่วม
  • เพิ่ม & ลบ: ในตอนท้าย: ผลัก, ป๊อปที่จุดเริ่มต้น: Unshift, Shift
  • เชื่อมต่อและตัด:
    1. Splice nameralarray.splice (indexawal, Maudihausu, ElementBaru1, Element2, ... );
    2. ชิ้นให้ arraybaru = namerarray.slice (indexawal, end);
  • วนซ้ำ:
    1. ไม่อยู่ในรูปแบบของอาร์เรย์: foreach nameraray.foreach (ฟังก์ชั่น (พารามิเตอร์) {action;})
    2. ในรูปแบบของอาร์เรย์: แผนที่ nameraray.map (ฟังก์ชั่น (พารามิเตอร์) {action;})
  • เรียงลำดับอาร์เรย์: เรียงลำดับ namerarray.sort ();
  • กำลังมองหาองค์ประกอบอาร์เรย์:
    1. ค่าเดียว: ค้นหา starraybaru = namerarray.find (ฟังก์ชั่น (พารามิเตอร์) {return;})
    2. มีค่ามากมาย: ตัวกรองให้ arraybaru = namerarray.filter (ฟังก์ชั่น (พารามิเตอร์) {return;})

• วัตถุ: การรวบรวมองค์ประกอบ (ค่า/ ตัวแปร) ซึ่งแต่ละองค์ประกอบมีคุณสมบัติ

  • วัตถุที่แท้จริง: ไม่มีประสิทธิภาพสำหรับวัตถุจำนวนมาก ปล่อยให้ nameBject = {คุณสมบัติ 1: ค่า 1, คุณสมบัติ 2: value2, วิธีการ 1: function1
    -
  • ฟังก์ชั่นการประกาศวัตถุฟังก์ชั่น nameBject (param1, param2) {declaration object = {}; Object.prperty1 = param1; Object.prperty2 = param2; วัตถุกลับ; } วัตถุประกาศใหม่ = nameBject (ค่า 1, value2);
  • ฟังก์ชั่นคอนสตรัคเตอร์ Object Function nameBject (param1, param2) {this.prperty1 = param1; นี้. programrty2 = param2; } วัตถุประกาศใหม่ = nameBject ใหม่ (ค่า 1, value2); นี่คือวัตถุขอบเขตระดับโลก
  • Object.create () function nameBject (param1, param2) {การประกาศของ Object = Object.create {}; Object.prperty1 = param1; Object.prperty2 = param2; วัตถุกลับ; } วัตถุประกาศใหม่ = nameBject (ค่า 1, value2);
  • ฟังก์ชั่นการสืบทอดต้นแบบ NameBject (param1, param2) {this.prperty1 = param1; นี้. programrty2 = param2; } nameObject.pototype.method1 = function1; nameObject.pototype.method2 = function2; nameObject.pototype.method3 = function3;
  • ต้นแบบในคลาสคลาสคลาส Namaklas {constructor (param1, param2) {this.property1 = param1; นี้. programrty2 = param2; } วิธีการที่ 1; วิธีการ 2; วิธีการ 3; -

บริบท

1. เฟสการสร้างในขอบเขตส่วนกลางชื่อ var name = function name ที่ไม่ได้กำหนด = fn () ซึ่งเป็นฟังก์ชั่นของมันเอง
   • Hoisting Window = Global Object this = window
2. ฟังก์ชันการดำเนินการเฟสทำให้บริบทการดำเนินการในท้องถิ่น

การปิด

• เป็นการรวมกันของฟังก์ชั่นและขอบเขตคำศัพท์ในฟังก์ชั่น
• ฟังก์ชั่นเมื่อสามารถเข้าถึงขอบเขตหลักได้แม้ว่าขอบเขตหลักจะเสร็จสมบูรณ์ ตัวอย่าง: function namefunction (param1) {return namalocalfunction (param2) {function body}} การประกาศ nameVariable = namafunction (อาร์กิวเมนต์ 1); namevariable (อาร์กิวเมนต์ 2);

ฟังก์ชันลูกศร

• รูปแบบอื่นที่กระชับมากกว่าการแสดงออกของฟังก์ชั่น ตัวอย่าง: ประกาศตัวระบุ = (parameterList opt) => {function body} ตัวอย่าง: ให้จำนวนของตัวเลข = (param1, param2) => {function body}; // ผลตอบแทนโดยนัย
• สิ่งนี้ในฟังก์ชั่นฟังก์ชั่นลูกศรไม่สามารถนำไปใช้กับสิ่งนี้ได้ ตัวอย่าง: ประกาศ nameBject = function (param1) {this.prperty1 = string; this.property2 = () => {function body}; } ประกาศ nameVariable = nameBject ();

ฟังก์ชั่นการสั่งซื้อที่สูงขึ้น

ฟังก์ชั่นที่ทำงานในฟังก์ชั่นอื่น ๆ (ในค่าอาร์กิวเมนต์ / ส่งคืน) JavaScript ปฏิบัติต่อฟังก์ชั่นเป็นวัตถุ ทำไม: Abstraction ซึ่งจะทำให้โปรแกรมง่ายขึ้นเพราะยิ่งโปรแกรมมากขึ้นความซับซ้อนที่สูงขึ้นยิ่งทำให้โปรแกรมเมอร์สับสนมากขึ้น

• array.pototype.map ()
• array.pototype.filter ()
• array.pototype.reduce ()

เทมเพลตตัวอักษร

เป็นสตริงตัวอักษรที่อนุญาตให้นิพจน์อยู่ในนั้น สามารถใช้งานได้: ''; - และ -

ด้วย backtick ( ) สามารถทำ:

• SingLeline String: string text
• สตริง multiline: string text 1 string text 2 string text 3
• Embedded Expression: string text ${expression} string text
• ชิ้นส่วน HTML
• การแก้ไขการแสดงออก
• เทมเพลตที่ติดแท็ก:
  • การหลบหนี / ฆ่าเชื้อแท็ก HTML
  • การแปลและความเป็นสากล (I18N)
  • ส่วนประกอบสไตล์

การทำลายโครงสร้างที่ได้รับมอบหมาย

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

• Array const try = ['one', 'สอง', 'สาม']; const [a, b, c] = ลอง;
• Object const mhs = {ชื่อ: 'ramadyan', อายุ: 25, อีเมล: '[email protected]',}; const {ชื่อ, อายุ, อีเมล} = MHS;
• การทำงาน
  • ในค่าผลตอบแทน
  • ในข้อโต้แย้ง

สเปรดโอเปอเรเตอร์

ผู้ประกอบการที่แบ่งออกเป็นองค์ประกอบเดียว

พารามิเตอร์ที่เหลือ

แสดงถึงอาร์กิวเมนต์ในฟังก์ชั่นที่มี Jumalh ไม่ จำกัด ในอาร์เรย์

ซิงโครนัสกับอะซิงโครนัส

• งานการดำเนินการกับสภาพแวดล้อมแบบมัลติเธรดเดี่ยวกับมัลติเธรด
• การปิดกั้นเทคนิค NGODING ที่ไม่ปิดกั้น (เกี่ยวข้องกับอินพุตเอาต์พุต)
• Synchronous vs assynchronous ngoding Engineering (HTTP Request ที่เกี่ยวข้อง)
• งานการดำเนินการตามสภาพแวดล้อมแบบขนานกับงาน (Infra, ฮาร์ดแวร์และการจำลองเสมือนที่เกี่ยวข้อง)

การโทรกลับ

ฟังก์ชั่นที่ส่งเป็นพารามิเตอร์ในฟังก์ชั่นอื่น

ตัวอย่าง: ฟังก์ชั่น nameFunction (namacallback) {การประกาศชื่อ valis = value; การโทรกลับ (ชื่อ); } nameFunction ((namevar) => {console.log (การดำเนินการ);});

สัญญา

วัตถุที่แสดงถึงความสำเร็จ / ความล้มเหลวของเหตุการณ์ async ในอนาคต สัญญา (ปฏิบัติตาม / ปฏิเสธ / รอดำเนินการ) การใช้ callback => action (resolve => จากนั้น / ปฏิเสธ => catch / erged => ในที่สุด)

ตัวอย่าง: การประกาศชื่อ var1 = ค่า; const namevar2 = สัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {ถ้า (namevar1) {redent (ค่า);} else {ปฏิเสธ (ค่า);}}); NamesVar2. นั่นคือ ((ตอบกลับ) => console.log (การดำเนินการ)) .catch ((ตอบกลับ) => console.log (การดำเนินการ));

Ajax & Fetch

Fetch เป็นวิธีการของ API JS ในการใช้ทรัพยากรจากเครือข่ายและส่งคืนสัญญาที่สมบูรณ์ (เต็มเติม) เมื่อมีการตอบสนองที่มีอยู่ สัญกรณ์: Fetch (ทรัพยากร, init);

• ทรัพยากร: วัตถุ URL / คำขอ (การเป็นตัวแทนของคำขอแหล่งที่มา)
• init: การกำหนดค่าเพิ่มเติมในคำขอวัตถุ (ตัวอย่าง: รับ, โพสต์, วิธี, ส่วนหัว, แคช, ฯลฯ )
• การตอบสนอง: ผลลัพธ์ของ Dr. Fetch ในรูปแบบของสัญญา (ทรัพย์สินและวิธีการ)

async & รอ

• ฟังก์ชั่นที่ใช้งานได้แบบอะซิงโครนัส (ผ่าน Event Loop)
• ซึ่งสร้าง (โดยนัย) สัญญาว่าเป็นค่าส่งคืน
• แต่วิธีการเขียนรหัสโดยใช้การเขียนแบบซิงโครนัส (มาตรฐาน)

ฟังก์ชั่น Async สามารถมีคำหลักรอคอยเพื่อหยุดการดำเนินการของฟังก์ชั่นชั่วคราวในขณะที่รอสัญญาที่จะเสร็จสิ้น (แก้ไข)

DOM (โมเดลวัตถุเอกสาร): การเป็นตัวแทนขององค์ประกอบ HTML ในเอกสารกลายเป็นวัตถุ เก็บไว้ในต้นไม้ DOM

ผลประโยชน์ของ DOM:

• เป็นอินเทอร์เฟซการเขียนโปรแกรมตามวัตถุที่แสดงถึงเอกสารเว็บ

• DOM ทำให้ส่วนประกอบทั้งหมดของหน้าเว็บสามารถเข้าถึงได้และจัดการ

• ส่วนประกอบ: องค์ประกอบ HTML, แอตทริบิวต์ข้อความ ฯลฯ

• ต้นไม้ DOM

  1. Nodelist: คอลเลกชันที่มีโหนดใด ๆ
  2. HTMLCOLLECTION: คอลเลกชันที่มีองค์ประกอบ HTML และมีชีวิตอยู่

• ลำดับชั้น:

  • รูทโหนด (เอกสาร): โหนดที่เป็นแหล่งที่มาของโหนดอื่น ๆ ทั้งหมดใน DOM
  • โหนดพาเรนต์: โหนดที่เป็นระดับหนึ่งเหนือโหนดอื่น ตัวอย่าง: Body is Parent Dr. H1, P, Div & A.
  • โหนดเด็ก: โหนดที่อยู่ใต้โหนดอื่นระดับหนึ่ง ตัวอย่าง: H1 เป็นเด็ก Dr. Body

• ประเภทโหนดประเภท/ โหนด:

  1. องค์ประกอบ
  2. คุณลักษณะ
  3. ข้อความ
  4. ส่วน CDATA
  5. การอ้างอิงเอนทิตี
  6. กิจการ
  7. คำแนะนำการประมวลผล
  8. การแสดงความคิดเห็น
  9. เอกสาร
  10. ประเภทเอกสาร
  11. ส่วนเอกสาร
  12. สัญลักษณ์

• การเลือก DOM

  • ชอบใช้องค์ประกอบใน HTML:
    1. GetlementById () = สร้างองค์ประกอบ
    2. getElementsByTagname () = ผลิต htmlcollection
    3. getElementsByClassName () = ผลิต htmlcollection
  • ชอบใส่ตัวเลือกบน CSS:
    1. QuerySector () = สร้างองค์ประกอบ
    2. QuerySexectorAll () = ผลิต nodelists

• การจัดการ DOM

  • การจัดการองค์ประกอบ
    1. element.innerhtml = เปลี่ยนเนื้อหาขององค์ประกอบที่เลือก
    2. Element.style = การเปลี่ยนรูปแบบขององค์ประกอบที่เลือก
    3. element.getAttribute () = รู้เนื้อหาของแอตทริบิวต์
    4. Element.setttribute () = เพิ่มแอตทริบิวต์
    5. Element.RemoveAttribute () = ลบแอตทริบิวต์
    6. Element.ClassList:
       • เพิ่ม () = การเพิ่มคลาส
       • ลบ () = ลบคลาส
       • toggle () = การเพิ่มคลาสถ้าไม่มีให้ลบหากมี
       • item () = ตรวจสอบคลาสด้วยดัชนี
       • มี () = ตรวจสอบคลาสที่เป็นปัญหา
       • แทนที่ () = การเปลี่ยนคลาส
  • การจัดการโหนด
    1. document.createElement ()
    2. document.createTextNode ()
    3. node.ppendchild ()
    4. Node.insertbefore ()
    5. ParentNode.removeChild ()
    6. ParentNode.replacechild ()

• เหตุการณ์ DOM

  • Event Handler = สามารถเรียกใช้คำสั่งสุดท้ายเท่านั้น
    1. คุณลักษณะ HTML แบบอินไลน์
    2. วิธีการองค์ประกอบบน
  • addVentListener () = สามารถทำงานได้หลายครั้ง

• Dom Traversal

  • parentNode = โหนดผลลัพธ์
  • ParentElement = ผลลัพธ์ขององค์ประกอบ
  • NextSibling = โหนดผลลัพธ์
  • NextElementsIbling = ผลลัพธ์ขององค์ประกอบ
  • adcefibling = ผลลัพธ์โหนด
  • PreviousElementsIbling = ผลลัพธ์ขององค์ประกอบ

• การป้องกันเริ่มต้น

  • เพื่อป้องกันการดำเนินการเริ่มต้นใช้วิธี: Event.preventDefault ();

• เหตุการณ์เดือด

  • เมื่อเหตุการณ์ทำงานมันจะเรียกใช้กิจกรรมใน Parent ก่อนที่จะไปหาลูก ใช้ Event.stopPropagate ();