IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> js数组扁平化的六种方法 -> 正文阅读

[游戏开发]js数组扁平化的六种方法

QQ图片20220330113718.gif
我也不知道为什么要整理这么多种方法,
算是拓展个思路吧。🤦?♂?

let array = [1, [2, 34, [12, 4]], 23];

1.递归遍历

function flatten1(array) {
    let result = []
    for (const item of array) {
        if (Array.isArray(item)) {
            result = result.concat(flatten1(item))
        } else {
            result.push(item)
        }
    }
    return result
}
flatten1(array)  // result: [ 1, 2, 34, 12, 4, 23 ]

2. Array.prototype.reduce()

  • reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
  • 第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。
  • 否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。
function flatten2(array) {
   let result = array.reduce((pre, current) => {
       if (Array.isArray(current)) {
           return pre.concat(flatten2(current))
       } else {
           return pre.concat(current)
       }
   }, [])
   return result
}
flatten2(array)  // result: [ 1, 2, 34, 12, 4, 23 ]

3.Array.prototype.findIndex()

  • findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
function flatten3(array) {
   while (array.findIndex((item) => Array.isArray(item) > 0) !== -1) {
       array = [].concat(...array)
   }
   return Array.from(new Set(array))
}
flatten3(array)  // result: [ 1, 2, 34, 12, 4, 23 ]

4.强制类型转换

function flatten4(array) {
    return array.toString().split(',').map(item => Number(item)) 
    // 'array.toString() 转换后的结果 1,2,34,12,4,23'
}
flatten4(array)  // result: [ 1, 2, 34, 12, 4, 23 ]

5.正则表达式

function flatten5(array) {
    let result = JSON.stringify(array); 
    // JSON.stringify 转换后的结果 '[1,[2,34,[12,4]],23]'
    result = result.replace(/(\[|\])/g, '');
    return JSON.parse(`[${result}]`)
}
flatten5(array)  // result: [ 1, 2, 34, 12, 4, 23 ]

6.栈

  • 创建一个栈的结构,一个空数组,然后遍历栈结构,判断如果是数组,使用扩展运算符展开再次扔入栈中,如果不是就往新创建的数组头部增加。
function flatten6(arr) {
    let res = [];
    const stack = [].concat(arr);
    while (stack.length > 0) {
        // pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
        const item = stack.pop();
        if (Array.isArray(item)) {
            /**
             * push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
             * 用扩展运算符展开一层 
             */
            stack.push(...item);
        } else {
            // unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
            item !== undefined && res.unshift(item);
        }
    }
    return res;
}
flatten6(array)  // result: [ 1, 2, 34, 12, 4, 23 ]

7.Array.prototype.flat()

  • flat(depth) 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  • depth 可选参数 指定要提取嵌套数组的结构深度,默认值为 1。
  • 使用 Infinity,可展开任意深度的嵌套数组
 function flatten7(array){
     return array.flat(Infinity)
 }
flatten7(array)  // result: [ 1, 2, 34, 12, 4, 23 ]
  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-04-01 00:25:36  更:2022-04-01 00:26:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 18:52:52-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码