สรุปบันทึก JavaScript กราฟิก 10,000 คำ

ตัวแปร

• ตัวแปรถูกกำหนดไว้เท่านั้น แต่ไม่ได้กำหนดค่าเริ่ม
• ต้น

จะ

• ปัญหา
• ขอบเขต

• )

น

• การประกาศตัวแปรเฉพาะการส่งเสริมคำจำกัดความ แต่ไม่ใช่ค่า

• • • คอนโซล

    ล็อก

  (

A);

• • • 3^8 3e8
    • หรือเล็กโดยไม่คำนึงถึงจำนวนเต็มหรือลอยตัวและไม่คำนึงถึงค่าบวกหรือ
    • ลบ ค่าไบนารีเริ่มต้นด้วย 0b , octal เริ่มต้นด้วย 0 และ hexadecimal เริ่มต้น 0x
    • NaN ไม่สามารถเป็นตัวเลขผลลัพธ์มักจะเป็น nan, nan == nan, ผลลัพธ์เป็นเท็จ)
    • infinity infinite หรือ
  • สตริง

    สตริง

    infinitesimal
    • วิธีการทั่วไปวิธีการ
    )

    ฟังก์ชัน	charat
    ()	ได้รับอักขระตำแหน่งที่ระบุ (นอกขอบเขต) เป็นสตริงว่าง
    ) ()	แยกสารย่อย substring
    ()	สกัดสแตน
    ()	สกัดสกัด
    touppercase (	จะเปลี่ยนสตริงเป็นตัวพิมพ์ใหญ่
    toLowerCase ()	เปลี่ยนสตริงเป็น
    ดัชนีตัวพิมพ์เล็ก ()	ดึงสตริง (การจับคู่รูปแบบ)

    • (a, b)
    Substring เริ่มต้นจาก A และ
    • สิ้นสุด
    • ที่ B ไม่รวม B;
    • ,
    • b), ความยาวของความยาว B เริ่มต้นจาก A;
  Substring เริ่มต้นจาก A และ

  • สิ้นสุด

    • ที่
  • • B ไม่รวม B

  • ;

ค่า

• • • เดียว

  • ของ

    • ตัว
• • เอง
  • :
  • null
  • ​
  • ​
  • ​
  • ​
  • ​

  ​

​ใช้

ใน

การแปลงประเภทข้อมูล

ใช้ ** number () ** ฟังก์ชั่น

// สตริง -> หมายเลขหมายเลข ('123'); ('2e3');

//

undefined และ null - -> หมายเลขหมายเลข (undefined)

;

ตัวละคร

(

'3.14');

แปลงสตริงเป็นหมายเลขจุดลอยตัว

โดยอัตโนมัติตัดทอนอักขระที่ไม่ใช่ตัวเลขตัวแรกและตัวละครทั้งหมดหลังจากจุดที่ไม่ใช่จุดที่ไม่ได้รับ

การตรวจสอบ ('3.14'); คือ 3.14 '); / / nanparsefloat (' 3.99 '

)

; เชือก สัญลักษณ์ทางวิทยาศาสตร์และตัวเลขที่ไม่ได้กำหนดจะถูกแปลงเป็นสตริงทศนิยม

(123); // nan'string (อินฟินิตี้);

(

null)

; // TrueBoolean (0); ค่านิยมถูกแปลงเป็นจริง;

ไม่

กำหนด

)

;

การแปลงประเภท

ของ

ผู้ปฏิบัติงาน

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

อัตโนมัติ

12true + true // 2false + 2 // 23 * '2 วัน' // nan

tofixed (a) วิธีการรักษาทศนิยม

math.pow (2, 3) // 2^3math.sqrt (81) // 9math CEIL () // ปัดเศษ Math.Floor () // การปัดเศษ

ผู้ดำเนินการเชิงสัมพันธ์

=== // ทั้งหมดเท่ากัน! == // ไม่เท่ากันทั้งหมด // สองสัญญาณเท่ากัน == ผู้ประกอบการไม่ได้เปรียบเทียบประเภทของค่า มันจะเปรียบเทียบค่าหลังจากการแปลงโดยปริยายมันเท่ากัน? 1 == true // true1 === true // false0 == false // true0 === false // false0 == undefined // false0 === undefined // talleadefined == null // trueundefined == = null // false

** isnan () ** ฟังก์ชั่นกำหนดว่าค่าตัวแปรเป็น NAN หรือ

