【JavaScript】argumentsオブジェクトを配列(Array)に変換する

argumentsはlengthプロパティを持っている。
しかし、配列ではなく配列風オブジェクトである。
最近のコーティングではfor文の代わりにforEach文を使うが、argumentsにforEach文を使うにはargumentsを配列に変換する必要がある。
Array.prototype.slice.call(配列風オブジェクト)で配列風オブジェクトを配列に変換する。
argumentsはArray.prototype.slice.call(配列風オブジェクト)で配列に変換後にforeachメソッドを使う。
Array.prototype.slice.call(配列風オブジェクト)を省略して書くと[].slice.call(配列風オブジェクト)となる。

JavaScriptの仕様ではArray.prototype.slice.call(配列風オブジェクト)による順序の保証は明示されていない。ただし、多くの環境や実装では、sliceメソッドが配列風オブジェクトの要素を順番にコピーするため、順序が保証されることが一般的である。

let add1 = function() {

    let sum = 0;

    //slice.call(オブジェクト)で配列風オブジェクトを配列に変換する。
    const newArgs = Array.prototype.slice.call(arguments);

    console.log("Array.isArray(arguments) = " + Array.isArray(arguments));
    console.log("Array.isArray(newArgs) = " + Array.isArray(newArgs));

    newArgs.forEach((element,i) => {
        sum += element;
        console.log("Array.prototype.slice.call(arguments) element = " + element + ", i = " + i);
    });

    return sum;
};

let add2 = function() {
    let sum = 0;

    //slice.call(オブジェクト)で配列風オブジェクトを配列に変換する。
    const newArgs = [].slice.call(arguments);

    console.log("Array.isArray(arguments) = " + Array.isArray(arguments));
    console.log("Array.isArray(newArgs) = " + Array.isArray(newArgs));

    newArgs.forEach((element, i) => {
        sum += element;
        console.log("[].slice.call(arguments) element = " + element + ", i = " + i);
    });

    return sum;

};

console.log("add1(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) = " + add1(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20));

console.log("add2(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) = " + add2(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20));

/*

Array.isArray(arguments) = false
Array.isArray(newArgs) = true
Array.prototype.slice.call(arguments) element = 1, i = 0
Array.prototype.slice.call(arguments) element = 2, i = 1
Array.prototype.slice.call(arguments) element = 3, i = 2
Array.prototype.slice.call(arguments) element = 4, i = 3
Array.prototype.slice.call(arguments) element = 5, i = 4
Array.prototype.slice.call(arguments) element = 6, i = 5
Array.prototype.slice.call(arguments) element = 7, i = 6
Array.prototype.slice.call(arguments) element = 8, i = 7
Array.prototype.slice.call(arguments) element = 9, i = 8
Array.prototype.slice.call(arguments) element = 10, i = 9
Array.prototype.slice.call(arguments) element = 11, i = 10
Array.prototype.slice.call(arguments) element = 12, i = 11
Array.prototype.slice.call(arguments) element = 13, i = 12
Array.prototype.slice.call(arguments) element = 14, i = 13
Array.prototype.slice.call(arguments) element = 15, i = 14
Array.prototype.slice.call(arguments) element = 16, i = 15
Array.prototype.slice.call(arguments) element = 17, i = 16
Array.prototype.slice.call(arguments) element = 18, i = 17
Array.prototype.slice.call(arguments) element = 19, i = 18
Array.prototype.slice.call(arguments) element = 20, i = 19
add1(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) = 210
Array.isArray(arguments) = false
Array.isArray(newArgs) = true
[].slice.call(arguments) element = 1, i = 0
[].slice.call(arguments) element = 2, i = 1
[].slice.call(arguments) element = 3, i = 2
[].slice.call(arguments) element = 4, i = 3
[].slice.call(arguments) element = 5, i = 4
[].slice.call(arguments) element = 6, i = 5
[].slice.call(arguments) element = 7, i = 6
[].slice.call(arguments) element = 8, i = 7
[].slice.call(arguments) element = 9, i = 8
[].slice.call(arguments) element = 10, i = 9
[].slice.call(arguments) element = 11, i = 10
[].slice.call(arguments) element = 12, i = 11
[].slice.call(arguments) element = 13, i = 12
[].slice.call(arguments) element = 14, i = 13
[].slice.call(arguments) element = 15, i = 14
[].slice.call(arguments) element = 16, i = 15
[].slice.call(arguments) element = 17, i = 16
[].slice.call(arguments) element = 18, i = 17
[].slice.call(arguments) element = 19, i = 18
[].slice.call(arguments) element = 20, i = 19
add2(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) = 210

*/

argumentsオブジェクトを配列(Array)にする方法 – Qiita ExternalLink
JavaScriptの配列風オブジェクトと「[].slice.call()」による配列変換について – このすみノート (konosumi.net) ExternalLink

• 
• Tweet

• JavaScript