JavaScript中数组扁平化的简介
小编给大家分享一下JavaScript中数组扁平化的简介,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联自2013年创立以来,先为驻马店等服务建站,驻马店等地企业,进行企业商务咨询服务。为驻马店企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
Java的特点有哪些
Java的特点有哪些 1.Java语言作为静态面向对象编程语言的代表,实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。 2.Java具有简单性、面向对象、分布式、安全性、平台独立与可移植性、动态性等特点。 3.使用Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
一、递归
for循环是我们在进行数组操作时最容易想到的,在不考虑时间和空间复杂度的时候,递归应该是一个完美的选择!
示例:
输入 const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];` 输出 [ 1, 2, 3, 4, { a: 1 }, null, undefined ]
代码:
function flatten(arr) { let res = []; for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { // 因为函数返回的是数组,所以要做拼接处理 res = res.concat(flatten(arr[i])); } else { res.push(arr[i]) } } return res;}
注意:
判断数组内元素的基本类型
如果不是数组:直接存入新数组中
如果是数组:重复第一步,直到将最后一个不是数组的元素存入到新数组中
二、reduce
先来看看reduce
是做什么的:reduce()
方法对数组中的每个元素执行一个由您提供的reducer函数
(升序执行),将其结果汇总为单个返回值。
示例:
输入 const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];` 输出 [ 1, 2, 3, 4, { a: 1 }, null, undefined ]
代码:
function flatten(arr) { return arr.reduce((prev, next) => { // prev表示上一次操作的结果 return prev.concat(Array.isArray(next) ? flatten(next) : next) }, []) // 注意reduce的初始值应该是[],否则无法进行拼接}
注意:
仔细对照方法一和方法二,两者思路完全一致——找到数据类型是数组的子元素,对其进行抹平处理,只不过实现的细节略有不同。
唯一需要注意的地方就是拼接时数据的基本类型要以数组开始。
三、apply+some
既然方法二是方法一的变式,那个方法三也可以说是方法二的变式,但不在采用递归的方式,而是一层一层“拆除”嵌套的方式
先来看看用到的API:
apply
:调用一个具有给定this值的函数,以及以一个数组(或类数组对象)的形式提供的参数。some
:测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值
代码:
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { // 只要存在数组类型的元素,就抹平一层 arr = [].concat.apply([], arr) } return arr;}
注意:
大家疑惑的点主要在apply
,其实主要目的就是减少括号
let res = [];res = res.concat({});// 等价于[].concat.apply([], [{}])
在本例中:
arr = [].concat.apply([], arr);// 等价于[].concat(1, [2, [3, 4, { a: 1 }], null], undefined)
四、ES6展开运算符
大家可能业也注意到了,方法一到方法三 我们不断的借助现有方法,以精简我们的代码量,本方法也是如此~
我们利用ES6的展开运算符(用于取出参数对象的所有可遍历属性,拷贝到当前对象之中),继续精简方法三:
代码:
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { // 只要存在数组类型的元素,就抹平一层 arr = [].concat(...arr) } return arr;}
五、toString
如果前面四个方法是我们可以实现的主流的方式,那么接下来的几个就是我们可以实现的“非主流”方式,直接上代码!
function flatten(arr) { return arr.toString().split(',').map(function(item){ return +item })}
注意:
将数据转换类型存在类型的限制,如果原始数据是这样的:[1, ‘2’],那么就会出现问题
六、正则
假如我们默认了类型会被转换这一缺陷,那么还可以通过更暴力里的方式来将数组扁平化:
function flatten(arr) { return JSON.stringify(arr).replace(/\[|\]/g, '').split(',');}
注意:
如果是纯数组,貌似没什么问题
function flatten(arr) { return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '').split(',') + ']')}
但如果数组内存在对象,就需要消除JSON后的后果,这样更严谨一些~
到这里,六种方法算是包括了大部分数组扁平化的实现,那么如果希望将我们的方法“升级”成工具怎么办?这时候我们就要“抄袭”一下loadsh了~
七、实现自己的扁平化工具方法
这里我们简化了loadsh里的flatten函数,具体改动我们来看代码:
/* * @private * @param {Array} array 需要扁平化的数组 * @param {number} depth 最多处理几层 * @param {boolean} [isStrict] 是否严格处理函数 * @param {Array} [result=[]] 输出的数组 * @returns {Array} */function flatten(array, depth, isStrict, result) { result || (result = []) // 边界 if (array == null) return result; for (const value of array) { if (depth > 0 && Array.isArray(value)) { if (depth > 1) { flatten(value, depth - 1, isStrict, result) } else { result.push(...value); // 只拆1层 } } else if (!isStrict) { result[result.length] = value } } return result;}
该方法提供了扁平化层数
const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, false);// [ 1, 2, 3, 4, [ 5, 6 ], { a: 1 }, null, undefined ]
该方法提供了扁平化后相反的效果
const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, true);// [ 3, 4, [ 5, 6 ] ]const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 2, true);// [ 5, 6 ]
isStrict
参数打开后,扁平后保留了被暴漏出来的元素,剔除了浅层元素。
以上是“JavaScript中数组扁平化的简介”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章名称:JavaScript中数组扁平化的简介
网页路径:http://azwzsj.com/article/jgegdd.html