JsES6

  • 27
  • 0
  • Js
  • 2020-01-20

Let、Const : 宣告變數使用 ( 改善var 問題)

Let Hoisting  創造、執行

ESlint

箭頭函式

Differenct : Parameter、this、event

Default parameter values

Template Literals

************************************************************************************************************************************

var 問題 : 作用域的變數影響,函式作用域

for( var i = 0; i < 10; i ++ ) {
    console.log(i);
}
console.log(i); //因作用域而取的到全域變數 i = 10

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Let : 可修改值、避免重複宣告變務(直釋檢查),作用域 { } 內

for( let i = 0; i < 10; i ++ ) {
    console.log(i);
    setTimeout(function() {
        console.log('time:' + i);
    }, 0 );
}
console.log(i); //i is not defined

let b;  //undefined
console.log(b);

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

const 常數 : 無法變動值

const b;  //Missing initializer in const declaration
console.log(b);

const a = '123';
a = 456;            //Assignment to constant variable.
const b = {
    name : '123',
    cash : 10,
};
b.name = 'test';  //因Object所以為reference,可變動
console.log(b);

const b = {
    name : '123',
    cash : 10,
};
Object.freeze(b);
b.name = 'test';
b = {};          //Assignment to constant variable
console.log(b);

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Let Hoisting : 無法在創造與執行區間取值,因有暫時性死區 TDZ機制

{
    //創造
    let b; //暫時性死區 TDZ,在取值時,是無法取得

    //執行
    console.log(b); // Cannot access 'b' before initialization
    let b = 'test';
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ESlint : 

https://github.com/airbnb/javascript#variables

https://github.com/airbnb/javascript

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

箭頭函式 語法糖、新方法

//ES5
const a = function (para) {
    return 'test' + para;
}
//ES6 箭頭函式
const b = para => 'test' + para;

單一參數 => para
無參數 => ()
多參數  => (para1,para2)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Differenct 

    Parameter

//ES5
const a = function (para) {
    console.log(arguments); //show input all para;
}
a(1,2,3,4,5,6);

//ES6 箭頭函式
const b = (...arg) => console.log(arg); //show input all para;
b(1,2,3,4,5,6);

arguments(類array)  Differenct   arg(array)

    This

var a = 'test';

var b = {
    a : '1',
    calla : function () {
        console.log('1' + this.a);
        setTimeout(function() {  //aync this 指向全域
            console.log('2' + this.a);
        },1);
    }
}
b.calla() //this 指向為b

//ES6 無自已的this
var c = {
    a : '1',
    calla : function () {
        console.log('1' + this.a);
        setTimeout(() =>{  //aync this 指向上一層
            console.log('2' + this.a);
        },1);
    }
}
c.calla()

    bind apply call(*綁定特定的this)

window.name = 'window';

var person = {
    name : 'p',
}

var a = function (p1,p2) {
  console.log(this,p1,p2); //this為全域
}

a.call(person, 1, 2);  //call方式 立刻執行,透過傳入this(person)物件,變數傳入為單個

var b = (p1, p2) => {
    console.log(this); //arrow 非自已的this,指定全域的this
}

b.call(person,3,4); //call方式 立刻執行,透過傳入this(person)物件,變數傳入為單個

*無法使用建構式成為物件

var b = (p1, p2) => {
    console.log(this); //arrow 非自已的this,指定全域的this
}

var c = new b(1,2); 

// arrow fun

var b = (p1, p2) => {
    console.log(this); //arrow 非自已的this,指定全域的this
}

var c = new b(1,2); //b is not a constructor

* arrow fun syntax error

const paraName = () => { a :1 } ; //需使用 () 包住物件 ( { a : 1} )

const paraName = 0 || () => 1;    //於判斷式下 ||,需使用 () 包住arrow fun 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Default parameter values 未傳入參數值,則可指定預設

function a (number = 0) {
    console.log(number);
}

var b = a();

b;

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Template Literals

const b = 123;
const c = 0.5;
const a = 'test' + b + '這是什麼東西...................................................' + c;  //Template String
console.log(a);

const d =`test ${b} 這是什麼東西................................................... ${c}`;  //Template literals  ` Multi-line Strings
console.log(d);

Template literals : `字串 ${ para、expression、立即Fun }`;

標籤樣板字面值

function a(strings, ...arg) {
    console.log(strings,arg);
}

const b = 'test';

a`test &{b} 123' ${456} ${'sadf'}`; 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ref : 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla

https://webapplog.com/es6/

https://medium.com/@peterchang_82818/es6-10-features-javascript-developer-must-know-98b9782bef44