1.數(shù)組的方法：

join() :把元素轉(zhuǎn)換成字符串
reverse():顛倒數(shù)組元素
sort():數(shù)組排序
contact():將元素添加到數(shù)組后
slice():返回一個指定數(shù)組片段
splice():插入或刪除數(shù)組

var a =[1,2,3,4,3,2,3,4]
a.splice(4)    // return [3,2,3,4]   a=[1,2,3,4]
a.splice(1,2)  // return  [2, 3]   a=[1,4]
a.splice(2,0,'a','b') return []        a=[1, 4, "a", "b"]

push():將元素加到數(shù)組尾部
pop():刪除數(shù)組的最后一個元素
unshift():將元素插入到數(shù)組頭部
shift():刪除數(shù)組的第一個元素
toString()悲没、 toLacaleString()榨咐、indexOf()膏燃、lastIndexOf()垃杖、forEach()、map()、filter()

2.函數(shù)

2.1構(gòu)造函數(shù)

初始化一個對象的屬性并且專門和new運算符一起使用的一個函數(shù)

//聲明一個"人"的構(gòu)造函數(shù),目的是通過new出來的對象都是一個個的具體的"人"
var Person=function(){
  
  //私有屬性,該屬性new出來的對象時無法獲取到的.
  var prx="other";

  //定義了name的屬性
  //在這里name是實例屬性,也就是說,通過new出來的對象都具備name的屬性
  this.name="double";
  
  //我們用var 申明了一個私有方法,該方法 不能被 new Person 調(diào)用到,
  //一般的,我們只需要再內(nèi)部使用到的方法可最好聲明稱私有方法.
  var prxMethond=function(){
      console.log("in prxMethod");
  }
  //定義了say的方法
  //同name,say是一個實例方法,new出來的對象都有say的方法
  this.say=function(){
    console.log("hi i am "+this.name);
   }
}
//為Person定義了一個原型方法eat,該方法為公共方法,
//每一個通過new Person 實例出來的對象都共享同一個eat方法,
//當然如果不想共享可在新對象中進行重寫覆蓋
Person.prototype.eat=function(){
  console.log(this.name+"eat something...");
}

在Js中使用new 關(guān)鍵字調(diào)用一個函數(shù)的問題:

var Chinese=new Person();

實際上內(nèi)部是這樣的：

var Chinese={};
Chinese.__proto__=Person.prototype;
Person.call(Chinese);

上面三句代碼的說明:

聲明了一個Chinese的空對象
將Person的prototype賦值給Chinese的proto屬性
關(guān)于對象的prototype和proto概念如下:
prototype是函數(shù)的一個屬性（每個函數(shù)都有一個prototype屬性），這個屬性是一個指針昂拂，指向一個對象鞭缭。它是顯示修改對象的原型的屬性剖膳。
proto是一個對象擁有的內(nèi)置屬性（每個對象都有一個proto屬性），是JS內(nèi)部使用尋找原型鏈的屬性岭辣。
這就是為什么Chinese可以調(diào)用到Person原型(Person.prototype)方法的原因
調(diào)用Person函數(shù),并且把Chinese當成是this傳入函數(shù)中,這就是為什么Chinese可以調(diào)用Person函數(shù)定義的this.屬性或this.方法的原因

2.2 apply() 吱晒、call()、bind()

第一個參數(shù)都是要調(diào)用的函數(shù)的對象
call:剩余參數(shù)是傳遞給要調(diào)用的函數(shù)的值
apply：要傳遞給函數(shù)的參數(shù)是由數(shù)組指定的
call :第一個參數(shù)是要綁定給this的值沦童，后面?zhèn)魅氲氖且粋€參數(shù)列表仑濒。當?shù)谝粋€參數(shù)為null、undefined的時候偷遗，默認指向window墩瞳。

var obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.call(obj, 'Dot', 'Dolby')

apply

apply接受兩個參數(shù)，第一個參數(shù)是要綁定給this的值氏豌，第二個參數(shù)是一個參數(shù)數(shù)組喉酌。當?shù)谝粋€參數(shù)為null、undefined的時候泵喘，默認指向window泪电。

var obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby

call和apply 可以用來綁定this指針,做繼承

var funOne= function () {
    this.enName= 'Mike';
}
var funTwo= function () {
    this.getEnName = function () {
        console.log(this.enName);
    }
    funOne.call(this);  // funTwo繼承了funOne的屬性和方法
}
var person = new funTwo();
person.getEnName()   //Mike

bind

和call很相似，第一個參數(shù)是this的指向纪铺，從第二個參數(shù)開始是接收的參數(shù)列表相速。區(qū)別在于bind方法返回值是函數(shù)以及bind接收的參數(shù)列表的使用。

var obj = {
    name: 'Dot'
}

