高階関数,コールバック関数の流れの理解が正しいのか、なぜこのような出力結果になるのか知りたいです、、

目的

処理の流れの理解は正しいのか確認したいです
f(data[key],key);のブラケット記法でなぜこのような結果になるのか理解したいです

処理の流れの確認

12行目で実引数としてxとコールバック関数callbackを高階関数highに渡す
highの仮引数dataにxの配列が代入され、fにはcallbackが渡される
for in文で、dataが仮引数keyに格納される
callback関数に実引数として3行目のf(data[key], key);が渡される
callback関数valueにはdata[key],keyにはkeyが渡される
8行目の文で実行する

が、自分が思っている処理の流れですがあっているでしょうか？？

1 function high (data, f) {
2  for (let key in data) {
3    f(data[key], key);
4  }
5 }
6
7 function callback(value, key) {
8  console.log(key + ':' + value);
9 }
10
11 let x = [1, 2, 4, 8, 16];
12 high(x,callback);

出力結果
 0:1
 1:2
 2:4
 3:8
 4:16

f(data[key],key);のブラケット記法でなぜこのような結果になるのかがわからない

data[key]でアクセスしても、keyにはインデックス番号が入っているのに、なぜxのプロパティが出力されるのかがわかりません。

function high (data, f) {
  for (let key in data) {
    f(data, key); 
  }
}
　結果
 0:1,2,4,8,16
 1:1,2,4,8,16
 2:1,2,4,8,16
 3:1,2,4,8,16
 4:1,2,4,8,16

dataだけにすると値が全部入っている状態なのでそれを毎回繰り返して出力するだけで値を一つ一つ取り出す動作にならない

function high (data, f) {
  for (let key in data) {
    f(key[data], key);
  }
}
 結果
 0:undefined
 1:undefined
 2:undefined
 3:undefined
 4:undefined

key[data]にするとundefined(indexに対応する値をアクセスするイメージ的にこっちのほうがわかりやすいきがするんですけど。。。
今の自分なりの考えです
3行目の文でkeyにはfor in文で仮引数に渡しているためインデックス番号が表示され、それがfor分によってループされて、0~4のインデックス番号が出力される。
deta[key]ではkeyの値を一つ一つ取り出す作業を実行しているんだと思うけど、何でインデックス番号じゃなくプロパティが取り出されるんでしょうか、、、、、、、、、、
連想配列の理解やプロパティのアクセスの方法の理解が間違っている？？？

行動規範の内容に同意します

回答2件

JSではプロパティは連想配列のキーのように扱えます

js
1let x = {y:"hoge",1:"fuga"}
2x.y === x["y"]
3//x.1 === x[1]
4//x.1が error

その中で，識別子として有効なものが左辺のようにアクセスできます
配列のindexとプロパティは同じアクセス方法なので質問コードのような挙動になります

この挙動のゆえに配列でのfor...in構文は推奨されていません
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in#array_iteration_and_for...in
数値のインデックスに加えてユーザー定義プロパティの名前も返しますし，順番の保証もありません

投稿2021/05/08 14:56

編集2021/05/08 15:03