前端白菜純JavaScript

變數

變數即資料存盤的容器

變數需要先宣告：

es5 ： 參考 語法篇

var

變數命名規范：

1見名知義

變數可以是字母，數字，下劃線，但不能是數字開頭

小寫字母開頭，小駝峰命名，第二個單詞首字母大寫

不可以是關鍵字 和保留字

因為 宣告 建構式物件 是大寫開頭

es6 ：語法篇

let 有塊級作用域 不存在變數提升

不允許重復宣告變數 let 替代 var

const 宣告常量

定義后不能修改 不變的值就能用常量宣告

函式運算式可以用const宣告

物件宣告可以用const 宣告

引入外部模塊使用常量

定義的資料型別 六種

數值：Number：

字串: String: 定義字串初始可以給"" 空串

布爾： Boolean：

未定義： Undefined 宣告未賦值的變數自動給

空： Null 未初始化物件初始值可以 給 null

物件： Object

資料型別：

原始資料型別： typeOf()檢測

原始型別 賦值時 賦值的是推記憶體中資料

Number；//Number

String //String

Boolean //Boolean

Null //object

Undefined；//undefined

參考資料型別： instanceOf（）

參考型別賦值 存盤在堆記憶體中的地址 堆疊記憶體中資料一樣 除非深拷貝

• object：

• Array // arr instanceof Array true 則 是array false則不是

• Date //

• Math //

• RegExp //

• ，，，

運算式：

通過運算子將變數，字面量組合起來，就是運算式

每一個運算式都有一個固定回傳值（運算式的結果）

列如： ‘helloworld’ + 123;

字面量： 就像字串 數字 字面上的意思

回傳值： 運算式的結果

運算子

== 只比較數值

=== 全等于 比較資料型別 和 數值

&& 邏輯與 二邊條件都得滿足

|| 邏輯或 左右一個滿足條件即可

！ 邏輯非

！！ 把任何資料型別轉化為布爾型別

？ 條件運算子 就像三目運算子 bool ？ value1：value2

typeOf（a） 其他任何操作未宣告的變數都報錯！但是typeOf 是個意外！！

條件陳述句

if

if(條件){

條件可以是布林值 運算式

if判斷條件是否滿足判定執行

}else{

不滿足條件 則執行此段代碼

}

回圈陳述句

while（條件）{

}

do{ 不管條件是否成立都執行一次

}while( 條件 ){

}

for（條件）{

雙for 回圈可以來冒泡選擇排序 遍歷

}

break: 跳出回圈

continue: 只是結束本次回圈會繼續后續的回圈

witch（）{

case1：

case2：break；

default：

}

函式基礎

函式宣告

一次宣告 可多次呼叫

函式需要呼叫才會執行

函式回傳值 return 只能回傳一個同步的代碼

解決方法：

1回呼函式 ： 將函式作引數傳遞

函式引數

形參：占坑的 形參可以比實參多 用多出來的行參之會提示undefined

為了避免undefined 可以給形參賦值即設定默認值當傳入引數時以實參為準；

實參： 實際傳參 多出來的實參不顯示

三 函式宣告提升

函式宣告的時候會整體提升

函式呼叫前會進行預決議

立即執行函式

一經宣告立即執行的函式

宣告之后直接呼叫 不能被多次呼叫執行完就被銷毀了

應用場景 第三方庫的封裝

匿名函式

函式沒有名字 一般將匿名函式當成引數傳入

回呼函式

即將 匿名函式 當成引數傳遞給另一個函式，或方法，解決了函式return 不能回傳異步代碼的問題；

      let count = 0; 

        let target = 'hello world';

        function getDate(fn,c){

            count-0; // fn = getDate(()=>{})

      let  timerId  = setInterval(()=>{

        count ++;

        if(count>=5){

        clearInterval(timerId);

        }

                fn(target,count);

            },500)

        }

        getDate((d,c)=>{

            console.log(d,c); //d = target

        })

遞回函式：

在函式體內呼叫自己 解決了函式傳遞同步代碼的問題

