什么是数组扁平化?数组的方法,用于数组使用

  什么是数组扁平化

  数组扁平化是指将多维数组转换为一维数组,即将内部嵌套着别的数组的数组提炼成没有嵌套的一维数组。举个栗子:

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">// 原数组:`var array = [1, [[2, 3], 4]]// 目标数组:var array = [1, 2, 3, 4]`复制代码</pre>

  如何实现数组扁平化?Array.prototype.flat()

  这是ES6提供的方法js 递归遍历嵌套数组,用于数组扁平化,这个方法返回一个新的数组,并不会改变原数组:

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let arr1 = [1, [2, 3], 4]`console.log(arr1.flat()) // 打印[1, 2, 3, 4]复制代码`</pre>

  js 递归遍历嵌套数组_js递归遍历数组_js遍历数组中的数组

  值得注意的是 flat() 默认扁平一层嵌套:

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]]`console.log(array.flat())// 打印[1, [2, 3], 4]复制代码`</pre>

  可以带一个整数参数表示扁平的层数:

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]]`console.log(array.flat(2))// 打印[1, 2, 3, 4]复制代码`</pre>

  如果对于无论多少层嵌套的数组都想转成一维数组,可以用Infinity关键字作为参数:

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]]`console.log(array.flat(Infinity))// 打印[1, 2, 3, 4]复制代码`</pre>

  使用扩展运算符和concat()

  可以使用扩展运算符可以展开数组js 递归遍历嵌套数组,再用concat()可以合并数组,但只操作一次的结果只能展开一层:

  js递归遍历数组_js遍历数组中的数组_js 递归遍历嵌套数组

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]] `function flatten(array) { return [].concat(...array)}console.log(flatten(array))// 打印[1, [2, 3], 4]`复制代码</pre>

  要完全展开需要对嵌套的数组遍历再进行展开:

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]] `function flatten(array){ // 先用some()检测数组中的元素是否为一个数组 while(array.some(item => { return Object.prototype.toString.call(item) === '[object Array]' })){ array = [].concat(...array); } return array;}console.log(flatten(array));// 打印[1, 2, 3, 4]`复制代码</pre>

  递归

  定义目标空数组,然后我们对原有数组的每一项进行处理,若这一项为数组,则用concat()将这个子项数组合并到目标数组,若这一项不为数组,则直接push到目标数组里。

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]] `function flatten(array){ let res = []; array.forEach((item, index, array) => { if (Object.prototype.toString.call(item) === '[object Array]'){ res = res.concat(flatten(item)); } else { res.push(array[index]) } }) return res;};console.log(flatten(array))// 打印[1, 2, 3, 4]`复制代码</pre>

  toString()

  当元素是字符串或者是数字的时候,toString()可以把数组转为字符串,然后用split()就可以重新获得一个数组,但这个方法是有受限条件的,所以要酌情使用。下面举例一个全是数字的数组使用toString()扁平化:

  js遍历数组中的数组_js 递归遍历嵌套数组_js递归遍历数组

  <pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(27, 25, 24);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 14px;line-height: 20px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;">let array = [1, [[2, 3], 4]] `function flatten(array) { return array.toString().split(',').map(item => +item);}console.log(flatten(array))// 打印[1, 2, 3, 4]`复制代码</pre>

  写在最后

  这就是本次记录学习数组扁平化的几个方法,数组扁平化的方法还有很多,可能还可以用for循环等方法实现,但Array.prototype.flat()是最方便的hhh。

  本文中若是有错误的或者不正当的文字叙述,请告知,谢谢~

  参考链接

  ECMAScript 6 入门

  JS数组专题1️⃣ ➖ 数组扁平化

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1839
0 评论
510

发表评论

!
在线咨询
在线咨询
以确保在用户需要帮助时能够及时提供解答和技术支持
您好,这里是小灯泡设计,请登录后咨询。