ไม่ แต่ ISNAN () ไม่ใช่เรื่องง่ายที่จะใช้ ผลการดำเนินการของตัวแปรที่ส่งผ่านเป็นจำนวน () คือ NAN จากนั้นฟังก์ชั่น ISNAN () จะได้รับ

การประเมินการลัดวงจร

A &&

BA

เป็นจริงค่าคือ B;

จริงค่าคือ a, a เป็นเท็จ, ค่าคือ b

ลำดับความสำคัญการดำเนินงานเชิงตรรกะ : non-> และ--> หรือ

การไหลของ

การ ดำเนินการเชิงตรรกะ

ฟังก์ชั่นการควบคุม

ตัวเลขสุ่ม Math.random()

รับ

จำนวนเต็มในช่วงเวลา [A, B], สูตรคือ parseint (คณิตศาสตร์. random () * (b - a + 1)) + a

; A ',' B ',' C ',' D ']; ของความยาว 4 รายการจะไม่

ได้

กำหนด เวลานี้ตัวห้อยอยู่นอกขอบเขตจะไม่มีการรายงานข้อผิดพลาด แต่อาร์เรย์จะขยายตัว Subscript 6 คือ 4 และ Middle array

array.isarray () สามารถใช้วิธีตรวจจับ

ฟังก์ชัน

ฟังก์ชัน

// ฟังก์ชั่นปกติสนุก () {
    // ฟังก์ชัน Body Conttement} // ฟังก์ชั่นที่ไม่ระบุชื่อ var fun = function () {
    // ฟังก์ชั่น Body Statement}

การโปรโมตของฟังก์ชั่นการประกาศ

ความสนุก (); ฟังก์ชั่นความสนุก () {// จะได้รับการส่งเสริมในการแจ้งเตือนขั้นตอนก่อน ("ฟังก์ชั่น" การแสดงออกไม่มีคุณสมบัติโปรโมชั่นสนุก ();
    การแจ้งเตือน ("ฟังก์ชั่นถูกดำเนินการ");}

การส่งเสริมการขายลำดับความสำคัญ

// การส่งเสริมการขายของฟังก์ชั่น // โปรโมชั่นหลังจากการแสดงออกของฟังก์ชั่น;
    การแจ้งเตือน ('a');} ฟังก์ชั่น fun () {
    

เตือน

1. '
2. )

;} fun ();

1. น้อยกว่า undefined

ที่

1. เป็น
2. ทางการ

และ

1. มีแอตทริบิวต์ความยาวและอาร์เรย์

และการละเว้น

อยู่

นอกฟังก์ชั่

น

และทั้งคู่เป็นหนึ่งในคุณลักษณะของวัตถุหน้าต่าง

ค่าคืนค่า

(a, b) {
    

คืน

B

;} var result = sum (3, 5);

) วิธีการ

ในฟังก์ชั่นนี้ B แสดงถึงรายการด้านหน้าและด้านหลังในอาร์เรย์ตาม

ลำดับ 55];
    if (a> b) {
        กลับ 1;
    -
    return -1;})

;

หรือ

