隱式轉(zhuǎn)換

• 加法的隱式轉(zhuǎn)換

  • +號的兩邊 一邊為字符串 一邊為數(shù)字

    • 先將非字符串轉(zhuǎn)換為字符串 然后再拼接

  • 返回值: 字符串

    console.log('1'+1+1);     //網(wǎng)頁輸出字符串111
    console.log('1'+(1+1));   //輸出字符串12, 需要計(jì)算加法再接-->加上小括號
    
    function demo() {
      console.log('1');
      setTimeout(function(){
        console.log(2);
      },1000);
      setTimeout(function(){
        console.log(3);
      },0);
      console.log('4');
    };
    demo();  // 1 4  3 2
     頁面里所有的setTimeout定義的操作,都將放在同一列隊(duì)中依次執(zhí)行. 
     而列隊(duì)執(zhí)行的時(shí)間需要等到函數(shù)調(diào)用棧執(zhí)行完畢才會執(zhí)行, 
     相當(dāng)于可執(zhí)行代碼執(zhí)行完畢, 才會執(zhí)行setTimeout操作, 且按照延時(shí)長短順序先后執(zhí)行.
    

• *乘法 | /除法 | %取模 | -減法隱式轉(zhuǎn)換
  • 先將非數(shù)值轉(zhuǎn)成數(shù)值, 然后再運(yùn)算
    document.write('1'*5); //網(wǎng)頁輸出數(shù)字5

類型轉(zhuǎn)換.png

邏輯與&& 邏輯或|| 邏輯非!

• &&: 如果與兩邊不是布爾值, 先去判斷左邊是不是為真
  • 左邊為真就返回右邊的值 無論什么類型的值都要返回
  • 左邊為假 就返回左邊
• || : 兩邊不是布爾值 就先看左邊是否為真
  • 如果左邊為真 就返回左邊的值
  • 如果左邊為假 就返回右邊的值
• ! : 如果邏輯非不是布爾值(判斷原則非0即真)-先將表達(dá)式轉(zhuǎn)換成布爾值-然后再取反

基本類型和復(fù)雜類型

• 基本/簡單數(shù)據(jù)類型（存儲在【棧內(nèi)存】）
  • number 數(shù)值 | string 字符串 | boolean 布爾 | undefined 未定義 | null 空
  • 變量的值永遠(yuǎn)不會為null, 除非手動(dòng)設(shè)置為null
    • 什么時(shí)候需要把變量的值賦值為null
    • 告訴系統(tǒng)不再使用該變量, 可以回收其占用的內(nèi)存空間
• 復(fù)雜/復(fù)合數(shù)據(jù)類型（指針存棧中，具體數(shù)據(jù)存儲在【堆內(nèi)存】）
  • Object | Array | Date | Number | Boolean | String
  • null不是對象, js官方的錯(cuò)誤: console.log(typeof null); //object
• 判斷數(shù)據(jù)類型
  • 關(guān)鍵字: typeof
  • 語法: typeof 數(shù)據(jù) | 變量
  • 返回值: string

值類型和引用類型

• 值類型: 簡單的數(shù)據(jù)類型屬于值類型
• 引用類型: 復(fù)雜的數(shù)據(jù)類型
• 兩者區(qū)別: 存儲的信息不一樣
  • 值類型: 存儲的是具體的數(shù)據(jù)
  • 引用類型: 存儲的是引用地址, 該地址指向內(nèi)存中的一塊內(nèi)存空間, 在這個(gè)內(nèi)存空間存儲著具體的數(shù)據(jù)

值類型/引用類型的賦值

• 賦值: 把右邊存儲的信息復(fù)制一份給左邊
• 值類型的賦值: 把右邊存儲的信息(具體的數(shù)據(jù))復(fù)制一份給左邊
  • 特點(diǎn): 只是簡單的數(shù)據(jù)復(fù)制, 互相是獨(dú)立的, 修改其中一個(gè)不會影響另外一個(gè)
