CocosCreator開發筆記(24)-Creator程序員應該掌握的一些ES6語法

ES6，全稱ECMAScript 6.0，是2015年6月 發佈的JavaScript 新一代語法標準。與之前版本相比，增加了很多有用的特性，使JavaScript代碼更加優雅和可靠。

目前主流瀏覽器已經支持99%以上的ES6語法，所以我們也可放心的在Cocos Creator 2.x及更高版本中使用，以下是一些自己在項目中用到、且確實能提高開發效率的ES6特性。

箭頭函數

箭頭函數以極致優雅和簡潔的方式來定義匿名函數，是個人最喜歡的ES6新增特性。

// ES5
node.schedule(function() {
    this.doSomething();
}.bind(this), 5);

// ES6
node.schedule(() => {
    this.doSometing();
}, 5);

let代替var

優先使用：const > let > var

const num; // Error
const num = 9999; // ok
let x = 0; // ok 

解構賦值

ES6允許按照一定模式，從數組和對象中提取值，對變量賦值，這個過程被稱爲解構。

數組的解構

let array = [1, 2, 3];
// ES5
let a = arr[0]; // 1
let b = arr[1]; // 2
let c = arr[2]; // 3
// ES6
let [a, b, c] = array; // 1, 2, 3

// ES5
let a = 1;
let b = 2;
let c = 3;
// ES6
let [a, b, c] = [1, 2, 3]

對象的解構

// ES5
let width = node.width;
let height = node.height;
// ES6
let { width, height } = node;

對象屬性簡寫法

// ES6 定義對象
let obj = { x, y, z };
// 等同於 ES5
let path = { x:x, y:y, z:z };

函數參數默認值

calcTime(dt, bSelf = false) {
    ....
}

反引號/模板字符串

let name = 'Jack';
let num = 100;
let outStr = `${name} have ${num}?`;
cc.log(outStr); // Jack have 100

字符串長度補全

如果字符串不夠指定長度，會在頭部和尾部補全。

• padStart() 用於頭部補全；
• padEnd() 用於尾部補全。

let s = '5';
s.padStart(2, '0'); // '05'
s.padEnd(2, '0'); // '50'

try…catch 異常處理

try {
    let arr = str.split('|');
    for (let i = 0, len = arr.length; i < len; i++) {
        obj[i] = parseFloat(arr[i]);
    }
} catch (e) {
    log.error('str is invalid');
}

其它建議

函數的可選參數集中在一個對象裏，作爲最後一個參數。

// 可選參數集中在config對象裏
play(x1, x2, x3, config) {
    if (!!config && config.hasOwnProperty('scale')) {
        this.scale = scale;
    }
    if (!!config && config.hasOwnProperty('width')) {
        this.width = width;
    }
}