ES6踩坑記錄

lackdata發表於2019-02-16

這篇文章主要因為只是個人對ES6的不完整的理解，寫的不是很生動，如果有比較瞭解的歡迎糾錯。

1.箭頭函式
省略 function 省略return；
原來的

        function (){
            retrun...
        }
        變成
        () = >

2.const 和 let

const過程大概為檢測 命名是否記憶體中存在? 報錯 ：命名 ;
命名過程中，如果函式出錯，命名依舊佔過去，不能再重新給函式定義這個命名。

 var x;
 const x = () => {...}//報錯，命名已經存在
 const y = () => {console.log(1)//報錯，miss },定義函式失敗
 const y = () => {console.log(1)}//報錯，命名已存在

let作用於塊級作用域，從我膚淺的理解角度，就類似個閉包的引數。所以沒法再同一作用域用let定義同一個引數。閉包引數有個特色，對外為變數，為內為常量。

   
   let x = 1;
   let x = 2;//報錯，x已經被宣告。
   function test(){let x = 3};//不報錯
   
   for(var i = 0;i < 5;i++){ 
        setTimeout(() => {console.log(i)},1000)
   }// 5 5 5 5 5
   
   for(let i = 0;i < 5;i++){ 
        setTimeout(() => {console.log(i)},1000)
   }// 0 1 2 3 4 
   
   這實際等於
    var n = (t) =>{setTimeout(() => {console.log(t)},1000)}
    for(var i = 0;i < 5;i++){
    n(i);
    }

3.promises
非同步處理功能
定義一個函式為new Promise(),Promises裡面有倆個引數物件，resolve //成功,reject //失敗，這倆個引數寫在函式的最後面，表示這個函式是不是執行成功了。
resolve和reject可以帶入自己的引數。
.then()可以無限鏈下去。我個人覺得這個可以封裝一個方法。

var con1 = new Promise(function(resolve,reject){
   setTimeout(() => {console.log(1);true?resolve(`成功`):reject(`失敗`)},1000)
})

var con2 = (t) => {setTimeout(() => {console.log(t)},1000)};

con1.then((resolve的引數) => {con2(resolve的引數)},(reject的引數) => {con2(reject的引數)})

4.class
class應該是涉及到了原型鏈，原型鏈就是一個函式的原型函式，區別於建構函式。主要用於繼承。
我理解的繼承的意義就是提高程式碼複用率。


  class test1{
   testOne(){console.log(`this is test1.testOne`)}
   }
   
   class test2 extends test1{
   testTwo(){console.log(`this is test2.testTwo`)}
   }
   
   var test3 = new test2();
   test3.testOne();//this is test1.testOne
   test3.testTwo();//this is test1.testTwo

5.陣列合並rest
rest的寫法就是…

     var testRest = (...x) => {console.log(x)};
     tesrRest(1,2,3)//[1,2,3]   
     const a = [1,2,3];
     const b = [4,5,6];
     const c = [...a,...b];//[1,2,3,4,5,6]

6.遍歷forEach

        c.forEach(function(data){
        console.log(data)
        })//1 2 3 4 5 6

7.預設值

        var z = undefined;
        var x1 = z||`預設值z`;//預設值z
        var y = `y`;
        var x2 = y||`預設值y`;//y
        var q = false;
        var x3 = q||`預設值q`;//預設值q
        var w = null;
        var x4 = w||`預設值w`;//預設值w
        var e = ``;
        var x5 = e||`預設值e`;//預設值e

我覺得這裡面最沒怎麼踩懂的就是class 因為原型鏈還是沒有能完全弄懂 踩得最忐忑的就是 promise 因為這裡面的格式太侷限了，而且網上找的解釋很多不解釋reslove和reject的判斷條件

相關文章