Ringkasan catatan JavaScript grafis 10.000 kata

Variabel

• Variabel hanya ditentukan tetapi tidak diberi nilai awal. Nilai defaultnya tidak ditentukan.
• Saat mendefinisikan variabel, Anda harus menulis var (jangan mendefinisikannya dengan var, tetapi langsung menetapkan nilainya, yang tidak akan menyebabkan kesalahan , tetapi akan menyebabkan masalah cakupan).

Peningkatan deklarasi variabel

• Anda dapat menggunakan variabel yang dideklarasikan terlebih dahulu tanpa menimbulkan pengecualian.
• Sebelum mengeksekusi semua kode, js memiliki fase pra-parsing dan akan membaca definisi semua variabel terlebih dahulu.
• Catatan: Promosi deklarasi variabel hanya mempromosikan definisi tetapi tidak mempromosikan nilai

console.log (a); // Pertama gunakan variabel var a = 12; // Kemudian tentukan

tipe

• data

  • • variabel

    Nomor

    • besar atau kecil, terlepas dari bilangan bulat atau mengambang, dan terlepas dari positif atau negatif. Semuanya adalah
    bilangan bertipe
    • numerik
    • yang lebih besar atau lebih kecil (Nilai absolutnya lebih kecil) Dapat ditulis sebagai notasi ilmiah 3e8 adalah 3^8
    • nilai biner dimulai dengan 0b , oktal dimulai dengan 0 , dan heksadesimal dimulai dengan 0x ,
    • bukan NaN , yaitu "bukan angka", tetapi merupakan nilai tipe numerik (dalam operasi matematika, jika hasilnya tidak bisa berupa angka, hasilnya sering kali NaN, NaN == NaN, hasilnya salah)
    • Infinity Tak Terbatas atau sangat kecil

  • String

    • string metode umum metode

    fungsi	charAt
    ()	mendapatkan karakter posisi yang ditentukan (di luar batas ) adalah string kosong)
    substring ()	mengekstrak substring
    substr()	mengekstrak string
    slice()	mengekstrak substring
    toUpperCase()	mengubah string menjadi huruf besar
    toLowerCase()	mengubah string menjadi huruf kecil
    indexOf()	mengambil string (pencocokan pola)

    • substring(a, b) substring dimulai dari a dan berakhir di b, tidak termasuk b; jika parameter kedua dihilangkan, substring yang dikembalikan akan menuju ke akhir string. Jika a > b, maka secara otomatis disesuaikan ke desimal Di depan
    • substr(a , b), substring dengan panjang b dimulai dari a; jika parameter kedua dihilangkan, substring yang dikembalikan akan menuju ke akhir string; a dapat berupa angka negatif, yang menunjukkan posisi kebalikan dari
    • irisan (a, b ) A substring dimulai dari a dan berakhir di b, tidak termasuk b; kedua parameter bisa negatif; a harus lebih kecil dari b, jika tidak, tidak akan ada hasil (string kosong)

  • Boolean

  • Tidak

    • terdefinisi adalah nilai dan tipe hanya satu nilainya sendiri:

  • Null.

    • Saat kita perlu menghancurkan objek, menghancurkan array, atau menghapus event listening, kita biasanya menyetelnya ke null.

• Tipe data kompleks:

  • Object
  • Array
  • Function
  • RegExp
  • Date
  • Map
  • Set
  • ...

Operator Typeof

bisa digunakan untuk mendeteksi nilai atau variabel. Tipe

tipe 5; // tipe nomor 'niubi'; //

konversi tipe data

menggunakan **Number ()**Function

// String --> Number Number('123'); // 123Number('123.4'); // 123.4Number('123 year'); ('2e3'); // 2000Nomor(''); // 0Nomor('1 + 1'); // NaN// Nilai Boolean --> Angka(benar); // tidak terdefinisi dan null - -> Nomor Nomor(tidak terdefinisi); // NaNNumber(null); // 0

fungsi **parseInt()** mengonversi string menjadi bilangan bulat

dan secara otomatis akan memotong semua karakter setelah non-numerik pertama karakter

parseInt('3.14 '); // 3parseInt('3.14 adalah pi'); // 3 parseInt('Pi adalah 3.14'); // NaNparseInt('3.99')

; mengonversi string menjadi bilangan titik mengambang

secara otomatis memotong karakter non-numerik pertama dan semua karakter setelah titik non-desimal

parseFloat('3.14'); // 3.14parseFloat('3.14 is pi'); adalah 3.14'); / / NaNparseFloat('3.99'); // 3.99// akan secara otomatis mengubah true dan false menjadi string, dan hasilnya adalah NaN.

Fungsi **String()**

menjadi "panjang yang sama" rangkaian. Notasi ilmiah dan bilangan non desimal akan diubah menjadi nilai desimal

String(123); // '123'String(123.4); // 'NaN'String(Tak terhingga); // 'Tak terhingga'String(0xf); // '15'String(benar); // 'benar'String(salah); // 'undefinisi'String(null); // 'null'

**Boolean()** fungsi

