JS的三大組成？

 1. ECMAScript
??基本的語(yǔ)法：變量，數(shù)據(jù)類型，if，for，函數(shù)， 對(duì)象，數(shù)組 ，String，Math，Date

??1. 基本數(shù)據(jù)類型的種類： 數(shù)值類型 字符串類型 布爾類型 .空類型 .未類型
??2. 類型轉(zhuǎn)換： 
???轉(zhuǎn)數(shù)字類型（Number(x),parseInt(x),parseFloat(x)），
???轉(zhuǎn)字符串類型(String(x), x.toString())，
???轉(zhuǎn)布爾(Boolean(x))
?????0?NaN?undefined?null?false?'' 轉(zhuǎn)false
??3. 檢測(cè)基本數(shù)據(jù)類型的方法 ： typeof(n)
??4. 檢測(cè)是否是非數(shù)字： isNaN(x)
??5. == 和 === 的區(qū)別？
???==判斷等號(hào)前后值是否相等?==只比較值，不比類型
???===判斷等號(hào)前后值和數(shù)據(jù)類型是否都相同 ===?即比較值，又比類型
??6. ++a和a++的區(qū)別？
???++a:a先+1，再操作
???a++：先操作，再a+1
?分支語(yǔ)句： if語(yǔ)句和switch語(yǔ)句
???if(條件表達(dá)式){}
???switch(key){
?????case "常量"
?????語(yǔ)句體；
?????break；
?????...
?????default
?????break;
???}
?循環(huán)語(yǔ)句： for和while的區(qū)別？
???????for循環(huán)多用于循環(huán)次數(shù)明確的循環(huán)，while循環(huán)循環(huán)次數(shù)不明確
?break和contiue： 
??????break終止本層循環(huán)，不再循環(huán)
??????contiue終止本次循環(huán)，繼續(xù)下一次循環(huán)
?函數(shù)： 
???1. 函數(shù)的定義方式有幾種？?
???聲明式定義函數(shù) （function fn(){}）?
???賦值式定義函數(shù) (var fn = function(){})
?????區(qū)別：聲明式定義函數(shù) 調(diào)用可以在函數(shù)的上面或下面
???????賦值式定義函數(shù) 調(diào)用的時(shí)候只能函數(shù)的下面
???2. return的作用：
?????1. 終止函數(shù)的執(zhí)行
?????2. 返回函數(shù)的計(jì)算結(jié)果
?????3. 一次只能帶出來(lái)一個(gè)值
?????4. 寫在函數(shù)的最底部，盡量不要寫在循環(huán)內(nèi)
?????5. 任何函數(shù)都有return，

???3. 參數(shù)：
?作用域：
???局部變量和全局變量的區(qū)別：
?????1. 定義位置：
???????全局：script內(nèi)部，函數(shù)外部
???????局部：函數(shù)內(nèi)部，函數(shù)的參數(shù)上
?????2. 生效范圍:
???????全局：任何位置都可以訪問(wèn)
???????局部：只能在定義的函數(shù)內(nèi)部訪問(wèn)，外部訪問(wèn)不到
?????3. 生命周期：
???????全局變量：打開頁(yè)面即產(chǎn)生，關(guān)閉頁(yè)面即銷毀
???????局部變量：調(diào)用函數(shù)就產(chǎn)生，調(diào)用完畢就銷毀

??function move(){
???var timer = null;
???clearInterval(timer);
???timer = setInterval(function(){},100)
??}

?預(yù)解析：
???js引擎在執(zhí)行js代碼時(shí)，先把聲明部分提升當(dāng)前作用域最頂端，然后代碼依次從上向下執(zhí)行。提升：變量提升（var a）和函數(shù)提升(function fn(){})
?對(duì)象： 
???增： obj.屬性名= "屬性值"???obj["屬性名"]= "屬性值 "????obj中不存在屬性名就是增????????var obj = {}?obj.username = "張三"????ele.timer =1
???改： obj.屬性名= "屬性值"???obj["屬性名"]= "屬性值 "????obj中存在屬性名就是改
???刪除： delete obj.屬性名??
???查看： console.log(obj.屬性名)??console.log(obj['屬性名'])?

???對(duì)象的遍歷：
????var obj = {width:100,height:100,left:100}
????setInterval(function(){
?????for(let key in obj){
????????1. 獲取屬性當(dāng)前所在的位置
????????var oattr = parseInt(window.getComputedStyle(oDiv)[key]); // 

????????2. 
????????oattr+= 5;

????????3. 
????????oDiv.style[key] = oattr+"px"
?????}
????},15)