let target = Math.floor(Math.random() * 100 + 1);

        function guessNumber() {

            let number = prompt('請猜數多少');

            if (number == target) {

                alert('恭喜回答正確');

            } else if (number > target) {

                alert("Your guess so big");

                guessNumber();

            } else {

                alert('you guess than target so small');

                guessNumber();

            }

        }

        guessNumber();

函式運算式

定義變數或常量 ，匿名函式賦值給一個變數

沒有宣告提升的特性 一次宣告可多次呼叫

方法

arguments 是一個類陣列物件就是偽陣列，代表傳給一個function的引數串列，

Array.prototype.slice.call(arguments); 用此方法來將偽陣列轉換陣列

fn(1,2) argument[0]=1

函式作用域鏈

函式自帶區域作用域 即每創建一個函式就會創建新的作用域

里面函式可以訪問外部函式的值 外面的函式無法訪問內部函式的值

這樣就會形成作用域鏈的效果

閉包

宣告在一個函式中的函式叫做閉包函式 當內部函式被保存到外部時就形成閉包

內部函式總是可以訪問其所在外部函式中宣告的引數的變數，即使外部函式被呼叫內部函式回傳之后外部函式任然不會被銷毀，

箭頭函式

箭頭函式this 指向執行背景關系 普通函式指向的是呼叫該函式的物件

const fn = function（x,y）{

return x+y;

}

const fn = (x,y) => x+y;

建構式：

new 用來創建一個用戶定義的物件型別的實體或具有建構式的內置物件的實體，

原型物件： prototype 是建構式的一個屬性，這個屬性可以為建構式原型實體添加方法為該原型物件使用

利用原型鏈： 實作繼承（了解即可面試用）

    function Fn(name,age){

        this.name=name;

        this.age=age;

    }

    Fn.prototype.say=function(){

console.log('hello world Chunshuai')

    }



    var obj2 = new Fn("wang",20);

    console.log(obj2); // name:wang age 20 say

    // new 干了什么

    var obj= {};

        Fn.call(obj,"gao",19);

        obj.__proto__=Fn.prototype;

    console.log(obj) // name:gao age:19 say

MDN：new

1. 創建一個空的簡單JavaScript物件（即**{}**）；

2. 為步驟1新建的物件添加**proto**，prototype屬性鏈接至建構式的原型物件；

3. 將步驟1新創建的物件作為**this**的背景關系；

4. 如果該函式沒有回傳物件，則回傳**this**，

如果你沒有使用 new 運算子， 建構式會像其他的常規函式一樣被呼叫， 并*不會創建一個物件**，***在這種情況下， this 的指向也是不一樣的，

class 類：

class  Dog{

    constructor(name,agt){

        this.name = name;

        this.aget = age;

    }

    sayName(){

        console.log(`我是${this.name}`)

    }

}

let dog = new Dog('wangcai',2)

// console.log(dog.name)

Class Animal{

    constructor(name){

        this.name = name;

    }

    sayName(){

        console.log(`我是${this.name}`)

    }

}

    calss Dog extends Animal{

        constructor(name,agt){

            super(name);

            this.age = age;

        }

    }

let dog = new Dog('wangcai',2);

dog.sayName();

類： 前端開發中大部分情況我們都是使用別人定義好的類 （第三方庫 框架）

物件

自定義物件： 封裝

內置物件： Date ，獲取當前時間

• var T = new Date()

• var T = new Date(‘2021-1-1 12:00:30’); 設定時間

• 獲取時間 get

  • getfullYear() 年

  • getMonth() 月

  • getDate() 日

  • getDay() 星期

  • getHours（）

Math物件：

• floor（） 向下取整

• sqrt （） 開方

• random（） 亂數

• abs （） 絕對值

• pow （） 乘方

• ceil （） 向上取整

宿主物件： document

第三方庫的物件： jQuery Vue 等

面向物件

類： 型別 模版 統稱 ex: 狗類 鳥類

物件： 是類的一個實體，會具體到某一個事物上 ex：天上飛的那只鳥

繼承： 子類可以使用父類的屬性和方法 ex 狗類繼承至哺乳動物類

面向物件的編程思想：

ex：實作系統

即將代碼寫成一個個的模塊類 這個模塊就實作處理這一類事物的某種功能 誰對此模塊有需求 就呼叫即可