// Angka --> Nilai Boolean 0 dan NaN diubah menjadi false, dan lainnya diubah menjadi trueBoolean(123) ; // trueBoolean(0); // falseBoolean(NaN); // falseBoolean(Infinity); // trueBoolean(-Infinity); // nilai Boolean --> string kosong Boolean diubah menjadi false, dan lainnya nilai dikonversi menjadi true; // falseBoolean('abc'); // trueBoolean('false'); undefinisi); // falseBoolean(null) ; // fungsi false

**

muncul di kotak input

var num = prompt('Silakan masukkan angka pertama');

konversi tipe implisit

operator

jika terlibat dalam operasi matematika Jika operan bukan tipe numerik, JavaScript akan otomatis mengonversi operan menjadi tipe numerik.

Inti dari konversi implisit adalah memanggil fungsi Number() secara internal

3 * '4' // 12benar + benar // 2salah + 2 // 23 * '2 hari' //

Metode NaN toFixed(a) mempertahankan tempat desimal

Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // Pembulatan Math.floor() // Pembulatan ke bawah

operator relasional

=== // Semua sama!== // Tidak semua sama // Dua tanda sama dengan == operator tidak membandingkan jenis nilai, itu akan membandingkan nilai setelah konversi implisit Apakah sama dengan 1 == true // true1===true // false0 == false // true0 === false // false0 == tidak terdefinisi // false0 === undefinisi // falseundefinisi == null // trueundefinisi == = null // false

**isNaN()** fungsi menentukan apakah nilai variabel adalah NaN,

tetapi isNaN() tidak mudah digunakan Mekanismenya adalah: selama hasil eksekusi variabel yang diteruskan ke Number() adalah NaN, maka fungsi isNaN() akan mendapatkan

evaluasi hubung singkat

a && ba benar, nilainya b; a salah, nilainya a

||ba adalah benar, nilainya a, a salah, nilainya b

Prioritas operasi logika : non--> dan- -> Atau

operasi komprehensif Urutan operasi : non--> Operasi matematika --> Operasi relasional -->

Alur

pernyataan kontrol

Fungsi bilangan acak Math.random()

memperoleh bilangan bulat pada interval [a, b], rumusnya adalah parseInt(Math .random() * (b - a + 1)) +

a

;

A', 'B', 'C', 'D']; var arr = Array baru('A', 'B ', 'C', 'D');var arr = Array baru(4); dengan panjang 4, setiap item tidak terdefinisi.

Ketika subskrip diakses di luar batas,

undefinisi

dikembalikan

kali ini, subskrip di luar batas, tidak ada kesalahan yang dilaporkan, tetapi array akan diperluas, subskrip 6 adalah 4, dan bagian tengahnya kosong.

Metode Array.isArray() dapat digunakan Untuk mendeteksi

fungsi

definisi fungsi

// fungsi reguler menyenangkan() {
    //Pernyataan isi fungsi}//Fungsi anonim var fun = function () {
    // Pernyataan isi fungsi}

Promosi deklarasi fungsi

fun(); function fun() { // Akan dipromosikan pada tahap pra-parsing alert("Fungsi dijalankan");}// Jika fungsi didefinisikan dengan suatu fungsi ekspresi , tidak ada fitur promosi fun(); // muncul kesalahan var fun = function () {
    alert("Fungsi dijalankan");}

Promosi prioritas fungsi

// Promosi prioritas fungsi // Promosi setelah ekspresi fungsi; promosi deklarasi variabel, tidak dapat menggantikan fungsi yang dipromosikan fun();
    peringatan('A');}fungsi menyenangkan() {
    alert('B');}fun(); // Pop up A.

Jumlah parameter formal sebenarnya berbeda. Jumlah parameter

1. aktual lebih banyak dari parameter formal. Tidak ada
2. parameter formal yang diterima kurang dari parameter formal. Tidak ada parameter aktual yang diterima. Nilai parameter formal dari parameter undefined

objek array argumen

1. mewakili
2. daftar parameter aktual yang diterimanya
3. urutan bilangan asli dimulai dari 0, dan memiliki atribut panjang, dan array. Demikian pula, Anda dapat menggunakan tanda kurung siku untuk menulis subskrip untuk mengakses nilai atribut tertentu dari suatu objek, tetapi Anda tidak dapat memanggil metode array

Deklarasi var dan kelalaian

berada di luar fungsi. Variabel yang dideklarasikan dengan var adalah variabel global, dan variabel yang dideklarasikan tanpa var adalah variabel global

dalam fungsi, variabel yang dideklarasikan dengan var adalah variabel lokal, variabel yang dideklarasikan tanpa var adalah variabel global

, keduanya adalah variabel global , dan keduanya merupakan salah satu atribut dari objek window. Variabel yang dideklarasikan dengan var tidak dapat dihapus, dan variabel yang dideklarasikan tanpa var dapat dihapus!

nilai kembalian

jumlah(a, b) {
    

b

;}var result = sum(3, 5); // Nilai yang dikembalikan dapat diterima oleh variabel.

Jika fungsi tidak mengembalikan nilai, hasil yang dicetak di dalamnya tidak terdefinisi

) metode

