字符對(duì)應(yīng)的ASC碼值

97 ：a

65 ：A

48 ：0

32 ：空格

12 ：回車

10：ctrl+回車

鍵盤事件

鍵盤事件通常都為document

鍵盤彈起時(shí)刻觸發(fā)：document.onkeyup

鍵盤按下時(shí)刻觸發(fā)：document.onkeydown

生成一個(gè)字符時(shí)觸發(fā)：document.onkeypress

判斷ctrl是否按下：ctrlkey

通過(guò)dom節(jié)點(diǎn)方式綁定

document.getElementsByTagName("button")[1];

缺陷：

a.無(wú)法為同一個(gè)元素多次綁定相同的事件

b.無(wú)法決定事件流的傳遞是冒泡還是捕獲

解決方案:事件監(jiān)聽(tīng)

dom節(jié)點(diǎn).addEventListener("去掉on的事件名",事件體回調(diào)函數(shù),[冒泡false/捕獲true]);

? ? 好處:a.可以為同一個(gè)元素多次綁定相同的事件

? ? 捕獲和冒泡同時(shí)存在，則先捕獲后冒泡

事件的解綁就是將事件賦值為null

2.事件監(jiān)聽(tīng)的解綁

必須解綁的回調(diào)函數(shù)和綁定的回調(diào)函數(shù)是同一個(gè)

事件的委托:子元素觸發(fā)的事件，但是功能由父元素完成

事件委托依賴于事件流的冒泡

1.可以將批量綁定的子元素事件，綁定至父元素，從而大大提高程序運(yùn)行效率

問(wèn)題:怎么獲取真實(shí)觸發(fā)事件的事件元素

獲取真實(shí)觸發(fā)事件的事件元素 evt.target || evt.srcElement

事件委托的的好處2:可以為未來(lái)的元素，提前添加事件

先有down,再有move和up

# 面向過(guò)程編程和面向?qū)ο缶幊趟枷氲膮^(qū)別

00

```javascript

1.面向過(guò)程編程:強(qiáng)調(diào)步驟順序

程序 = 算法 + 語(yǔ)法;

#面向過(guò)程編程思想的缺陷:

a.隨著問(wèn)題規(guī)模的增加，代碼逐漸難以控制

b.復(fù)用性很差，只能復(fù)用函數(shù)

2.面向?qū)ο蟮木幊?強(qiáng)調(diào)對(duì)象(最后在考慮過(guò)程，但肯定不是拋棄了過(guò)程)

程序 = 對(duì)象1 + 對(duì)象2 + ... + 對(duì)象n

對(duì)象:萬(wàn)物結(jié)尾對(duì)象

# 類和對(duì)象的概念

```javascript

屬性->抽象時(shí)的名詞

name

age

score

方法->抽象時(shí)的動(dòng)詞

doHomework

eat

楊戩 ? ?女?huà)z ? ? 玉帝 ? ? ? God

讓大家分類時(shí)我們?cè)诟墒裁?

對(duì)每一個(gè)對(duì)象進(jìn)行抽象

抽象->對(duì)事物加以描述的過(guò)程

#類:擁有相同屬性和行為的對(duì)象的集合(模板)

#對(duì)象:類的實(shí)例化(強(qiáng)調(diào)真實(shí)存在且唯一性)

let arr = new Array(1,2,3);

let str = new String("heihei");

let reg = new RegExp('heiehi');

let date = new Date();

#目標(biāo):為了創(chuàng)建自定義類型

let s1 = new Student("老王","18",100);

```

# ES5創(chuàng)建類

```javascript

JS運(yùn)用了面向?qū)ο蟮乃枷?，但是確沒(méi)有類的語(yǔ)法

#解決方案:用函數(shù)模擬類,被當(dāng)做類的函數(shù)本質(zhì)是構(gòu)造函數(shù)

#this

1.與事件體連用,代表觸發(fā)該事件的元素

2.與普通函數(shù)連用,代表調(diào)用該函數(shù)的對(duì)象

3.與箭頭函數(shù)連用,代表其父元素的前綴

4.與構(gòu)造方法連用,代表new出來(lái)的對(duì)象

function Student(name,age,score){

? ? //成員屬性的創(chuàng)建

? ? this.name = name;

? ? this.age = age;

? ? this.score = score;

? ? this.doHomework = function(){

? ? ? ? console.log("doHomework");

? ? }

? ? this.eat = function(){

? ? ? ? console.log("eat");

? ? }

? ? //當(dāng)一個(gè)成員函數(shù)要使用其他的成員，必須添加前綴this

? ? this.showValue = function(){

? ? ? ? console.log(this.name,this.age,this.score);

? ? ? ? this.eat();

? ? ? ? this.doHomework();

? ? }

}

let s1 = new Student("坤坤",18,100);

// console.log(s1.name,s1.age,s1.score);

// s1.doHomework();

// s1.eat();

s1.showValue();

// let s2 = new Student("凢凢",30,100);

// console.log(s2.name,s2.age,s2.score);

// s2.doHomework();

// s2.eat();

// let data = {

// ? ? "a":111,

// ? ? "fun":function(){

// ? ? ? ? console.log(this.a);

// ? ? }

// }

// data.fun();

```

# 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別(重點(diǎn))

```javascript