function printName() {
    console.log(this.name)
}

var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot()  // Dot

2.3函數(shù)作用域和閉包

當一個函數(shù)被調(diào)用的時候鲜锚，調(diào)用對象也從作用域鏈中移除突诬。當沒有涉及嵌套的函數(shù)的時候，作用域鏈是對調(diào)用對象的唯一的引用烹棉。
JavaScript函數(shù)是將要執(zhí)行的代碼以及執(zhí)行這些代碼的作用域構(gòu)成的一個綜合體攒霹，代碼和作用域的綜合體叫做閉包怯疤。
例子：

uniqueId = (function(){
    var id = 0
    return function() {  return id++ }
})

使用閉包的斷點：
例子：

function inspect(inspector, title) {
  var expression, result
  if ("ignore" in arguments.callee) return
  while (true) {
    var message = ""
    if (title) message = `${title} \n`
    if (expression) message = `\n ${expression} ==> ${result} \n`
    else expression = ''
    message += "Enter an expression to evaluate"
    expression = prompt(message, expression)
    if (!expression) return
    result = inspector(expression)
  }
}

屬性讀冉础：基于原型鏈繼承。（先查屬性集峦，再查原型鏈）
JavaScript基于原型的繼承而不是類的繼承（有別于Java伏社、C等）
任何對象屬性都是一個實例屬性
每個實例方法由一個類的所有實例來共享
類屬性與類自身相關(guān)，與類的每一個實例無關(guān)

2.4超類和子類

基于原型的繼承包含了一個原型對象的鏈

Object.prototype.name = 'Owen'; //超類的原型屬性
var d = Date.prototype;
alert(d.name); //Owen塔淤，子類繼承超類
function Me() {}
var m = Me.prototype;
alert(m.name); //Owen摘昌，子類繼承超類

prototype由構(gòu)造函數(shù)Object()創(chuàng)建,所以它本身也是一個Object實例,而任何Object實例都可以從Object.prototype中繼承屬性；于是prototype就也具有了這種能力高蜂；
簡而言之聪黎，超類就是爸爸，子類就是兒子备恤。

3.鴨子類型識別（duck typing）

如果它走起路來像鴨子稿饰，叫起來也是鴨子锦秒，那么它就是鴨子。
只關(guān)注對象的行為喉镰，不關(guān)注對象本身面向接口編型 旅择，而不是面向?qū)崿F(xiàn)編程，是設(shè)計模式中最重要的思想

var duck = {
  duckSinging: function() {
    console.log('呱呱呱');
  }
}
alert('duck');

var chicken = {
  duckSinging: function() {
    console.log('呱呱呱');
  }
}
alert('chicken');

var chior = [];

var joinChior = function(animal) {
  if (animal && typeof animal.duckSinging === 'function') { //typeof就是判斷參數(shù)是什么類型的實例                
    chior.push(animal);
    console.log('恭喜你加入合唱團');
    console.log('當前已募集' + chior.length + '只鴨子');
  }
}
joinChior(duck);
joinChior(duck);
joinChior(chicken);

4.正則表達式