面向程序編程思想 ：

登錄功能 學生查詢功能，設定學生成績功能 ， 學生選課功能，

即按步驟走誰要啥功能處理啥就誰去做

面向物件語法 es5沒有類的概念，通過建構式來實作的

建構式的函式名，首字母大寫

建構式是用來創造物件用的

多型 ， 介面 ，，，

陣列

list=[]

var list = new Array();

遍歷陣列

while 回圈遍歷陣列

for in 輸出陣列下標

for 回圈遍歷陣列

for of 輸出 陣列值

arr.map(funciton(v,i){

v是值 i 是下標 map的回呼函式

})

方法

push 追加陣列元素

map 遍歷陣列

sort 排序陣列

filter（function(item){if(條件){return} }） 過濾器 過濾滿足條件的元素，賦值給新陣列

join 連接將陣列連接成字串

判斷陣列還是物件

instanceOf

Object.prototype.toString.call()

字串

split 將字串炸開 成陣列；

專案里盡量統一 ： ’ ’ / " " / 模版字串${}

正則運算式

可以實作 字串的截取的規則 替換 字符

var reg = newReg()

var reg = //;

reg.test(str); test 回傳值的布林值

reg.exec(str); exec 回傳值是匹配的內容

[] 表示范圍

$ 以什么結尾

^ 以什么開頭

() 分組

+匹配1位或多位同{1，}

？0位或1位，同{0，1}

. 匹配所有

\ 轉義

\d 數字

\w 數字 字母 下劃線

\s 空格或換行

g 貪婪模式

結構賦值

1陣列結構賦值

[ ] 下標對應

let[n,m] = [10,20]

2物件結構賦值

{name：’張三‘，age：18}

{ } 物件 key值對應

function（{name}）{

console.log(name); //直接解構{} 得到張三

}

3通過結構賦值傳遞引數

DOM

是一套標準編程介面

我們通過dom這套介面來操作

location物件

location.href 屬性回傳當前頁面的URL - “https://ww.biadu.com/"

location.hostname 主機域名： www.baidu.com

location.pathname 當前網頁的路徑和檔案名 ‘/s’

location.port 埠： 8080

location.protocol 協議： https || http

navigate

獲取瀏覽器資訊

userAgent

元素節點1 屬性節點2 文本節點3

document物件 提供很多的API（介面） 來操作Dom樹，

獲取節點：

document.getElementById();

document.getElementsByTag();

document.getElementsByClassName();

document.querySelector();

document.querySelectorAll();

設定元素內容 innerHTML innerText

節點操作：

節點操縱操縱元素節點就行其他的操作了解即可

創建元素節點： createElement

創建文本節點： createText Node

添加節點： appendChild

洗掉節點： removeChild

點擊選中不選中

<style>

    .active{

        background-color: #f40;

        color: white;

    }

</style>

<body>

    <div class="box">

        <ul>

            <li class="active">南瓜</li>

            <li class="">黃瓜</li>

            <li class="">西瓜</li>

            <li class="">窩瓜</li>

            <li class="">冬瓜</li>

        </ul>

    </div>

    <script>

        var uls = document.querySelectorAll('li');

        for(let i = 0;i<uls.length;i++){

          uls[i].onclick = function(){

                if(uls[i].className != 'active'){

                    uls[i].className = 'active';

                }else{

                    uls[i].className = ''

                }

                return ;

            }

        }

    </script>

事件：

事件源：觸發事件

事件流： 事件流向

事件函式： 執行代碼

事件流：

二個流向：

1.從內層流向外層 事件冒泡

默認情況下，事件會在冒泡階段執行

2.從外層流向內層 事件捕獲

事件系結：

addEventListener(‘eventType’,funciton)

element.onEventType = funciton

// 事件系結-封裝

// ele 元素  type 事件型別 handler回呼函式；

function bindEvent(ele,type,handler){

    if(ele.addEventListener){

        ele.addEventListener(type,handler)

    }else if(ele.attachEvent){

        ele.attachEvent('on'+type,handler)

    }else{

        ele['on'+type] = handler

    }

}

// 封裝通用的解綁函式