a dalam fungsi ini, b masing-masing mewakili item depan dan belakang dalam array. Jika perlu ditukar, bilangan positif apa pun akan dikembalikan; jika tidak, bilangan negatif akan dikembalikan

. 55]; arr.sort(fungsi ( a, b) {
    jika (a > b) {
        kembali 1;
    }
    return -1;});

Penugasan variabel

array objek yang sama deep clone

var arr1 = [1, 2, 3, [4, 5]]; fungsi deepClone( arr) {
    var hasil = [];
    for (var i = 0; i < arr.panjang; i++) {
        if (Array.isArray(arr[i])) {
            hasil.push(deepClone(arr[i]));
        } kalau tidak {
            hasil.push(arr[i]);
        }
    }
    return result;}

Fungsi lokal

yang didefinisikan di dalam suatu fungsi adalah fungsi lokal dan

hanya dapat dipanggil di dalam fungsi

fun() {
    fungsi dalam() {
        console.log('Halo');
    }
    inner(); // Panggil fungsi bagian dalam} fun();

Rantai lingkup

Dalam fungsi bersarang, variabel akan mencari definisinya lapis demi lapis dari dalam ke luar

var a = 10; () {
    var c = 30;
    fungsi dalam() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d); // Saat menggunakan variabel, js akan memulai dari lapisan saat ini dan mencari definisi lapis demi lapis}
    inner();}fun();

penutupan

adalah kombinasi dari fungsi itu sendiri dan keadaan lingkungan di mana fungsi tersebut dideklarasikan.

Fungsi tersebut dapat "mengingat" lingkungan di mana fungsi tersebut didefinisikan, bahkan jika fungsi tersebut tidak ada lingkungan di mana ia didefinisikan. Saat dipanggil, Anda juga dapat mengakses variabel lingkungan di mana ia didefinisikan.

Di js, penutupan dibuat setiap kali suatu fungsi dibuat, tetapi fitur penutupan sering kali memerlukan fungsi tersebut dieksekusi "di tempat yang berbeda" agar dapat mengamati

fungsi penutupan. :

1. Memori: Ketika penutupan dihasilkan, keadaan lingkungan di mana fungsi tersebut berada akan selalu disimpan dalam memori dan tidak akan otomatis. dibersihkan setelah fungsi luar dipanggil.

   fungsi menyenangkan() {
       var nama = 'niubi';
       fungsi kesenangan batin() {
           peringatan(nama);
       }
       return innerFun;}var inn = fun();inn(); // Fungsi internal telah dipindahkan ke eksekusi eksternal

2. untuk menyimulasikan variabel privat

   function fun() {
       var a = 0;
       fungsi kembali() {
           peringatan(a);
       }}var getA = menyenangkan();getA();