???鍵的唯一性： 去重
???訪問(wèn)對(duì)象中不存在的鍵?結(jié)果為 undefined
???數(shù)組 ，
?????改變?cè)瓟?shù)組： 
?????push===arr.push(元素)，數(shù)組尾部增加元素，返回增加后數(shù)組的長(zhǎng)度
?????pop====arr.pop(元素)，駐足尾部刪除一個(gè)元素，返回被刪除的元素
?????unshift====arr.unshift(元素)，數(shù)組頭部刪除一個(gè)元素，返回被刪除的元素
?????shift====arr.shift(元素)，數(shù)組頭部增加元素，返回增加后數(shù)組長(zhǎng)度
?????splice====arr.splice(i,n,元素1)，從下標(biāo)為i的元素開始刪除n個(gè)元素，并插入元素1，以數(shù)組形式返回被刪除的元素
?????sort=====arr.sort(),根據(jù)ASCII表進(jìn)行排序，返回排序后的函數(shù)
???????=====arr.sort(function(a,b){return a-b})
???????a-b=====從小到大排列
???????b-a=====從大到小排列
?????reverse===arr.reverse()翻轉(zhuǎn),返回翻轉(zhuǎn)后的數(shù)組
?????不改變數(shù)組： 
?????concat()=====arr.concat(arr1),拼接數(shù)組，返回拼接好的數(shù)組
?????indexOf()=====arr.indexOf(元素)，根據(jù)元素從前往后查找元素首次出現(xiàn)對(duì)應(yīng)的下標(biāo)，找到了返回下標(biāo)，找不到返回-1
?????lastIndexOf()====arr.lastIndexOf(元素)，根據(jù)元素從后往前查找元素首次出現(xiàn)對(duì)應(yīng)的下標(biāo)，找到了返回下標(biāo)，找不到返回-1
?????join("=")====arr.join("以符號(hào)")，將數(shù)組以操作符號(hào)形式拼接成字符串，返回拼接好的字符串
?????slice(開始下標(biāo),結(jié)束下標(biāo))====arr.slice(i,n)從下標(biāo)為i的元素開始截取，截取到n停止，并不包含n，返回截取出的數(shù)據(jù)
?????es5新增的：?
?????map(function(item,index){})，映射，返回映射后的新數(shù)組
?????filter(function(item,index){})，過(guò)濾，返回過(guò)濾后的新數(shù)組
?????reduce(function(sum,item,index){},0)，遍歷數(shù)組求和，返回和?
?????some(function(item,index){})，數(shù)組中只要有一個(gè)元素滿足條件就返回true，都不滿足返回false?
?????every(function(item,index){})，數(shù)組中所有元素滿足條件返回true，有一個(gè)不滿足條件返回false???
?????forEach()，等同于for循環(huán)，循環(huán)遍歷，返回遍歷后的數(shù)組
?????es6新增的： 
?????find()查找第一個(gè)滿足條件的元素，返回查找到的元素
?????findIndex()查找第一個(gè)滿足條件的元素的下標(biāo)，返回元素下標(biāo)
?????
?????封裝函數(shù)，判斷任意數(shù)組中是否包含n，返回true和false、
??????????
???String，
?????1. concat()
?????2. indexOf()
?????3. lastIndexOf()

?????4. slice(開始下標(biāo),結(jié)束下標(biāo))
?????5. substring(開始下標(biāo),結(jié)束下標(biāo))
?????6. substr(開始下標(biāo),長(zhǎng)度)

?????7. toUpperCase()轉(zhuǎn)大寫
?????7. toLowerCase()轉(zhuǎn)小寫
?????7. trim()去除字符串前后空格

?????8。 split(",")
?????8。 replace("舊字符","新字符")

?????9. str.charAt(下標(biāo))
?????9. str.charCodeAt(下標(biāo))

???Math，
?????Math.max()最大值
?????Math.min(m，n)最小值
?????Math.sqrt(b)對(duì)b開根號(hào)
?????Math.pow(m,n)m的n次方
?????Math.random()隨機(jī)數(shù)
?????Math.round(n)四舍五入
?????Math.abs(n)取絕對(duì)值
?????Math.floor(n)向下取整
?????Math.ceil(n)向上取整
???Date:
?????var date = new Date()
?????var date = new Date("2023/09/09")
 2. BOM
??window對(duì)象的屬性和方法
???window.innerWidth 瀏覽器可視寬（包含滾動(dòng)條）
???window.innerHeight 瀏覽器可視高（包含滾動(dòng)條）

