สรุปประเด็นความรู้การเรียนรู้ JavaScript โดยย่อ

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: ป้อนและเรียนรู้

คำแนะนำที่เกี่ยวข้อง: บทช่วยสอน JavaScript

1, บทแนะนำ JavaScript อย่างง่าย

1.1. ภาษาสคริปต์ฝั่งไคลเอ็นต์

ที่ทำงานในเบราว์เซอร์ไคลเอ็นต์ เบราว์เซอร์ทุกตัวมีภาษาสคริปต์กลไกการแยกวิเคราะห์ JavaScript: ไม่จำเป็นต้องคอมไพล์ แต่เบราว์เซอร์สามารถแยกวิเคราะห์และดำเนินการได้โดยตรง โดยสามารถปรับปรุงกระบวนการโต้ตอบระหว่างผู้ใช้และหน้า HTML ควบคุมองค์ประกอบ HTML และทำให้หน้าเป็นแบบไดนามิก . ผลกระทบและปรับปรุงประสบการณ์ผู้ใช้

1.2 ประวัติความเป็นมาของการพัฒนา JavaScript

ในปี 1992 Nombase ได้พัฒนาภาษาสคริปต์ฝั่งไคลเอ็นต์ตัวแรกที่ใช้สำหรับการตรวจสอบแบบฟอร์มโดยเฉพาะ ชื่อ: C-- เปลี่ยนชื่อในภายหลัง: ScriptEase
ในปี 1995 Netscape ได้พัฒนาภาษาสคริปต์ฝั่งไคลเอ็นต์: LiveScript ต่อมาผู้เชี่ยวชาญจาก SUN ได้รับเชิญให้แก้ไข LiveScript และตั้งชื่อเป็น JavaScript
ในปี 1996 Microsoft คัดลอก JavaScript และพัฒนาภาษา JScript
ในปี 1997 ECMA (สมาคมผู้ผลิตคอมพิวเตอร์แห่งยุโรป) ได้สร้างมาตรฐานสำหรับภาษาสคริปต์ฝั่งไคลเอ็นต์: ECMAScript ซึ่งรวมวิธีการเข้ารหัสของภาษาสคริปต์ฝั่งไคลเอ็นต์ทั้งหมด

JavaScript = ECMAScript + สิ่งพิเศษของ JavaScript (BOM+DOM)

1.3. ข้อดีของ

JavaScript
ข. ตามวัตถุ
ค. ขับเคลื่อนด้วยเหตุการณ์
ง. ประเภทอ่อนแอ
จ. มีความปลอดภัยสูง
ฉ. การอ้างอิงข้ามแพลตฟอร์ม

1.4

หากคุณต้องการแทรก JavaScript ลงในหน้า HTML โปรดใช้แท็ก <script>
<script> 和</script> บอก JavaScript ว่าจะเริ่มต้นและสิ้นสุดที่ไหน
บรรทัดของโค้ดระหว่าง <script> 和</script> มี JavaScript

<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>

1.5 วิธีการส่งออก JavaScript

window.alert()document.write()innerHTML
console.log()

จากการใช้งานส่วนตัว console.log() จะสะดวกกว่าในการเขียนโปรแกรม คุณสามารถดูเนื้อหาเอาต์พุตได้โดยตรงผ่านคอนโซล

F12

1.7.ความคิดเห็น JavaScript

// นี่คือรหัส: ความคิดเห็นประโยคเดียว โดยปกติจะเป็นปุ่ม Ctrl + L ในตัวแก้ไข
/* นี่คือโค้ด*/: ความคิดเห็นแบบหลายบรรทัด โดยปกติแล้วจะใช้ปุ่ม Ctrl + Shift + L ในตัวแก้ไข

1.8.ตัวระบุทั่วไปใน JavaScript คืออะไร?

1.9.เหตุการณ์ HTML ทั่วไปใน JavaScript คืออะไร?

1.10 ตัวดำเนินการ JavaScript ทั่วไป

1.11.ตัวดำเนินการมอบหมายทั่วไปใน JavaScript

1.12.ตัวดำเนินการเปรียบเทียบทั่วไปใน JavaScript

1.13. ตัวดำเนินการเชิงตรรกะทั่วไปใน JavaScript

2. อธิบายไวยากรณ์พื้นฐานของ JavaScript โดยละเอียด

2.1. ตัวแปร

2.1.1. กำหนดตัวแปร

// ประกาศตัวแปรชื่อการทดสอบ var test;

var age, name, sex;//ประกาศตัวแปรอายุ ชื่อ และเพศ 3 ตัว

//ประกาศตัวแปรพร้อมกันและกำหนดค่า var age = 10, name = "Xiaoqiang", sex = "1 2.1.2

. กฎการตั้งชื่อตัวแปรและข้อกำหนด

1. ประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง และสัญลักษณ์ ไม่สามารถขึ้นต้นด้วยตัวเลขได้
2. ไม่สามารถใช้คำหลักได้ เช่น ในขณะที่
3. ข้อกำหนดเฉพาะตัวพิมพ์: วิธีการเขียนแบบเดิมๆ
1. ชื่อตัวแปรจะต้องมีความหมาย
2. ปฏิบัติตามระบบการตั้งชื่อแบบตัวพิมพ์ใหญ่ของอูฐ อักษรตัวแรกของคำต่อไปนี้เป็นตัวพิมพ์ใหญ่ เช่น ชื่อผู้ใช้

ประเภท

Number类型、String类型、Boolean类型、Undefined类型、Null类型、Object类型

2.2.1

ประเภทตัวเลขดิจิทัล: ประกอบด้วยจำนวนเต็มและทศนิยมและสามารถแสดงเป็น: ทศนิยม ฐานแปด เลขฐานสิบหก

เช่น:

var num = 10; 
//ทศนิยม var num1 = 012; 
//เลขฐานแปด var num2 = ox123; 
//

ช่วงค่าเลขฐานสิบหก:

console.log(Number.MAX_VALUE); 
//ค่าสูงสุดคือ 5e-324console.log(Number.MIN_VALUE); 
//ค่าต่ำสุดคือ 1.7976931348623157e+308 Infinity: Infinity: -

การตัดสินเชิงตัวเลขแบบอนันต์ไม่สามารถใช้ทศนิยมในการตรวจสอบทศนิยม และไม่ใช้ NaN เพื่อตรวจสอบว่าเป็น NaN หรือไม่ (NaN----ไม่ใช่ตัวเลข) แต่คุณสามารถใช้ isNaN ได้ — ไม่ใช่ คือผลลัพธ์ของตัวเลข NaN หรือไม่?
เช่น:

var num; 
//ประกาศตัวแปร, console.log ที่ยังไม่ได้กำหนด(isNaN(num)); 
// เป็นตัวเลขไม่จริงใช่ไหม? ผลลัพธ์ที่ได้จะเป็นจริง

2.2.2.

สตริงอักขระหลีกสตริง:

เช่น:

var str = "ฉันเป็น pm\"console.log(str); 
// ฉัน pm

การต่อสตริง:

var str1 = "Mr.";var str2 = "Hello";console.log(str1+str2); 
// สวัสดีครับ

ถ้าผลลัพธ์ของการประกบสตริงและตัวเลขเป็นผลของการประกบสตริงดังที่แสดงไว้ด้านบน

2.2.3

ประเภท Boolean Boolean ทั้งสองแอตทริบิวต์นั้น true/false

2.2.4

ไม่ได้กำหนด หมายถึงตัวแปรที่ได้รับ ประกาศโดยไม่มีการกำหนด ตัวแปร เมื่อประกาศเท่านั้น ค่าดีฟอลต์จะเป็น undefinition
ตัวอย่างเช่น:

var num;console.log(num); 
// undefinition

2.2.5.Null

หาก

ค่าของตัวแปรเป็น null จะต้องตั้งค่าด้วยตนเอง

2.2.6.Object

2.3 การแปลงชนิดข้อมูล

2.3.1

, Number() สามารถแปลงค่าใดๆ ให้เป็นค่าตัวเลขได้ หากมีอักขระในสตริงที่จะแปลงซึ่งไม่ใช่ค่าตัวเลข ระบบจะส่งกลับ NaN
ตัวอย่างเช่น:

var num1 = Number("10");console.log(num1); 
// 10var num2 = Number('10adbdn');console.log(num2); 
//NaNvar num3 = Number("10.78");console.log(num3); 
//10.78var num4 = Number('10.65dd');console.log(num4); 
//NaNvar num5 = ตัวเลข("a10");console.log(num5); 
//NaN

(2), parseInt() แปลงเป็นจำนวนเต็ม เช่น:

var num1 = parseInt("10");console.log(num1); 
// 10var num2 = parseInt('10adbdn');console.log(num2); 
//10var num3 = parseInt("10.78");console.log(num3); 
//10var num4 = parseInt('10.65dd');console.log(num4); 
//10var num5 =parseInt("a10");console.log(num5); 
//NaN

(3) แปลง parseFloat() เป็นทศนิยม เช่น:

var num1 = parseFloat("10");console.log(num1); 
// 10var num2 = parseFloat('10adbdn');console.log(num2); 
//10var num3 = parseFloat("10.78");console.log(num3); 
//10var num4 = parseFloat('10.65dd');console.log(num4); 
//10var num5 = parseFloat("a10");console.log(num5);

ความแตกต่างระหว่าง (4), Number(), parseInt() และ parseFloat()
Number() เข้มงวดกว่า parseInt() และ parseFloat()
parseInt() คล้ายกับ parseFloat() parseFloat จะแยกวิเคราะห์อันแรก เมื่อเจออันที่สองหรือไม่ใช่ตัวเลข

2.3.2 แปลงเป็นประเภทสตริง

(1), toString()
ตัวอย่างเช่น:

var num = 10;console.log(num.toString()); 
// สตริง 10

(2), สตริง()
ตัวอย่างเช่น:

var num1 =5;console.log(String(num1)); 
// สตริง 5

(2), JSON.stringfy()

