ご質問のコードは間違っていませんか？

let result = str.match(p);
for(let i=0; len=result.length; i<len; i++){

の部分を

let result = p.exec(str);
for(let i=0; i<result.length; i++){

にしないとその結果にはなりません。

さておき、サブマッチ文字列の対応の認識はそれで合っています。正規表現の解釈も正しいです。気になるところといえば

２：その後に + があるので、英数字、アンダーバー、ハイフンでできた1文字以上の文字列がマッチするようになる。結果、www,wings,msnがマッチする。

で「www,wings,msnがマッチする」と書いてあることくらいですね。その後の \. も含めて考えないと、この時点ではマッチするともしないとも言えないので。ともかくその下の

結果、www. , wings. , msn. の3つがこの①の文で全てマッチする。

は正しいので大丈夫でしょう。

もう1点、 [\w- ./?%&=] のハイフンはちょっと紛らわしいですね。というのも、文字クラス [ 〜 ] の中間にあるハイフンは通常は文字の範囲を表すからです。たとえば [a-z] は「a かハイフンか z のどれか1文字」ではなく、「a から z の範囲の小文字アルファベットどれか1文字」を表します。ところが \w- はどうかというと、範囲のように見えて \w が特定の文字ではないために範囲とみなされず、「\w かハイフンか半角スペース」になるようです。

ややこしいので、文字クラスに文字通りのハイフンを含めるときはバックスラッシュを前置して [\w\- ./?%&=] と書くか、またはハイフンを最後に置いて [\w ./?%&=-]とするのが無難です。

@uasi 様
この度はご教示頂き、誠にありがというございます。

まずは自分の認識の成否及び細かい訂正を頂き、誠にありがとうございます。
かなり長文で記載をしてしまったにも関わらずご確認をして頂けて、大変ありがたい限りでございます。

特に[\w- ./?%&=]の解説に致しましては、自分も[]内のハイフンの役割が分かりづらく困っていた為、記載をし忘れていましたが大変スッキリしました。

次に、ご質問いただいたjavascriptのコードの箇所についてですが、私の記載に誤りがありました。
誤りのある箇所は下記の通りです。

let p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/i;

let result = str.match(p);

for(let i=0, len=result.length; i<len; i++){
  console.log(result[i]);
}

正規表現のオプションがgではなく、iでした。
で、for文のlet i=0の後ろはセミコロンではなく、カンマでした。
自分もi<result.length;の方がわかりやすいのですが、参考書曰く、
「ループの都度プロパティにアクセスしなければならないので、性能が劣化する」との事で、
参考書内ではfor文は基本この書き方となっております。
それ以外は参考書通りでございます。
今回見ている参考書は、「改訂新版 javascript本格入門」で、正誤表には特に訂正はございませんでした。

正規表現のオプションがgではなく、iでした。

なるほど。 str.match(p) の返り値は g フラグの有無で変わります。 i なら問題なさそうです。

「ループの都度プロパティにアクセスしなければならないので、性能が劣化する」との事で、
参考書内ではfor文は基本この書き方となっております。

どうですかね……プロパティアクセスにかかる時間はせいぜいナノ秒単位なので数百万回はループしないと違いは表れないでしょうし、その頃には JIT で最適化がかかって速くなる可能性もあります。あまり気にしなくていいと思います。もちろん、長さを求める処理が result.length より遥かに時間がかかるような場合には、先に一度だけ計算しておくのはいい考えです。