web-dev-qa-db-ja.com

.flat()は関数ではありません、何が問題なのですか?

次のコード

function steamrollArray(arr) {
  // I'm a steamroller, baby
  return arr.flat();
}

steamrollArray([1, [2], [3, [[4]]]]);

返却値

arr.flatは関数ではありません

FirefoxおよびChrome v67で試してみたところ、同じ結果になりました。

どうしましたか?

13
TechnoKnight

flatメソッドは、 まだ実装されていません 一般的なブラウザー(Chrome v69、Firefox Nightly、およびOpera 56のみ)です。これは実験的な機能です。したがって、使用できませんyet

代わりに、独自のflat関数が必要な場合があります。

Object.defineProperty(Array.prototype, 'flat', {
    value: function(depth = 1) {
      return this.reduce(function (flat, toFlatten) {
        return flat.concat((Array.isArray(toFlatten) && (depth>1)) ? toFlatten.flat(depth-1) : toFlatten);
      }, []);
    }
});

console.log(
  [1, [2], [3, [[4]]]].flat(2)
);

コードは here から Noah Freitas によって取得されました。元々、depthを指定せずに配列をフラット化するために実装されていました。

24
Ivan

Array.flatは、ブラウザでは サポート ではありません。以下に2つの実装方法を示します。

関数として:depth変数は、input配列構造のフラット化の深さを指定します(デフォルトは1。Infinityを使用して深さを増やします)。stackは、再帰呼び出しで参照によって渡されるフラット化された配列です。

function flat(input, depth = 1, stack = [])
{
    for (let item of input)
    {
        if (item instanceof Array && depth > 0)
        {
            flat(item, depth - 1, stack);
        }
        else {
            stack.Push(item);
        }
    }

    return stack;
}

ポリフィル、Array.prototypeの拡張:

if (!Array.prototype.flat)
{
    Object.defineProperty(Array.prototype, 'flat',
    {
        value: function(depth = 1, stack = [])
        {
            for (let item of this)
            {
                if (item instanceof Array && depth > 0)
                {
                    item.flat(depth - 1, stack);
                }
                else {
                    stack.Push(item);
                }
            }

            return stack;
        }
    });
}
1
user5513314