function unBind(ele,type,handler){

    if(ele.removeEventListener){

        ele.removeEventListener(type,handler)

    }else if(ele.detachEvent){

        ele.detachEvent('on'+type,handler)

    }else{

        ele['on'+type] = null

    }

}

//系結如果使用的匿名函式就會無法解綁 - addEventListener

區別：

addEventListener 同一元素的同一事件型別添加多個事件，不會被覆寫，而onEventType 會覆寫 ，

addEventListener可以設定元素在捕獲階段觸發事件，而onEventType不能

addEventListener(eventType,function,boolean); 默認false 觸發 true 捕獲階段觸發

阻止事件冒泡：

event.stopPropagation()

e.cancelBubble = true;

事件委托：

讓子元素事件委托給父元素來解決

var e  = e || window.event;

e.target  ||  e = event;

事件型別：

滑鼠事件：點擊 移入 移出

鍵盤事件： keyup keydown keyCode

觸屏事件：

鍵盤事件操縱元素盒子移動

ex：

div.box>

let box = document.queryselector('.box');

document.onkeydown = function(e){

    let code = e.keyCode;

    switch(Code){

        case 37: box.style.left = box.offsetLeft -num +'px' break;

        case 38:box.style.top = box.offsetTop - num +'px' break;

        case 39: box.style.left = box.offsetLeft +num +'px' break;

        case 40: box.style.top = box.offsetTop + num +'px'

    }

}

offset獲取 Left Top

client 頁面 pageX pageY

計時器：

setTimeOut（）

clearTimeOut（）

setInterval（function（）{}，times）

clearInterval（）

防抖與節流：

解決性能問題，開發中常會遇到，

防抖：對于事件內多次觸發事件的情況，可以使用防抖停止事件持續觸發，多次觸發只執行一次 ； 點擊提交

節流： 防止短時間內多次觸發使事件的情況，但是，時間間隔事件內，還需要不斷觸發， ex: window.onScroll 事件

// 防抖： 在這一段事件多次觸發 變為最后一次執行 只執行一次

///對于按鈕防點擊來說的實作：如果函式是立即執行的，就立即呼叫，如果函式是延遲執行的，就快取背景關系和引數，放到延遲函式中去執行，一旦我開始一個定時器，只要我定時器還在，你每次點擊我都重新計時，一旦你點累了，定時器時間到，定時器重置為 null，就可以再次點擊了

let timer = null

window.onscroll = function(){

  if(timer!==null){

      clearTimeout(timer);

  }

    timer = setInterval(()=>{

    if(document.documentElement.scrollTop >500){

        btn.style.display = 'none';

    }else{

        btn.style.display = 'block'

    }

        timer = null;

    }.300)

}

// 節流 throttle  設定節流閘  將多次執行變成每隔一段時間執行 持續執行  每次觸發事件時都判斷當前是否有等待執行的延時函式，

let flag = true;

window.onscroll = function(){

  if(flag){

      setInterval(()=>{

        ccc();

        timer = null;

    }.300)

  }

  flag = false;

}

window.onscroll 事件

window.scrollTO(0,0) // x , y 軸

異步編程：

同步編程：是由上倒下執行輸出

異步編程： 不會受程式卡頓影響

Promise；

專門用來處理異步操作

1回呼函式解決

        let target = 'hello world';

        function getDate(fn,c){

// fn = getDate(()=>{})

      let  timerId  = setInterval(()=>{

  fn(target);

            },500)

        }

        getDate((d)=>{

            console.log(d); //d = target

        })

2 resolve .then

let target = 'hello world';

        function getDate(){

            return new Promise((resolve)=>{

                setInterval(()=>{

                    resolve(target);

                },500)

            });

        }

        let p = getDate();

        p.then((data)=>{

            console.log(data);

        })

3 async await

async 異步編程 resolve回呼

await 會實作等待的程序

await 后接promise物件

function getDate(){

    return new Promise((resolve)=>{

        setTimeout(()=>{

            resolve(target);

        },500)

    })

}

async  fun(){

    let da1 = await getDate();

    console.log(da1);

    let da1 = await getDate();

    console.log(da1);

    let da1 = await getDate();

    console.log(da1)

}

fun();

