js实现数组扁平化
2021-12-03 22:01
656 查看
数组扁平化的方式
什么是数组扁平化?
**数组扁平化:**指将一个多维数组转化为一个一维数组。
例:将下面数组扁平化处理。
const arr = [1, [2, 3, [4, 5]]] // ---> [ 1, 2, 3, 4, 5 ]
1.使用flat()
flat()方法是ES10提出的,它会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。(flat意为“水平的;平坦的”)
const result1 = arr.flat(Infinity) // 指定深度为无限 console.log(result1) // [ 1, 2, 3, 4, 5 ] const result2 = arr.flat(1) // 指定深度为1 console.log(result2) // [ 1, 2, 3, [ 4, 5 ] ] const result3 = arr.flat(2) // 指定深度为2 console.log(result3) // [ 1, 2, 3, 4, 5 ]
2.使用正则
以下做法得到的数组元素都会变成字符串,不建议使用;
const result1 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',') console.log(result1) // [ '1', '2', '3', '4', '5' ] 数组元素都变成了字符串
对以上方法进行优化处理;
const result2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']') console.log(result2) // [ 1, 2, 3, 4, 5 ]
3.使用reduce()+concat()
使用reduce拿到数组的当前值和前一项值,判断当前值是否为数组,初始值设置为
[],然后使用concat进行数组合并。
reduce()方法:对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
concat()方法:用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
function flatten(arr) { return arr.reduce((pre, current) => { return pre.concat(Array.isArray(current) ? flatten(current) : current) }, []) } const result = flatten(arr) console.log(result) // [ 1, 2, 3, 4, 5 ]
4.使用函数递归
循环遍历数组,发现含有数组元素就进行递归处理,最终将数组转为一维数组。
const result = [] function exec(arr) { arr.forEach(item => { if (Array.isArray(item)) { exec(item) } else { result.push(item) } }) } exec(arr) console.log(result) // [ 1, 2, 3, 4, 5 ]
5.使用扩展运算符+concat()
ES6新推出的扩展运算符能对数组进行降维处理(一次降一维),循环判断是否含有数组,进行concat合并。
- some()方法:测试数组中是不是至少有1个元素通过了被提供的函数测试(它返回的是一个Boolean类型的值)。
function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr) } return arr } const result = flatten(arr) console.log(result) // [ 1, 2, 3, 4, 5 ]
相关文章推荐
- JS实现数组扁平化方法
- js如何实现数组扁平化
- js中字符串转换成数组,数组转换成字符串的实现
- js实现生成一个指定长度为n且随机不重复的数组
- JS数组去掉重复数据只保留一条的实现代码
- js数组方法扩展实现数组统计函数
- JS随即打乱数组实现代码
- JS:调用方法实现向数组中追加一个元素
- js 实现数组中取出现频次最大的值
- js 使用ES6 实现从json中取值并返回新的数组或者字符串
- js使用indexOf实现数组去重
- JS简单实现数组去重的方法示例
- JS实现数组去重方法总结(六种方法)
- JS数组去重的多种实现
- js实现过滤重复字符和重复数组-javascript技巧
- java实现js的数组方法join
- JS解析json数据并将json字符串转化为数组的实现方法
- 用 js 实现随机选取 10–100 之间的 10 个数字,存入一个数组,并排序
- js数组实现不重复插入数据
- js实现数组去重