fungsi menyenangkan() {
    var a = 0;
    kembali {
        dapatkanA: fungsi () {
            kembalikan a;
        },
        tambahkan: fungsi () {
            a++;
        }, 
        kekuatan: fungsi () {
            sebuah *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

Catatan : Penutupan tidak dapat disalahgunakan, jika tidak maka akan menyebabkan masalah kinerja pada halaman web, dan dalam kasus yang serius dapat terjadi menyebabkan kebocoran memori.

Segera panggil fungsi

dengan metode penulisan khusus IIFE. Setelah didefinisikan, fungsi yang segera dipanggil

harus diubah menjadi ekspresi fungsi sebelum dapat dipanggil

(fungsi () { // Ubah fungsi menjadi ekspresi melalui tanda kurung // pernyataan})() ;+ fungsi() {
    peringatan(1);}();-fungsi() {
    alert(1);}();

1. dapat digunakan untuk memberikan nilai pada variabel

   var age = 12; var sex = 'Pria';
       jika (umur < 18) {
           kembalikan 'anak-anak';
       } kalau tidak {
           if (jenis kelamin == 'pria') {
               kembalikan 'Tuan';
           } kalau tidak {
               kembalikan 'Nyonya';
           }
       

(

1. seperti

2. dalam perulangan for), variabel global diubah menjadi variabel lokal, dan sintaksisnya lebih ringkas.

saya++) {
    arr.push(fungsi () {
        peringatan(i);     
    });}arr[2](); // Solusi pop-up 5

:

var arr = [];for (var i = 0; i < 5; i++) {
    (fungsi (i) {
        arr.push(fungsi() {
            peringatan(i);
        });
    })(i);}arr[2](); // Pop up 2

DOM

nodeType nilai atribut umum

node nodeType atribut dapat menampilkan tipe spesifik dari node ini

Objek dokumen

mengakses node elemen terutama dengan mengandalkan objek dokumen.

Hampir semua fungsi DOM dienkapsulasi ke dalam objek dokumen.

Objek dokumen juga mewakili seluruh dokumen HTML pohon node.

Metode dan fungsi umum

document.getElementById()

Jika ada elemen dengan id yang sama di halaman, Anda hanya bisa mendapatkan

kotak <p id = "

">Saya adalah sebuah kotak</p><p id = "para">Saya adalah Paragraf</p>

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

getElementsByTagName()

nyaman untuk traversal, sehingga node elemen dapat dimanipulasi dalam batch

bahkan jika hanya ada satu nama tag yang ditentukan pada halaman Node, Anda juga akan mendapatkan array dengan panjang 1.

Elemen node apa pun juga bisa panggil metode getElementsByTagName() untuk mendapatkan node elemen kelas tertentu di dalamnya

<p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p><p>Paragraph</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class ="spec">Kotak</p><p class ="spec ">Kotak</p><p class = "spec">Kotak< /p><p class = "spec">Box</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

metode ini Anda hanya bisa mendapatkan satu elemen pada halaman syaratnya, Anda hanya bisa mendapatkan elemen pertama

<p id = "box1">
    <p>Paragraf</p>
    <p class = "spec">Paragraf</p>
    <p>Paragraf</p>
    <p>Paragraf</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

array

dengan panjang 1 meskipun hanya ada satu node pada halaman yang cocok dengan

Untuk menjalankannya,

event

window.onload = function() {} (tambahkan event listening ke objek window, onload menunjukkan bahwa halaman telah dimuat), sehingga setelah halaman dimuat, kode yang ditentukan akan dimuat. dieksekusi.

Hubungan antar node

Catatan: Node teks juga termasuk dalam node, jadi kami biasanya mengecualikan gangguan Node teks (hanya menggunakan node elemen)

untuk menulis fungsi hubungan node umum

<body>
    <p id = "kotak1">
        <p>Paragraf</p>
        <p class = "spec">Paragraf</p>
        <p>Paragraf</p>
        <p>Paragraf</p>
	</p>
    <skrip>
        var kotak = dokumen.getElementById('box1');
        var spesifikasi = document.getElementsByClassName('spec');
        // Enkapsulasi fungsi yang mengembalikan semua node elemen turunan dari elemen tersebut, serupa dengan fungsi turunan getChildren(node) {
            var anak = [];
            // Lintasi semua node anak dari node dan tentukan apakah atribut nodeType setiap byte adalah 1
            // Jika 1, dorong array hasil untuk (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    anak-anak.push(node.childNodes[i]);
                }
            }
            kembalinya anak-anak;
        }
       
        // Enkapsulasi fungsi yang dapat mengembalikan node saudara elemen sebelumnya dari elemen, mirip dengan previousElementSibling function getElementPrevSibling(node) {
            var o = simpul;
            while (o.previousSibling != null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // Akhiri perulangan dan temukan return o.previousSibling;
                }
                o = o.saudara sebelumnya;
            }
            kembalikan nol;
        }
        
        // Enkapsulasi fungsi yang dapat mengembalikan semua node saudara elemen dari elemen function getAllElementSibling(node) {
            var sebelumnya = [];
            var selanjutnya = [];
            var o = simpul;
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.saudara sebelumnya;
            }
            o = simpul;
            while (o.saudara berikutnya != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.Saudara Berikutnya;
            }
            return prevs.concat(berikutnya);
        }
    </script></body>

Mengubah konten di node elemen.

Anda dapat menggunakan dua atribut terkait untuk mengubah konten di node elemen.

• innerHTML

  dapat

• mengatur

  konten di node dalam sintaks HTML

• node dalam bentuk teks

biasa
    <p id = "kotak"></p>
    <skrip>
        var oBox = dokumen.getElementById('kotak');
        oBox.innerHTML = '<ul><li>Susu</li><li>Kopi</li></ul>'; // Dapat mengurai sintaksis HTML // oBox.innerText = 'niub'; menjadi teks biasa</script></body>

Mengubah gaya CSS dari node elemen

sama dengan mengatur atribut gaya sebaris

oBox.style.backgroundColor = 'red'; // Atribut CSS harus ditulis dalam huruf unta oBox.style .backgroundImage = 'url(images/1.jpg)';oBox.style.fontSize = '32px';

Ubah atribut HTML

node elemen menjadi atribut standar W3C, seperti src, href, dll., cukup klik langsung untuk membuatnya perubahan

oImg.src = 'images/2.jpg';

Untuk atribut yang tidak sesuai dengan standar W3C, gunakan setAttribute() dan getAttribute() untuk menyetel dan membaca

<body>
    <p id = "kotak"></p>
    <skrip>
        var kotak = dokumen.getElementById('kotak');
        box.setAttribute('data-n', 10); // Tambahkan atribut data-n dengan nilai 10
        var n = box.getAttribute('tanggal-n');
        peringatan(n);
    </script></body>

pembuatan node

document.createElement() digunakan untuk membuat elemen HTML dengan tagname tertentu

var op = document.createElement('p');

Node yang baru dibuat adalah "node yatim piatu", dan Itu tidak dipasang di pohon DOM dan tidak dapat dilihat. Anda

harus terus menggunakan metode appendChild() atau insertBefore() untuk memasukkan simpul yatim piatu ke dalam pohon

DOM metode appendChild(), yang dapat Memasang node yatim piatu di dalamnya dan menjadi node induk anak terakhirnya.

node anak yatim piatu

(simpul yatim piatu);

node Masuk ke dalamnya dan jadilah node induk dari node sebelum "benchmark child node"

.insertBefore(orphan node, benchmark node);

mobile node