• 引用類型的賦值: 把右邊存儲的信息(指向具體的數(shù)據(jù)的地址)復(fù)制一份給左邊
  • 特點(diǎn): 共享同一份數(shù)據(jù), 修改其中一個(gè)對象的屬性的值會影響另一個(gè)

值類型/引用類型在函數(shù)中的使用

• 值類型作為函數(shù)的參數(shù)(值傳遞): 實(shí)參和形參互不影響
• 引用類型作為函數(shù)的參數(shù)(地址傳遞): 實(shí)參和形參共享同一份數(shù)據(jù), 修改其中一個(gè)對象屬性的值會影響另一個(gè)對象的值

var obj = {name : 'zs'};

    function demo(object) {
        object.name = 'ls';
        object = {name: 'demoName',des :'des'};

        console.log(object.name); // demoName
        console.log(object.des);  // des
    }
    demo(obj);
    console.log(obj.name); // ls
    console.log(obj.des); // undefined (內(nèi)部的object是函數(shù)內(nèi)部變量,函數(shù)執(zhí)行完畢就銷毀了,所以object也沒有了)  
    console.log(obj); // {name: "ls"}
    

對象的動(dòng)態(tài)特性

• 定義: 對已經(jīng)定義好的對象, 進(jìn)行一些操作, 刪除/增加屬性
• 通過點(diǎn)語法訪問對象屬性

  • 如果不存在該屬性就是增加操作. 如果存在該屬性就是修改操作

  • delete刪除對象屬性

      console.log(delete obj.age);  // undefined
    

• 通過[]語法訪問對象屬性
  • 鍵(屬性名)是字符串: obj['key']

in

1. for..in: 遍歷對象的key
2. 判斷對象中是否存在指定的屬性
   • 語法: "屬性名" in 對象
   • 在數(shù)組中的使用, in操作的是索引
     • 怎么判斷數(shù)組中是否存在指定的元素
       • arr.indexOf(123); //返回?cái)?shù)組中某個(gè)元素的索引;如果不存在該元素,返回-1
       • 遍歷數(shù)組-判斷是否等于指定元素

delete

• 定義: 可以刪除對象中屬性, 刪除后該屬性為undefined
• 返回值: 布爾值(表示是否刪除成功)
• 特點(diǎn)

  • 可以刪除未使用var聲明的變量, 不可刪除var聲明的變量

      b = 20;
      delete  b;
      console.log(b); //刪除成功,所以打印b的值:報(bào)錯(cuò)-->表示變量未聲明
    
      var a = 10;
      console.log(delete a); // false (靜默錯(cuò)誤)
      console.log(a); // 10
    
      //未使用var聲明的變量是全局變量, 會成為window的屬性
      b.dex = 'dex';
      console.log(b.dex); // und
      delete b.dex;
      console.log(delete b.dex);  // true
      console.log(b.dex);   // 報(bào)錯(cuò)
    

  • 可以刪除直接定義在window上的屬性

調(diào)試工具的使用

• 快捷鍵 F12
• Console的運(yùn)行環(huán)境和js頁面的環(huán)境是一樣的

異常處理

• 在正常情況下, 代碼如果出現(xiàn)了錯(cuò)誤/異常, 該行代碼后面的代碼不會執(zhí)行
• 即使代碼出現(xiàn)錯(cuò)誤, 后面的代碼還是可以正常執(zhí)行
  • 手動(dòng)拋出異常throw+異常信息(對象/字符串)

    try{
        //處理可能會出錯(cuò)/異常代碼
    }catch(error){
        //try的代碼出錯(cuò)就執(zhí)行, 并把捕獲的錯(cuò)誤信息拋出
    }finally{
        //此括號中代碼與寫在下面無區(qū)別, 釋放一下不再使用的資源-后端使用
        //不管try里面的代碼是否出錯(cuò), 都會執(zhí)行此括號里的代碼
    }

面向?qū)ο?面向過程編程