2.3.3 แปลงเป็นบูลีนประเภท

0, สตริงว่าง, null, ไม่ได้กำหนด, NaN จะถูกแปลงเป็นเท็จ ส่วนอื่นๆ จะถูกแปลงเป็นจริง
ตัวอย่างเช่น:

var num1 = Boolean(0);console.log(num1); 
// falsevar num2 = บูลีน("");console.log(num2); 
// falsevar num3 = บูลีน(null);console.log(num3); 
/ falsevar num4 = บูลีน (ไม่ได้กำหนด);console.log(num4); 
// falsevar num5 = 10;var num6;console.log(บูลีน(num5+num6)); 
/ false

2.4. ตัวดำเนินการ

ประเภทตัวดำเนินการ: ตัวดำเนินการทางคณิตศาสตร์, ตัวดำเนินการแบบผสม, ตัวดำเนินการเชิงสัมพันธ์, ตัวดำเนินการเชิงตรรกะ

(1), ตัวดำเนินการทางคณิตศาสตร์: "+" "-" "*" "/" "%"
นิพจน์ทางคณิตศาสตร์: นิพจน์ที่เชื่อมต่อกันด้วยตัวดำเนินการทางคณิตศาสตร์

(2) ตัวดำเนินการแบบผสม: "+=""-=""*=""/=""%="
นิพจน์การดำเนินการแบบผสม: นิพจน์ (3) เชื่อมต่อกันด้วยตัวดำเนินการแบบผสม

ตัวดำเนินการเชิงสัมพันธ์: ">""<"">=""<="" "" =""!=""!== "
นิพจน์การดำเนินการเชิงสัมพันธ์: นิพจน์ที่เชื่อมต่อกันด้วยตัวดำเนินการเชิงสัมพันธ์

(4) ตัวดำเนินการเชิงตรรกะ: "&&" "||" "!"

นิพจน์ 1 && นิพจน์ 2

เชื่อมต่อกันโดยตัวดำเนินการเชิงตรรกะ

รายการ

ใดรายการหนึ่งเป็นเท็จ ผลลัพธ์ทั้งหมดจะเป็นเท็จ

หากหนึ่งในนั้นเป็นจริง ผลลัพธ์ทั้งหมดจะเป็นเท็จ

! ผลลัพธ์ของนิพจน์เป็นจริง และผลลัพธ์ทั้งหมดจะเป็นเท็จ
ผลลัพธ์ของนิพจน์เป็นเท็จ และผลลัพธ์ทั้งหมดเป็นจริง

2.5 ลำดับความสำคัญของตัวดำเนินการ

คือจากสูงไปต่ำ:

() ตัวดำเนินการเอกภาคที่มีลำดับความสำคัญสูงสุด ++ – !
ตัวดำเนินการทางคณิตศาสตร์คือ * / % แล้ว + -
ตัวดำเนินการเชิงสัมพันธ์ > >= < <=
ตัวดำเนินการความเท่าเทียมกัน == != === !==
ตัวดำเนินการเชิงตรรกะคือ && ตามด้วย ||
ตัวดำเนินการกำหนด

2.6 ฟังก์ชั่น

2.6.1 บทนำ

ฟังก์ชั่นใน JavaScript เป็นวัตถุ ออบเจ็กต์คือชุดของคู่ชื่อ/ค่า และมีการเชื่อมต่อกับออบเจ็กต์ต้นแบบที่ซ่อนอยู่ วัตถุที่สร้างโดยอ็อบเจ็กต์ลิเทอรัลเชื่อมต่อกับ Object.prototype วัตถุฟังก์ชันเชื่อมต่อกับ Function.prototype (ซึ่งตัวมันเองเชื่อมต่อกับ Object.prototype) แต่ละฟังก์ชันจะมีแอตทริบิวต์ที่ซ่อนอยู่สองรายการแนบมาเมื่อถูกสร้างขึ้น: บริบทของฟังก์ชันและโค้ดที่ใช้ลักษณะการทำงานของฟังก์ชัน

2.6.2 ฟังก์ชันใช้

ฟังก์ชัน functionname() {นี่คือโค้ดที่จะดำเนินการ}

ไวยากรณ์:
วงเล็บสามารถรวมอาร์กิวเมนต์ที่คั่นด้วยเครื่องหมายจุลภาค:

(argument1, argument2, …)

โค้ดที่ดำเนินการโดยฟังก์ชันจะอยู่ภายในวงเล็บปีกกา: {}

ชื่อฟังก์ชัน(argument1, argument2, argument3) {
    Code to be Execution}

พารามิเตอร์ฟังก์ชันคือชื่อที่แสดงอยู่ในคำจำกัดความของฟังก์ชัน
อาร์กิวเมนต์ของฟังก์ชันคือค่าจริงที่ได้รับจากฟังก์ชันเมื่อมีการเรียกใช้

ฟังก์ชัน:

//สร้างฟังก์ชัน sumfunction ที่นี่ sum(num1, num2) {
    ผลลัพธ์ var = num1 + num2;
    console.log("num1 + num2 = " + result);}// ผลรวมการเรียกใช้ฟังก์ชัน (10, 20);