一起學習一同成長；###### 變數

變數即資料存盤的容器

變數需要先宣告：

es5 ： 參考 語法篇

var

變數命名規范：

1見名知義

變數可以是字母，數字，下劃線，但不能是數字開頭

小寫字母開頭，小駝峰命名，第二個單詞首字母大寫

不可以是關鍵字 和保留字

因為 宣告 建構式物件 是大寫開頭

es6 ：語法篇

let 有塊級作用域 不存在變數提升

不允許重復宣告變數 let 替代 var

const 宣告常量

定義后不能修改 不變的值就能用常量宣告

函式運算式可以用const宣告

物件宣告可以用const 宣告

引入外部模塊使用常量

定義的資料型別 六種

數值：Number：

字串: String: 定義字串初始可以給"" 空串

布爾： Boolean：

未定義： Undefined 宣告未賦值的變數自動給

空： Null 未初始化物件初始值可以 給 null

物件： Object

資料型別：

原始資料型別： typeOf()檢測

原始型別 賦值時 賦值的是推記憶體中資料

Number；//Number

String //String

Boolean //Boolean

Null //object

Undefined；//undefined

參考資料型別： instanceOf（）

參考型別賦值 存盤在堆記憶體中的地址 堆疊記憶體中資料一樣 除非深拷貝

• object：

• Array // arr instanceof Array true 則 是array false則不是

• Date //

• Math //

• RegExp //

• ，，，

運算式：

通過運算子將變數，字面量組合起來，就是運算式

每一個運算式都有一個固定回傳值（運算式的結果）

列如： ‘helloworld’ + 123;

字面量： 就像字串 數字 字面上的意思

回傳值： 運算式的結果

運算子

== 只比較數值

=== 全等于 比較資料型別 和 數值

&& 邏輯與 二邊條件都得滿足

|| 邏輯或 左右一個滿足條件即可

！ 邏輯非

！！ 把任何資料型別轉化為布爾型別

？ 條件運算子 就像三目運算子 bool ？ value1：value2

typeOf（a） 其他任何操作未宣告的變數都報錯！但是typeOf 是個意外！！

條件陳述句

if

if(條件){

條件可以是布林值 運算式

if判斷條件是否滿足判定執行

}else{

不滿足條件 則執行此段代碼

}

回圈陳述句

while（條件）{

}

do{ 不管條件是否成立都執行一次

}while( 條件 ){

}

for（條件）{

雙for 回圈可以來冒泡選擇排序 遍歷

}

break: 跳出回圈

continue: 只是結束本次回圈會繼續后續的回圈

witch（）{

case1：

case2：break；

default：

}

函式基礎

函式宣告

一次宣告 可多次呼叫

函式需要呼叫才會執行

函式回傳值 return 只能回傳一個同步的代碼

解決方法：

1回呼函式 ： 將函式作引數傳遞

函式引數

形參：占坑的 形參可以比實參多 用多出來的行參之會提示undefined

為了避免undefined 可以給形參賦值即設定默認值當傳入引數時以實參為準；

實參： 實際傳參 多出來的實參不顯示

三 函式宣告提升

函式宣告的時候會整體提升

函式呼叫前會進行預決議

立即執行函式

一經宣告立即執行的函式

宣告之后直接呼叫 不能被多次呼叫執行完就被銷毀了

應用場景 第三方庫的封裝

匿名函式

函式沒有名字 一般將匿名函式當成引數傳入

回呼函式

即將 匿名函式 當成引數傳遞給另一個函式，或方法，解決了函式return 不能回傳異步代碼的問題；

      let count = 0; 

        let target = 'hello world';

        function getDate(fn,c){

            count-0; // fn = getDate(()=>{})

      let  timerId  = setInterval(()=>{

        count ++;

        if(count>=5){

        clearInterval(timerId);

        }

                fn(target,count);

            },500)

        }

        getDate((d,c)=>{

            console.log(d,c); //d = target

        })

遞回函式：

在函式體內呼叫自己 解決了函式傳遞同步代碼的問題

