• 解构

    解构

    解构是一种无需编写大量代码就能从{}[]中快速提取数据的方式。

    使用解构来转换以下内容(MDN中的例子):

    1. let foo = ['one', 'two', 'three'];
    2. let one = foo[0];
    3. let two = foo[1];
    4. let three = foo[2];

    转换成

    1. let foo = ['one', 'two', 'three'];
    2. let [one, two, three] = foo;
    3. console.log(one); // 'one'

    这很有趣,但是起初可能很难看到应用场景。 ES6还支持对象解构,这可能使用途更明显:

    1. let myModule = {
    2. drawSquare: function drawSquare(length) { /* implementation */ },
    3. drawCircle: function drawCircle(radius) { /* implementation */ },
    4. drawText: function drawText(text) { /* implementation */ },
    5. };
    6. let {drawSquare, drawText} = myModule;
    7. drawSquare(5);
    8. drawText('hello');

    解构也可以用于将对象传递到函数中,从而允许以简洁的方式从对象中提取特定属性。还可以为解构参数分配默认值,如果传入配置对象,这可能是一个有用的模式。

    1. let jane = { firstName: 'Jane', lastName: 'Doe'};
    2. let john = { firstName: 'John', lastName: 'Doe', middleName: 'Smith' }
    3. function sayName({firstName, lastName, middleName = 'N/A'}) {
    4. console.log(`Hello ${firstName} ${middleName} ${lastName}`)
    5. }
    6. sayName(jane) // -> Hello Jane N/A Doe
    7. sayName(john) // -> Helo John Smith Doe

    有许多更复杂的事情可以通过解构解决,MDN有一些很好的例子,包括嵌套对象解构和for...in运算符的动态解构。