membuat node yang sudah terpasang di pohon DOM menjadi appendChild() atau insertBefore () Parameter, node ini akan dipindahkan ke

node induk baru.appendChild (node ​​​​yang sudah memiliki induk); node induk baru.insertBefore (node ​​​​yang sudah memiliki induk, node anak benchmark // Artinya). bahwa sebuah node tidak dapat ditempatkan di pohon DOM secara bersamaan. 
Hapus node
 di dua lokasi.

node induk

dari DOM.removeChild

node

cloneNode()

Metode dapat mengkloning node. Node yang dikloning adalah "node yatim piatu".

Parameternya adalah tipe boolean, yang menunjukkan apakah akan menggunakan kloning mendalam. Jika benar, semua node turunan dari node tersebut juga akan dikloning

sendiri

akan dikloning.

; var Orphan Node = Old Node.cloneNode(true)

• ;

onmouseenter tidak menggelembung, onmouseover menggelembungkan

• peristiwa keyboard yang umum memantau

• Bentuk umum acara mendengarkan

• halaman umum pendengar acara

ketika kotak Urutan eksekusi acara mendengarkan ketika bersarang

<p id = "box1">
    <p id = "kotak2">
        <p id = "kotak3"></p>
    </p></p><skrip>
    var oBox1 = dokumen.getElementById('box1');
    var oBox2 = dokumen.getElementById('box2');
    var oBox3 = dokumen.getElementById('box3');
    
    oBox1.onclick = fungsi () {
        konsol.log('kotak1');
    };
    
    oBox2.onclick = fungsi() {
        konsol.log('kotak2');
    };
    
    oBox3.onclick = fungsi () {
        konsol.log('kotak3');
    };
    // Klik kotak paling dalam, arah propagasi dari dalam ke luar</script>

Propagasi event

Perambatan eventnya adalah: pertama dari luar ke dalam, lalu dari dalam ke luar (lapisan paling dalam tidak ditangkap terlebih dahulu lalu digelembungkan, tetapi ditentukan berdasarkan urutan penulisan kode. Kotak dengan nama yang sama terkait dengan tahapan dan urutan yang sama. Jika elemen yang sama diatur Jika ada dua atau lebih peristiwa dengan nama yang sama, peristiwa yang ditulis kemudian di tingkat DOM0 akan menimpa peristiwa yang ditulis terlebih dahulu dan tingkat DOM2 akan dieksekusi secara berurutan)

onxxxx (pemantauan peristiwa tingkat DOM0) hanya dapat memantau tahap penggelembungan, sehingga hasil yang diamati adalah dari

metode AddEventListener() dari dalam ke luar (pemantauan peristiwa tingkat 2 DOM)

oBox.addEventListener('klik', function() {
 

pemrosesan

peristiwa

}, benar); // Jika parameter ketiga benar, ia akan mendengarkan fase penangkapan. Jika salah, ia akan mendengarkan fase penggelembungan

parameter formal, yaitu objek yang merangkum detail peristiwa ini

Parameter ini biasanya diwakili oleh kata peristiwa atau huruf e

oBox.onmousemove = function (e) {
 //Objek e adalah "objek acara" dari acara ini};

Atribut terkait objek

• Atribut terkait posisi mouse

Atribut posisi mouse ketika acara ini dipicu Deskripsi

• e Atribut e .charCode dan e.keyCode Atribut

e.charCode biasanya digunakan dalam peristiwa onkeypress untuk mewakili "kode karakter" dari karakter yang dimasukkan oleh pengguna

Kode	karakter
angka 0 ~ angka 9	48 ~ 57
huruf besar A ~ Z	65 ~ 90
huruf kecil a ~ z	97 ~ 122

Atribut

e.keyCode biasanya digunakan pada event onkeydown dan onkeyup untuk merepresentasikan "keycode" dari tombol yang ditekan. oleh pengguna.

40

Kode	kunci
nomor 0 ~ nomor 9	48 ~ 57
bagian huruf besar dan huruf kecil a ~ z	65 ~ 90
Tombol empat arah ← ↑ → ↓	37, 38, 39,
Tombol enter	13
Tombol spasi	32

Mencegah kejadian default

e. Metode .preventDefault() digunakan untuk mencegah "tindakan default" yang dihasilkan oleh acara.

Metode e.stopPropagation() digunakan untuk mencegah Acara terus menyebar

. Batch menambahkan masalah kinerja mendengarkan

• acara memori sistem. Menambahkan acara dalam batch akan mengakibatkan terlalu banyak monitor dan konsumsi memori yang besar.

Delegasi Acara.

Setiap pendaftaran mendengarkan acara akan menghabiskan sejumlah memori sistem, dan menambahkan acara dalam batch akan menghasilkan terlalu banyak pendengar dan besar konsumsi memori (ketika ada sejumlah besar elemen serupa yang perlu ditambahkan dalam batch, delegasi acara dapat mengurangi overhead memori). Gunakan

mekanisme penggelembungan acara untuk mendelegasikan acara elemen turunan ke Catatan untuk elemen leluhur

: Anda tidak dapat mendelegasikan non- elemen

turunan.

peristiwa yang menggelegak ke elemen leluhur.

Ketika simpul elemen dinamis ditambahkan ke pohon, delegasi peristiwa dapat digunakan untuk membuat elemen yang baru ditambahkan ke pohon memiliki

terkait

pengatur waktu

setInterval() dapat memanggil fungsi berulang kali, dengan interval tetap di antara setiap panggilan

setInterval(fungsi () {
    // Fungsi ini secara otomatis akan dipanggil pada interval tetap}, 2000); // Parameter kedua adalah interval, dalam milidetik // Fungsi ini dapat menerima parameter ke-3, ke-4..., dan parameter tersebut akan diteruskan secara berurutan Masukkan fungsi setInterval(fungsi (a, b) {
    // Nilai parameter formal a adalah 88, dan nilai parameter formal b adalah 66}, 2000, 88, 66); // Mulai dari parameter ketiga, ini mewakili parameter yang diteruskan ke fungsi // Fungsi yang diberi nama bisa juga diteruskan dalam setIntervalvar a = 0; function fun() {
    console.log(++a);};setInterval(fun, 1000);

Hapus fungsi timer

clearInterval() dapat menghapus timer

// Atur timer dan gunakan variabel timer untuk menerima timer var timer = setInterval(function ( ) {
    }, 2000);//Ketika tombol diklik, hapus timer oBtn.onclick = function () {
    clearInterval(timer); };

