共计 2889 个字符,预计需要花费 8 分钟才能阅读完成。
一 目录
不折腾的前端,和咸鱼有什么区别
| 目录 |
| — |
| 一 目录 |
| 二 前言 |
| 三 二维降一维 |
| 四 递归降维 |
| 五 flat() 降维 |
| 六 参考文献 |
二 前言
返回目录
在业务场景或者刷 LeetCode 的时候,曾经碰到多次碰到一个问题:
- 如何将二维甚至多维的数组转换成一维数组?
讲起将多维转成一维,突然想起一个词叫做【降维打击】,下面将这种二维甚至多维的打成一维数组的方法,叫做【降维】
这篇文章和你一起探讨下转换的方法~
三 二维降一维
返回目录
我们先来个简单的:
- 二维数组如何降级成一维数组?
很多时候,我们的数组层次并没有那么深,只有个二维数组,所以我们可以了解下一些快捷的使用方法。
reduce()
二维降一维
const oldArr = [1, 2, [3, 4]];
const newArr = oldArr.reduce((prev, curr) => (prev.concat(curr)), []);
console.log(newArr);
// [1, 2, 3, 4]
concat()
二维将一维
const oldArr = [1, 2, [3, 4]];
const newArr = [].concat(...oldArr);
const newnewArr = Array.prototype.concat.apply([], oldArr);
console.log(newArr);
// [1, 2, 3, 4]
console.log(newnewArr);
// [1, 2, 3, 4]
flat()
二维降一维
const oldArr = [1, 2, [3, 4]];
const newArr = oldArr.flat();
console.log(newArr);
// [1, 2, 3, 4]
四 递归降维
返回目录
既然二维降一维的小伙伴们看过之后,我们就可以进一步了解多维降一维数组了。
我们先了解下通过递归降维。
关于递归降维,这里有两个方法:
-
forEach
递归 -
reduce
递归
下面一一分析:
forEach 递归降维
const oldArr = [
1,
[2, [3],
[4, 5, 6],
[7, 8, 9],
10,
11,
],
12,
13,
14,
[15, 16, 17],
];
const newArr = [];
const ergodic = (arr) => {arr.forEach((item) => {if (Array.isArray(item)) {ergodic(item);
} else {newArr.push(item);
}
})
}
ergodic(oldArr, newArr);
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
Array.isArray()
用于确定传递的值是否是一个Array
,返回true
或者false
。
在这个递归方法中,我们判断每一项是不是数组。
如果是,则进一步递归,直到其不是为止。
如果不是,则用新数组接收它。
reduce 递归降维
const oldArr = [
1,
[2, [3],
[4, 5, 6],
[7, 8, 9],
10,
11
],
12,
13,
14,
[15, 16, 17],
];
const ergodic = (arr) => arr.reduce((prev, curr, index, list) => {if (Array.isArray(curr)) {return prev.concat(...ergodic(curr));
}
return prev.concat(curr);
}, []);
const newArr = ergodic(oldArr);
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
- 提问:请说出
reduce
对应的 4 个参数代表什么?
五 flat() 降维
返回目录
flat()
是 ES6 提供的一个将嵌套的数组“拉平”的方法。
flat 降维
const oldArr = [
1,
[2, [3],
[4, 5, 6],
[7, 8, 9],
10,
11
],
12,
13,
14,
[15, 16, 17],
];
const newArr = oldArr.flat(Infinity);
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
关于 flat()
,更多的可以查阅 MDN:
- https://developer.mozilla.org…
或者查看 阮一峰 大佬的 ES6 讲解:
- http://es6.ruanyifeng.com/?se…
这里大致讲下这个方法:
- 入参 :
arr.flat(depth)
。
这个 depth
即拉平几层的意思,就好比:
// 二维数组:默认拉平一层
[1, 2, [3, 4, [5]]].flat();
// [1, 2, 3, 4, [5]]
// 四维数组:设置拉平两层
[1, 2, [3, 4, [5, [6, 7]]]].flat(2);
// [1, 2, 3, 4, 5, [6, 7]]
// 设置拉平所有层
[1, 2, [3, 4, [5]]].flat(Infinity);
// [1, 2, 3, 4, 5]
- 注意事项 :
值得注意的是:使用 flat()
拉平数组过程中,会移除数组的空项:
[1, 2, , 4, 5].flat();
// [1, 2, 4, 5]
- 扩展了解 :
在你运用 flat()
自如的时候,不妨了解下它的同辈 flatMap()
?
- 阮一峰 – flatMap:http://es6.ruanyifeng.com/?se…
- MDN – flatMap:https://developer.mozilla.org…
flatMap()
方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
这里不一一介绍,感兴趣的可以了解下。
flatMap() 使用
const arr = [1, 2, 3, 4];
arr.flatMap(x => x * 2);
// [2, 4, 6, 8]
arr.flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
六 参考文献
返回目录
致敬在前端路上不断探索的大佬们,本篇文章参考自:
- 《JavaScript 学习笔记 – 多维数组变为一维数组》– MADAO 是不会开花的
- 《es6–javascript 数组降维,从 es5 分析到 es6,(详解 reduce 方法)欢迎补充》– 程序喵 timy
- 《数组实例的 -flat,flatMap》– 阮一峰
- 《Array.prototype.flat() – MDN
<img alt=” 知识共享许可协议 ” style=”border-width:0″ src=”https://i.creativecommons.org…; />
<span xmlns:dct=”http://purl.org/dc/terms/" property=”dct:title”>jsliang 的文档库 </span> 由 梁峻荣 采用 知识共享 署名 - 非商业性使用 - 相同方式共享 4.0 国际 许可协议进行许可。
基于 https://github.com/LiangJunro… 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/l… 处获得。