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.parse(str);

第三种处理：递归处理

let result = [];
let fn = function(ary) {
for(let i = 0; i < ary.length; i++) }{
let item = ary[i];
if (Array.isArray(ary[i])){
fn(item);
} else {
result.push(item);
}
}
}

第四种处理：用 reduce 实现数组的 flat 方法

function flatten(ary) {
return ary.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
})
}
let ary = [1, 2, [3, 4], [5, [6, 7]]]
console.log(ary.MyFlat(Infinity))

第五种处理：扩展运算符

while (ary.some(Array.isArray)) {
ary = [].concat(...ary);
}

这是一个比较实用而且很容易被问到的问题，欢迎大家交流补充。

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

赞 (0)

相关推荐

  • 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,

  • 简单了解vue.js数组的常用操作

    数组的相关方法如下 1,锁定数组的长度(只读模式)[ Array.join() ] var a = [1,2,3] //定义一个数组<br> Object.defineProperty(a,"length",{ writable:false }) //将a数组的长度属性设为只读<br> a.length = 0 //将a的长度改为0<br> console.log(a.length); //打印a数组的长度,还是3 2.将数组合并成字符串(返回字符串

  • js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

    js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

    本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法.分享给大家供大家参考,具体如下: <script> var values=function(object) { var values = []; for (var property in object) values.push(object[property]); return values; } //写成标准的方法(数组是object的一种): function getObjectKeys(object) {

  • JavaScript之数组扁平化详解

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

  • JS实现的字符串数组去重功能小结

    JS实现的字符串数组去重功能小结

    本文实例讲述了JS实现的字符串数组去重功能.分享给大家供大家参考,具体如下: 这里只考虑最简单字符串的数组去重,暂不考虑,对象,函数,NaN等情况,这种用正则实现起来就吃力不讨好了. 非正则实现:ES6实现 <script> let str_arr=["b","c",1,"a", 3,"v", "2","e", "6","g", &qu

  • 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数组扁平化实现方法代码总汇

    题目: 请写出一个数组拍平函数.效果如下: 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)

  • 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].下面对数

  • js 数组 find,some,filter,reduce区别详解

    区分清楚Array中filter.find.some.reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中. Array.find Array.find 返回一个对象(第一个满足条件的对象)后停止遍历 const arrTest = [ { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "b" }, { id: 4, name: "c" }

  • php数组转换js数组操作及json_encode的用法详解

    对于php,个人感觉能够熟练操作数组和字符串,基本上已经是入门了,php本身有很多操作数组和字符串的函数,今天在做一个功能时,需要用Js动态的创建门店信息,这些信息是要从后台添加的,想来想去,通过php读取数据库,得到数组,然后将数组转化成符合需求js数组,php数组形式为: 复制代码 代码如下: $newArray = array(array('地区'=>'北京地区','items'=>'10','detail'=>array(0=>array('店名'=>'旗舰店','u

  • js实现跨域的方法实例详解

    本文实例讲述了js实现跨域的方法.分享给大家供大家参考.具体分析如下: 由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval).   方法一

  • JS XMLHttpRequest原理与使用方法深入详解

    本文实例讲述了JS XMLHttpRequest原理与使用方法.分享给大家供大家参考,具体如下: 你真的会使用XMLHttpRequest吗? 看到标题时,有些同学可能会想:"我已经用xhr成功地发过很多个Ajax请求了,对它的基本操作已经算挺熟练了." 我之前的想法和你们一样,直到最近我使用xhr时踩了不少坑儿,我才突然发现其实自己并不够了解xhr,我知道的只是最最基本的使用. 于是我决定好好地研究一番xhr的真面目,可拜读了不少博客后都不甚满意,于是我决定认真阅读一遍W3C的XML

  • 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(),但是发现居然没有

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

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

  • 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 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个

随机推荐