.flat() 不是一个函数,怎么了?



以下代码

function steamrollArray(arr) {
// I'm a steamroller, baby
return arr.flat();
}
steamrollArray([1, [2], [3, [[4]]]]);

返回

arr.flat不是函数

我在FirefoxChrome v67中尝试过,结果相同。

怎么了?

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

这也可以工作。

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

或者对于较旧的浏览器,

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

您的浏览器不支持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,如果您更喜欢arr.flat()语法,请扩展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;
}
});
}

类似的问题,通过使用 ES6 .reduce(( 方法解决:

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

使用 _.flatten from lodash package ;)

var arr=[[1,2],[3,4],[5,6]];
var result=[].concat(...arr);
console.log(result);    //output: [ 1, 2, 3, 4, 5, 6 ]

另一个简单的解决方案是在lodash_.flattenDeep()

https://lodash.com/docs/4.17.15#flattenDepth

const flatArrays = _.flattenDeep([1, [2], [3, [[4]]]]);
console.log(flatArrays);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

const array = [
[
[6, 6],
[3, 3],
],
[[7, 7, [9]]],
]
function simplifyArray(array) {
const result = []
function recursivePushElem(arr) {
arr.forEach(i => {
if (Array.isArray(i)) recursivePushElem(i)
else result.push(i)
})
}
recursivePushElem(array)
console.log(result)
return result
}
simplifyArray(array)

您可以简单地使用此[].concat(...objArrs),该的工作方式与flat()方法相同,并允许在浏览器中实现更多兼容性

您可以将完整数组设置为字符串,然后将其拆分。.toString().split(',')

由于社区机器人而更新。 所以基本上如果你想展平一个包含任何对象的数组,但严格来说字符串或数字,通过使用.toString()它将数组的每个元素转换为字符串(如果还没有(,然后使用逗号作为分隔符将所有元素连接在一起。

一旦我们的字符串全部用逗号分隔,我们就可以使用.split()创建一个数组。

注意*** 这不适用于对象的原因是.toString()将返回[object object]因为它是 JavaScript 中对象的默认字符串表示形式。

如果数组仅由数字组成,则需要映射数组并将每个字符串数字值转换为数字。

const array1 = [
['one', 'oneTwo'],
'two',
'three',
'four',
]
console.log('a1', array1.toString().split(','))
const numberArray = [1, 2, [3, 4, [5, 6]], [[7, [8,9]]], 10]; 
console.log(numberArray.toString().split(',').map(num => Number(num)));

不确定这是否是一个有效的答案,但是在我试图扁平化数组时,我采用了 ES6 中引入的destructuring_assignment。

// typeScriptArray:Array<Object> = new Array<Object>();
let concatArray = [];
let firstArray = [1,2,3];
let secondArray = [2,3,4];
concatArray.push(...firstArray);
concatArray.push(...secondArray);
console.log(concatArray);

它就像一个魅力,即使我不确定是否会出现任何浏览器兼容性问题。

最新更新