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://medium.com/@peterchang_82818/es6-10-features-javascript-developer-must-know-98b9782bef44