• 相同點(diǎn): 都是解決問題的一種思想
• 不同點(diǎn): 解決問題的關(guān)注點(diǎn)不同.
  • 面向?qū)ο箨P(guān)注解決問題所需的對象.
    • 提高代碼的復(fù)用性, 代碼結(jié)構(gòu)易于閱讀, 擴(kuò)充性維護(hù)性更好
  • 面向過程關(guān)注解決問題 過程中的步驟.

this

• 特殊情況

  • 在事件指令中, this指向事件源

  • 在定時(shí)器中, this指向window

      //若想在定時(shí)器里拿到事件源的this
      btn.onclick = function () {
          var that = this;    //備份指針,this指向btn
          window.setInterval(function () {
              console.log(that);  
          },10);
    
      }
    

• 一般情況

  • this所在的函數(shù)是哪個(gè)對象, 就指向哪個(gè)對象

  • 所有的全局變量都是window的屬性, 所有的全局函數(shù)都是window的方法(參考W3C)

      (function(){
          var that = this;    //this指向window
          setInterval(function(){
              console.log(that)   
      }, 30);
      })();            
    

面向?qū)ο?/h4>

• 對象擁有屬性和方法

• 創(chuàng)建對象: var obj = new Object()

• 函數(shù)創(chuàng)建對象常用寫法

    function person(){
        var obj= new Object();
        obj.name = 'Marry';
        obj.age = 12;
        return obj;
    }
    person();  //創(chuàng)建了一個(gè)Marry對象
    //創(chuàng)建另一個(gè)對象
    var Jame = person();
    Jame.name = 'Jame';
    Jame.age = 14;
  

通過構(gòu)造函數(shù)創(chuàng)建對象

• 定義: 構(gòu)造函數(shù)就是一個(gè)函數(shù), 用來初始化一個(gè)對象(給對象賦初始值), 一般與new關(guān)鍵字連用

• 構(gòu)造函數(shù)名稱: 首字母大寫

     var obj = new Object()
     var dog = new Dog('wangcai', 1)    //如下
  

• this所在的函數(shù)是哪個(gè)對象, 就指向哪個(gè)對象

    function Dog(name1, age1){
        //new默認(rèn)(內(nèi)部實(shí)現(xiàn))創(chuàng)建一個(gè)新的對象-默認(rèn)把這個(gè)對象賦值給this
        //var obj = new Object();
        //this = obj;
  
        //自定義屬性
        this.name = name1;
        this.age = age1;
        this.eat = function(sth){
        console.log(this.name+'eat'+sth);
  
        //new默認(rèn)(內(nèi)部實(shí)現(xiàn))返回新創(chuàng)建的對象
        //return obj;
        }
    }
    var dog = new Dog('wangcai', 1);
    //問題: 創(chuàng)建多個(gè)對象時(shí)(dog1.eat==dog.eat), 對象中某些方法的實(shí)現(xiàn)是一樣的, 但每創(chuàng)建一個(gè)對象都會創(chuàng)建一個(gè)新的函數(shù), 會造成內(nèi)存資源浪費(fèi)
    
    //優(yōu)化-減少定義的形參
    function Dog(option){
        //判斷外界是否傳實(shí)參
        var option = option || {};
        this.name = option.name1;
        this.age = option.age1;
        this.eat = function(sth){
            console.log(this.name+'eat'+sth);
        }
    }
    var dog = new Dog({name:'wangcai', age:1});
  

• 可以使用原型屬性prototype-開發(fā)中常用

    //第一種寫法
    Dog.prototype.eat = function(sth){
        console.log(this.name+'eat'+sth);
    }
    //第二種寫法
    Dog.prototype = {
        eat:function(){
            console.log(this.name+'eat'+sth);
        }
    }
    //_init是一個(gè)系統(tǒng)的初始化函數(shù), 只要通過構(gòu)造函數(shù)創(chuàng)建對象就會默認(rèn)調(diào)用