js 開發過程當中經驗及總結記錄

 

//注意：

瀏覽器的 , console 裏面執行的是標準的js語法 ，只能識別：

function abc(){……} 或者 let abc=function(){……}   

不能識別react和vue裏面的相似java的寫法 abc(){……}

和 =>函數

const chatReducer = (state = defaultState, action = {}) => {……}

 

 

 

一   let 和 var 做用域

   1  普通用法

    for (var i = 0; i < 5; i++) {

      console.log(i);

    }

    console.log(i); //---結果是 5 ，由於var做用域不單單是當前模塊。

 

    for (let i = 0; i < 5; i++) {

      console.log(i);

    }

   console.log(i); //---結果是i is not defined,由於let的做用只是當前模塊。

   

    結果都是: 0,1,2,3,4 ，由於是直接同步輸出。

    

    ps: 能夠試試，吧一樣的代碼放到定時器setTimeout(()=>{……})；或 異步promise() 裏面。

    

 

 

 

    2  箭頭函數(()=>{})裏面使用

   1  var

   var a=6;

 

  for(var a=0;a<4;a++){//var是全局的，同名的變量後面的會覆蓋前面的。

  console.log(a); //正常的輸出0，1，2，3

 

  setTimeout (()=>{//箭頭函數自己沒有this的引用，裏面用的變量和方法都是指向外層的。

  console.log(a); //直接寫外層附近定義的變量便可，不要用this. 因爲var是全局的,箭頭函數裏面引用都是同一個a,輸出的結果都是同樣的 4 。

  console.log(this.a);//  this. 表示windows的對象， windows裏面根本沒有a. , 因此 這裏輸出 undefined. 

  },0);

  }

  console.log(a); // 箭頭函數外使用變量也是 直接使用便可，不用this.  因爲var同名的變量後面的會覆蓋前面的，這裏輸出 4 。

  console.log(this.a); // this. 表示windows的對象， windows裏面根本沒有a. , 因此 這裏輸出 undefined. ; 只有頂部data:{}下定義的字段，用的時候能夠this.data.字段。

 

 

2  let 

let b=6;

 

for(let b=0;b<4;b++){//let做用域是當前塊級, 同名定義的不會相互影響覆蓋

console.log(b); //正常的輸出0，1，2，3

 

setTimeout (()=>{//箭頭函數自己沒有this的引用，裏面用的變量和方法都是指向外層的。

console.log(b);  //直接寫外層附近定義的變量便可，不要用this. 因爲let是當前塊的,箭頭函數裏面引用都是不一樣的b ,輸出結果會是 0,1,2,3 

console.log(this.b); //this. 表示windows的對象， windows裏面根本沒有b. , 因此 這裏輸出 undefined. 

},0);

}

console.log(b);//箭頭函數外使用變量也是 直接使用便可，不用this.   因爲是let定義，因此不會覆蓋。 輸出最外層的6 

console.log(this.b);// this. 表示windows的對象， windows裏面根本沒有b. , 因此 這裏輸出 undefined. ; 只有頂部data:{}下定義的字段，用的時候能夠this.data.字段。

 

 

 

 

二   引用關係

var a=[0],b=a;
b[0]=2;
console.log(a+b); //22

a=[0], b=a, b=[1];
console.log(a+b); //01

分析 1 考引用關係 2 原則 數據 = 相等實際上是合併2個素組的元素，而後 2個數組 都是合併以後的。
若是有對某個 數組 某索引元素 修改 value ,對應的另一個也會修改。

 

 

三   閉包

function test(){
var a=0;
var node=document.getElementById('test');
node.onclick=function(){
b=0;
console.log(a++ + ++b); //子函書中 會保存a ++以後的值，b麼次都回清零。
}

for(var i=0;i<10;i++){ //調用子函書
node.onclick();
}
}
test();

 

這個會輸出從1到10，因爲閉包緣由，a的值會一直保留，而b每次都會被重置爲0

////注意 1 特色是函數套函數,字函數能夠是function也能夠是 onclick.
2 子函數沒法 調用父函數 ，例如 直接在onclick裏面 test();
3 子函數 能夠調父函數的 變量 ， 可是 父函數的變量 是會保存狀態值的 ，
3 可是能夠在 父函書中，直接調用 子函書 例 node.onclick

 

 

 

總結處理{}的方法：？？？？？？？

1 Object.keys(); object.values();

 /** 通用處理 默認值 爲0

    item--表示傳入的某條記錄對象{}

    MapKey--表示要處理 默認值 爲0 的字段集合

    MapKeyDefault---默認處理成0

    通常用於處理 一層層級的數據記錄{}; 更深的層級須要本身單獨提出來處理，建立新字段（平級）

    */

    dealItemVal(item = {}, MapKey = [], MapKeyDefault = 0) {

 

        let obj = {}

 

        //轉成數組 --字段名稱和值 -------object方法在andorid裏面沒法執行！！！

        let ks = Object.keys(item),

            vs = Object.values(item);

 

        //遍歷key--map

        ks.forEach((value, index) => {

 

            let huo = "";

 

            //須要把默認值處理成0的 字段；其餘的字段若false 默認值是「」

            MapKey.includes(value) && (huo = MapKeyDefault)

 

            //有字段非false 不然顯示huo默認值！

            obj[value] = vs[index] || huo;

 

        })

 

        return obj;

    },

 

使用：：：：

 //精簡通用處理方式。。。

        // let to0 = [

        //     "courseCount",

        //     "examCount",

        //     "finishCourseNum",

        //     "finishExamNum",

        //     "percent"

        // ];

        // let dealValue = tools.dealItemVal(item, to0); 

 

        // let newItem = {

        //     ...other,

        //     stu_lastLearnCourseId,

        //     stu_assign,

 

        //     ...dealValue

        // };

 

        return newItem;

 

 

 

##補充文章 語句：

object方法在andorid裏面沒法執行(是由於wkwebview的內核偏低致使)！！！

 

 

 

方法2：

Const { 字段1 ，字段2，字段3，字段4……}=item;

 

 

????

3: 方法傳遞解構函數 和  默認參數值 。。。。。

????

 

???？補充es6語法

Assign 合併對象，every循環能夠中斷，push pop unshit shit不能變量接收，foreach不能變量接收，for of返回item, for in返回index ,

Search !=-1 判斷有沒有，splice截取替換集合，contect合併數據，，，， 空{} []都是true, 1 和 -1都是true ,0是false…

？？？

 

 

 

 

2 判斷空{}空[]

能夠for in 

 

也可經過json.StringFy()轉成字符串比對==‘{}’

 

 

5.區分是集合{}仍是對象[]?  沒法判斷是空[] 仍是空{}

Object.prototype.toString.call(loginRes.serverInfo) === "[object Object]")

第二個大寫。。。

 

 

3  擴展屬性方法prototype

  //聲明----若是有此自定義 contains 直接用最好

    // Array.prototype.contains = function (needle) {

    //     for (i in this) {

    //         if (this[i] == needle) return true;

    //     }

    //     return false;

    // }

 

    // //直接使用

    // var x = Array();

    // if(x.contains('foo')) {

    //     // do something special

    // }