ES6 在日常工作中的運用

simplele發表於2018-03-24

ES6實戰

const let,模板字串比較簡單

函式

  • 函式預設值
// ES5
function action(num) {
        num = num || 200 // ?? num傳入為0的時候就是false， 此時num = 200 
        //當傳入num時，num為傳入的值
        //當沒傳入引數時，num即有了預設值200
        return num
}

// ES6
 function action(num = 200) {
    console.log(num)
 }
 action() //200
 action(300) //300

複製程式碼
  • 箭頭函式(函式表示式 --> 箭頭函式)
當前 ES5 程式碼中，在使用了函式表示式的時候，你必須小心處理 this。
我會在下面的示例中建立一個 _this(A 行) 作為輔助變數，
這樣在 B 行才可能訪問到指向 UiComponent 物件的 this。
// ES5
function UiComponent() {
    var _this = this; // (A)
    var button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        console.log('CLICK');
        _this.handleClick(); // (B)
    });
}
UiComponent.prototype.handleClick = function () {
    ···
};

// ES6
function UiComponent() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', () => {
        console.log('CLICK');
        this.handleClick(); // (A)
    });
}

處理只返回某個表示式的簡短回撥
// ES5
var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });

// ES6
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
在定義引數的時候，如果只有一個引數，你可以省略掉括號。
像 (x) => x * x 和 x => x * x 都可以。
複製程式碼
  • 處理多個返回值 (解構)
有一些函式或者方便會通過陣列或物件返回多個值。
在 ES5 中，你需要建立一個臨時變數來訪問那些值。
但在 ES6 中你可以使用解構。
// ES5
var matchObj =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
var year = matchObj[1];
var month = matchObj[2];
var day = matchObj[3];

// ES6
const [, year, month, day] =
    /^(\d\d\d\d)-(\d\d)-(\d\d)$/
    .exec('2999-12-31');
陣列樣板最開始空了一個位置，這是用來跳過第 0 個陣列元素的。
複製程式碼
  • 從 arguments 到剩餘引數
// ES5
function logAllArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

// ES6
function logAllArguments(...args) {
    for (const arg of args) {
        console.log(arg);
    }
}

// 有一部分固定引數，有一部分剩餘引數
function format(pattern, ...args) {
    ···
}
複製程式碼
  • 擴充的物件功能
物件初始化簡寫
ES5我們對於物件都是以鍵值對的形式書寫，是有可能出現key/value對重名的。
例如：
function people(name, age) {
    return {
        name: name,
        age: age
    };
}

// ES6 可以這樣寫
function people(name, age) {
    return {
        name,
        age
    };
}

物件字面量方法的賦值
ES6 同樣改進了為物件字面量方法賦值的語法。
// ES5為物件新增方法：
const people = {
    name: 'lux',
    getName: function() {
        console.log(this.name)
    }
}

// ES6
const people = {
 name: 'lux',
 getName () {
     console.log(this.name)
 }
}

複製程式碼
  • Spread Operator 展開運算子 就是 ...三個點運算子
連線合並陣列和物件
//陣列
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]

//物件
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
// Rest運算 （獲取陣列 or 物件 除了某項的其它項）
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5

// 物件
const user = {
    username: 'lux',
    gender: 'female',
    age: 19,
    address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

拷貝陣列
拷貝陣列是個常見的任務，過去我們使用  Array.prototype.slice
來完成，但現在我們可以通過展開運算子得到陣列的副本：

var arr = [1,2,3];
var arr2 = [...arr]; // 等同於 arr.slice()
arr2.push(4)

物件解構
解構操作在變數批量賦值上非常方便，省去了繁瑣的宣告和賦值操作。配合使用展開運算子，進一步簡化操作：
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
複製程式碼

參考

Airbnb規範

相關文章