基本的字符串操作
search 變量名.search('要查找的元素')侣姆； 出來的結(jié)果是該元素的位置下標生真。如果不存在，則返回-1捺宗；
substring 變量名.substring('起始‘,'結(jié)束'); 查找從開始到結(jié)束前一個的字符串柱蟀，不包括結(jié)束的。
charAt 變量名.charAt('元素下標號');通過下標查找某個元素蚜厉；
split 變量名.split(' ') ;把字符串分割成數(shù)組产弹；

找出字符串中的所有數(shù)字
傳統(tǒng)方法：

var str = '12 dd 34 h 34';
var arr = [];
var tmp = ' ';
for (var i = 0; i < str.length; i++) {
  if (str.charAt(i) >= 0 && str.charAt(i) <= 9) {
    tmp += str.charAt(i);
  } else {
    if (tmp) {
      arr.push(tmp);
      tmp = ' ';
    }
  }
  if (tmp) {
    arr.push(tmp);
    tmp = ' ';
  }
}

用正則表達式：

str.match(/\d+/g)

用正則表達式表達的兩種方法：
JS風(fēng)格:

new RegExp("a","i");

perl風(fēng)格：

/a/i

正則中的特殊字符：
\ 轉(zhuǎn)義字符；
. 任意字符；
\d 數(shù)字0-9黍少；
\w 數(shù)字0-9蚌铜、字母a-z及A-Z（大小寫）,或下劃線
\s 空格符、Tab斤斧、換頁符、換行符
\D 除了數(shù)字0-9霎烙；
\w 除了 數(shù)字0-9撬讽、字母a-z及A-Z（大小寫）,或下劃線
\s 除了空格符、Tab悬垃、換頁符游昼、換行符
\t \r \n \v \f tab回車 換行 垂直制表等 換頁符
[...] 中括號表示字符范圍
[^...] 字符范圍以外
^ 行首 ^abc 表示abc必須放在行首

abc 表示abc必須放在行尾
\b 零寬單詞邊界
\B 非\b
(x) 分組，并記錄匹配到的字符串 /(abc)/
\n 表示使用分組符(x)匹配到的字符串 --> /(abc)\1/.test('abcabc');
(?:x) 僅分組 --> /(?:abc)(def)\1/.test(abcdefdef);
x?, x+? 如： abc? 在字符串a(chǎn)bcccccc中將匹配ab尝蠕，abc+烘豌？則匹配abc
x{n}, 重復(fù) n 次
x{n,}, 重復(fù) >=n 次
x{n,m}， 重復(fù)次數(shù)x滿足： n <= x <= m

正則表達式中的4中對象方法：
1.正則.exec("字符串") 匹配字符串
2.正則.test reg.test("def"); // ture
3.正則.compile()改變正則的值 var reg = /abc/; reg.compile("def"); 將"abc"變成"def",用complie來改變正則的規(guī)則和屬性
4.正則.toString()輸出整個正則 /abc/.toString(); // "/abc/"

正則中的三個標簽：
global（全局匹配）看彼，ignoreCase（忽略大小寫）廊佩，multiline（跨行）
使用方法
1.正則對象后直接接“gim”，gim分別對應(yīng)以上三個標簽靖榕，順序與個數(shù)不定
2.RegExp(正則表達式, "mgi")

正則中的相關(guān)方法：
search() 字符串搜索
match() 字符匹配
replace('匹配內(nèi)容','替換內(nèi)容') 替換所有匹配
split(" ") 把字符串轉(zhuǎn)換成數(shù)組

郵箱驗證格式：

var re=/^\w@[a-z0-9]+.[a-z]+$/i;

5.web瀏覽器中的JavaScript

在客戶端JavaScript中标锄，表示HTML文檔是document對象，window對象代表顯示該文檔的窗口（幀）茁计。

image.png

事件：

image.png

DOM事件流（三階段）

事件捕獲料皇、處于目標、事件冒泡

事件捕獲

當鼠標點擊或者觸發(fā)dom事件時，瀏覽器會從根節(jié)點開始由外到內(nèi)進行事件傳播践剂，即點擊了子元素毒返，如果父元素通過事件捕獲方式注冊了對應(yīng)的事件的話，會先觸發(fā)父元素綁定的事件舷手。（父元素監(jiān)聽子元素拧簸，就應(yīng)用了這個原理）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #a{
                width: 100px;
                height: 100px;
                background: red;
            }
            #b{
                width: 50px;    
                height: 50px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id='a'>
            <div id='b'>
                <p id="p">111</p>
            </div>
            
        </div>
    </body>
    <script type="text/javascript">
        var a=document.getElementById('a');
        var b=document.getElementById('b');
        var p=document.getElementById('p');
         
        a.addEventListener('click',function (){
            alert('a');
        },true);
        b.addEventListener('click',function(){
            alert('b')
        },true)
        p.addEventListener('click',function(){
            alert('p')
        },true)
        //addEventListener 有三個參數(shù)
                //第一個是 事件名
                //第二個是 函數(shù)方法
                //第三個是 布爾值   （判斷是事件冒泡還是事件捕捉  true 是事件捕捉  false 是事件捕捉）

    </script>
</html>

事件冒泡
當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #a{
                width: 100px;
                height: 100px;
                background: red;
            }
            #b{
                width: 50px;    
                height: 50px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id='a'>
            <div id='b'>
                <p id="p">111</p>
            </div>
            
        </div>
    </body>
    <script type="text/javascript">
        var a=document.getElementById('a');
        var b=document.getElementById('b');
        var p=document.getElementById('p');
        a.onclick=function(){
            alert('a')
        }
        b.onclick=function(){
            alert('b')
    
        }
        p.onclick=function(){
            alert('p')
        }
        
    </script>
</html>

阻止事件冒泡

event.stopPropagation()

cookie 和session 的區(qū)別：

1男窟、cookie數(shù)據(jù)存放在客戶的瀏覽器上盆赤，session數(shù)據(jù)放在服務(wù)器上。

2歉眷、cookie不是很安全牺六，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙
考慮到安全應(yīng)當使用session。

3汗捡、session會在一定時間內(nèi)保存在服務(wù)器上淑际。當訪問增多，會比較占用你服務(wù)器的性能
考慮到減輕服務(wù)器性能方面扇住，應(yīng)當使用COOKIE春缕。

4、單個cookie保存的數(shù)據(jù)不能超過4K艘蹋，很多瀏覽器都限制一個站點最多保存20個cookie锄贼。