.flat()不是函数,有什么不对？

Question

以下代码

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

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

回报

arr.flat 不是一个功能

我在Firefox和Chrome v67中尝试过,结果也是如此.

怎么了？

Answer 1

该flat方法尚未在常见浏览器中实现(仅限Chrome v69,Firefox Nightly和Opera 56).这是一个实验性的功能.因此,你不能用它尚未.

您可能希望拥有自己的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)
);

这段代码是由Noah Freitas从这里获取的,最初用于平坦化阵列,没有指定.depth

Answer 2

这也可以工作。

let arr = [ [1,2,3], [2,3,4] ];
console.log([].concat(...arr))

或者对于较旧的浏览器，

[].concat.apply([], arr);

Answer 3

Array.flat您的浏览器不支持。下面是实现它的两种方法。

作为函数，该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;
}

作为 Polyfill，Array.prototype如果您更喜欢arr.flat()语法，请扩展：

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;
        }
    });
}

Answer 4

类似的问题，通过使用 ES6 .reduce() 方法解决：

const flatArr = result.reduce((acc, curr) => acc.concat(curr),[]);