อาร์เรย์ = [1, 2, 3, [4, 5]];
    var result = [];
    สำหรับ (var i = 0; i < arr.length; i++) {
        if (array.isarray (arr [i])) {
            result.push (deepclone (arr [i]));
        } อื่น {
            result.push (arr [i]);
        -
    -
    ผลตอบแทนผลลัพธ์}

ฟังก์ชั่นท้องถิ่น

ที่กำหนดไว้ในฟังก์ชั่นเป็นฟังก์ชั่นท้องถิ่นและ

สามารถเรียกได้ภายในฟังก์ชัน

fun () {
    ฟังก์ชั่น inner () {
        console.log ('สวัสดี');
    -
    Inner

(

)

;

() {
    var c = 30;
    ฟังก์ชั่น inner () {
        var a = 40;
        var d = 50;
        console.log (a, b, c, d);
    

Inner

(

)

;} fun ();

สภาพแวดล้อมที่กำหนด

ไว้ ดำเนินการ "ในสถานที่อื่น" เพื่อให้สามารถสังเกต

การ

1. ทำงาน

ของการปิด

1. เคลียร์หลังจากฟังก์ชั่นด้านนอกเรียกว่า

   ฟังก์ชั่นสนุก () {
       ชื่อ var = 'niubi';
       ฟังก์ชั่น innerfun () {
           การแจ้งเตือน (ชื่อ);
       -
       return innerfun;} var inn = fun (); Inn (

2. )

   ;
       วาร์ ก = 0;
       ฟังก์ชันส่งคืน () {
           การแจ้งเตือน (ก);
       }} var geta = fun (); geta ()

;
    วาร์ ก = 0;
    กลับ {
        geta: function () {
            กลับ;
        -
        เพิ่ม: function () {
            A ++;
        - 
        POW: function () {
            a *= 2;
        -
    };} var obj = fun (); console.log (obj.geta ()); obj.add ()

; นำไปสู่การรั่วไหลของหน่วยความจำ

เรียกใช้

วิธีการเขียนพิเศษ

ชั่

น

;+ ฟังก์ชั่น () {
    การแจ้งเตือน (1);} ();-ฟังก์ชัน () {
    การแจ้งเตือน (1);} (

1. )

   ;
       ถ้า (อายุ <18) {
           กลับมา 'เด็ก';
       } อื่น {
           if (sex == 'male') {
               กลับมา 'นาย';
           } อื่น {
               กลับ 'MS';
           -
       }}) (

2. )

; i ++) {
    arr.push (function () {
        การแจ้งเตือน (i);     
    

2

)

;

    (ฟังก์ชั่น (i) {
        arr.push (function () {
            การแจ้งเตือน (i);
        -
    

(

]

(

);

Document

เข้าถึง

โหนดองค์ประกอบส่วนใหญ่อาศัยวัตถุ

เอกสาร

ท

รี

getElementById ()

หากมีองค์ประกอบที่มี ID เดียวกันในหน้าคุณสามารถรับ

กล่องแรก <p id = " "> ฉันเป็นกล่อง </p> <p id =" para "> ฉันเป็นย่อหน้า </p>

var box = document.getElementById ('box'); var para = document.getElementById ('para');

getElementsByTagname ()

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

แม้ว่าจะมีชื่อแท็กที่ระบุเพียงหนึ่งชื่อบนโหนดหน้าคุณจะได้รับอาร์เรย์ที่มีความยาว 1

องค์ประกอบโหนดใด ๆ ก็สามารถทำได้ เรียกเมธอด getElementsByTagname () เพื่อรับโหนดองค์ประกอบของคลาสที่แน่นอนภายใน

<p> ย่อหน้า </p> <p> ย่อหน้า </p> <p> ย่อหน้า </p> <p> ย่อหน้า </p>

var

document.getElementByTagname

('P')

; /p> <p class = "spec"> box </p>

var

spec

');

เงื่อนไขคุณสามารถรับองค์ประกอบแรก

<p id = "box1">
    <p> ย่อหน้า </p>
    <p class = "spec"> ย่อหน้า </p>
    <p> ย่อหน้า </p>
    <p> ย่อหน้า </p> </p>

var

document.querySelection

('#box1 .Spec')

; ตัว

เลือก

​ดำเนิน

การ

​โหนดข้อความยังเป็นของโหนดดังนั้นโดยทั่วไปเราไม่รวมสัญญาณรบกวนโหนดข้อความ (ใช้เฉพาะโหนดองค์ประกอบ)

เพื่อเขียนฟังก์ชันความสัมพันธ์โหนดทั่วไป

<body>
    <p id = "box1">
        <p> ย่อหน้า </p>
        <p class = "spec"> ย่อหน้า </p>
        <p> ย่อหน้า </p>
        <p> ย่อหน้า </p>
	</p>
    <สคริปต์>
        var box = document.getElementById ('box1');
        var spec = document.getElementByClassName ('spec');
        // ห่อหุ้มฟังก์ชั่นที่ส่งคืนโหนดองค์ประกอบเด็กทั้งหมดขององค์ประกอบคล้ายกับฟังก์ชั่นของเด็ก getChildren (โหนด) {
            var children = [];
            // สำรวจโหนดลูกทั้งหมดของโหนดและตรวจสอบว่าแอตทริบิวต์ nodetype ของแต่ละไบต์คือ 1
            // ถ้าเป็น 1 ให้กดอาร์เรย์ผลลัพธ์สำหรับ (var i = 0; i <node.childnodes.length; i ++) {
                if (node.childnodes [i] == 1) {
                    children.push (node.childnodes [i]);
                -
            -
            คืนเด็ก;
        -
       
        // ห่อหุ้มฟังก์ชั่นที่สามารถส่งคืนโหนดพี่น้ององค์ประกอบก่อนหน้าขององค์ประกอบคล้ายกับฟังก์ชั่น preventElementibling getElementPrevsibling (Node) {
            var o = โหนด;
            ในขณะที่ (o.previoussibling! = null) {
                if (o.prebioussibling.nodeType == 1) {
                    // จบห่วงและค้นหา return o.previoussibling;
                -
                o = o.previoussibling;
            -
            กลับเป็นโมฆะ;
        -
        
        // ห่อหุ้มฟังก์ชั่นที่สามารถส่งคืนโหนดพี่น้ององค์ประกอบทั้งหมดของฟังก์ชันองค์ประกอบ getallellementibling (โหนด) {
            var prevs = [];
            var nexts = [];
            var o = โหนด;
            ในขณะที่ (o.previoussibling! = null) {
                if (o.previoussibling.nodeType == 1) {
                    Prevs.unshift (O.Previoussibling);
                -
                o = o.previoussibling;
            -
            o = โหนด;
            ในขณะที่ (o.nextsibling! = null) {
                if (o.nextsibling.nodeType == 1) {
                    nexts.push (O.Nextsibling);
                -
                o = o.nextsibling;
            -
            return prevs.concat (ถัดไป);
        -
    </script>

</body>

• เปลี่ยน

  เนื้อหา

• ใน

  โหนด

องค์ประกอบ

• โหนดในรูปแบบของข้อความ

ธรรมดา
    <p id = "box"> </p>
    <สคริปต์>
        var obox = document.getElementById ('box');
        obox.innerhtml = '<ul> <li> นม </li> <li> กาแฟ </li> </ul>'; เป็นข้อความธรรมดา </script> </body>

การเปลี่ยนรูปแบบ CSS ของโหนดองค์ประกอบ

เทียบเท่ากับการตั้งค่าแอตทริบิวต์สไตล์อินไลน์

obox.style.backgroundcolor = 'สีแดง';

URL

(รูปภาพ/1.JPG)'; OBOX.STYLE.FONTSIZE = '32PX'

; การเปลี่ยนแปลง

oimg.src = 'images/2.jpg

'

;

    <p id = "box"> </p>
    <สคริปต์>
        var box = document.getElementById ('box');
        box.setAttribute ('data-n', 10);
        var n = box.getAttribute ('date-n');
        การแจ้งเตือน (n);
    </script> </body>

การสร้างโหนด

(

) ใช้เพื่อสร้างองค์ประกอบ HTML ด้วยแท็กชื่อ TagName

var OP = Document.createElement ('P');

และไม่

ได้

ติดตั้งบนต้นไม้ DOM และไม่สามารถมองเห็น

ได้ วิธี AppendChild () ซึ่งสามารถติดตั้งโหนดเด็กกำพร้าภายในและกลายเป็นโหนดโหนดโหนดลูกสุดท้ายของ

โหนดแอปเพนเดนด์ (โหนดกำพร้า)

; โหนดเข้าไปข้างในและกลายเป็นโหนดพาเรนต์ของโหนดก่อน "โหนดเด็กเกณฑ์มาตรฐาน"

. insertbefore (โหนดกำพร้า, โหนดเกณฑ์มาตรฐาน

)

;

() พารามิเตอร์โหนดนี้จะถูกย้ายไปยัง

โหนดแม่แบบใหม่ AppendChild (โหนดที่มีพาเรนต์แล้ว);

ไม่

สามารถอยู่ในทรี DOM ในเวลาเดียวกัน 
ลบโหนด

ใน

สอง

ตำแหน่ง

วิธี

การโคลนโหนด

• ตัว

เอง

จะ

ถูก

onmouseenter ไม่ได้ฟอง, onmouseover bubbling

• คีย์บอร์ดเหตุการณ์การตรวจสอบ

• เหตุการณ์ทั่วไปการฟัง

• ทั่วไป

เมื่อลำดับการดำเนินการของการฟังเหตุการณ์เมื่อซ้อน

<p id = "box1">
    <p id = "box2">
        <p id = "box3"> </p>
    </p> </p> <script>
    var obox1 = document.getElementById ('box1');
    var obox2 = document.getElementById ('box2');
    var obox3 = document.getElementById ('box3');
    
    obox1.onclick = function () {
        console.log ('box1');
    -
    
    obox2.onclick = function () {
        console.log ('Box2');
    -
    
    obox3.onclick = function () {
        console.log ('Box3');
    -
    // คลิกกล่องด้านในสุดทิศทางการแพร่กระจายมาจากภายในสู่ภายนอก </script>

การแพร่กระจายเหตุการณ์

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

ONXXXX (การตรวจสอบเหตุการณ์ระดับ DOM0) สามารถตรวจสอบขั้นตอนการเดือดร้อนเท่านั้นดังนั้นผลลัพธ์ที่สังเกตได้มาจากภายในถึงภายนอก

AddEventListener () เมธอด (การตรวจสอบเหตุการณ์ DOM ระดับ 2)

OBOX.AddeVentListener ('คลิก', ฟังก์ชั่น () {)
 // นี่คือฟังก์ชั่นการประมวลผลเหตุการณ์}, จริง

)

;

พารามิเตอร์อย่างเป็นทางการซึ่งเป็นวัตถุที่ห่อหุ้มรายละเอียดของเหตุการณ์นี้

พารามิเตอร์นี้มักจะแสดงโดยเหตุการณ์คำหรือตัวอักษร e

obox.onmousemove = function (e) {
 

Object

ของเหตุการณ์นี้

• }

;

• E.charcode และ E.KeyCode แอตทริบิวต์แอตทริบิวต์

E.ChArcode มักจะใช้ในเหตุการณ์ OnKeypress เพื่อแสดง "รหัสอักขระ" ของอักขระที่ป้อนโดยผู้ใช้ .

48 ~ 57 ตัวอักษรตัวพิมพ์ใหญ่ A ~ Z 65 ~ 90 ตัวอักษรตัวพิมพ์เล็ก A ~ Z 97 ~ 122

หมายเลข	อักขระ
ตัว	อักษร
0	~
หมายเลข	9

แอตทริบิวต์ E.KEYCODE มักจะใช้ในเหตุการณ์ OnKeyDown และ OnKeyup โดย

ผู้	ใช้
​	​
​	​
​	​
​	​
​	​

​

​.PreventDefault () ใช้วิธีการ "การกระทำเริ่มต้น" ที่สร้างขึ้นโดยเหตุการณ์

E.StopPropagation () ใช้เพื่อ ป้องกันไม่ให้เกิดเหตุการณ์

• ต่อ

ไป

หน่วย

• ความจำของ

ระบบ การใช้หน่วยความจำ (เมื่อมีองค์ประกอบที่คล้ายกันจำนวนมากที่ต้องเพิ่มในแบทช์การมอบหมายกิจกรรมสามารถลดค่าใช้จ่ายหน่วยความ

จำ

)

ที่

เกิด

ขึ้น

ตัวจับเวลา

setInterval () สามารถเรียกใช้ฟังก์ชันซ้ำ ๆ ได้โดยมีช่วงเวลาคงที่ระหว่างแต่ละ

setInterval (ฟังก์ชั่น () {
    // ฟังก์ชั่นนี้จะถูกเรียกโดยอัตโนมัติในช่วงเวลาคงที่}, 2000); ป้อนฟังก์ชั่น setInterval (ฟังก์ชัน (a, b) {
    // ค่าของพารามิเตอร์อย่างเป็นทางการคือ 88 และค่าของพารามิเตอร์อย่างเป็นทางการ B คือ 66}, 2000, 88, 66); นอกจากนี้ยังสามารถส่งผ่านใน setIntervalvar a = 0;
    console.log (++ a);}; setInterval (ความสนุก, 1000);

ล้างฟังก์ชั่น Timer

ClearInterval () สามารถล้างตัวจับเวลา

// ตั้งค่าตัวจับเวลาและใช้ตัวแปรตัวจับเวลาเพื่อรับตัวจับเวลาตัวจับเวลา = setInterval (ฟังก์ชั่น (ฟังก์ชั่น (ฟังก์ชั่น ) {
    }, 2000); // เมื่อคลิกปุ่มให้ล้างตัวจับเวลา attn.onclick = function () {
    

ClearInterval

(

จับเวลา

);

    // ฟังก์ชั่นนี้จะถูกดำเนินการหนึ่งครั้งหลังจาก 2 วินาที}, 2000

)

; "จะถูกเรียกใช้งาน (การเรียกกลับ)

setInterval () และ setTimeout () เป็นคำสั่งแบบอะซิงโครนัสสองคำสั่ง

settimeout (ฟังก์ชัน () {
    

(

'a');}, 2000)

; ฟังก์ชั่นหนึ่งครั้งการดำเนินการครั้งที่สองได้รับอนุญาตหลังจากรอบการดำเนินการมากกว่าระยะเวลาการดำเนินการที่กำหนด

ไว้
    // ถ้าล็อคปิดแล้วถ้า (ล็อค) จะไม่ถูกเรียกใช้คืน;
    // คำสั่งหลักของฟังก์ชั่น // lock lock = false;
    
    // เปิดล็อคหลังจากจำนวนมิลลิวินาทีที่ระบุ (ฟังก์ชัน () {
        ล็อค = จริง;
    }, 2000);}

BOM

อ

ร์เฟซสำหรับ JS เพื่อโต้ตอบกับหน้าต่างเบราว์

เซอร์

โครงสร้างคุณสมบัติ. document เป็น

วัตถุ

1. เอกสาร

var a

2. =

3. 10

   ;

4. วิธีการต่าง ๆ

   เช่น setInterval (), การแจ้งเตือน () และฟังก์ชั่นอื่น ๆ ในตัวเป็นวิธีการของหน้าต่าง

ขนาดของหน้าต่างคุณสมบัติที่เกี่ยวข้องกับ

เพื่อรับความกว้างของหน้าต่างโดยไม่ต้องเลื่อนแถบ

ปรับขนาดเหตุการณ์

ในหน้าต่างหลังจากการเปลี่ยนแปลงขนาดเหตุการณ์การปรับขนาดจะถูก

เรียก

ใช้

การ

เลื่อน

ใน

ทิศทางแนวตั้ง

DocumentElement.scrolltop ไม่ได้อ่านอย่างเดียวและหน้าต่าง. Scrolly เป็นเหตุการณ์การเลื่อนแบบอ่าน

อย่าง

เดียว

ผูก

วัตถุ

Navigator

.

History

Object จัดเตรียมอินเทอร์เฟซสำหรับการใช้งานประวัติเบราว์

เซอร์

history.go(-1); // Equivalent to In history.back();

the Location object

window.location identifies the current URL. You can command the browser to jump to the page by assigning a value to this attribute

window.location = 'http://www.baidu.com';window.location. href = 'http://www.baidu.com';

• To reload the current page,

  you can call the reload method of location to reload the current page . The parameter true means that

  window.location.reload(true) is forced to load from the server;

• GET request query parameters

  The window.location.search attribute is the current browser's GET request query parameter

offsetTops attribute.

This attribute indicates the vertical distance from this element to the positioned ancestor element.

Positioning ancestor elements: Among the ancestors, the element closest to itself and having a positioning attribute

uses this When adding attributes, all ancestor elements should not have positioning.

object-oriented

object (object) is a collection of "key-value pairs", which represents the mapping relationship between attributes and values.

var obj = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbies: ['足球', '编程']}; // js中花括号表示对象

注意：

• 如果对象的属性键名不符合js标识符命名规范，则这个键名必须用引号包裹

• 如果属性名不符合js标识符命名规范，则必须用方括号的写法来访问

• 如果属性名以变量形式存储，则必须使用方括号形式

  var obj = {
      a: 1,
      b: 2,
      c: 3};var key = 'b';console.log(obj.key); // undefinedconsole.log(obj[key]); // 2

对象的创建

var obj = {
    a: 10};obj.b = 40;

删除属性

使用delete操作符删除某个对象的属性

var obj = {
    a: 1,
    b: 2};delete obj.a;

对象的方法

如果某个属性值是函数，则它被称为对象的方法

var xiaoming = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbys: ['足球','游泳','编程'],
    'favorite-book': '舒克和贝塔',
    sayHello: function () {
        console.log('hello');
    }};

对象的遍历

对象的遍历需要使用for…in…循环，可是遍历对象的每个键

for (var k in obj) {
    console.log('属性' + k + '的值是' + obj[k]);}

对象的深克隆

var obj1 = {
    a: 1, 
    b: 2, 
    c: [33, 44, {
        m: 55,
        n: 66,
        p: [77, 88]
    }]};function DeepClone(o) {
    if (Array.isArray(o)) {
        var result = [];
        for (var i = 0; i < o.length; i++) {
            result.push(DeepClone(o[i]));
        -
    } else if(typeof o == 'object') {
        var result = {};
        for (var k in o) {
            result[k] = DeepClone(o[k]);
        -
    } อื่น {
        var result = o;
    -
    return result;}

函数的上下文

函数中可以使用this关键字，它表示函数的上下文

同一个函数，用不同的形式调用它，则函数的上下文不同

函数只有被调用，他的上下文才能被确定

相关规则

函数.call(上下文);函数.apply(上下文);

区别：

function sum(b1, b2) {
    alert(this.c + this.m + this.e + b1 + b2);}sum.call(xiaoming, 5, 3); // call要用逗号罗列参数sum.apply(xiaoming, [5, 3]); // apply要把参数写到数组中

new操作符调用函数

new 函数()

js规定，使用new操作符调用函数会进行“四步走”：

1. 函数体内会自动创建出一个空白对象
2. 函数的上下文（this）会指向这个对象
3. 函数体内的语句会执行
4. 函数会自动返回上下文对象，即使函数没有return语句

function fun() { // {} this指向这个空对象this.a = 3;
    this.b = 5; // {a: 3, b: 5}
    // 自动补充return this;}var obj = new fun();console.log(obj);

构造函数

将之前的函数进行一小步改进

function People(name, age, sex) {
    this.name = ชื่อ;
    this.age = อายุ;
    this.sex = sex;}var xiaoming = new People('小明', 12, '男');var xiaoming = new People('小红', 10, '女');var xiaogang = new People('小刚', 13, '男');

• 用new调用一个函数，这个函数就被称为“构造函数”，任何函数都可以是构造函数，只需要用new调用它
• 构造函数用来“构造新对象”，它内部的语句将为新对象添加若干属性和方法，完成对象的初始化

为对象添加方法

function People(name, age, sex) {
    this.name = ชื่อ;
    this.age = อายุ;
    this.sex = sex;
    this.sayHello = function () {
        console.log('我是' + this.name);
    };}var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

prototype

任何函数都有prototype属性，prototype是英语”原型“的意思，prototype属性值是个对象，它默认拥有constructor属性指回函数

构造函数的prototype是实例的原型

原型链查找

实例可以打点访问它的原型的属性和方法，这被成为”原型链查找“

function People(name, age, sex) {
    this.name = ชื่อ;
    this.age = อายุ;
    this.sex = sex;}People.prototype.nationality = '中国'; // 在构造函数的prototype上添加nationality属性var xiaoming = new People('小明', 12, '男');console.log(xiaoming.nationality);

hasOwnProperty()

该方法可以检查对象是否真正”自己拥有“某属性或者方法

xiaoming.hasOwnProperty('name'); // truexiaoming.hasOwnProperty('age'); // truexiaoming.hasOwnProperty('sex'); // truexiaoming.hasOwnProperty('nationality'); // false

in

in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法

'name' in xiaoming // true'age' in xiaoming // true'sex' in xiaoming // true'nationality' in xiaoming // true

在prototype上添加方法

将方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费，可以通过将方法写道prototype上来解决。

function People(name, age, sex) {
    this.name = ชื่อ;
    this.age = อายุ;
    this.sex = sex;}People.prototype.sayHello = function () {
    console.log('我是' + this.name);};var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

原型链的终点

数组的原型链

继承

1. 借助原型链实现继承

让Student的prototype属性指向父类的实例，然后给Student的prototype添加Student的方法

通过原型链实现继承的问题

• 如果父类的属性中有引用类型值，则这个属性会被所有子类的实例共享
• 子类的构造函数中，往往需要重复定义很多超类定义过的属性。即，子类的构造函数写的不够优雅

2. 借助构造函数

为了解决原型中包含引用类型值所带来问题和子类构造函数不优雅的问题，通常使用一种叫做“借助构造函数” 的技术，也被称为“伪造对象” 或“经典继承”

在子类构造函数的内部调用超类的构造函数，但要注意使用call()绑定上下文

function People(name, sex, age) {
    this.name = ชื่อ;
    this.sex = sex;
    this.age = อายุ;
    this.arr = [1, 2, 3];}function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school';
    this.sid = sid;}var xiaoming = new Student('小明', '男', 12, '学校', 123456);

3. 组合继承

将借用原型链和借用构造函数的技术组合到一起，叫做组合继承，也叫做伪经典继承

缺点：

组合继承最大的问题就是无论在什么情况下，都会调用两次超类的构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数的内部。

原型式继承

Object.create()方法，可以根据指定的对象为原型创建出新对象(IE9)

var obj2 = Object.create(obj1);// 写法2var obj2 = Object.create(obj1, { // 第二个参数为一个对象，将要补充的属性写在里面d: { // 属性的值仍然是一个对象value : 99 // 值为99
    } // 可以遮蔽原型上的同名属性});

When there is no need to "spend a lot of effort" to create a constructor, but you just want the new object to be "similar" to the existing object, you can use Object.create(), which is called the compatibility of prototypal inheritance

Object.create() The unique writing method

implements Object.create() in lower version browsers

// A function written by Douglas Crockford // The function function is to use o as the prototype to create a new object function object(o ) {
    // 创建一个临时构造函数function F() {}
    // 让这个临时构造函数的prototype指向o, 这样它new出来的对象，__proto__指向了o
    F.prototype = o;
    return new F();}

寄生式继承

编写一个函数，它可以“增强对象”，只要把对象传入这个函数，这个函数将以此对象为“基础” 创建出新对象，并为新对象赋予新的预置方法

function f(o) {
    var p = Object.create(o);
    p.display = function () {
        console.log(111);
    -
    return p;}

缺点：

由于不能做到函数复用而降低效率（方法没有写到prototype上）

寄生组合式继承

通过借用构造函数来继承属性，通过原型链的混成形式来继承方法

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype);
    subType.prototype = prototype;
-

// 父类function People(name, sex, age) {
    this.name = ชื่อ;
    this.sex = sex;
    this.age = อายุ;
-

People.prototype.sayHello = function() {
    console.log("hello");
-
People.prototype.sleep = function () {
    console.log("sleep");
-

// 子类function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school;
    this.sid = sid;
-

inheritPrototype(Student, People); // 让Student类的Prototype指向以People.prototype为原型的一个新对象Student.prototype.exam = function () {
    console.log("exam");
-

var xiaoming = new Student('小明', '男', 12, '学校', 123456);

instanceof运算符

用来检测”某对象是不是某个类的实例“

xiaoming instanceof Student// 底层机理：检查Student.prototype属性是否在xiaoming的原型链上（多少层都行，只要在就行）

内置构造函数

JavaScript有很多内置构造函数，比如Array就是数组类型的构造函数，Function就是函数类型的构造函数，Object就是对象类型的构造函数

内置构造函数非常有用，所有该类型的方法都是定义在它的内置构造函数的prototype上的，我们可以给这个对象添加新的方法，从而拓展某些类型的功能

内置构造函数的关系

Object.prototype是万物原型链的终点，JavaScript中函数数组皆为对象。

任何函数都可以看做是Function “new出来的”，Object是函数，所以它也是Function类的对象

包装类

包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法

Math对象

Math.pow()
Math.sqrt()
Math.ceil() // 向上取整Math.floor() // 向下取整Math.round() // 四舍五入Math.max() // 参数列表的最大值Math.min()

// 计算arr数组的最大值var arr = [3, 6, 9, 2];
var max = Math.max.apply(null, arr);

Date对象

new Date() // 得到当前时间的日期对象newDate(2020, 11, 1) // 第二个参数从0开始算new Date('2020-12-01')

常见方法

时间戳

通过getTime()方法或者Date.parse()函数可以将日期对象变为时间戳

通过new Date(时间戳)的写法，可以将时间戳变为日期对象

var d = new Date();var timestamp1 = d.getTime();var timestamp2 = Date.parse(d);

正则表达式

正则表达式（regular expression）描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求创建正则表达式

1. 使用/内容/的语法形式

var str = '123456';var regxp = /^d{6}$/;if (regxp.text(str)) {
	alert('符合规则');} else {
	alert('不符合规则');}

2. new RegExp('内容')的形式

var regxp2 = new RegExp('^\d{6}$')

元字符

不管一个符号有没有特殊意义，都可以在其之前加上一个以确保它表达的是这个符号本身

方括号表示法

使用方括号，如[xyz]，可以创建一个字符集，表示匹配方括号中的任意字符

/^[by]d{7}$/

使用短横-来指定一个字符范围， ^表示否定

量词

修饰符

也叫标志（flags），用于使用正则表达式实现高级搜索

var re = /m/gi;var re = new RegExp('m', 'gi');

正则表达式相关方法

字符串的相关正则方法

var str = 'abc123def4567ghi89';
     
// search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
var result1 = str.search(/d+/g);
var result2 = str.search(/m/g);
console.log(result1); // 3
console.log(result2); // -1

// match()方法，返回查找到的数组，找不到就是null
var result3 = str.match(/d+/g);
console.log(result3); // ["123", "4567", "89"]

// replace()方法，进行替换var result4 = str.replace(/[az]+/g, '*'); // 注意+表示贪婪的，尽可能多的连续匹配小写字母console.log(result4); // *123*4567*89

// split()方法，进行字符串拆为数组var result5 = str.split(/d+/g);
console.log(result5); // ["abc", "def", "ghi", ""]