Fungsi

penundaan

setTimeout() dapat mengatur penundaan. Ketika waktu yang ditentukan habis, fungsi akan dijalankan satu kali dan tidak akan dijalankan berulang kali.

    // Fungsi ini akan dijalankan satu kali setelah 2 detik}, 2000); clearTimeout(timer); // Hapus penundaan

secara asinkron

: Fungsi ini tidak akan memblokir CPU untuk melanjutkan eksekusi pernyataan lainnya " akan dieksekusi. (panggilan balik)

setInterval() dan setTimeout() adalah dua pernyataan asinkron

setTimeout(function () {
    console.log('A');}, 2000); // Pernyataan asinkron console.log('B'); // Pernyataan asinkron tidak akan menghalangi eksekusi normal program // Hasil yang dijalankan

fungsi BA akan menghambat

eksekusi suatu fungsi sekali Akhirnya, eksekusi kedua diperbolehkan hanya setelah siklus eksekusi lebih besar dari periode eksekusi yang ditetapkan

var lock = true;
    // Jika kuncinya tertutup, maka if(!lock) tidak akan dieksekusi return;
    // Pernyataan fungsi inti // Kunci kunci = salah;
    
    //Buka kunci setelah jumlah milidetik yang ditentukan setTimeout(function () {
        kunci = benar;
    }, 2000);}

BOM

BOM (Browser Object Model, model objek browser) adalah antarmuka JS untuk berinteraksi dengan jendela browser.

Objek

adalah jendela tempat skrip js saat ini berjalan, dan jendela ini berisi DOM struktur, jendela Properti .document adalah objek dokumen.

Di browser dengan fungsi tab, setiap tab memiliki objek jendelanya sendiri; yaitu, tab di jendela yang sama tidak akan berbagi objek jendela.

1. Variabel global akan menjadi objek jendela

   var a = 10; console.log(window.a == a); // true

   Ini berarti bahwa beberapa file js berbagi cakupan global, yaitu, file js tidak memiliki fungsi isolasi cakupan

2. umumnya adalah milik Window metode

   seperti setInterval(), alert() dan fungsi bawaan lainnya umumnya merupakan metode jendela

Properti terkait ukuran jendela

Untuk mendapatkan lebar jendela tanpa bilah gulir, gunakan document.documentElement.clientWidth

peristiwa pengubahan ukuran

di jendela Setelah perubahan ukuran, peristiwa pengubahan ukuran akan dipicu. Anda dapat menggunakan window.onresize atau window.addEventListener('resize') untuk mengikat pengendali peristiwa.

tinggi gulir

window.scrollY mewakili nilai piksel

document.documentElement yang telah di-scroll ke arah vertikal. Properti .scrollTop juga mewakili tinggi gulir jendela

. Untuk kompatibilitas browser yang lebih baik, keduanya biasanya ditulis bersama

var scrollTop = window.scrollY ||

. documentElement.scrollTop bukan read-only, dan window .scrollY adalah

event scroll read-only.

Setelah jendela di-scroll, event scroll akan dipicu mengikat objek Navigator fungsi event handler

.

Properti window.navigator dapat mengambil objek navigator, yang berisi atribut yang relevan dan

objek riwayat

Objek .history menyediakan antarmuka untuk mengoperasikan riwayat sesi browser.

Operasi umum adalah mensimulasikan tombol kembali browser

history.back(); // Setara dengan mengklik tombol kembali browser history.go(-1); // Setara dengan In history.back();

objek Lokasi

window.location mengidentifikasi URL saat ini. Anda dapat memerintahkan browser untuk melompat ke halaman dengan memberikan nilai pada atribut

window.location

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

• Untuk memuat ulang halaman saat ini,

  Anda dapat memanggil metode muat ulang lokasi untuk memuat ulang halaman saat ini