let target = Math.floor(Math.random() * 100 + 1);

        function guessNumber() {

            let number = prompt('請猜數多少');

            if (number == target) {

                alert('恭喜回答正確');

            } else if (number > target) {

                alert("Your guess so big");

                guessNumber();

            } else {

                alert('you guess than target so small');

                guessNumber();

            }

        }

        guessNumber();

函式運算式

定義變數或常量 ，匿名函式賦值給一個變數

沒有宣告提升的特性 一次宣告可多次呼叫

方法

arguments 是一個類陣列物件就是偽陣列，代表傳給一個function的引數串列，

Array.prototype.slice.call(arguments); 用此方法來將偽陣列轉換陣列

fn(1,2) argument[0]=1

函式作用域鏈

函式自帶區域作用域 即每創建一個函式就會創建新的作用域

里面函式可以訪問外部函式的值 外面的函式無法訪問內部函式的值

這樣就會形成作用域鏈的效果

閉包

宣告在一個函式中的函式叫做閉包函式 當內部函式被保存到外部時就形成閉包

內部函式總是可以訪問其所在外部函式中宣告的引數的變數，即使外部函式被呼叫內部函式回傳之后外部函式任然不會被銷毀，

箭頭函式

箭頭函式this 指向執行背景關系 普通函式指向的是呼叫該函式的物件

const fn = function（x,y）{

return x+y;

}

const fn = (x,y) => x+y;

建構式：

new 用來創建一個用戶定義的物件型別的實體或具有建構式的內置物件的實體，

原型物件： prototype 是建構式的一個屬性，這個屬性可以為建構式原型實體添加方法為該原型物件使用

利用原型鏈： 實作繼承（了解即可面試用）

    function Fn(name,age){

        this.name=name;

        this.age=age;

    }

    Fn.prototype.say=function(){

console.log('hello world Chunshuai')

    }



    var obj2 = new Fn("wang",20);

    console.log(obj2); // name:wang age 20 say

    // new 干了什么

    var obj= {};

        Fn.call(obj,"gao",19);

        obj.__proto__=Fn.prototype;

    console.log(obj) // name:gao age:19 say

MDN：new

1. 創建一個空的簡單JavaScript物件（即**{}**）；

2. 為步驟1新建的物件添加**proto**，prototype屬性鏈接至建構式的原型物件；

3. 將步驟1新創建的物件作為**this**的背景關系；

4. 如果該函式沒有回傳物件，則回傳**this**，

如果你沒有使用 new 運算子， 建構式會像其他的常規函式一樣被呼叫， 并*不會創建一個物件**，***在這種情況下， this 的指向也是不一樣的，

class 類：

class  Dog{

    constructor(name,agt){

        this.name = name;

        this.aget = age;

    }

    sayName(){

        console.log(`我是${this.name}`)

    }

}

let dog = new Dog('wangcai',2)

// console.log(dog.name)

Class Animal{

    constructor(name){

        this.name = name;

    }

    sayName(){

        console.log(`我是${this.name}`)

    }

}

    calss Dog extends Animal{

        constructor(name,agt){

            super(name);

            this.age = age;

        }

    }

let dog = new Dog('wangcai',2);

dog.sayName();

類： 前端開發中大部分情況我們都是使用別人定義好的類 （第三方庫 框架）

物件

自定義物件： 封裝

內置物件： Date ，獲取當前時間

• var T = new Date()

• var T = new Date(‘2021-1-1 12:00:30’); 設定時間

• 獲取時間 get

  • getfullYear() 年

  • getMonth() 月

  • getDate() 日

  • getDay() 星期

  • getHours（）

Math物件：

• floor（） 向下取整

• sqrt （） 開方

• random（） 亂數

• abs （） 絕對值

• pow （） 乘方

• ceil （） 向上取整

宿主物件： document

第三方庫的物件： jQuery Vue 等

面向物件

類： 型別 模版 統稱 ex: 狗類 鳥類

物件： 是類的一個實體，會具體到某一個事物上 ex：天上飛的那只鳥

繼承： 子類可以使用父類的屬性和方法 ex 狗類繼承至哺乳動物類

面向物件的編程思想：

ex：實作系統

即將代碼寫成一個個的模塊類 這個模塊就實作處理這一類事物的某種功能 誰對此模塊有需求 就呼叫即可

