JavaScriptのオブジェクトを配列に変換するとき、arguments を使うと変換がおかしくなる現象について

Question

以下func1()でオブジェクトを配列に変換することができています。

func1();
function func1() {

  var obj = { 0:'hoge', 1:'huga', 2:'piyo' };

  console.log( Object.keys(obj).map(function (key) {return obj[key]}) );
  // Array(3) [ "hoge", "huga", "piyo" ]
}

しかし下記func2()のargumentsの場合、これはfunc1()と同じオブジェクトであり、さらにfunc1()と同じ操作をしているのに、結果が変わってしまうのはなぜですか？

一番最後の行にあるように// > Array ["0", 1, Array ["0", "1", "2"]]という結果になってしまうのです。

そしてどのようにすれば、下記argumentsをfunc1()と同じ配列にできますでしょうか？

func2( 'hoge', 'huga', 'piyo' );
function func2() { 

  console.log( arguments );
  // > Object { 0:'hoge', 1:'huga', 2:'piyo' }

  console.log( Object.keys(arguments).map(function (key) {return arguments[key]}) );
  // > Array ["0", 1, Array ["0", "1", "2"]]
}

Answer 1

MDN Arguments

Arguments は length プロパティを持ったArray風オブジェクトになります。
順番に引数の値を取り出したい場合は Array に矯正する必要があります。

// 古典的手法(MDN にも掲載されている手法)
function func2() { 
　let args = Array.prototype.slice.call(arguments, 0)
  console.log( args );
}

// Array.from() を用いる
function func3() { 
　let args = Array.from(arguments)
  console.log( args );
}

// 引数にスプレッド構文を指定
function func4(...args) { 
  console.log( args );
}

こちらは、受け取った引数の値をオブジェクトにする例

function d(...args) {
  let oj = args.reduce( (acc, arg, idx) => {acc[idx]=arg; return acc}, {});
  console.log( oj )
}
d("hoga","hogi","hogu")

Comments

[konsai]

こんなに詳しく、どうもありがとうございました。Array.from()の方法がわかりやすいかと思ったので使わせて頂きます。

Answer 2

mapのコールバックの中でのargumentsは、コールバック関数に与えられた引数のほうを指してしまい、外側のargumentsとは異なってしまいます。

コールバック関数をarrow functionで書く、あるいは外側のargumentsを別な名前の変数に入れておく、などの対策が必要です。

Comments

[konsai]

ありがとうございます。納得できました。