Parameter True berarti Windoke.location.reload

• (

  true

• )

  dipaksa untuk memuat dari

server

; Dari elemen ini ke elemen

leluhur

yang

diposisikan

.

Kumpulan "pasangan nilai kunci", yang mewakili hubungan pemetaan antara atribut dan nilai

.
    Nama: 'Xiao Ming',
    Usia: 12,
    Seks: 'Pria',
    

'

, 'Programming']

• }

• ;

• Nama atribut tidak mematuhi konvensi penamaan pengidentifikasi JS, Anda harus menggunakan tanda kurung persegi untuk

• diakses

  .

      A: 1,
      B: 2,
      C: 3}; var key = 'b'; console.log (obj.key

)

;
    A: 10}; OBJ.B

=

40

;

    A: 1,
    

}

;

Obj.A

;

    Nama: 'Xiao Ming',
    Usia: 12,
    Seks: 'Pria',
    Hobi: ['sepak bola', 'berenang', 'pemrograman'],
    'Buku Favorit': 'Shuke and Beta',
    Sayhello: function () {
        console.log ('halo');
    

}

}

;

​

    console.log ('nilai' atribut ' + k +' adalah ' + obj [k]);}

klon dalam objek

var obj1 = {
    A: 1, 
    B: 2, 
    C: [33, 44, {
        G: 55,
        N: 66,
        P: [77, 88]
    }]}; function DeepClone (o) {
    if (array.isArray (o)) {
        var result = [];
        untuk (var i = 0; i <o.length; i ++) {
            result.push (Deepclone (o [i]));
        }
    } lain jika (typeof o == 'objek') {
        var result = {};
        untuk (var k in o) {
            Hasil [k] = DeepClone (o [k]);
        }
    } kalau tidak {
        var hasil = o;
    }
    

Hasil

pengembalian;}

dapat

konteks

fungsi

Fungsi

dapat

​

Fungsi

.

​
    waspada (this.c + this.m + this.e + b1 + b2);} sum.call (xiaoming, 5, 3); 3];

1. (
2. ini

3. )
   

   akan menunjuk pada objek ini

. / {} ini menunjuk pada objek kosong ini ini.a = 3;
    this.b = 5; // {a: 3, b: 5}
    // Tambahkan secara otomatis pengembalian ini;} var obj = new fun (); console.log (

obj

)

;
    ini.nama = nama;
    this.usia = usia;
    this.sex = sex;} var xiaoming = orang baru ('小明', 12, 'laki -laki'); var xiaoming = orang baru ('小红', 10, 'perempuan'); var xiaogang = orang baru ('小红 'Gang', 'Pria'

• )
• ;
• Bangun objek baru ", pernyataan di dalamnya akan menambahkan beberapa properti dan metode ke objek baru, lengkapi inisialisasi objek

dan tambahkan fungsi metode

orang (nama, usia, jenis kelamin) {
    ini.nama = nama;
    this.usia = usia;
    this.sex = seks;
    this.sayhello = function () {
        console.log ('I Am' + this.name);
    };} var xiaoming = orang baru ('xiaoming', 12, 'pria'); xiaoming.sayhello (

)

; Itu secara default, atribut konstruktor menunjuk kembali ke fungsi

Prototipe konstruktor adalah prototipe instance

pencarian rantai prototipe

metode

prototipe -nya.

    ini.nama = nama;
    this.usia = usia;
    this.sex = sex;} people.prototype.nationality = 'Cina'; (xiaoming .nasionalitas);

HASOWNPROPERTY ()

Metode ini dapat memeriksa apakah objek benar -benar "memiliki" properti atau metode tertentu

xiaoming.hasownproperty ('nama');

/

kewarganegaraan

'

);

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

tambahkan metode pada prototipe

kelemahan penambahan metode langsung ke instance: setiap instance dan fungsi metode dari setiap instance adalah memori yang berbeda Fungsi dalam metode ini menyebabkan pemborosan memori, yang dapat diselesaikan dengan menulis metode pada prototipe.

Fungsi orang (nama, usia, seks) {
    ini.nama = nama;
    this.usia = usia;
    this.sex = sex;} people.prototype.sayhello = function () {
    Console.log ('I Am' + this.name);}; var xiaoming = orang baru ('xiaoming', 12, 'pria'); xiaoming.sayhello ()

;

Rantai prototipe array

Warisan

1. diimplementasikan dengan bantuan rantai prototipe,

membiarkan titik atribut prototipe siswa ke instance dari kelas induk, dan kemudian menambahkan metode siswa ke prototipe siswa.

Masalah warisan melalui rantai

• prototipe
• .
• Banyak atribut yang ditentukan oleh superclass.

2. konstruktor

• subclass tidak cukup ditulis dengan elegan

. Biasanya

digunakan

.

    ini.nama = nama;
    this.sex = seks;
    this.usia = usia;
    this.arr = [1, 2, 3];} fungsi siswa (nama, jenis kelamin, usia, sekolah, sid) {
    People.call (ini, nama, jenis kelamin, usia);
    this.school = sekolah ';
    this.sid = sid;} var xiaoming = siswa baru ('xiao ming', 'laki -laki', 12, 'sekolah', 123456

)