面向程序編程思想 ：

登錄功能 學生查詢功能，設定學生成績功能 ， 學生選課功能，

即按步驟走誰要啥功能處理啥就誰去做

面向物件語法 es5沒有類的概念，通過建構式來實作的

建構式的函式名，首字母大寫

建構式是用來創造物件用的

多型 ， 介面 ，，，

陣列

list=[]

var list = new Array();

遍歷陣列

while 回圈遍歷陣列

for in 輸出陣列下標

for 回圈遍歷陣列

for of 輸出 陣列值

arr.map(funciton(v,i){

v是值 i 是下標 map的回呼函式

})

方法

push 追加陣列元素

map 遍歷陣列

sort 排序陣列

filter（function(item){if(條件){return} }） 過濾器 過濾滿足條件的元素，賦值給新陣列

join 連接將陣列連接成字串

判斷陣列還是物件

instanceOf

Object.prototype.toString.call()

字串

split 將字串炸開 成陣列；

專案里盡量統一 ： ’ ’ / " " / 模版字串${}

正則運算式

可以實作 字串的截取的規則 替換 字符

var reg = newReg()

var reg = //;

reg.test(str); test 回傳值的布林值

reg.exec(str); exec 回傳值是匹配的內容

[] 表示范圍

$ 以什么結尾

^ 以什么開頭

() 分組

+匹配1位或多位同{1，}

？0位或1位，同{0，1}

. 匹配所有

\ 轉義

\d 數字

\w 數字 字母 下劃線

\s 空格或換行

g 貪婪模式

結構賦值

1陣列結構賦值

[ ] 下標對應

let[n,m] = [10,20]

2物件結構賦值

{name：’張三‘，age：18}

{ } 物件 key值對應

function（{name}）{

console.log(name); //直接解構{} 得到張三

}

3通過結構賦值傳遞引數

DOM

是一套標準編程介面

我們通過dom這套介面來操作

location物件

location.href 屬性回傳當前頁面的URL - “https://ww.biadu.com/"

location.hostname 主機域名： www.baidu.com

location.pathname 當前網頁的路徑和檔案名 ‘/s’

location.port 埠： 8080

location.protocol 協議： https || http

navigate

獲取瀏覽器資訊

userAgent

元素節點1 屬性節點2 文本節點3

document物件 提供很多的API（介面） 來操作Dom樹，

獲取節點：

document.getElementById();

document.getElementsByTag();

document.getElementsByClassName();

document.querySelector();

document.querySelectorAll();

設定元素內容 innerHTML innerText

節點操作：

節點操縱操縱元素節點就行其他的操作了解即可

創建元素節點： createElement

創建文本節點： createText Node

添加節點： appendChild

洗掉節點： removeChild

點擊選中不選中

<style>

    .active{

        background-color: #f40;

        color: white;

    }

</style>

<body>

    <div class="box">

        <ul>

            <li class="active">南瓜</li>

            <li class="">黃瓜</li>

            <li class="">西瓜</li>

            <li class="">窩瓜</li>

            <li class="">冬瓜</li>

        </ul>

    </div>

    <script>

        var uls = document.querySelectorAll('li');

        for(let i = 0;i<uls.length;i++){

          uls[i].onclick = function(){

                if(uls[i].className != 'active'){

                    uls[i].className = 'active';

                }else{

                    uls[i].className = ''

                }

                return ;

            }

        }

    </script>

事件：

事件源：觸發事件

事件流： 事件流向

事件函式： 執行代碼

事件流：

二個流向：

1.從內層流向外層 事件冒泡

默認情況下，事件會在冒泡階段執行

2.從外層流向內層 事件捕獲

事件系結：

addEventListener(‘eventType’,funciton)

element.onEventType = funciton

// 事件系結-封裝

// ele 元素  type 事件型別 handler回呼函式；

function bindEvent(ele,type,handler){

    if(ele.addEventListener){

        ele.addEventListener(type,handler)

    }else if(ele.attachEvent){

        ele.attachEvent('on'+type,handler)

    }else{

        ele['on'+type] = handler

    }

}

// 封裝通用的解綁函式