???window.location.href = ''?跳轉(zhuǎn)到目標(biāo)路徑
???window.location.href?當(dāng)前頁(yè)面路徑
???window.location.reload()?刷新
???window.history.go(1) 前進(jìn)一個(gè)頁(yè)面
???window.history.go(-1) 后退一個(gè)頁(yè)面
???window.history.go(0) 刷新頁(yè)面
???window.localStroage.setItem("key","value") 設(shè)置數(shù)據(jù)庫(kù)內(nèi)容??===========?值要求是一個(gè)字符串類型??
???window.localStroage.getItem("key") 從數(shù)據(jù)庫(kù)獲取
???window.localStroage.removeItem("key")?從數(shù)據(jù)庫(kù)刪除
???window.localStroage.clear() 清除數(shù)據(jù)庫(kù)數(shù)據(jù)

        window.alert()  彈出框
        window.confirm()    確認(rèn)框
        window.prompt() 

        window.open('url','_blank') 
        window.open('url','_blank','width:300px;height:300px')
        window.close()

        window.setInterval()
        window.setTimeout()
      window.onscroll = function(){}
      window.onresize = function(){}
      window.onload = function(){}
 3. DOM：
     DOM上:  獲取元素
              操作元素：
                 內(nèi)容：
                    獲取內(nèi)容:  ele.innerHTML（獲取所有元素）   
                        ele.innerText（獲取文本）   
                        ele.value（表單元素獲取內(nèi)容）
                    設(shè)置內(nèi)容:  ele.innerHTML=   ele.innerText=   ele.value=
                 樣式：
                     獲取樣式：  
                        window.getComputedStyle(ele).屬性名    
                        window.getComputedStyle(ele)['屬性名']      
                        var x = '屬性名'    window.getComputedStyle(ele)[x] 
                     設(shè)置樣式：  ele.style.屬性名=  ''   ele.className =''   ele.classList.add("")
                 屬性:
                     固有屬性的設(shè)置:ele.屬性名     = ‘’
                     固有屬性的獲?。?ele.屬性名      
                     自定義屬性的設(shè)置: ele.setAttribute("屬性名","屬性值")
                     自定義屬性的獲?。篹le.getAttribute("屬性名")   
                     h5屬性：  ele.dataset.屬性名= 值      ele.dataset.屬性名 
                            行內(nèi)顯示方式    data-屬性名=屬性值
     DOM下： 
          節(jié)點(diǎn)：  
             元素節(jié)點(diǎn)
             注釋節(jié)點(diǎn)
             文本節(jié)點(diǎn)
             屬性節(jié)點(diǎn)

          節(jié)點(diǎn)的遍歷：  ele.firstChild  ele的第一個(gè)節(jié)點(diǎn)    ele.nextSibling  ele的下一個(gè)元素
          元素節(jié)點(diǎn)的遍歷：  ele.firstElementChild   ele的第一個(gè)元素節(jié)點(diǎn)    
          ele.nextElementSibling  ele的下一個(gè)元素節(jié)點(diǎn)
          ele.previousElementSibling  ele的上一個(gè)元素
           ele.children  ele的所有元素

          節(jié)點(diǎn)的操作：
             1. document.createElement("標(biāo)簽名")  創(chuàng)建節(jié)點(diǎn)
             2. 追加 ： 父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn))
             3. 插入    父節(jié)點(diǎn).insertBefore(新舊點(diǎn),誰(shuí)的前面)
             4. 刪除    節(jié)點(diǎn).remove()刪除自身   父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))刪除父節(jié)點(diǎn)下的子節(jié)點(diǎn)
             5. 克隆   節(jié)點(diǎn).cloneNode(true、false)   true：克隆節(jié)點(diǎn)所有內(nèi)容，false：克隆節(jié)點(diǎn)本身
     事件上:
            1. 事件的三要素 
                事件源，事件類型，事件處理函數(shù)
            2. 事件的綁定：DOM0   DOM2    DOM0的缺點(diǎn)
            3. 事件的解綁：ele.onclick = null        ele.removeEventListener("事件類型",fn,true)
            4. 事件類型:
                window的三個(gè)事件
                表單事件：  onfocus   onblur   onchange    oninput    onsubmit  onreset
                鼠標(biāo)事件：  oncontextmenu， 鼠標(biāo)右擊    
                            mouseover（移入到子元素上會(huì)觸發(fā)父元素的移入事件
                            mouseenter（移入到子元素上不會(huì)觸發(fā)父元素的移入事件）
                             onmousedown  按下
                             onmousemove 移動(dòng)
                             onmouseup 抬起
                鍵盤事件：  keydown 任意鍵盤按下
                            keypress 功能鍵
                            keyup  鍵盤抬起

            5. 事件對(duì)象： 
                 事件發(fā)生時(shí)，事件對(duì)象上記錄了一系列跟該事件的相關(guān)信息
                 鼠標(biāo)事件對(duì)象的屬性： e.clientX 相對(duì)于瀏覽器可視窗口的X坐標(biāo) e.pageX 相對(duì)于文檔的X坐標(biāo) e.offsetX 相對(duì)于觸發(fā)事件事件源的X坐標(biāo)
                 鍵盤事件對(duì)象的屬性： e.keyCode 數(shù)字型鍵碼   e.ctrlKey  返回布爾值，同時(shí)按下ctrl和其他任意鍵返回true，其他返回false
                 ele.onclick = function(e){
                     e.clientX
                     e.pageX
                     e.offsetX  = e.clientX - oDiv.offsetLeft
                 }

                 oIpt.onkeyup = function(){
                    e.keyCode   
                    e.ctrlKey 返回一個(gè)布爾值    按下ctrl的同時(shí)還按下了其他的鍵
                 }

                 e.stopPropagation() ： 阻止冒泡
                 e.preventDefault()：  阻止默認(rèn)行為

     事件下:
        事件流(事件傳播)：
           ie支持 事件冒泡： 事件發(fā)生時(shí)，執(zhí)行順序從具體觸發(fā)元素開始沿著結(jié)構(gòu)父級(jí)向上傳播到DOM的最頂級(jí)元素
           網(wǎng)景支持 事件捕獲： 事件發(fā)生時(shí)，執(zhí)行順序從DOM的最頂級(jí)元素開始沿著結(jié)構(gòu)父級(jí)向下傳播到具體觸發(fā)元素
           w3c: 先捕獲，目標(biāo)，冒泡
        如何阻止冒泡： e.stopPropagation() ： 阻止冒泡
        如何阻止默認(rèn)行為： e.preventDefault()
        DOM0之支持冒泡
        DOM2支持冒泡，也支持捕獲
        ele.addEventListener("", function(){}, true)捕獲
        ele.addEventListener("", function(){}, false)冒泡

        事件委托： 利用事件冒泡，將原本綁定在子元素上事件委托給父元素，使用e.target來(lái)表示具體點(diǎn)擊的元素
        好處：減少綁定次數(shù)，提高系統(tǒng)性能，新增的子元素會(huì)自動(dòng)獲取父元素上所有的事件 