1.習(xí)慣上構(gòu)造函數(shù)首字母大寫 ?

2.構(gòu)造函數(shù)必須和new連用，

3.構(gòu)造函數(shù)不能添加return，因?yàn)樽詣?dòng)返回的是是地址

```

# ES6創(chuàng)建類

```javascript

class 類名 {

? ? ? ? //構(gòu)造函數(shù)->new時(shí)調(diào)用的函數(shù)

? ? ? ? constructor(參數(shù)列表){

? ? ? ? }

? ? ? ? 去掉function的普通函數(shù)

? ? }

class Student{

? ? constructor(name,age,score){

? ? ? ? this.name = name;

? ? ? ? this.age = age;

? ? ? ? this.score = score;

? ? }

? ? eat(){

? ? ? ? console.log(`${this.name}:eat`);

? ? }

}

let s1 = new Student("坤坤",18,100);

console.log(s1.name,s1.age,s1.score);

s1.eat();

```

# 類的組合

```javascript

組合:一個(gè)類的成員屬性是另一個(gè)類的對(duì)象

案例：

class Birthday{

? ? constructor(y,m,d){

? ? ? ? this.y = y;

? ? ? ? this.m = m;

? ? ? ? this.d = d;

? ? }

? ? showValue(){

? ? ? ? console.log(this.y,this.m,this.d);

? ? }

}

class Student{

? ? constructor(name,age,score,bir){

? ? ? ? this.name = name;

? ? ? ? this.age = age;

? ? ? ? this.score = score;

? ? ? ? this.bir = bir;

? ? }

? ? eat(){

? ? ? ? console.log(`${this.name}:eat`);

? ? }

}

let bir = new Birthday(1999,3,16);

// bir.showValue();

let s = new Student("iKun",18,100,bir);

console.log(s);

```

? ? 解構(gòu)賦值：解析結(jié)構(gòu)進(jìn)行賦值

? ? 1.批量初始化 let x=y=z=1;

? ? a.按照數(shù)組的格式初始化 et [x,y,z] = [1,2,3];

? ? b.按照對(duì)象的格式初始化 let {name,age} = {"name":"laowang","age":18};

? ? 作用：去掉json對(duì)象的前綴, 注意事項(xiàng):變量名必須和key一致,訪問(wèn)時(shí)指向key所在的對(duì)象

? ? set:集合，沒(méi)有下標(biāo)，自動(dòng)去重 let set = new Set(數(shù)組);

? ? let set = new Set([5,5,4,2,3,2,3,7,8,1,1]);

? ? add(參數(shù)) 向集合中添加一個(gè)元素 ? ?delete(值) 刪除集合中某個(gè)數(shù)

? ? has(值) 判斷集合中是否含有某個(gè)值 ?clear() 清空集合

? ? 數(shù)組去重

? ? let arr = [5,5,4,2,3,2,3,7,8,1,1];

? ? let set = new Set(arr);

? ? ?將容器set轉(zhuǎn)換為數(shù)組類型

? ? // arr = Array.from(set);

? ? map:映射，一個(gè)容器中存儲(chǔ)的都是鍵值對(duì)

? ? set(key,value) 向集合中添加一個(gè)元素:key以存在，則為改，不存在則為增

? ? get(鍵) ?根據(jù)鍵去取值

? ? delete(鍵) 刪除集合中某個(gè)數(shù)

? ? has(鍵) 判斷集合中是否含有某個(gè)值

? ? clear() 清空集合

? ? //迭代函數(shù)的功能:

? ? //實(shí)現(xiàn)了循環(huán)，用戶只需要自己寫功能

? ? // forEach 功能:遍歷數(shù)組所有元素，并且實(shí)現(xiàn)回調(diào)函數(shù)的功能

? ? // 參數(shù):forEach(回調(diào)函數(shù)) 回調(diào)函數(shù)(數(shù)組元素?cái)?shù)值,[數(shù)組下標(biāo),數(shù)組名]){ }

? ? // 返回值:無(wú)

? ? ? 請(qǐng)回答:map和forEach的異同?

? ? // 返回值,forEach無(wú) ?map返回的是回調(diào)函數(shù)return的值，拼接的數(shù)組

? ? // filter ?功能:過(guò)濾,根據(jù)回調(diào)函數(shù)返回的布爾值篩選元素

? ? // filter 功能:遍歷數(shù)組所有元素，并且實(shí)現(xiàn)回調(diào)函數(shù)的功能

? ? // 參數(shù):filter(回調(diào)函數(shù)) 回調(diào)函數(shù)(數(shù)組元素?cái)?shù)值,[數(shù)組下標(biāo),數(shù)組名]){ }

? ? // 返回值:回調(diào)函數(shù)return的布爾值，篩選后拼接的數(shù)組

? ? map 實(shí)現(xiàn)了循環(huán)，用戶只需要自己寫功能

? ? // map 功能:遍歷數(shù)組所有元素，并且實(shí)現(xiàn)回調(diào)函數(shù)的功能

? ? // 參數(shù):forEach(回調(diào)函數(shù)) 回調(diào)函數(shù)(數(shù)組元素?cái)?shù)值,[數(shù)組下標(biāo),數(shù)組名]){ }

? ? // 返回值:回調(diào)函數(shù)return的值，拼接的數(shù)組