รันฟังก์ชันทันที:

$(function(){
	//ไม่ใช่แค่ฟังก์ชัน เอาต์พุตตัวแปรทั้งหมด ฯลฯ ที่เขียนไว้ที่นี่คือการโหลดเพจและรันโดยตรง sum()})

2.7

นิพจน์ทั่วไปของ JavaScript

2.7.1

ไวยากรณ์: Reg = /pattern/modifiers; ความสม่ำเสมอตามตัวอักษรประกอบด้วยเครื่องหมายทับสองตัว// และกฎจะถูกเขียนหลังเครื่องหมายทับตัวแรก: /pattern[กฎสามารถเขียนตัวระบุปริมาณต่างๆ | ชุดคำ . หลังจากเครื่องหมายทับที่สอง ให้เขียนตัวระบุ /ตัวแก้ไข [g global match |. ฉันละเว้นตัวพิมพ์เล็กและใหญ่ |. ^ ตำแหน่งเริ่มต้น |
var Reg = /box/gi;
ตัวสร้าง ไวยากรณ์ Reg = new RegExp( pattern , modifiers ); รูปแบบ, ตัวแก้ไขเป็นสตริงในขณะนี้ ไม่ว่าคุณจะสร้างมันขึ้นมาด้วยวิธีใด มันก็จะเหมือนกัน เทมเพลตรูปแบบ เนื้อหาที่ตรงกัน และตัวแก้ไข

var Reg = new RegExp("box","gi");

2.7.2

var

STR = 'a1b2c3a4a5',
    reg = /a/g;console.log(str.match(reg)); //["a", "a", "a"]var str = 'a1b2c3a4a5',
    reg = /a/;console.log(str.search(reg)); //0var str = 'a1b2c3a4a5',
    reg = /a/g;console.log(str.replace(reg,function(){
    console.log(อาร์กิวเมนต์);
    กลับ 5555;}));var str = 'a,b,c,d',
    reg = //,/g;//console.log(str.split(',')); //["a", "b", "c", "d"]console.log(str.split( reg)) //["a", "b", "c", "d"]

2.7.3.คำอธิบายวิธีการของวัตถุ RegExp

2.7.4

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

var patt = /pattern/i; // ละเว้นการจับคู่ตัวพิมพ์ใหญ่และเล็ก var patt = /pattern/m; // ทำการจับคู่แบบหลายบรรทัด

2.7.5. อักขระ

คืออักขระพิเศษที่มีความหมายพิเศษในนิพจน์ทั่วไป
อักขระการแปลพิเศษ /.

อักขระตัวเดียว ยกเว้นขึ้นบรรทัดใหม่ n และแท็บ r 
 ตัวอักษรหลีก สัญลักษณ์หลีกที่มีความหมายพิเศษเป็นสัญลักษณ์ธรรมดา: .d ตัวเลข [0~9]D ไม่ใช่ตัวเลขs ช่องว่างS ไม่ใช่ช่องว่างw อักขระ [ตัวอักษร|ตัวเลข|ขีดล่าง]W ไม่ใช่- อักขระ b ขอบเขตคำ (ยกเว้น (คำ) ตัวอักษรและตัวเลข_ เป็นขอบเขตของคำทั้งหมด) B ขอบเขตที่ไม่ใช่คำ

var reg = /./;//match.var reg = /\/;//match var reg = / //;//Match /var str = '\';var reg = /\/g;console.log(reg.test(str)); //true

2.8. JavaScript วัตถุทั่วไป

2.8.1 .Date วัตถุ

วัตถุวันที่เป็นวัตถุที่เกี่ยวข้องกับวันที่และเวลา เป็นแบบไดนามิกและคุณต้องใช้คีย์เวิร์ดใหม่เพื่อสร้างอินสแตนซ์ เช่น:
var Mydata=วันที่ใหม่();
ออบเจ็กต์ Date ไม่มีคุณสมบัติการเข้าถึงโดยตรง มีเพียงวิธีการรับและตั้งค่าวันที่ ดังแสดงในตารางต่อไปนี้

2.8.2 วัตถุสตริง

วัตถุสตริงเป็นวัตถุการประมวลผลสตริงที่จัดทำโดย JavaScript มันสามารถอ้างอิงได้หลังจากสร้างอินสแตนซ์วัตถุเท่านั้น โดยมีคุณสมบัติและวิธีการในการประมวลผลสตริง (คล้ายกับ Java)
ความยาวคุณสมบัติ — ส่งกลับจำนวนอักขระในสตริง
หมายเหตุ: ตัวอักษรจีนก็เป็นตัวละครด้วย! -

2.8.3.คุณสมบัติของวัตถุทางคณิตศาสตร์

:

วิธีการทางคณิตศาสตร์:

ฟังก์ชันตรีโกณมิติ (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) ส่งคืนค่าเป็นเรเดียน คุณสามารถแปลงเรเดียนเป็นองศาได้โดยการหาร Math.PI / 180 หรือด้วยวิธีอื่น

ตัวอย่างที่ 1: เขียนฟังก์ชันที่ส่งคืนจำนวนเต็มสุ่มจาก min ถึง max รวมถึง min แต่ไม่รวม

ฟังก์ชัน max getRandomArbitrary(min , สูงสุด) {
  return min + Math.random() * (max - min);}

ตัวอย่างที่ 2: เขียนฟังก์ชันเพื่อสร้างสตริงสุ่มที่มีความยาว n ช่วงค่าของอักขระสตริงประกอบด้วย 0 ถึง 9, a ถึง z, A ถึง Z

ฟังก์ชั่น getRandomInt (ต่ำสุด, สูงสุด) {
  กลับ min + Math.floor(Math.random() * (max - min + 1));}function RandomStr(n){
  var dict = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var str = '';
  สำหรับ(i = 0; i < n;i++){
    str += dict[getRandomInt(0,62)];
  -
  return str;}var str = getRandStr(10);console.log(str);

การจำแนกประเภทของ

อาร์เรย์วัตถุ

1. อาร์เรย์สองมิติ สาระสำคัญของอาร์เรย์สองมิติคือองค์ประกอบในอาร์เรย์ก็เป็นอาร์เรย์ด้วย

2

ของคอลัมน์ 2 และแถวที่ 1 ของ a.

อาร์เรย์แบบกระจายมีค่า เริ่มจาก 0 ดัชนีเริ่มต้นที่ไม่ต่อเนื่องกันของอาร์เรย์ ในอาร์เรย์แบบกระจาย โดยทั่วไปค่าแอตทริบิวต์ความยาวจะมีมากกว่าจำนวนองค์ประกอบจริง (ไม่ธรรมดา)
ตัวอย่าง

var a

>

1.length:

alert(arr.length); //Display the length of the array 10arr.length=15; /เพิ่มความยาวของอาร์เรย์ คุณลักษณะความยาวคือการแจ้งเตือนตัวแปร (arr.length ); //แสดงว่าความยาวของอาร์เรย์กลายเป็น 15

2.แอตทริบิวต์

ต้นแบบ แอตทริบิวต์ต้นแบบส่งคืนการอ้างอิงไปยังต้นแบบของประเภทวัตถุ คุณสมบัติต้นแบบเป็นเรื่องธรรมดาสำหรับวัตถุ
objectName.ต้นแบบ
พารามิเตอร์ objectName คือชื่อของวัตถุวัตถุ
คำอธิบาย: ใช้แอตทริบิวต์ต้นแบบเพื่อจัดเตรียมชุดฟังก์ชันพื้นฐานของคลาสของออบเจ็กต์ อินสแตนซ์ใหม่ของวัตถุ "สืบทอด" การดำเนินการที่กำหนดให้กับต้นแบบของวัตถุ
สำหรับออบเจ็กต์อาร์เรย์ ใช้ตัวอย่างต่อไปนี้เพื่อแสดงการใช้แอตทริบิวต์ต้นแบบ
เพิ่มวิธีการให้กับวัตถุอาร์เรย์ที่ส่งกลับค่าองค์ประกอบสูงสุดในอาร์เรย์ เพื่อให้บรรลุเป้าหมายนี้ ให้ประกาศฟังก์ชัน เพิ่มลงใน Array.prototype แล้วใช้งาน

ฟังก์ชั่น array_max( ){
   var i, max = นี่[0];
   สำหรับ (i = 1; i < this.length; i++){
       ถ้า (สูงสุด < นี่ [i])
       สูงสุด = นี่ [i];
   -
   return max;}Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );

3.constructor คุณลักษณะ

แอตทริบิวต์ตัวสร้างแสดงถึงสิ่งที่สร้างขึ้น ฟังก์ชั่นวัตถุ
object.constructor //object คือชื่อของอ็อบเจ็กต์หรือฟังก์ชัน
คำอธิบาย: แอตทริบิวต์ Constructor เป็นสมาชิกของออบเจ็กต์ทั้งหมดที่มีต้นแบบ รวมถึงออบเจ็กต์ดั้งเดิมของ JScript ทั้งหมด ยกเว้นออบเจ็กต์ Global และ Math แอตทริบิวต์ Constructor เก็บการอ้างอิงถึงฟังก์ชันที่สร้างอินสแตนซ์ของวัตถุเฉพาะ

ตัวอย่างเช่น:

x = new String("Hi");if (x.constructor == String) // Process (เงื่อนไขเป็นจริง) //หรือฟังก์ชัน MyFunc {// เนื้อหาของฟังก์ชัน }y = new MyFunc;if (y.constructor == MyFunc) // กระบวนการ (เงื่อนไขเป็นจริง)

วิธีการอาร์เรย์ <br/> คำอธิบาย: ส่วนหนึ่งเป็นคุณลักษณะใหม่ของ ECMAScript5 (ไม่รองรับโดย IE678)

ส่วนใหญ่จะอธิบายคุณสมบัติใหม่บางอย่าง

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

ตัวอย่างเช่น:

var arr=[1,2,3,4,5];arr.concat([10,11],13);//[1,2,3,4,5,10,11,13] arr .concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

ชิ้น
สไลซ์ (a, b) a และ b สามารถหาจำนวนลบได้ ซึ่งหมายความว่าอาเรย์จะถูกตัดจากตำแหน่ง a ไปยังตำแหน่ง b ซึ่งเป็นช่วงปิดทางด้านซ้ายและเปิดทางด้านขวา A และ b สามารถเป็นค่าลบได้ ตัวเลข หากเป็นจำนวนลบ แสดงว่าองค์ประกอบ a/ b สุดท้าย

var arr=[1,2,3,4,5];arr.slice(1,3);//[2,3]arr ชิ้น(1);//[2,3,4, 5]arr.slice(1,-1);//[2,3,4]arr.slice(-4,-3);//[2 ]

ประกบกัน
splice จะลบองค์ประกอบและเพิ่มองค์ประกอบใหม่ให้กับอาร์เรย์
object.splice(a) ลบองค์ประกอบจากด้านซ้าย
object.splice(a, b) สกัดกั้นองค์ประกอบ b โดยเริ่มจากตำแหน่ง a
object.splice(a, b, c, d) สกัดกั้นองค์ประกอบ b ที่เริ่มต้นจากตำแหน่ง a และแทรกองค์ประกอบ c และ d ขึ้นไปลงในอาร์เรย์ดั้งเดิม ควรสังเกตว่า splice จะแก้ไขอาร์เรย์ดั้งเดิม

var arr=[1, 2 ,3,4,5];arr.splice(2);//[3,4,5]arr;//[1,2];อาร์เรย์ดั้งเดิมได้รับการแก้ไข var arr=[1,2,3 ,4 ,5];arr.splice(2,2);//[3,4]arr;//[1,2,5];var arr=[1,2,3,4,5];arr .splice (1,1,'a','b');//[2]arr;//[1,"a","b",3,4,5]

;
ฟังก์ชัน foreach() จะสำรวจอาร์เรย์ตั้งแต่ต้นจนจบ มีพารามิเตอร์ 3 ตัว ได้แก่ องค์ประกอบอาร์เรย์ ดัชนีขององค์ประกอบ และอาร์เรย์เอง

var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a){//สอดคล้องกับ: array องค์ประกอบ ดัชนีขององค์ประกอบ อาร์เรย์เอง console.log(x + '|' + index + '|' + (a === arr));});// 1|0|true// 2| 1|จริง/ / 3|2|จริง// 4|3|จริง// 5|4|

ลดจริง()
ลด () ของอาร์เรย์ใช้ฟังก์ชันกับ [x1, x2, x3...] ของอาร์เรย์นี้ ฟังก์ชันนี้จะต้องได้รับพารามิเตอร์สองตัว ลด () ดำเนินการผลลัพธ์ต่อไปและดำเนินการคำนวณสะสมกับองค์ประกอบถัดไปของลำดับ คือ :

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

var arr = [1, 2, 3];var sum = arr.reduce ( ฟังก์ชั่น(x, y) {
     return x + y}, 0); //พารามิเตอร์ 0 เป็นทางเลือก ผ่านไปครั้งแรกคือค่าสองค่าแรกของอาร์เรย์ ผลการคำนวณคือ 6arr; //[1, 2, 3]arr = [3, 9, 6];var max = arr ลด (ฟังก์ชัน (x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;});// 3|9// 9|6max; //

เปรียบเทียบ 9 อาร์เรย์และวัตถุทั่วไป

การเปรียบเทียบอาร์เรย์และสตริง

เป็น

2.9.JSON

2.9.1.stringify()

ใช้ในการทำให้วัตถุเป็นอนุกรมในสตริง JSON

={name:"xiaoming",age:12}var json=JSON.stringify(person); //{"name:"xiaoming",age:12}

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

กรองอาร์เรย์ที่เยื้องไว้ในสตริง JSON หรือไม่:

json=JSON.stringify( บุคคล,['ชื่อ']); //{"ชื่อ": xiaoming "}

ตัวกรองฟังก์ชัน:

json=JSON.stringify(person,function(key,value){
    สวิตช์ (กุญแจ) {
        กรณี "ชื่อ":
           ส่งกลับค่า+",วัง";
        กรณี "อายุ":
           กลับไม่ได้กำหนด;
        ค่าเริ่มต้น:
           ค่าส่งคืน;
    }});//{"name": "xiaming, wang"}

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

การเยื้องสตริง:

json=JSON.stringify(person,null,4);
    "ชื่อ": "เสี่ยวหมิง",
    "age": 12}

2.9.2.toJSON()

เพิ่ม toJSON() วิธีการให้กับวัตถุ:

var person={
    ชื่อ:"เสี่ยวหมิง",
    อายุ:12,
    toJSON:ฟังก์ชั่น(){
        return this.name+" คือ "+this.age;
    }}json=JSON.stringify(person);console.log(json); //"xiaming is 12"

2.9.3.parse()

นอกเหนือจากการยอมรับสตริง json แล้ว parse() ยังสามารถยอมรับพารามิเตอร์ฟังก์ชันได้อีกด้วย ฟังก์ชันนี้ยอมรับ 2 ค่า คือ คีย์และค่า

var person=JSON.parse('{"name://xiaoming","age":12}');var person=JSON.parse('{"name " :"xiaoming", "อายุ":12}',ฟังก์ชั่น(คีย์,ค่า){
    ถ้า(key=="อายุ"){
        ค่าส่งคืน+10;
    -
    อื่น{
        ค่าส่งคืน;
    }});

2.10.Ajax

2.10.1. ขั้นตอนการสร้าง:

1. สร้างวัตถุแบบอะซิงโครนัส XMLHttpRequest
2. กำหนดวิธีการร้องขอและที่อยู่คำขอ
3. จากนั้นใช้ send เพื่อส่งคำขอ
4. ตรวจสอบการเปลี่ยนแปลงสถานะ
5. สุดท้าย รับข้อมูลที่ส่งคืน

ตัวอย่าง:

const xhr = new XMLHttpRequest()xhr.open('GET', './data/test.json', true)xhr.onreadystatechange = function () {
  ถ้า (xhr. readyState === 4) {
    ถ้า (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText))
    } อื่น {
      console.log('สถานการณ์อื่นๆ...')
    -
  }}xhr.send()

2.10.2.แอปพลิเคชัน Ajax ใน jQuery

$.ajax({
                    type: "post", //Request method url: "a.php", //The link address of the server dataType: "json", //รูปแบบการส่งและรับข้อมูล:{
                        ชื่อผู้ใช้:"เจมส์",
                        รหัสผ่าน: "123456"
                    -
                    Success:function(data){//Function console.log(data) ถูกเรียกเมื่อรับข้อมูลสำเร็จ;//data คือข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์},
                    error:function(request){//ฟังก์ชั่นที่ถูกเรียกเมื่อขอข้อมูลล้มเหลว alert("เกิดข้อผิดพลาด:"+request.status);
                    }});

2.10.3.GET

โครงสร้าง

$.get(url, [data], [callback], [type])

คำอธิบายพารามิเตอร์:

//ขั้นตอนที่ 1: สร้างวัตถุอะซิงโครนัส var ajax = new XMLHttpRequest(); //ขั้นตอนที่ 2: ตั้งค่าพารามิเตอร์ URL ของคำขอ พารามิเตอร์แรกคือประเภทของคำขอ และพารามิเตอร์ตัวที่สองคือ urlajax.open( "get", " users.json");//ขั้นตอนที่ 3: ส่งคำขอ ajax.send();//ขั้นตอนที่ 4: ลงทะเบียนเหตุการณ์ onreadystatechange เมื่อสถานะเปลี่ยนแปลง ajax.onreadystatechange = function () {
    ถ้า (ajax.readyState == 4 && ajax.status == 200) {
        //ขั้นตอนที่ 5: หากคุณสามารถป้อนคำตัดสินนี้ได้ แสดงว่าข้อมูลถูกส่งกลับอย่างสมบูรณ์ และมีหน้าที่ร้องขออยู่ console.log(ajax.responseText); //ป้อนเนื้อหาของการตอบกลับ}}

; วิธีการ POST

มีโครงสร้างและการใช้งานเหมือนกับวิธี $.get() แต่ยังคงมีความแตกต่างอยู่บ้าง

ระหว่าง get และ post

1 การโพสต์จะปลอดภัยกว่าการได้รับ พารามิเตอร์คำขอจะต่อเข้ากับด้านหลังของ URL ความปลอดภัยต่ำ เมื่อร้องขอในโหมดโพสต์ พารามิเตอร์คำขอจะถูกรวมไว้ในเนื้อหาคำขอซึ่งมีความปลอดภัยมากกว่า
2. ความแตกต่างในด้านปริมาณ: ปริมาณข้อมูลที่ส่งโดยวิธี get มีน้อยและไม่เกิน 2kb ในขณะที่ปริมาณข้อมูลที่ร้องขอโดยวิธี post นั้นมีมากและไม่มีขีดจำกัด
3. ความเร็วในการส่ง: ความเร็วในการส่งของ get สูงกว่าของโพสต์
เนื่องจากวิธีการใช้งานเหมือนกัน ตราบใดที่ฟังก์ชัน jQuery มีการเปลี่ยนแปลง โปรแกรมก็สามารถสลับระหว่างคำขอ GET และคำขอ POST

2.11.Cookie

2.11.1.js ฟังก์ชันการดำเนินการอ่านคุกกี้

getCookie(c_name){ if (document.cookie . length>0){ //ขั้นแรกให้ตรวจสอบว่าคุกกี้ว่างเปล่าหรือไม่ ให้ส่งคืน "" c_start=document.cookie.indexOf(c_name + "=") //ตรวจสอบว่ามีคุกกี้อยู่ผ่านดัชนี Of() ของออบเจ็กต์ String หากไม่มีอยู่ จะเป็น -1 if (c_start!=-1){ c_start=c_start + c_name.length+1 // +1 สุดท้ายแทนค่า "=" จริงๆ จึงได้ค่า ตำแหน่งเริ่มต้นของค่าคุกกี้ c_end= document.cookie.indexOf(";",c_start) //จริงๆ แล้วฉันรู้สึกเวียนหัวเล็กน้อยเมื่อเห็นพารามิเตอร์ตัวที่สองของ indexOf() เป็นครั้งแรก ต่อมาฉันจำได้ว่ามันหมายถึงการเริ่มต้นที่ระบุ ตำแหน่งดัชนี...ประโยคนี้เพื่อรับตำแหน่งสิ้นสุดของค่า เนื่องจากคุณต้องพิจารณาว่าเป็นรายการสุดท้ายหรือไม่ คุณสามารถตัดสินได้ว่ามีเครื่องหมาย ";" หรือไม่ หาก (c_end==-1) c_end=document.cookie.length　
return unescape(document.cookie.substring(c_start,c_end)) //ค่าที่ได้มาจาก substring() หากคุณต้องการเข้าใจ unescape() คุณต้องรู้ก่อนว่า Escape() ทำหน้าที่อะไร หากคุณต้องการทราบข้อมูลเพิ่มเติม คุณสามารถค้นหารายละเอียดเกี่ยวกับการเข้ารหัสคุกกี้ได้ในส่วนท้ายของ the article} } return "" }

2.11.2 .Cookie simple storage operation

$.cookie("groupCode",222)

2.11.3.การตั้งค่าคุกกี้เวลาหมดอายุ

document.cookie = "name=value;expires=date"

2.11.4 การแก้ไขคุกกี้

document.cookie

console.log

(cookies);

";document.cookie = "username=; หมดอายุ=Thu, 01 Jan 1970 00:00:00 GMT";var Cookies = document.cookie;console.log(cookies);

2.12. Loop

2.12.1. for loop

for is ลูปที่ใช้บ่อยที่สุด ส่วนใหญ่ใช้ในการวนอาร์เรย์

la la arr = [1,2,3];for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])}// 0 1// 1 2// 2 3

2.12.2.Array.forEach()

ไวยากรณ์: arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

callback เป็นฟังก์ชันที่ดำเนินการสำหรับแต่ละองค์ประกอบในอาร์เรย์ ฟังก์ชันได้รับพารามิเตอร์สามตัว ได้แก่ currentValue (องค์ประกอบปัจจุบันที่กำลังประมวลผลในอาร์เรย์) ดัชนี (ดัชนีขององค์ประกอบปัจจุบันที่กำลังประมวลผลในอาร์เรย์ ), อาร์เรย์ (อาร์เรย์ที่เมธอด forEach() ทำงานอยู่)

thisArg คือค่าที่ใช้เป็นค่านี้เมื่อมีการดำเนินการฟังก์ชันเรียกกลับเรียกกลับ

ให้ arr = [1, 2, , 3]ให้ arrCopy1 = []arr.map((item, index, arr) => {
     arrCopy1.push(item * 2)})console.log(arrCopy1)// [2, 4, 6]

forEach() ดำเนินการฟังก์ชันเรียกกลับหนึ่งครั้งสำหรับแต่ละองค์ประกอบอาร์เรย์ รายการที่ลบหรือไม่ได้กำหนดค่าเริ่มต้นจะถูกข้าม ( เช่น ในอาร์เรย์แบบกระจาย )
ต่างจาก map() และตัวลด() เนื่องจากไม่มีค่าส่งคืนและส่งคืนโดยไม่ระบุเสมอ
ForEach() ไม่มีวิธียกเลิกหรือแยกออกจากลูป forEach() นอกเหนือจากการส่งข้อยกเว้น

2.12.3.

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

ตัวอย่าง:

ให้ n = 0; 3) {
  n++;}console.log(n);//expected output: 3หมายเหตุ

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

2.12.4.do…ในขณะที่

คำสั่ง do… While จะสร้างการวนซ้ำที่ดำเนินการ คำสั่งที่ระบุจนกว่าค่าเงื่อนไขจะเป็นเท็จ ตรวจหาเงื่อนไขหลังจากดำเนินการคำสั่ง ดังนั้นคำสั่งที่ระบุจะถูกดำเนินการอย่างน้อยหนึ่งครั้ง

ตัวอย่าง:

const list = ['a', 'b', 'c']let i = 0do {
  console.log(รายการ[i]) //ค่า
  console.log(i) //ดัชนี
  i = i + 1} ในขณะที่ (i <list.length)

2.12.5. สำหรับ ... ใน

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

IS ส่วนใหญ่ใช้ในการสำรวจ

วัตถุ
  console.log (คุณสมบัติ) // ชื่อคุณสมบัติ
  console.log (วัตถุ [คุณสมบัติ]) // ค่าคุณสมบัติ}

คำแนะนำที่เกี่ยวข้อง: การสอนการเรียนรู้ JavaScript

ข้างต้นเป็นบทสรุปโดยละเอียดของคะแนนความรู้การเรียนรู้ JavaScript