"zahngsan" 普通字符串

'{"username":"zahngsan"}' JSON字符串 JSON.parse(obj) 轉(zhuǎn)對(duì)象 {username:"zahngsan"}

'[{"username":"zahngsan"},{"username":"zahngsan"}]' JSON字符串 JSON.parse(obj) 轉(zhuǎn)數(shù)組對(duì)象 [{"username":"zahngsan"},{"username":"zahngsan"}]

var obj = {name:"zs"}

JSON.stringify(obj) ==== '{"name":"zs"}'

localStroage.setItem("key","username")

var obj = {name:"zs"}

localStroage.setItem("key", JSON.stringify(obj) )

• 
  

ES6新增的語(yǔ)法：

1.定義變量的關(guān)鍵字

定義變量的語(yǔ)法：let，var

區(qū)別：

1.是否支持同一作用域變量同名 var支持，let不支持

2.是否支持預(yù)解析 var支持，let不支持預(yù)解析

3.是否掛載在window上 var支持，let不支持

4.是否存在暫時(shí)性死區(qū)（定義之前的區(qū)域是死區(qū)，不能在這個(gè)死區(qū)中操作）var沒(méi)有死區(qū)，let有死區(qū)

5.是否存在塊級(jí)作用域 let存在，var不存在

let定義的變量只能在塊級(jí)作用域里面訪問(wèn)，外部訪問(wèn)不到

定義常量的語(yǔ)法： const 常量名=值；

常量：定義完畢之后不能被更改

const和let的共同點(diǎn)：

1.不支持同一作用域常量/變量同名

2.不支持預(yù)解析

3.不會(huì)掛載在window對(duì)象上

4.存在暫時(shí)性死區(qū)

5.存在塊級(jí)作用域

不同點(diǎn)：

1.let定義的變量值，值能被修改。const定義的常量值，值不能被修改

2.let定義變量時(shí)，可以先申明，后賦值。const定義常量時(shí)，必須聲明即賦值