3. ;

Warisan .

​

​

Prototipe mewarisi

metode objek.create (), yang dapat membuat objek baru berdasarkan objek yang ditentukan sebagai prototipe (ie9)

var obj2 = objek.create (obj1); , {// Tidak. Dua parameter adalah objek, dan atribut yang akan ditambahkan ditulis di dalamnya d: {// nilai atribut masih merupakan nilai objek: 99 // nilainya 99
    } // Anda dapat menutupi properti dengan nama yang sama pada prototipe});

Ketika tidak perlu "menghabiskan banyak upaya" untuk membuat konstruktor, tetapi Anda hanya ingin objek baru menjadi "serupa" dengan objek yang ada, Anda dapat menggunakan objek.create (), yang disebut kompatibilitas dari

warisan prototipe.create

() Metode penulisan yang unik

mengimplementasikan objek.create () di browser versi yang lebih rendah

// fungsi yang ditulis oleh Douglas Crockford // Fungsi fungsi adalah menggunakan O sebagai prototipe untuk membuat objek fungsi objek baru (o ) {
    // Buat fungsi konstruktor sementara f () {}
    // Biarkan prototipe konstruktor sementara ini menunjuk ke O, sehingga objek baru yang dibuatnya, __proto__ menunjuk ke o
    F.prototype = o;
    mengembalikan f ();}

pewarisan parasit

, yang dapat "meningkatkan objek". Tetapkan objek baru ke objek baru

.
    var p = object.create (o);
    p.display = function () {
        Console.log (111);
    }
    Pengembalian P;}

Kekurangan

:

Efisiensi dikurangi karena ketidakmampuan untuk menggunakan kembali fungsi (metode tidak ditulis pada prototipe

)

.

, supertype) {
    var prototipe = object.create (supertype.prototype);
    subtype.prototype = prototipe;
}

// Parent Class Function People (nama, jenis kelamin, usia) {
    ini.nama = nama;
    this.sex = seks;
    this.usia = usia;
}

People.prototype.sayhello = function () {
    console.log ("halo");
}
People.prototype.sleep = function () {
    Console.log ("Sleep");
}

// Fungsi Subkelas Siswa (Nama, Jenis Kelamin, Usia, Sekolah, Sid) {
    People.call (ini, nama, jenis kelamin, usia);
    this.school = sekolah;
    this.sid = sid;
}

whereitprototype (siswa, orang);
    Console.log ("Ujian");
};

var xiaoming = siswa baru ('xiao ming', 'laki -laki', 12, 'sekolah', 123456);

Instance dari operator

digunakan untuk mendeteksi "apakah suatu objek adalah contoh dari kelas tertentu"

contoh xiaoming dari siswa // Mekanisme yang mendasarinya: Periksa apakah atribut siswa. Ini adalah

konstruktor bawaan

banyak

konstruktor bawaan.

Semua metode jenis ini didefinisikan dalam konstruktor bawaannya.

Hubungan antara konstruktor bawaan:

Object.Prototype adalah titik akhir dari rantai prototipe dari semua hal.

Fungsi apa pun dapat dianggap sebagai fungsi "baru".

Kelas Pembungkus

matematika matematika

matematika.pow ()

dari prototipe konstruktor mereka

Math.sqrt ()
Math.ceil () // Round Up Math.floor () // Round Down Math.round () // Round Up Math.max () // Nilai Maksimum Daftar Parameter Math.min ()

// Hitung nilai maksimum array array ARR ARR = [3, 6, 9, 2];

math.max.Apply

(

null, arr);

2020-12-01 ')

metode umum

(

Timestamp.

Timestamp

.

​

​

​(Ekspresi reguler) Menjelaskan "" pola konstruksi "sering digunakan untuk memeriksa apakah string sesuai dengan format yang telah ditentukan. Buat ekspresi reguler

1. menggunakan bentuk /内容/ sintaksis

var str = '123456'; var regxp = /^ d {6} $/; if (regxp.text (str)) {
	alert ('sesuai dengan aturan');} else {
	alert ('tidak memenuhi aturan');}

2. bentuk regexp baru ('konten')

var regxp2 = regexp baru ('^\ d {6} $')

Metacharacter

atau

jika

ada makna khusus, Anda dapat menambahkan sebelum memastikan bahwa itu mengekspresikan simbol itu sendiri

. Kurung

^ -

​

quantifier

pengubah m kali,

juga Disebut bendera, digunakan

reguler

.

string nol.

.
     
// metode pencarian (), seperti indexOf (), mengembalikan indeks pertama yang ditemukan, atau -1 jika tidak dapat ditemukan.
var result1 = str.search (/ d+/g);
var result2 = str.search (/m/g);
Console.log (result1);
Console.log (result2);

// Metode pertandingan () Mengembalikan array yang ditemukan.
var result3 = str.match (/ d+/g);
Console.log (hasil3);

// REPLACE () Metode, ganti var result4 = str.replace (/[az] +/g, '*'); ;

// split () Metode, pisahkan string menjadi array var result5 = str.split (/ d+/g);
Console.log (result5);