美文网首页
js数组扁平化

js数组扁平化

作者: AAA前端 | 来源:发表于2019-11-12 11:11 被阅读0次

现在有一个需求: 多维数组=>一维数组;

var arr = [1,2,[3,4,[5,6,[7,8]]],[9,10], [11,12,[13,14]]]
var str = JSON.stringify(arr);
期望最后得到 [1,2,3,4,5,6,7,8,9,10,11,12,13,14]

方法一 flat

Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
var a = arr.flat(Infinity) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

其中还有一个 flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

方法二 replace + split

arr = str.replace(/(\[|\])/g, '').split(',')

方法三 replace + JSON.parse

str = str.replace(/(\[|\])/g, '');
str = '[' + str + ']';
arr = JSON.parse(str);

方法四 普通递归

var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
var result = [];
var fn = function (arr) {
  for (let i = 0; i < arr.length; i++) {
    let item = arr[i];
    if (Array.isArray(item)) {
      fn(item);
    } else {
      result.push(item);
    }
  }
  return result
}
console.log(fn(arr))

方法五 利用reduce函数迭代

var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
function flatten(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, []);
}
console.log(flatten(arr))

方法六 扩展运算符

var arr = [1, 2, [3, 4, [5, 6, [7, 8]]], [9, 10], [11, 12, [13, 14]]]
// some 遇到true停止,在里面改变arr,然后继续while循环
while (arr.some(Array.isArray)) { 
  arr = [].concat(...arr);
}
console.log(arr)

参考:
https://blog.csdn.net/qq_29055201/article/details/86530254

https://juejin.im/post/5dbebbfa51882524c507fddb

相关文章

  • js实现数组扁平化

    js实现数组扁平化 数组的扁平化,就是将一个嵌套多层的数组array(嵌套可以是任何层数)转换为只有一层的额数组。...

  • js数组与对象常用操作方法

    一、Js相关数组操作 数组去除相同的 数组添加数数据 数组反转 打乱数组排序 取数组的前几个 数组扁平化 遍历对象...

  • 封装常用数组操作函数

    1. 数组扁平化 方法一 : 递归迭代数组 方法二 : 通过js原生 falt方法展开数组 方法三 通过正则...

  • js数组扁平化

    扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 递归 e...

  • js数组扁平化

    1、 利用apply和concat转换 2、reduce 3、多维数组递归降维

  • js数组扁平化

    现在有一个需求: 多维数组=>一维数组; var arr = [1,2,[3,4,[5,6,[7,8]]],[9,...

  • Js数组扁平化

    什么是数组扁平化? ['a','b','c'] //这是一个拥有3个元素的数组,是一个一维数组(不存在数组嵌套)。...

  • 5种方式实现数组扁平化

    5种方式实现数组扁平化 数组扁平化概念 数组扁平化是指将一个多维数组变为一维数组 实现 1. reduce 遍历数...

  • 手撕常见面试题

    DOM 事件代理 数组 对象 扁平化 去重 - unique() 拷贝 浅拷贝 深拷贝 copy()函数实现 JS...

  • Array, Object扁平化

    1. 数组扁平化 数组扁平化就是将多维数组转化为一维数组: 1.1 toString + split 先将数组转化...

网友评论

      本文标题:js数组扁平化

      本文链接:https://www.haomeiwen.com/subject/blufictx.html