javscript 数组扁平化的实现

join toString

该两种方法会将数组元素的类型转换为字符串

var arr = [1, [2, [3, [4, 5]]], 6];
console.log(arr.join()); //1,2,3,4,5,6
console.log(arr.toString()); //1,2,3,4,5,6

var flatArr = arr.join().split(','); // ["1", "2", "3", "4", "5", "6"]
var flatArr = arr.toString().split(',');// ["1", "2", "3", "4", "5", "6"]

缺点： 转换为一维数组后数组元素转换为字符串，需要重新转换数组元素为Number类型

es6 flat

Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响
flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

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

arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]

缺点： flat 方法的兼容需要考虑下

reduce 递归遍历

function flatten(arr) {
  return arr.reduce((acc, cur)=> { // 遇到嵌套就递归
    return acc.concat(Array.isArray(cur) ?
    flatten(cur) : cur);
  }, []);
}
console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]

递归遍历

function flatten(arr) {

  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }

  return arr;
}

console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS数组扁平化(flat)方法总结详解

    需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_flat = arr.flat(Infinity); 第一种处理 ary = str.replace(/(\[\]))/g, '').split(','); 第二种处理 str = str.replace(/(\[\]))/g, ''); str = '[' + str + ']'; ary = JSON

  • js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    数组的扁平化:将多维数组变成一维数组 对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法: 方法一:递归一 function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ parseArr(arr[i],res); }else{ res.push(arr[i]); } } } var a=[1,[2,[3,4]],5,

  • JavaScript之数组扁平化详解

    扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var arr = [1, [2, [3, 4]]]; console.log(flatten(arr)) // [1, 2, 3, 4] 知道了效果是什么样的了,我们可以去尝试着写这个 flatten 函数了 递归 我们最一开始能想到的莫过于循环数组元素,如果还是一个数组,就递归调用该方法: // 方法 1

  • JS扁平化输出数组的2种方法解析

    这篇文章主要介绍了JS扁平化输出数组的2种方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.使用数组的flat方法 [1,2,[3,[4,5]]].flat(Infinity) //[1, 2, 3, 4, 5] 2.实现方式二: var arr = [[1, 2, 23], [13, 4, 5, 5], [6, 7, 9, [11, 12, [12, 13, [14]]]], 10]; var result = []; functi

  • javscript 数组扁平化的实现

    join toString 该两种方法会将数组元素的类型转换为字符串 var arr = [1, [2, [3, [4, 5]]], 6]; console.log(arr.join()); //1,2,3,4,5,6 console.log(arr.toString()); //1,2,3,4,5,6 var flatArr = arr.join().split(','); // ["1", "2", "3", "4", &

  • JS数组扁平化、去重、排序操作实例详解

    JS数组扁平化、去重、排序操作实例详解

    本文实例讲述了JS数组扁平化.去重.排序操作.分享给大家供大家参考,具体如下: 在网上看到一个校招题目,已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16],用js编写一个程序将这个数组扁平化,并得到一个升序且无重复值的数组.得到最终结果为:[1,2,3,4,5,6,8,9,10,11,12,13,14,15,16].下面对数

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

    目录 一.数组扁平化概念 二.实现 1. reduce 2. toString & split 3. join & split 4. 递归 5. 扩展运算符 一.数组扁平化概念 数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5] 二.实现 1. reduce 遍历数组每一项,若值为数组则递归遍历,否则concat. function flatten(arr) { return arr.reduce((res

  • JavaScript数组常用方法解析及数组扁平化

    目录 前言 一.常用数组操作方法 push末尾追加元素 pop删除数组末尾元素 sort排序 shift数组开头添加元素 && unshift数组开头删除元素 数组合并concat indexOf查找元素 && includes查找元素是否存在 reverse反转数组 数组切割成字符串join slice操作数组,替换,删除,新增 every校验数组所有元素 some 测试数组中是不是至少有1个元素通过了被提供的函数测试.返回值是布尔值 深层次递归数组flat map遍历数

  • JS前端面试数组扁平化手写flat函数示例

    目录 前言 题目 实现扁平化的方法 封装 flatten 1. ES6 flat 2. toString 3. 使用正则替换 4. 循环递归 4.1 循环 + concat + push 4.2 增加参数控制扁平化深度 4.3 巧用 reduce 4.4 使用 Generator 函数 5. 使用堆栈 stack 避免递归 6.while 循环+ some方法 前言 由于上半年参加了校招的技术面试, 前前后后面了20多个人了, 每次面试都会让应聘者手写一下数组扁平化flat(),但是发现居然没有

  • Js数组扁平化实现方法代码总汇

    题目: 请写出一个数组拍平函数.效果如下: var arr=['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; flat(arr) //a,b,c,2,d,e,f,g,3,4 方法一:使用toString方法先将arr转换为一个字符串, 再以split分割为数组,再将数组里面的元素转换为数字类型 var arr =['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]; function flat(arr)

  • JavaScript面试之如何实现数组拍平（扁平化）方法

    目录 1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方法 4 优化 4.1 指定展开深度 4.2 数组空位处理 4.2.1 for...of增加空位判断 4.2.2 forEach.map方法遍历 4.2.3 reduce方法 5 其他 5.1 栈 5.2 改进 总结 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个

随机推荐