function unBind(ele,type,handler){

    if(ele.removeEventListener){

        ele.removeEventListener(type,handler)

    }else if(ele.detachEvent){

        ele.detachEvent('on'+type,handler)

    }else{

        ele['on'+type] = null

    }

}

//系結如果使用的匿名函式就會無法解綁 - addEventListener

區別：

addEventListener 同一元素的同一事件型別添加多個事件，不會被覆寫，而onEventType 會覆寫 ，

addEventListener可以設定元素在捕獲階段觸發事件，而onEventType不能

addEventListener(eventType,function,boolean); 默認false 觸發 true 捕獲階段觸發

阻止事件冒泡：

event.stopPropagation()

e.cancelBubble = true;

事件委托：

讓子元素事件委托給父元素來解決

var e  = e || window.event;

e.target  ||  e = event;

事件型別：

滑鼠事件：點擊 移入 移出

鍵盤事件： keyup keydown keyCode

觸屏事件：

鍵盤事件操縱元素盒子移動

ex：

div.box>

let box = document.queryselector('.box');

document.onkeydown = function(e){

    let code = e.keyCode;

    switch(Code){

        case 37: box.style.left = box.offsetLeft -num +'px' break;

        case 38:box.style.top = box.offsetTop - num +'px' break;

        case 39: box.style.left = box.offsetLeft +num +'px' break;

        case 40: box.style.top = box.offsetTop + num +'px'

    }

}

offset獲取 Left Top

client 頁面 pageX pageY

計時器：

setTimeOut（）

clearTimeOut（）

setInterval（function（）{}，times）

clearInterval（）

防抖與節流：

解決性能問題，開發中常會遇到，

防抖：對于事件內多次觸發事件的情況，可以使用防抖停止事件持續觸發，多次觸發只執行一次 ； 點擊提交

節流： 防止短時間內多次觸發使事件的情況，但是，時間間隔事件內，還需要不斷觸發， ex: window.onScroll 事件

// 防抖： 在這一段事件多次觸發 變為最后一次執行 只執行一次

///對于按鈕防點擊來說的實作：如果函式是立即執行的，就立即呼叫，如果函式是延遲執行的，就快取背景關系和引數，放到延遲函式中去執行，一旦我開始一個定時器，只要我定時器還在，你每次點擊我都重新計時，一旦你點累了，定時器時間到，定時器重置為 null，就可以再次點擊了

let timer = null

window.onscroll = function(){

  if(timer!==null){

      clearTimeout(timer);

  }

    timer = setInterval(()=>{

    if(document.documentElement.scrollTop >500){

        btn.style.display = 'none';

    }else{

        btn.style.display = 'block'

    }

        timer = null;

    }.300)

}

// 節流 throttle  設定節流閘  將多次執行變成每隔一段時間執行 持續執行  每次觸發事件時都判斷當前是否有等待執行的延時函式，

let flag = true;

window.onscroll = function(){

  if(flag){

      setInterval(()=>{

        ccc();

        timer = null;

    }.300)

  }

  flag = false;

}

window.onscroll 事件

window.scrollTO(0,0) // x , y 軸

異步編程：

同步編程：是由上倒下執行輸出

異步編程： 不會受程式卡頓影響

Promise；

專門用來處理異步操作

1回呼函式解決

        let target = 'hello world';

        function getDate(fn,c){

// fn = getDate(()=>{})

      let  timerId  = setInterval(()=>{

  fn(target);

            },500)

        }

        getDate((d)=>{

            console.log(d); //d = target

        })

2 resolve .then

let target = 'hello world';

        function getDate(){

            return new Promise((resolve)=>{

                setInterval(()=>{

                    resolve(target);

                },500)

            });

        }

        let p = getDate();

        p.then((data)=>{

            console.log(data);

        })

3 async await

async 異步編程 resolve回呼

await 會實作等待的程序

await 后接promise物件

function getDate(){

    return new Promise((resolve)=>{

        setTimeout(()=>{

            resolve(target);

        },500)

    })

}

async  fun(){

    let da1 = await getDate();

    console.log(da1);

    let da1 = await getDate();

    console.log(da1);

    let da1 = await getDate();

    console.log(da1)

}

fun();

一起學習一同成長；