es6常用特性（三）

发表于 更新于 阅读次数： 本文字数： 436 阅读时长 ≈ 2 分钟
讲解ES6迭代器中for of与for in遍历差异，梳理四种遍历方式；分析class方法提取后this指向错误原因，说明export default默认导出机制。

一、Iterator

  1. for…of与for…in的区别
    for…in只能获取对象的键名，不能直接获取键值；for…of允许遍历获取键值
    var arr = ['a','b','c'];
    for(let a in arr){
    console.info(a); //0,1,2
    }
    for(let a of arr){
    console.info(a); //a b c
    }
    for…in 可以遍历没有实现Iterator的对象，并输出键名；for…of不能够遍历未实现Iterator的对象，可以使用Object.keys()获取对象的键名数组然后进行遍历。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
       var es6 = {
          edition: 6,
          committee: "TC39",
          standard: "ECMA-262"
        };

    <pre><code>for (let e in es6) {
      console.log(e);
    }
    // edition
    // committee
    // standard

    for (let e of es6) {
      console.log(e);
    }
    // TypeError: es6 is not iterable
    </code></pre>

    <code>2. javascript中4种遍历方法
        1. for循环</code>
        for(let i=0;i&lt;10;i++){

    <pre><code>}
  2. forEach() 特别注意：在forEach中无法使用break,continue,break命令
1
2
3
arry.forEach(function(value,index){

})
  1. for…in
  2. for…of
    </code></pre>

二、 class

  1. 可以结合java中类的概念来理解。
  2. 特别注意，this关键字指向问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 class Logger {
      printName(name = 'there') {
        this.print(<code>Hello ${name}</code>);
      }

<pre><code>  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
</code></pre>

printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。

三、Module

  1. export default命令

    export default 指定模块的默认输出，本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

    // modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';