どんな時に使うか

この構文は配列の中身をすべて表示するときに使います。
ES6から使用が可能となったので比較的新しい構文となります。そのためかわかりませんがIE11では使用することができません。
しばらくは使いどころを選ぶかもしれませんね。
特徴はというと、whileやforを使って繰り返しの処理をするときによく出てくるvar i = 0というような変数を定義する必要がありません。
そのためwhileやforを使うよりも簡潔に書くことができます。

for…of

for (let 変数 of 対象の配列 ) {
　//処理内容
}

配列の中身をすべて表示する

var items = ['a','b','c'];
for (let item of items) {
  $('.list01').append('<li>'+item+'</li>');
};
<ul class="list01">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

    for~in~文との違いは？？？

    for…of文に似ているfor…inという構文と間違いやすいので注意が必要です。

    for…in

    for (let 変数 in オブジェクト ) {
    　//処理内容
    }

    オブジェクトの内容を取得する

    var obj = {
  a:'エー',
  b:'ビー',
  c:'シー',
}
for (let name in obj) {
  $('.list01').append('<li>'+name+'：'+obj[name]+'</li>');
} 
    <ul class="list01"> 
  <li>a：エー</li> 
  <li>b：ビー</li> 
  <li>c：シー</li> 
</ul> 

    オブジェクトとはPHPなどでいういわゆる連想配列のようなものです。 for…inはそのオブジェクトで使うことが多く、普通の配列の場合はfor…ofを使用することが多いです。
    for…ofであればオブジェクトでも配列でもどちらも対応可能なので、基本的にはfor…ofを使えば問題ないです。