2.箭頭函數(shù)：是對(duì)匿名函數(shù)的一些改造

var fn=function（）{}========var fn=（）=>{}

1.箭頭函數(shù)的參數(shù)只且只有一個(gè)參數(shù)時(shí)，（）可以省去

2.函數(shù)體只有一行代碼時(shí){}可以省

3.只有一行代碼和return，需要把{}和return同時(shí)省

4.箭頭函數(shù)中不綁定this，他的this指向的是該箭頭函數(shù)上一級(jí)函數(shù)所在作用域的this

3.字符串：模板字符串

includes（判斷字符串是否包含某個(gè)字符或小字符串，返回布爾值），

repeat（讓字符串重復(fù)n次，返回重復(fù)后的字符串），

startsWith，endsWith（判斷是否以什么開始，以什么結(jié)束，返回布爾值）

4數(shù)組和對(duì)象：解構(gòu)賦值

將數(shù)組或?qū)ο笾行枰脑鼗蜴I快速?gòu)臄?shù)組或?qū)ο笾薪鈽?gòu)出來(lái)

對(duì)象可以給對(duì)象的鍵名重命名

document.onclick=function(e){

var{clientX,clientY}=e

console.log(clientX);

console.log(clientY);

}

5.map集合set集合

set集合：一種類似于數(shù)組的數(shù)據(jù)結(jié)構(gòu)，會(huì)將元素自動(dòng)去重

定義語(yǔ)法：var set=new set{[1,2,3,4,3,2,1,3,4,7,6]}

map集合：一種類似于對(duì)象的數(shù)據(jù)結(jié)構(gòu)

定義的語(yǔ)法：var map=new Map（）

添加：map.set（"key","value")

6.for。。。of

可以遍歷map集合，item是數(shù)組形式['key','value']

for...of與for...in的區(qū)別：

1.對(duì)于數(shù)組的遍歷，兩個(gè)都可以,for...of遍歷數(shù)組的元素，for...in遍歷數(shù)組的下標(biāo)，

2.對(duì)于對(duì)象遍歷，只能for...in遍歷

7class類

8.函數(shù)：默認(rèn)參數(shù)

用戶沒(méi)有傳遞實(shí)參時(shí)，使用的是默認(rèn)參數(shù)，傳遞了參數(shù)使用傳遞的參數(shù)

9.數(shù)組中find和findIndex

10.模塊化開發(fā)

11.擴(kuò)展運(yùn)算符：...

1。數(shù)組元素，對(duì)象元素的展開

var arr=[1,2,3,4]

consule.loag(...arr)

2.合并數(shù)組，合并對(duì)象

3.將偽數(shù)組轉(zhuǎn)化為數(shù)組

4.將函數(shù)的實(shí)參合并成數(shù)組

function getSum（...arge）{數(shù)組形式的實(shí)參

            console.log(args)
        }

// 01-es6中新增了哪些內(nèi)容

// 1. 定義變量的關(guān)鍵字

// 2. 函數(shù)： 箭頭函數(shù)

// 3. 字符串：模版字符串

// 4. 數(shù)組和對(duì)象： 解構(gòu)賦值

// 5. map集合set集合

// 6. for...of

// 7. class類

// 8. 函數(shù): 默認(rèn)參數(shù)

// 9. 數(shù)組中：find 和findIndex()

// 10. 模塊化開發(fā)

// 02-基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別

// 基本數(shù)據(jù)類型：Number。String。Boolean。Null，Undefined

// 引用數(shù)據(jù)類型： function Object、Array、Math、Date等

// 相同點(diǎn)： 變量名字都在棧內(nèi)存存儲(chǔ)

// 不同點(diǎn)：

// 1. 基本數(shù)據(jù)類型的變量存儲(chǔ)的就是一個(gè)值

// 引用數(shù)據(jù)類型的變量存儲(chǔ)的是一個(gè)地址值，

// 這個(gè)地址值在堆內(nèi)存中是有一個(gè)對(duì)應(yīng)的地址

// 2. 基本數(shù)據(jù)類型的變量存儲(chǔ)的值 在棧內(nèi)存中存儲(chǔ)

// 引用數(shù)據(jù)類型的變量存儲(chǔ)的值 在堆內(nèi)存中存儲(chǔ)

// 、

// 3. 基本數(shù)據(jù)類型的值和值之間相互不影響

// 引用數(shù)據(jù)類型和引用數(shù)據(jù)類型 在公用同一個(gè)地址的情況下，

// 其中一個(gè)的值發(fā)生變化，另外一個(gè)也跟著變