网站首页 > 技术文章 正文
各位小伙伴,今天知了小姐姐为大家带来的干货内容是JS基础中的数组扁平化。
在实现数组扁平化时,首先我们要了解数组扁平化的概念。
何为数组扁平化?数组扁平化是指将一个多维数组变成一维数组。例如
[1, 2, [3, 4, [5, 6, [7]]]]-- -> [1, 2, 3, 4, 5, 6, 7]
而我们将如何去实现呢。话不多说,开撸
第一种方法 reduce()
reduce()是ES5中新引入的一个API,其具体的用法,笔者在这就不过多赘述了,整理出来又是一篇文章了,具体内容可以参考一下MDN文档。在本文中,笔者将借助其“能够遍历到数组中的每一个元素,并且次遍历都可以使用上次遍历结果”的特性,实现数组扁平化的功能
function arr1(a) {
return a.reduce((result, item) => {
return result.concat(Array.isArray(item) ? arr1(item) : item);
}, []);
}
第二种方法 toString()和split()
toString() 方法可以把一个逻辑值转换为字符串 split() 方法可以把字符串分割为字符串数组 这种方法主要思想是调用toString方法,将数组转为字符串,然后再用split分割还原为数组
var arr = [1, 2, [3, 4, [5, 6, [7]]]]
arr.toString().split(",")
第三种方法 join()和split()
jion()方法通过特定的格式去拼接字符参数,需要传参 返回新的字符串 split() 方法可以把字符串分割为字符串数组 跟上面的toString方法一样,join方法可以将数组转换为字符串
第三种方法 join()和split()
jion()方法通过特定的格式去拼接字符参数,需要传参 返回新的字符串 split() 方法可以把字符串分割为字符串数组 跟上面的toString方法一样,join方法可以将数组转换为字符串
var arr = [1, 2, [3, 4, [5, 6, [7]]]]
arr.join(",").split(",")
第四种方法 递归
遍历数组的每一项,如果是数组就继续遍历,如果不是就concat
var arr = [1, 2, [3, 4, [5, 6, [7]]]]
function arr1(a) {
var b = []
a.map(
function v(item) {
function c(item) {
if (Array.isArray(item)) {
b = b.concat(arr1(item))
}
else {
b.push(item)
}
}
return c(item)
}
)
return b
}
第五种方法 扩展运算符
扩展运算符是ES6中新定义的,他能将二维数组变成一维
var arr = [1, 2, [3, 4, [5, 6, [7]]]]
var arr = [1, 2, [3, 4, [5, 6, [7]]]]
function flatten(a) {
while (
a.some(function b(item) {
//some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。
return Array.isArray(item)
}
)
) {
a = [].concat(...a);
}
return a;
}
第六种方法 flat
flat是ES6中新定义的方法。flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
var arr = [1, [2, 3], [4, 5], [6, [7, 8], 9, [[[10, [[11, 12], 13], 14], 15, 16], 17], 18]]
console.log(arr.flat(Infinity));
总的来说大思想只有一个,先遍历数组,如果数组的元素也是数组就继续遍历,如果不是就concat
好了,今天就先分享到这儿,欢迎持续关注我们~~
猜你喜欢
- 2024-11-10 趣谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
- 2024-11-10 当裸辞遇到了面试难,你需要了解一下这些面试题
- 2024-11-10 JavaScript -- Map vs ForEach javascript map vs foreach
- 2024-11-10 面试官:请说下Object和Map的区别,Map的时间复杂度是多少
- 2024-11-10 从小白到专家:JavaScript 延展操作符的几个基本用法
- 2024-11-10 JavaScript slice()方法用法简介 js中slice函数
- 2024-11-10 《你不知道的 Blob》番外篇 你不知道 小说
- 2024-11-10 js中检测数据类型的方法汇总 检测js对象是数组类型
- 2024-11-10 JS函数式编程工具:数组reduce方法的运用
- 2024-11-10 「前端知乎系列」ArrayBuffer 和 Blob 对象
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-